Verse bronnen voor webontwerpers en ontwikkelaars (maart 2019)

Er is de afgelopen maanden veel gebeurd in de wereld van webontwikkeling. Allereerst het nieuwe op een blok gebaseerde editor met codenaam Gutenberg, is eindelijk samengevoegd in WordPress 5.0. Het is echt een grote verandering sinds de oprichting ervan, aangezien het een nieuwe basis legt voor WordPress om in de toekomst te evolueren en de manier zal veranderen waarop ontwikkelaars zich uitbreiden voor WordPress-functionaliteiten.

Ten tweede hebben een paar van onze mede-ontwikkelaars een aantal echt nuttige tools gemaakt, zoals een die dat toelaat bekijk JSON in terminal en een paar React-bibliotheken die een grote hulp kunnen zijn bij webontwerp- en ontwikkelingsprojecten.

En tot slot, enkele van de meest effectieve bronnen, referenties en plug-ins zijn gelanceerd om u te helpen uw projecten bij te werken volgens de nieuwere trends.

Laten we de meest uitgebreide lijst met nieuwe bronnen voor webontwikkeling bekijken.

Gutenberg Handbook

Het officiële WordPress handboek waar je referenties voor het ontwerp kunt opzoeken, codevoorbeelden voor het maken van blokken en anderen en een gids om bij te dragen aan het project. Het is je eerste referentie voor het ontwikkelen met Gutenberg.

Bloksteiger

Met de op blokken gebaseerde editor biedt WP-CLI nu een handige manier om aan de slag te gaan een Gutenberg-blok maken met een nieuw CLI-commando, wp steigerblok. U kunt het maken en opnemen in uw bestaande plug-ins en thema's.

CGB

Een andere manier om eenvoudig een Gutenberg-blok te starten, is Create Guten Block (CGB) een boilerplate genereren om een Gutenberg-blok te ontwikkelen. Het bestaat uit moderne hulpmiddelen zoals React.js, Webpack, ESLint, Babel, etc. Het beste deel is dat u hoeft geen van deze tools te configureren zodat u zich eenvoudig kunt concentreren op het schrijven van uw code.

Elementor Blocks voor Gutenberg

Een WordPress-plug-in waarmee u kunt voeg Elementor-sjablonen in en bekijk het meteen in de editor. De plug-in wordt geleverd met tal van andere compatibiliteiten die bieden naadloze bewerkingservaring tussen Elementor en Gutenberg. Bekijk deze video om te zien hoe het in actie gaat.

Atomic Blocks

Een set Gutenberg-blokken met een groeiend aantal collecties. Op het moment van dit schrijven biedt het de “Post Grid Block” waarmee je kunt voeg een lijst met berichten van uw site toe in een rasterlay-out. Er is ook een “Testimonial Block” die, zoals de naam impliceert, een testimonial invoegen op de pagina. Bekijk de volledige previews van de Blocks op deze pagina.

Galerij blokkeren

Een opvallend blok om uw afbeeldingengalerij in te voegen, Block Gallery biedt een naadloze ervaring om afbeeldingen aan uw bericht toe te voegen. Verlaag gewoon uw afbeeldingen, style de galerijweergave (metselwerkstijl, carrousel of volledig scherm) en het is helemaal klaar. Het is op dit moment gewoon het beste galerijblok voor WordPress.

CoBlocks

Een blok blokken van dezelfde auteur die de bovengenoemde Block Gallery heeft ontwikkeld, CoBlocks bestaat uit een aantal blokken die uw site-inhoud zullen verbeteren zoals Accordeon, prijzen tabel, GIF, klik-om-tweet, en meer blokken toe te voegen.

StagBlocks

Nog een suite van Gutenberg Blocks. De plug-in brengt een aantal interessante blokken die velen van jullie zouden waarderen. Het bevat Stat Block waarmee u statistieken binnen uw berichten en pagina's kunt aanpassen. Website Card Block dat zal voorbeeld website in een mooie kaartstijl. Codeblok dat code met gemarkeerde kleur zal weergeven.

Otter Blocks

Ook een verzameling Gutenberg Blocks zoals de “Google Maps Block” om een kaart in te voegen, “Ons serviceblok” naar voeg een lijst met services in met een knop in een rasterweergave, en “Testimonials Area Block” om een lijst met testimonials in te voegen. Otter Block is een verzameling van Gutenberg Blocks die bedrijven en thema-ontwikkelaars zouden waarderen.

