Verse bronnen voor webontwerpers en ontwikkelaars (oktober 2017)

Deze maand gaat Fresh Resouces een beetje anders zijn dan de voorgaande maanden. Wij, webontwikkelaars, verdienen inkomsten in een snel veranderende branche en ik heb veel aankondigingen gezien van enkele van de grootste technologiebedrijven zoals Google, Microsoft, Firefox en PHP, die de manier waarop we bouwen zal veranderen het web.

In deze aflevering gaat de helft van onze lijst over deze aankondigingen. Dus wees klaar om hallo te zeggen tegen de toekomst!

Essentiële beeldoptimalisatie

Het is een uitgebreid artikel om een ​​afbeelding voor internet te optimaliseren geschreven door Addy Osmani. Het is niet zoals andere opwaarderingen die draaien om how-to, of alleen de do's en dont'ts.

Dit artikel leidt u eigenlijk door de technische details evenals de wetenschap achter de optimalisatie. U vindt ook gedegen informatie over verschillende optimalisatiebenaderingen en beeldformaten, gereedschappen, tips en enkele voorbeelden uit de praktijk.

PHP 7.2

Een uitgebreid verwijzing naar wat er komt in PHP 7.2. Naast toevoegingen die de prestaties van de PHP-applicatie verbeteren, komt PHP 7.2 ook met waardevermindering waarin verschillende dingen zullen worden verwijderd en zou niet langer moeten worden gebruikt.

In PHP 7.2 zijn er twee functies die worden afgeschreven namelijk create_function () en __autoload (). Als u een webontwikkelaar bent, controleer uw code en breng de nodige wijzigingen aan. Ik heb veel WordPress-plug-ins gezien die nog steeds deze twee functies gebruiken.

Web Share API

Ik zag deze API eerlijk gezegd niet op het web. Echter, aangezien de helft van onze interactie op het web over gaat “delen”, deze API zal veel dingen maken gemakkelijker voor webontwikkelaars om een ​​native sharing-ervaring op te bouwen, vooral op het mobiele platform.

Deze API is momenteel alleen beschikbaar in Google Chrome voor Desktop en Android. Bekijk deze YouTube-video om hem in actie te zien.

Image Async Attribuut

Een ander ding dat het web radicaal zal veranderen, is het async attribuut voor het img-element. Op het moment van schrijven zijn er een handvol benaderingen voor laad de afbeelding asynchroon met een klein trucje JavaScript. Binnenkort kunnen we gewoon toevoegen asynchrone = op op de img element.

Firefox Quantum

Mozilla heeft agressief updates naar Firefox verschoven met enkele verbeteringen, met codenamen “Project Quantum”. Het bevat Quantum CSS - een nieuwe engine voor extreem snelle CSS-rendering, een nieuwe gebruikersinterface en nieuwe DevTools.

De release is tractie winnen bij webontwikkelaars en sommigen hebben hun hoofdbrowser al op Firefox gezet. Er zullen nog meer volgen in dit project, waaronder Quantum DOM en WebRender. Zullen we de Node.js-mededinger bekijken op basis van de Firefox Quantum-engine? Nou ja, misschien wel.

MS Edge voor iOS en Android

Microsoft heeft zojuist aangekondigd om laat de nieuwste browser, Edge, tot iOS en Android vrij. Dit betekent dat er nog een browser is waarmee u uw websites kunt testen.

Gutenberg

WordPress is momenteel bezig met een ambitieus project met de code Gutenberg. Gutenberg is een facelift naar WordPress-editor bijna volledig gebouwd met JavaScript.

Op dit punt is Gutenberg gebouwd met React maar het project overweegt een ander kader zoals Preact, Vue of iets anders. Het is een gecompliceerde situatie voor nu. Dus, voor WordPress-ontwikkelaars die thema's en plug-ins bouwen, houd je ogen op het project als het zal de manier veranderen waarop we WordPress voor altijd bouwen.

FoitFout

FoitFout is een handig hulpmiddel om twee verschillende benaderingen, de zogenaamde FOIT en FOUT, met elkaar te vergelijken laad aangepaste lettertypen op internet. Met deze tool kunt u de twee benaderingen nabootsen en beslissen welke aanpak het beste aansluit bij uw site.

Vuera

Vuera is een JavaScript-bibliotheek waarmee u Vue en React samen kunt gebruiken. U kunt een Vue-component opnemen van een .vue of gebruik een React-component in Vue. Uw team kan nu zijn productiever met elk raamwerk die ze het liefst gebruiken.

Sleepbaar

“Sleepbaar” is een fantastische bibliotheek van Shopify. Het is gebouwd op de top van native browser Drag-n-Drop API en biedt u een uitgebreide API om mee te werken. In het geval dat het niet iets biedt dat je nodig hebt, kun je een a schrijven aangepaste module om zijn functionaliteiten uit te breiden. Bekijk de demo om te zien hoe het werkt.

FlowchartJS

Zoals de naam al aangeeft, is FlowchartJS een bibliotheek waarmee u een stroomdiagram kunt maken zoals in PowerPoint. Op dezelfde manier kunt u verschillende diagramvormen maken, waaronder cirkel, ovaal, vierkant, ruit, driehoek, enzovoort.

QuickBill

Een lichtgewicht en eenvoudige webapplicatie om een ​​factuur te maken. Het maakt gebruik van native browser-technologieën en API's om te draaien, dus er is geen account nodig. Ga gewoon naar de website, voeg de items toe aan de factuur en genereer het PDF-bestand. Dat is het!

Mocka

Mocka is een plaatsaanduiding voor inhoud die u kunt gebruiken voor het maken van prototypen op een website. Het is slechts 500 bytes en volledig aanpasbaar. U kunt het eenvoudig opnemen in het CSS-bestand van uw project met behulp van de Sass-mixin.

De CSS biedt een aantal klassen inclusief mocka-media om een ​​tijdelijke aanduiding voor afbeeldingen te maken, mocka-titel om een ​​koers te maken, en mocka-text om een ​​willekeurige tekst te maken.

VueStar

VueStar is een Vue-component om een ​​sprankelend effect toe te voegen wanneer u op een pictogram klikt, vergelijkbaar met wat Twitter doet met de “hart-” pictogram in hun mobiele app. Het onderdeel introduceert een nieuw element genaamd vue-ster waar je het in het webtijdperk kunt toevoegen. En je bent klaar!

Grid Speelplaats

CSS Grid introduceert een nieuw concept op het web om een ​​lay-out te bouwen en het is nogal complex op het eerste gezicht gezien de vele nieuwe eigenschappen die het heeft.

GridPlayground is eigenlijk een Mozilla-initiatief om CSS Grid te onderwijzen en CSS Grid-adoptie voorwaarts te pushen. Zelfs Firefox brengt een nieuwe tool naar de DevTools om de lay-out van het raster te inspecteren.

Snippet Manager

“Snippet Manager” is een eenvoudig app om codefragmenten op te slaan en te beheren. U kunt een nieuw item maken, de code plakken en het punt instellen. Op dit moment niets te luxe en het biedt alleen de broncode die je nodig hebt om te compileren met behulp van NPM.

Interface met tabbladen

Een geweldige doorloop bij het bouwen van een progressieve en toegankelijke navigatie op tabbladen met minimaal gebruik van JavaScript. Een geweldige bron voor diegenen die meer willen leren over toegankelijk ontwerp.

SwissInCSS

SwissInCSS vertoont verschillende klassieke Zwitserse posterontwerpen die niets anders dan CSS gebruiken. De broncode is beschikbaar in CodePen.