Inhoud
- 01. Layout Land
- 02. basicScroll
- 03. Xray
- 04. Compositor Lab
- 05. PWABuilder
- 06. Prettier
- 07. Google-snelheidsindexcalculator
- 08. Gatsby
- 09. CSS-verloop
- 10. Overloop
Als je je overweldigd voelt door de hoeveelheid kennis die tegenwoordig nodig is om nieuwe webtechnologieën bij te houden, is het goede nieuws dat er genoeg mensen zijn die geweldige tools bouwen om je te helpen. Deze maand op ons best webontwerptools roundup kijken we naar bronnen voor het bouwen en onderhouden van Progressive Web Apps, statische sites, ontwerpsystemen en meer.
01. Layout Land
Dit fantastische YouTube-kanaal van Mozilla-ontwerper en ontwikkelaar-advocaat Jen Simmons leert je over zeer slimme en interessante dingen die je kunt doen met lay-out op internet. Deze tutorials geven je een stevige basis in het gebruik van Flexbox, Grid, CSS Shapes en Clip Path in je ontwerpen, en begeleiden je met handige voorbeeldlay-outs.
U leert over kernconcepten, zoals wanneer u Grid moet gebruiken en wanneer u Flexbox moet kiezen, hoe u dingen kunt laten werken met Internet Explorer en hoe u veerkrachtige CSS kunt schrijven waarvan u in de toekomst minder snel zult struikelen. Voor een voorproefje van wat je kunt verwachten, bekijk Simmons 'artikel 6 mythes over weblay-out ontkracht.
02. basicScroll
Het ontbreken van variabelen in CSS is lange tijd een frustratie geweest voor ontwikkelaars, maar ze zijn er eindelijk en je kunt ze gebruiken om je leven veel gemakkelijker te maken en om leuke dingen te doen! basicScroll is een slimme tool die gebruik maakt van CSS-variabelen om je animaties te laten triggeren op basis van de scroll-positie.
Naast CSS Custom Properties vereist basicScroll requestAnimationFrame om te werken, maar verder is het framework-onafhankelijk en heeft het een eenvoudige JavaScript-API. U kunt al uw animaties met CSS doen, maar als u nog meer controle wilt, kunt u JavaScript gebruiken. Het werkt op zowel desktop als mobiel en belooft "krankzinnige" prestaties.
03. Xray
Atom-fans willen misschien dit project in de gaten houden, dat een experimentele teksteditor is op basis van wat er van Atom is geleerd sinds het is gelanceerd. In wezen is het een manier om te experimenteren met enkele radicale ideeën zonder Atom te destabiliseren. Het doel van het project is om een snelle code-editor te ontwikkelen die het voor gebruikers gemakkelijk maakt om samen te coderen en om hun eigen functionaliteit aan het programma toe te voegen via krachtige API's. Webcompatibiliteit is ook een prioriteit, dus bewerken in Xray zal hetzelfde aanvoelen als bewerken in GitHub.
04. Compositor Lab
Nu veel organisaties ontwerpsystemen gebruiken om hun producten op een coherente manier te ontwikkelen, is het logisch dat er tools in opkomst zijn om u te helpen binnen dit kader te werken. Compositor Lab is zo'n tool: het is voor het bouwen en onderhouden van een ontwerpsysteem.
Lab stelt u in staat om productieklare React-componenten te maken zonder code te schrijven, uw workflow te versnellen en het gemakkelijker te maken om werk tussen ontwerpers en ontwikkelaars over te dragen. U kunt uw werk in verschillende formaten exporteren en uw stijlgids met een enkele klik publiceren.
05. PWABuilder
Progressive Web Apps zijn het antwoord van internet op native mobiele apps: ze proberen de ervaring van een native app na te bootsen, maar dan op internet. Dit betekent dat ze eerst offline zijn, betrouwbaar, snel en net zo gebruiksvriendelijk als een systeemeigen app. Als u een Progressive Web App wilt maken met gegevens van uw bestaande site, heeft u geluk: PWABuilder maakt het proces veel gemakkelijker.
Voer de URL in en het zal u helpen om het manifest te genereren, de servicemedewerker te bouwen en de voltooide app te publiceren. Als u niet veel weet over Progressive Web Apps, is dit artikel een goede inleiding.
06. Prettier
Het opgeruimd houden kan als een extra last aanvoelen, maar je toekomstige zelf zal je bedanken voor het schrijven van goed opgemaakte code die gemakkelijker te navigeren en te onderhouden is, net als je collega's! Prettier is een eigenzinnige code-formatter die kan worden geïntegreerd met veel editors, waaronder Atom en Sublime Text, en vele talen.
Het voordeel van het gebruik van een tool hiervoor is dat het geautomatiseerd is, dus het is veel gemakkelijker voor u, en ook dat het op een gestandaardiseerde manier wordt gedaan, zodat er minder ruimte is voor vervelende discussies over hoe dingen moeten worden opgemaakt. Druk gewoon op opslaan en het formatteert uw code.
07. Google-snelheidsindexcalculator
We weten allemaal dat een trage mobiele site minder conversies betekent, maar deze calculator helpt je er een cijfer op te zetten. Voer uw URL in en de Speed Scorecard berekent hoe uw site presteert ten opzichte van de concurrentie, waarna de Revenue Impact Calculator u vertelt hoeveel geld uw langzame site u kost.
Deze cijfers kunnen nuttig zijn om gewicht te geven aan uw argumenten wanneer u pusht om prioriteit te geven aan de prestaties van een website. Deze pagina geeft ook een aantal goede richtlijnen over welke opties je hebt om dingen te versnellen.
08. Gatsby
Gatsby is een statische sitegenerator voor React waarmee u snelle, veilige sites kunt bouwen met behulp van moderne webtechnologie. Statische bestanden zijn veel eenvoudiger te implementeren, dus het is veel gemakkelijker om uw site te schalen - en het is ook veel sneller. Gegevens op uw site krijgen is eenvoudig dankzij een geweldig plug-in-ecosysteem waarmee u gegevens kunt ophalen uit CMS'en, API's, databases en meer met GraphQL. Gatsby-sites zijn Progressive Web Apps, wat betekent dat alleen de kritieke gegevens worden geladen, zodat uw site zo snel mogelijk voor uw gebruikers staat.
09. CSS-verloop
Waarom code gebruiken om CSS-verlopen te maken als dat niet nodig is? Het heeft geen zin het wiel opnieuw uit te vinden; u kunt net zo goed een webgebaseerde tool zoals deze gebruiken om de klus te klaren. CSS Gradient is een eenvoudige app die een mooie interface biedt voor het maken van CSS-verlopen - kies uit een van de vijf verloopstijlen en pas de schuifregelaars aan totdat je krijgt wat je nodig hebt. De code verschijnt eronder, klaar om te kopiëren en in uw site te plakken.
10. Overloop
Overflow is gemaakt door de mensen achter Proto.io omdat ze iets wilden maken om te helpen bij het proces van ontwerpkritiek. Ze ontdekten dat de gebruikelijke methode om ontwerpwerk te presenteren een belangrijk element wegliet; het verhaal van het ontwerp en de grondgedachte van de ontwerpers achter de beslissingen die ze hadden genomen.
Het antwoord hierop, zo vonden ze, zijn gebruikersstromen: stroomdiagrammen die laten zien hoe een gebruiker door een interface navigeert.Maar tot nu toe was er geen tool die specifiek was ontworpen om gebruikersstromen te creëren, dus ze waren moeilijk in een workflow te integreren. Overflow is bedoeld om in die behoefte te voorzien. Het ziet er spannend uit en u kunt zich nu aanmelden voor vroege toegang. In deze blogpost wordt meer in detail uitgelegd hoe gebruikersstromen u kunnen helpen.
