Friska resurser för webbdesigners och utvecklare (oktober 2018)

Till skillnad från alla andra branscher förändras webbutveckling med språng. Det finns nya verktyg, metoder och ramar som utvecklats nästan varje dag för att tillgodose nyare trender och tekniska framsteg i webbbranschen.

Så här är en lista över de senaste verktygen och resurserna, inklusive en PHP-ram för att enkelt utföra E2E-testning för din PHP-applikation, ett verktyg för att generera färger som överensstämmer med W3C-tillgänglighetsstandarder och en handfull Vue.js-tillägg. Låt oss hoppa in för att se hela listan.

Keyframes App

En webbaserad applikation tillhandahålla en bra GUI för att komponera CSS-animering och visualisera animationen med en tidslinje. Appen låter dig också ladda ner CSS-utgången när du är nöjd. CSS keyframes är inte den enklaste specen i CSS, så att ha en app så här skulle definitivt vara en timesaver.

Symfony Panther

“Symfony Panther” är en fantastisk PHP-ram från Symfony för att utföra E2E-testet (End-to-end). Det kommer med sin inbyggd webbserver och kan utnyttja Chrome installerat i din dator för att utföra E2E-testet.

Dessutom stöder det JavaScript avrättningar, skärmdump capture, anpassade Selen driver, Chrome och Firefox-klienten. Att vara en fristående ram kan du inkludera Panther i alla PHP-projekt som till exempel WordPress, Joomla, etc.

TrendyPalettes

En samling vackra färgpalettar. Samlingen erbjuder tusentals handplockade färgpaletter. Användare kan skicka in en ny färgpalett, så det finns alltid nya paletter tillagda någonsin yday. TrendyPalettes är också tillgänglig som en Chrome-förlängning.

Eagle.js

Eagle.js är ett ramverk för att skapa bilder som är byggda ovanpå Vue.js så att du enkelt kan återanvända egna Vue.js-komponenter i bilderna. Bildskärmen stöder också tangentbord och musnavigering, anpassad stil eller tema, interaktiva widgets, och ger en panna för att hjälpa till att konfigurera och presentera bilden direkt. Det kan vara bra alternativ till Reveal.js, speciellt om du redan är bekant med Vue.js.

Grape.js

GrapeJS är en open source webbbyggare som låter dig bygga webbsidor helt enkelt genom dra och släppa komponenter. Det ger några vanliga komponenter som Text, Image, Vidoe, kolumner, karta, citat etc. Du kan exportera den till HTML och CSS och utdata är otroligt snyggt, till skillnad från vissa liknande verktyg som jag försökte tidigare. Kolla in demoen.

Fadd

Vapid är ett nytt CMS byggt med Node.js med ett intressant och unikt tillvägagångssätt. De flesta CMS, förutsatt att du vill inkludera en ny typ av data, måste först definiera den anpassade inmatningen i Dashboard / Admin-området.

Med Vapid är det motsatsen, eftersom du kan definiera mallen, och Vapid genererar automatiskt inmatningen i Dashboard / Admin-området. Den är tillgänglig som ett NPM-paket.

WP CLI-anmälan

Namnet säger allt. Det är ett anpassat WP-CLI-paket för att visa OS-meddelanden när WP-CLI redan är utförd. Ganska fint.

CSSGr.id

En webbaserad applikation för att komponera CSS-nätet. Du kan konfigurera antalet objekt, kolumner, klyftan mellan varje objekt, såväl som varje objektspänning och sedan generera HTML- och CSS-koden. CSS Grid är en av de CSS-specifikationer som inte är ganska lätt att förstå. Men det här verktyget gör det så lättare att hantera det.

Bläddra Hint

ScrollHint är ett JavaScript-bibliotek som låter dig skapa ett element överst för att visa att en sektion på din webbsida är scrollbar. Detta är särskilt användbart om du har ett horisontellt rullningselement på din webbsida eftersom de flesta inte bläddrar naturligt åt vänster till höger (eller vice versa) när de förbrukar webben.

PristineJS

Ett JavaScript-bibliotek för att lägga till validering till en inmatning. HTML5 levereras med någon typvalidering redan med “Typ = e”, och “typ = antal” till exempel. Men om du behöver en anpassad validator som inte implementeras i HTML5, det här JavaScript-biblioteket kommer att vara till nytta.

SelectionJS

De flesta är förmodligen redan bekanta med hur man väljer flera mappar eller filer i sin dator. De brukar hålla sina musklick och dra det runt de filer eller mappar de skulle vilja välja. Om du vill tillämpa samma UX på din webbplats kommer SelectionJS att vara till nytta.

Webdash

Webdash är ett verktyg som kan visa ditt projekt i GUI-gränssnittet. Den ansluts via package.json filen i din dator. Så det kan visa listan över NPM-paket, uppdatera paketet, de registrerade skripten, kör skriptet, och förhandsgranskar README-filerna direkt från Webdash. Ganska häftigt!

CanJS

En JavaScript-ram för att skapa webbgränssnitt. Det liknar React.js med några ytterligare funktioner och levereras med router, DOM-hjälpprogram och AJAX-funktion direkt ur lådan. Det har också ett ganska aktivt community support ger några tillägg.

CheerioJS

Ett JavaScript-bibliotek som implementerar jQuery Core-specifikationen för DOM (Document Object Model) och är utformad för att användas på serverns sida. Om du är arbetar med Node.js samtidigt som du njuter av jQuery-syntaxen tycka om addClass (), attr (), och hitta(), det här är JavaScript du letar efter.

Färglåda

Colorbox är Lyft-initiativ för att skapa en färgkomposition som överensstämmer med Color Accessiblity-standarden. Verktyget är utrustat med en smart algoritm som gör att du enkelt kan Flytta runt knappen, ändra konfigurationen, och det kommer att skapa rätt färger för dig. Det är bara fantastiskt.

Typade egenskaper i PHP 7.4

PHP7.3 ligger precis runt hörnet, som vi har nämnt i föregående avbetalning. Men PHP7.4 finns redan på planen. En av planerna är typad egendom. Det betyder att du snart kommer att kunna skriv något liknande offentliga int $ id; i din PHP-klass. Det är en stor förändring som kan bidra till att minska dina PHP-programfel.

Stencil

En JavaScript-kompilator som gör det enkelt att skapa webbkomponenter med den senaste standarden. Dessutom lägger StencilJS också till sig en modern webbutvecklingsstrategi i blandningen JSX support, reaktivitet, router och State Management använder ett plugin.

Vue Infinite Loading

En Vue-förlängning för att skapa en oändlig bläddringssida. Det är mobilvänligt och kompatibel med alla rullbara element. Det stöder också två rullningsriktningar, och bäst av allt sparar det mycket tid.

V Urklipp

En anpassad Vue.js-tillägg som gör det så lätt att skapa en “Kopia” knapp. Du kan helt enkelt lägga till en v-Urklipp Tillägna en knapp och du är helt klar. Denna Vue.js-tillägg fungerar för alla moderna webbläsare samt IE11 och det senaste.

Vue Välj

En Vue.js-komponent som ger liknande funktion till Select2. Det är utformat för Vue.js som det tillåter att vara kompatibel med Vuex, Custom Templating, och en massa andra Vue.js godhet.