Friska resurser för webbdesigners och utvecklare (augusti 2016)

I den här artikeln har vi en lista över ramar och verktyg som är inriktade mot webbutveckling. Intressant har jag hittat några av de här verktygen och ramarna från behemoth-företag som Microsoft och Alibaba.

Det här är ett gott tecken, eftersom fler företag nu bidrar till öppen källkod och bidrar till att bättre utforma webben. Låt oss ta en titt på vad som finns i butik för den här månadens sammanställning.

Klicka för mer resurser

Hitta hela vår samling av rekommenderade resurser och de bästa webbdesign och utvecklingsverktygen som finns tillgängliga.

CuteStrap

En UI-ram byggd ovanpå Sass. Den levereras med alla de vanligaste webbgränssnitt som former, navigeringar och knappar, vilket i många fall skulle vara tillräckliga. Om du hittar populära ramar som Bootstrap och Foundation överväldigande, Cutestrap kan vara ett bra alternativ för dig.

HTML5-test

HTML5-test är ett onlineverktyg som testar hur långt en webbläsare stöder de senaste HTML5-specifikationerna. Det är ett praktiskt verktyg för dem som deltar i felsökning och testning av moderna webbapplikationer.

Webbläsarkalorier

Webbläsarkalorier är en Chrome-förlängning som mäter en webbsida vikt. Det skannar de filer som laddas och deras bidrag till sidans totala vikt. Ett bra litet verktyg för att optimera din webbplatsprestanda.

weex

weex är ett ramverk från Alibaba för att bygga mobila appar med bara HTML, CSS och JavaScript. Den levereras med moduler, UI-komponenter, egna DevTools och CLI som är utformade mot mobil miljö och för att påskynda utvecklingen.

Microsoft Web Framework (MWF)

En ram från Microsoft, UI-komponenterna i MWF bygger på Microsoft Modern designsprog: platt, ren och minimalistisk. Denna ram, förutom användargränssnittskomponenterna, ger också riktning på användningen av färger, typografi och animering. Jag tror att Material Design Lite äntligen har träffat en jämn konkurrent.

Avgörande

Avgörande är ett ramverk med ett mycket tilltalande minimalt gränssnitt. Det är lätt, saknar JavaScript, och Native Rogue - en syntaxhiggighter baserad på Ruby.

Fontea

Fontea är en gratis Photoshop-förlängning för att enkelt hantera och tillämpa hundratals Google-teckensnitt. Du kan söka teckensnittet inifrån Photoshop, förhandsgranska och tillämpa tecknet direkt i din design - effektivisera ditt arbetsflöde.

Dugga

Detta är ett verktyg som gör att du kan bygga användargränssnitt eller stilguide för din webbplats. Det kommer att generera saker som färger, grundläggande stilar eller layout för komponenter samt kodbiten. En stil guide generator som Dugga kommer att tillåta dig att hålla dig konsekvent med dina webbplatstilar.

intercooler

InterCoolerJS är ett JavaScript-bibliotek som gör att AJAX appliceras på din webbplats så enkelt som att lägga till HTML-attribut. Den kommer med en omfattande guide och många exempel som hjälper dig att komma igång med att använda verktyget.

Picla

Picla är ett jQuery-plugin för att visa bildetiketter som hämtats från bilden alt attribut. Det ger några alternativ att låta dig lägga till anpassad stil och rörelse till etiketten. Picla kan installeras som ditt webbsidor beroende av Bower.

IziModal

Här är ett jQuery-plugin att visa modal popups. IziModal har många alternativ för personalisering. Du kan till exempel anpassa animeringen, textinnehållet, färgerna. Den är lätt, lyhörd och näthinnan klar.

MegaBoilerplate

MegaBoilerplate är en generator för att snabbt konfigurera en utvecklingsstapel. Gå till webbplatsen och välj vilka verktyg och bibliotek (Node.js, HTML5, Vanilla JavaScript och Electron) som du ska använda som webbsidor. Den kommer att kompilera och konfigurera alla saker du behöver i ett zippat paket, redo för nedladdning.

Groda

Ett JavaScript-bibliotek för att visa modern ljudspelare med Web Audio API, Groda fungerar i webbläsare lika gamla som IE9, och stöder många ljudkoder som MP3, WEBM, WAV. Massor av funktioner, modulära och fungerar utan externt bibliotek.

SuperEmbed

SuperEmbed är ett litet JavaScript-bibliotek som gör inbäddade objekt responsiva samtidigt som originalförhållandet upprätthålls. Den stöder ett brett spektrum av källor, inklusive Youtube, Flickr, Vine, VideoPress och DailyMotion. Se demo.

CleaveJS

Klyva är JavaScript-bibliotek som automatiskt formaterar värden i inmatningen. Det kan till exempel lägga till tusen separator i valutainmatning, lägga till plats i kreditkortnummerinmatning eller lägga till / i datuminmatning. Använd det här biblioteket för att ge bättre användarupplevelse.

Flipping Typisk

FlippingTypical låter dig se alla teckensnitt som är installerade på ditt system. Jag tycker att den här appen är bekvämare än att använda FontBook app i macOS. Jag skriver slumpmässig text och ser vilken av tecknen på mitt system som bäst.

LightTable

En ny IDE som jag tycker är värt att utforska. Det började som ett KickStarter-projekt, bakom Matt Mullenweg (WordPress-grundaren) och gick slutligen öppen källkod. Du kan titta på den här videon för att få en uppfattning om hur coolt detta IDE är.

Kompressor

Kompressor är en webapp som komprimerar bildfiler ner till den minsta storleken utan att förlora visuell kvalitet. Det stöder också JPG, GIF, PNG och SVG. Den här appen är gratis.

Microsoft Site Scan

Detta är ett praktiskt verktyg från Microsoft för att analysera din webbplats för problem som webbläsarkompatibilitet och tillgänglighet. Verktyget kommer att lista en rapport som berättar om något inte är rätt om din webbplats och hur du kan fortsätta att lösa problemet. Ge det ett försök!

Inaktivera Blogging

Denna plugin, som namnet antyder, kommer att ta bort bloggfunktioner som inlägg, kommentarer och flöden. Det är rätt plugin för dig om du inte behöver bloggfunktionen i WordPress.