Verse bronnen voor webontwerpers en ontwikkelaars (oktober 2018)

In tegenstelling tot andere industriële sectoren verandert de webontwikkeling met grote sprongen. Er zijn bijna elke dag nieuwe gereedschappen, methoden en frameworks ontwikkeld om aan te voldoen nieuwere trends en technologische vooruitgang in de webindustrie.

Dus hier is een lijst met de nieuwste hulpmiddelen en bronnen, waaronder een PHP-framework om eenvoudig uit te voeren E2E testen voor uw PHP-applicatie, een hulpmiddel om kleuren te genereren die voldoen aan W3C-toegankelijkheidsnormen en een handvol Vue.js-extensies. Laten we naar binnen springen om de volledige lijst te zien.

Keyframes-app

Een webgebaseerde applicatie het verstrekken van een leuke GUI om CSS-animaties samen te stellen en visualiseer de animatie met een tijdlijn. Met de app kun je ook de CSS-uitvoer downloaden zodra je tevreden bent. CSS-hoofdframes is niet de gemakkelijkste specificatie in CSS, dus een app als deze zou zeker een timesaver zijn.

Symfony Panther

“Symfony Panther” is een geweldig PHP-framework van Symfony om de E2E-test (end-to-end) uit te voeren. Het komt met zijn ingebouwde webserver en kan Chrome gebruiken dat op uw computer is geïnstalleerd om de E2E-test uit te voeren.

Bovendien ondersteunt het JavaScript-uitvoeringen, screenshot vastleggen, aangepaste Selenium-driver, Chrome- en Firefox-client. Als een op zichzelf staand framework, kun je Panther opnemen in elke PHP-project, zoals WordPress, Joomla, enz..

TrendyPalettes

Een verzameling prachtige kleurenpaletten. De collectie biedt duizenden zorgvuldig geselecteerde kleurenpaletten. Gebruikers kunnen een nieuw kleurenpalet indienen, dus er zijn altijd nieuwe paletten toegevoegd. TrendyPalettes is ook beschikbaar als een Chrome-extensie.

Eagle.js

Eagle.js is een kader om dia's te maken die bovenop Vue.js zijn gebouwd, zodat u eenvoudig aangepaste Vue.js-componenten binnen de dia's kunt hergebruiken. De dia ondersteunt ook toetsenbord- en muisnavigatie, eigen stijl of thema, interactieve widgets en biedt een boilerplate om de dia snel te kunnen instellen en presenteren. Het kan fantastisch zijn alternatief voor Reveal.js, vooral als je al bekend bent met Vue.js.

Grape.js

GrapeJS is een open-source webbuilder waarmee u eenvoudig webpagina's kunt bouwen componenten slepen en neerzetten. Het biedt een aantal veelgebruikte componenten zoals Tekst, Afbeelding, Vidoe, Kolommen, Kaart, Citaat, etc. Je kunt het exporteren naar HTML en CSS en de uitvoer is verbazingwekkend netjes, in tegenstelling tot sommige vergelijkbare tools die ik eerder heb geprobeerd. Bekijk de demo.

platvoers

Vapid is een nieuwe CMS gebouwd met Node.js met een interessante en unieke aanpak. De meeste CMS, ervan uitgaande dat u een nieuw type gegevens wilt opnemen, moeten eerst de aangepaste invoer in het Dashboard / Admin-gebied definiëren.

Met Vapid is het tegenovergestelde dat u de sjabloon kunt definiëren en dat Vapid automatisch de invoer genereert in het Dashboard / Admin-gebied. Het is beschikbaar als een NPM-pakket.

WP CLI-melding

De naam zegt het al. Het is een aangepast WP-CLI-pakket om OS-meldingen weer te geven wanneer WP-CLI al klaar is met het uitvoeren. Heel goed.

CSSGr.id

Een webgebaseerde toepassing om CSS Grid samen te stellen. U kunt het aantal items, kolommen, de opening tussen elk item en elke artikelbreedte configureren en vervolgens de HTML- en CSS-code genereren. CSS Grid is een van die CSS-specificaties die niet zo eenvoudig te begrijpen is. Maar deze tool maakt het zoveel gemakkelijker om ermee om te gaan.