Gutenberg-blokken uitgebreid

Deze plug-in wordt geleverd met een handvol geavanceerde blokken om je inhoud te verrijken zoals de automatisch gegenereerde inhoudsopgave, “Giphy Blocks” om een GIF-afbeelding van Giphy.com op te nemen, “Unsplash-blok” om afbeeldingen van Unsplash.com in te voegen, “Banner Advertentieblok”, WooCommerce “Knopblok Toevoegen aan winkelwagen”, en veel meer.

Block Lab

Met Block Lab kunnen ontwikkelaars eenvoudig een Gutenberg-blok maken. Met de plug-in kunt u registreer een nieuw blok met een gebruikersvriendelijke GUI en sjablonen in PHP. U hoeft zelfs React.js niet te leren.

EDD Blocks

Een plug-in waarmee u Easy Digital Downloads-producten kunt weergeven in de Gutenberg-editor. In tegenstelling tot het gebruik van de shortcode, geeft het blok productweergaven weer.

Test Gutenberg

Niet klaar om Gutenberg-plug-in te installeren of uw site bij te werken naar WordPress 5.0? Je kunt gewoon laad deze site om de nieuwe editor uit te proberen.

Gutenberg Cloud

Het is als een AppStore voor Gutenberg Blocks. Een centrale plaats waar je kunt komen Gutenberg-blokken die kunnen worden gebruikt in WordPress en Drupal. Ja, Drupal gaat ook de Gutenberg-editor adopteren voor hun editor.

Gutenberg voorbeelden

Een Github-repository met codevoorbeelden om Gutenberg-blokken te maken. Hier kunt u de eenvoudigste blok naar een meer complex voorbeeld, zoals degene om een te maken “Receptblok” die een sjabloon instelt in de editor voor gebruikers om toe te voegen recept inhoud. Een goede referentie voor diegenen die liever leren van echte voorbeelden, dan van een tekstboek.

GutenbergJS

De JavaScript-versie van Gutenberg. Het is beschikbaar als een NPM-pakket waarmee u Gutenberg in een van uw JavaScript-toepassingen kunt integreren.

Schakel Gutenberg uit

Hoewel Gutenberg nieuwe mogelijkheden biedt voor WordPress, maar niet iedereen is er klaar voor. Als uw bestaande sites niet goed werken met Gutenberg, kunt u deze plug-in installeren. Hiermee kunt u schakel de Gutenberg-editor uit voor bepaalde berichten, berichttypen, gebruikersrollen, thema's, evenals de Gutenberg-stylesheets in de front-end uit te schakelen.

Klassieke editor

Als alternatief kunt u deze plug-in installeren, zodat u op de hoogte kunt blijven van WordPress 5.0 terwijl u de oude klassieke editor blijft gebruiken. Deze plug-in wordt ondersteund tot 2022.

ClassicPress

Een ander alternatief is om over te schakelen naar een WordPress-vork, ClassicPress. De ClassicPress-focus is ingeschakeld bedrijven, stabiliteit en beveiliging. Het is compatibel met WordPress-plug-ins en het is van plan nieuwe interessante functies in hun toekomstige releases te brengen. Bekijk onze post: ClassicPress: alternatief voor WordPress zonder Gutenberg en React.js

WordPress versnellen

Zoals WordPress zo groot is geworden; meer dan alleen een blogplatform. Vooral Gutenberg heeft wat extra ladingen, codes, bestanden aan je site toegevoegd die je site kunnen vertragen. Dit is een detail dat u kunt doorverwijzen om u te helpen de pijnpunten op uw site te identificeren en deze aan te pakken met de nieuwste best practices in de branche.

Visual Studio Code Browser Preview

Een Visual Code-editor die een echte browser toevoegt die wordt aangedreven door Chrome Headless in Visual Studio Code. Hiermee kunt u bekijk uw werk in realtime recht in de code-editor en schakelt functies zoals debugging in de editor in.

Bundlesize

Bundelsize is een hulpmiddel om bewaar je JavaScript-bestand bundeling grootte in te schakelen. U kunt de maximale grootte van elk van uw gebundelde bestanden definiëren en het zal u waarschuwen wanneer het om de gedefinieerde maximale grootte gaat of deze overschrijdt. Bundlesize kan worden geïntegreerd met een CI-service zoals TravisCI en CircleCI voor een naadloze implementatie van de workflow in uw project.

WP Emerge

