Friska resurser för webbdesigners och utvecklare (juni 2015)

Kan du tro att denna serie har funnits i nästan 3 år? På så kort tid har vi presenterat minst 30 listor över de färskaste resurserna för webbdesigners och utvecklare. Och vi ska fortsätta med en ny kompilering för juni.

I den här sammanställningen tittar vi på några JavaScript-bibliotek för visning av reglage, mjukare rullning för datatabeller, en cool hiss-effekt för en scroll-to-top-knapp och mer.

Låt oss kolla in dem.

Medium Style Bekräfta

Medium har blivit rost för sin design; Layouten och användargränssnittet verkar ha varit noggrant tänkta. Utöver det inspirerar det även webbutvecklare att utveckla antingen JavaScript eller CSS-bibliotek för att replikera användargränssnittet. Medium Style Confirm är ett JavaScript-bibliotek som liknar popup-menyn eller dialogrutan i Medium.

Pingvin

Penguin är en ny front-end ram som du kan använda som grunden för dina webbplatser. Med verktyg som Grunt och Sass kan du enkelt lägga till eller ta bort bibliotek eller CSS som du inte behöver utifrån ramen så att den blir så lätt som möjligt. Det är också ett bra alternativ för Bootstrap and Foundation.

Elevator.js

Har du sett den knappen på en webbplats som låter dig gå upp till toppen av sidan? De flesta knappar tar dig bara till toppen, men med Elevator.js får du en glidande accelerationseffekt som liknar en hiss, musiken och den “Ding!” Ljud när du har nått översta våningen. Väldigt trevligt!

X-Instagram

X-Instagram är ett Polymer-anpassat element som drar och visar bilder från Instagram efter tagg. Detta element gör hela processen mycket enklare. Vi lägger bara till elementet precis som ett vanligt HTML-element och anger taggordet som elementattributen.

Och låt magiken börja!

CamanJS

CamanJS är ett bra JavaScript-bibliotek för bildmanipulation. Den levereras med en funktionssats som du vanligtvis hittar i en bildredigerare. Du kan göra bilden oskärpa, svartvitt och till och med öka kontrasten.

ClusterizeJS

Clusterize.js är ett JavaScript-bibliotek som ökar prestandan när det gäller mycket data i tabeller. När du rullar ner ett bord med, säg 5000 på listan, brukar upplevelsen bli lagig och ryckig. Dessa JavaScript-bibliotek kommer att ta itu med det här problemet, vilket gör att rullningsåtgärden smidig seglar hela vägen.

Sitt testet

Sitt testet är en samling frågor för att utvärdera din skicklighet och kunskap om CSS3, HTML5 och JavaScript. Varje test ges ett antal frågor och begränsad tid för att slutföra alla dessa frågor. Det är en bra källa att ta reda på hur bra vi verkligen är med dessa språk.

HTML-pilar

Detta är en samling av speciella inbyggda Unicode-symboler som du kan bädda in i HTML och CSS. Dessa tecken inkluderar pilar, valuta och punktsättning. Du kommer att upptäcka att du ibland inte behöver en teckensnitt för att visa dessa tecken.

Flickity

Flickity är ett JavaScript-bibliotek för att visa karuseller, gallerier eller reglage på din webbplats. Det är optimerat för pekskärm; du kan glida karusellerna enkelt med ett finger eller styrplattan om du är på en bärbar dator. Det kommer också med ett gäng alternativ som gör att du kan anpassa dig helt och hållet.

Typeslab

Typeslab är ett praktiskt verktyg för att skapa en plakatplattform. Skriv bara innehållet och välj typsnittet, Typeslab kommer att generera affischen direkt. Du kan sedan ladda ner den eller publicera den i Imgur.

MatchMedia

Matchmedia är ett bibliotek som kopierar CSS-mediafrågor. Biblioteket är inte så nytt faktiskt, men det är ett riktigt användbart bibliotek som jag bestämde mig för att lägga på listan. Om du behöver göra skript baserat på användarens visningsstorlek eller mediatyp är det det bibliotek du vill ha.

Följande är ett exempel som används för att köra skript i en 320px och lägre visningsstorlek:

 om (matchMedia ('endast skärm och (maxbredd: 320px)'). matchningar)  

Sass Burger

Sass Burger kommer med en Mixin som låter dig skapa en “Hamburgare” ikonen och förvandla den till ett korsmärke med mindre krångel.

Marx

Marx är en samling CSS stil regler för att göra element stilar mer konsekventa. Den är anpassningsbar (med Sass), lätt och fungerar ur lådan. Ett bra alternativ till redan populära CSS återställningsverktyg som Normalize.css.

CSS.js

CSS.js används för att analysera CSS-filer för stildeklaration. Biblioteket användes ursprungligen för laget i Jotform för att bygga en WYSIWYG-upplevelse för formredigering med CSS. Nu har de öppnat det för att vi alla ska använda. Värt att spara, bara om du behöver det senare.