Scroll Hint

ScrollHint is een JavaScript-bibliotheek waarmee u een element over de top kunt maken om aan te geven dat een sectie op uw webpagina schuifbaar is. Dit is vooral handig als u een horizontaal scroll-element op uw webpagina hebt, omdat de meeste mensen van nature niet van links naar rechts (of andersom) scrollen bij het consumeren van het web.

PristineJS

Een JavaScript-bibliotheek om validatie aan een invoer toe te voegen. HTML5 wordt geleverd met enige typevalidatie al bij de “type = e-mail”, en “type = aantal” bijvoorbeeld. Maar als u een nodig hebt aangepaste validator die niet is geïmplementeerd in HTML5, deze JavaScript-bibliotheek komt van pas.

SelectionJS

De meeste mensen zijn waarschijnlijk al bekend met het selecteren van meerdere mappen of bestanden op hun computer; ze houden meestal hun muisklik en slepen het rond de bestanden of mappen die ze willen selecteren. Als u dezelfde UX op uw website wilt toepassen, komt SelectionJS van pas.

Webdash

Webdash is een tool die dat kan toon uw project in de GUI-interface. Het verbindt via de package.json bestand op uw computer. Zodat het de lijst van de kan weergeven NPM-pakketten, werk het pakket bij, de geregistreerde scripts, voer het script uit, en een voorbeeld van de README-bestanden direct vanuit de Webdash. Best gaaf!

CanJS

Een JavaScript-framework voor het bouwen van een webinterface. Het is vergelijkbaar met React.js met enkele extra functies en wordt geleverd met de router, DOM Utilities en AJAX-functie direct uit de doos. Het heeft ook een vrij actieve community-ondersteuning die enkele extensies biedt.

CheerioJS

Een JavaScript-bibliotheek die de jQuery Core-specificatie implementeert voor DOM (Document Object Model) en die is ontworpen voor gebruik op de server. Als je werken met Node.js terwijl je ook geniet van de jQuery-syntaxis net zoals addClass (), attr (), en vind(), dit is het JavaScript dat je zoekt.

Kleurdoos

Colorbox is een initiatief van Lyft om een ​​kleursamenstelling te genereren die voldoet aan de standaardkleur Accessiblity. De tool wordt aangedreven met een slim algoritme waarmee u eenvoudig kunt werken beweeg rond de knop, verander de configuratie, en het zal de juiste kleuren voor u genereren. Het is gewoon geweldig.

Typische eigenschappen in PHP 7.4

PHP7.3 is net om de hoek, zoals we in de vorige aflevering hebben genoemd. Maar PHP7.4 staat al in het Plan. Een van de plannen is Typed Property. Dit betekent dat je dat binnenkort kunt doen schrijf zoiets als openbare int $ id; in je PHP-klasse. Het is een enorme verandering die aanzienlijk kan helpen om uw PHP-toepassingsfouten te verminderen.

Stencil

Een JavaScript-compiler waarmee het eenvoudig is om webcomponenten te maken met de nieuwste standaard. Daar bovenop voegt StencilJS ook een aantal moderne webontwikkelaanpak toe aan de mix JSX-ondersteuning, reactiviteit, router en overheidsbeheer met behulp van een plug-in.

Vue oneindig laden

Een Vue-extensie om een ​​oneindige scroll-pagina te maken. Het is mobielvriendelijk en compatibel met elk schuifbaar element. Het ondersteunt ook twee scroll-richtingen, en het beste van alles, het bespaart veel tijd.

V Klembord

Een aangepaste Vue.js-extensie die dit zo maakt eenvoudig om een ​​te maken “Kopiëren” knop. U kunt gewoon een toevoegen v-klembord ken een knop toe en je bent helemaal klaar. Deze Vue.js-extensie werkt voor elke moderne browser, evenals IE11 en de nieuwste.

Vue Select

Een Vue.js-component die een vergelijkbare functionaliteit biedt als Select2. Het is ontworpen voor Vue.js dat het mogelijk maakt compatibel met Vuex, Custom Templating, en een heleboel andere Vue.js goedheid.