Een modern WordPress-themakader gebaseerd op het MVC-patroon. Als je gewend bent om met een PHP-framework zoals Laravel en Slim te werken, ben ik er zeker van dat je dit framework echt zult waarderen. U kunt dingen gebruiken als Router en Controller, DI Container en Middlerware.

Vuurtoren Bot

Een hulpprogramma waarmee u Lighthouse kunt uitvoeren in een CI-service met behulp van Docker. Het is een geweldig hulpmiddel om automatiseer de controle van uw websiteprestaties elke keer dat je een nieuwe wijziging in je website-code aanbrengt.

Leer React-app

Leer React-app is een hulpmiddel om React.js te leren. Maar in tegenstelling tot de andere bronnen die er zijn, zou dit moeten zijn lokaal op uw computer geïnstalleerd. Het bevat niet alleen leermaterialen, maar het bevat ook code en interactieve voorbeelden. Het beste deel is dat je het offline kunt doen als het eenmaal is geïnstalleerd.

WP acceptatie

WP Acceptance is nieuw een tool waarmee u acceptatietests kunt uitvoeren. Simpel gezegd, acceptatietests zijn een serie van testen om gebruikersgedrag te emuleren. Er zijn een aantal frameworks om dit type test uit te voeren.

Als u echter voornamelijk met WordPress werkt, zult u deze tool waarderen voor het gebruiksgemak, aangezien deze is ontworpen en afgestemd op de typische WordPress-projecten..

Glimmend

Een JavaScript-bibliotheek voor emuleren verlichting reflectie op uw website wanneer bekeken op mobiel apparaat. Je kunt de demo bekijken op https://pqina.nl/shiny/. Het is vermeldenswaard dat het alleen op een mobiel apparaat werkt, omdat het afhankelijk is van een bepaalde API die alleen beschikbaar is op mobiele apparaten.

Reageer Lucid

ReactLucid is een hulpmiddel om u te helpen debug React en GraphQL-toepassingen op een meer interactieve manier. Hiermee kunt u de componenthiërarchie, status / props-wijzigingen in uw React-toepassing, evenals het GraphQL-schema, de queries en mutaties in realtime bekijken.

CSS-functies wisselen

Een Chrome-extensie waarmee u kunt uitschakelen van bepaalde CSS-functies in Chrome. Hiermee kunt u zien hoe uw website wordt weergegeven en zich gedraagt wanneer bepaalde functies niet bestaan. Heel nuttig om u te helpen bij het implementeren van nieuwe CSS-functies die mogelijk niet in alle browsers zijn geïmplementeerd.

Blendy

Een hulpmiddel dat u kan helpen pas CSS achtergrond-overvloeimodi aan met je afbeelding. U kunt voorbeelden van overvloeimodi weergeven, kleuren wijzigen en hellingen toepassen. U kunt afbeeldingen uit Unsplash gebruiken of uploaden vanaf de computer.

Reageer elementair

Een verzameling React-elementen die direct uit de doos werken. Geen externe CSS om configuraties te importeren of aan te passen om toe te voegen aan Webpack. Het wordt geleverd met essentiële componenten zoals de Button, Checkbox, SelectList, Tabs, Tooltip en nog veel meer.

FX

Als je vaak te maken hebt met JSON-opmaak, weet ik zeker dat je deze tool zult waarderen. fx is een opdrachtregelprogramma waarmee u JSON-gegevens in Terminal kunt visualiseren met interactieve modus. op een manier dat u de gegevens kunt uitvouwen of samenvouwen. fx kan worden geïnstalleerd via NPM of Homebrew.

Monica

Monica is vrij op zijn eigen categorie. Het is een soort CRM (Customer Relationship Manager) maar is niet bedoeld voor uw klant, maar voor uw dierbaren, zoals uw familie en vrienden.

Net als een CRM kun je dingen zoals je activiteiten bijhouden, en wanneer je ze voor het laatst hebt gebeld, enz. Nog meer, het kan worden ingesteld om je eraan te herinneren iemand te bellen waarmee je al een tijdje niet hebt gesproken. Ze noemen het een PRM (Personal Relationship Manager).

Ionisch Kader

Het ionenkader bestaat al een tijdje. Maar de laatste tijd heeft het een flinke sprong gemaakt in zijn functionaliteit. Nu niet alleen dat het sneller is, maar Ionic is nu compatibel met twee rijzende sterraamwerken: React.js en Vue.js.

Dit legt de basis voor Ionic om een te zijn kader agnostisch hulpmiddel. Dus niet alleen dat het voor bepaalde kaders werkt, maar ook met de nieuwe, omdat de front-end ontwikkeling in de toekomst evolueert.

opvallend

Opvallend is een bureaubladtoepassing voor notities. In tegenstelling tot andere soortgelijke apps, wordt deze niet geleverd met eigen formattering, WYSIWYG of andere typische toeters en bellen. De app-editor wordt voornamelijk aangedreven door Markdown met Github-smaak. Notities worden opgeslagen in een plat bestand .md bestanden en de bijlage. Het werkt gewoon en eenvoudig.

TipTap

TipTap is een WYSIWYG-editor die is gebouwd bovenop ProseMirror met Vue.js. Naast het overnemen van een aantal functies van ProseMirror uit de verpakking, zoals de ontzagwekkende Markdown-syntaxisondersteuning, brengt TipTap een paar moderne functies, zoals de menubel, waar het opmaakmenu verschijnt bij het markeren van tekst, de suggestiefunctie waar u kunt taggen of vermelden een persoon binnen de inhoud, en exporteer de mogelijkheid om inhoud in JSON-opmaak te exporteren.

Restplain

Restplain is een WordPress-plug-in waarmee u eenvoudig documentatie van uw WordPress REST API-eindpunten kunt genereren, inclusief de aangepaste eindpunten op uw site, evenals een API-oproep plaatsen vanuit de documenten. Eén ding om op te merken is dat het afhankelijk is van het eindpuntschema om de documentatie te genereren, dus zorg ervoor dat u een geschikt schema voor uw aangepaste eindpunten hebt toegevoegd.

Reageer Content Loader

Reageer Content Loader is een aangepaste React-component waarmee u inhoudsplaatsaanduiding kunt weergeven terwijl de daadwerkelijke inhoud wordt geladen. Het is vergelijkbaar met het type loader dat je op Facebook en Instagram ziet .

Mythic

Mythic is een WordPress-startthema met moderne best practices zoals afhankelijkheid van injecties, weergaven en controllers, evenals moderne hulpmiddelen zoals het gebruik van Webpack, Sass, Linting, PHP7 minimumvereiste en BEM. Het is een geweldig thema om je vaardigheden als thema-ontwikkelaar te verbeteren.

Verfijnde Github

Een browserextensie om uw ervaring te verfijnen wanneer u Github gebruikt. Het voegt verschillende handige sneltoetsen toe, verfijnt enkele lay-outs en UI's, voegt automatisch een link naar problemen en PR's toe, en nog veel meer.

Open WC

Open WC is een set hulpprogramma's waarmee u een aangepaste webcomponent kunt maken. Het bevat de hoofdbibliotheek voor het maken van een webcomponent, Yeoman-generators om snel een te genereren “Open WC” project, inclusief de steiger voor testen, pluizende, en gaat door met integratie.

Open WC kan een goed alternatief zijn als je dat zou doen liever implementeren met een native webfunctie in plaats van een framework zoals Vue.js of React.js te gebruiken.

Gridsome

Gridsome is a tool om statische websites en webtoepassingen te bouwen met Vue.js en GraphQL. Het is in staat om meerdere datastromen te verwerken, zoals van CMS zoals WordPress en Drupal, een lokaal bestand zoals Markdown of Yaml, of externe API zoals AirTable en Contentful. Dit is echt een geweldig alternatief voor Gatsby.js, vooral als Vue.js de voorkeur heeft boven React.js.

De browser

Dit is de browser zoals voorgesteld door de World Wide Web-uitvinder zelf, Tim Berners-Lee. Het is een eenvoudige browser om HTML te renderen en toont geen adresbalk zoals een moderne browser maar u kunt bekijken door naar te navigeren Document> Openen vanuit volledige documentreferentie en plak in een URL en klik Open. En daar zie je hoe je site wordt weergegeven met de originele browser.

raster

Raster is een modern rasterframe dat is gebouwd met moderne HTML- en CSS-specificaties zoals CSS Grid, CSS Custom Property (Variable) en aangepast element. Een perfect kader voor diegenen die graag aan de rand willen leven.

kuiper

Een Vue.js-component om een carrousel of schuifregelaar toe te voegen. Het is toegankelijk en bruikbaar via Touch, Keyboard, Mouse Wheel en andere ondersteunende navigatie, het ondersteunt RTL en verticale richting, uitbreidbaar en natuurlijk reactie.