Webdesignpuntnl Blog

Middels deze blog wil ik schrijven over web development en ondewerpen daarover die mij bezig houden.Je kunt dan denken aan tools zoals Figma, NPM, Node, Webpack en nog veel meer.

FigmaAan het bouwen van een website (dus het programmeren van de HTML, CSS en Javascript) gaan nog wel wat dingen vooraf. Je begint altijd met een gesprek met je opdrachtgever om er precies achter ter komen wat hij of zij voor ogen heeft. Heel belangrijk is de gebruiker van de site, wie gaat hem geberuiken en wat wil je dat die bezoeker gaat vinden of zoeken. Met andere woorden wat is het doel van de site en wie is de bezoeker?

Praten is nodig maar dit gaat altijd makkelijker als je het visueel kunt maken. We gaan dus een ontwerp maken. Het begint meestal met een schets, die wordt dan omgezet in een wireframe (zonder afbeeldingen, tekst en kleur), dan komt er een ontwerp (met afbeeldingen, tekst en kleur) en als laatste kan je nog een prototype maken. Met Figma kan dit allemaal. Omdat het in de browser werkt kan je het overal gebruiken en kan je anderen laten meewerken. Ook kan je het eindresultaat delen met anderen.

Figma werkt met componenten. Je kunt een button ontwerpen en die dan omzetten in een component zodat je deze in een ander deel van je ontwerp weer gemakkelijk opnieuw kunt gebruiken. Het mooie hiervan is dat als je de mastercomponent aanpast dat alle andere meegaan. Denk bijvoorbeeld aan de kleur. Wil je een enkele instance van de button aanpassen dan kan dat ook.

Figma is voor het grootste deel gratis. Wil je gebruik maken van het werken in teams dan is er een starter en een professioneel pakket. De starter is beperkt en gratis, het professionele plan is US$ 12 per maand per editor. Ik kan je zeker aanraden eens een kijkje te nemen op de site van Figma.Gepubliceerd op 9 april 2019

figma logo

Polypaneis een nieuwe browser gemaakt door Kilian Valkhof. In deze browser kun je tegelijkertijd je site zien op verschillende devices en viewports.Polypane is gebasseerd op Chromium. Naast de Chromium developer tools bevat de browser nog meer handig functies.

Even snel een site opzoeken op je mobiel is vandaag de dag heel normaal. Sterker nog er wordt meer gesurft op draagbare apparaten dan op de desktop. Developers moeten hier rekening mee houden en ontwerpen apps en websites voor verschillende scherm formaten. Dit kan op vele manieren maar het meets gebruikelijk (op dit moment) is het gebruik van css media‐queries. Het ontwerp schaalt mee op de verschillende schermen. Je hebt dus een HTML bestand en via CSS kun je breekpunten bepalen waarop de CSS verandert. Op een groot scherm met snel internet laat je bijvoorbeeld een hero‐image zien die je kunt verbergen op kleine schermen zodat de gebruiker hier geen dure datakosten voor hoeft te betalen.

Polypane screenshotIn elke browser kun je zien hoe je site eruit ziet op verschillende schermen. Je moet dan de breedte van de browser aanpassen of in de devtools de responsive view inschakelen. Je kunt niet alle devices in 1 keer zien.Polypane lost dit op. Je kunt meerdere formaten in 1 keer bekijken. Je kan dit doen op basis van de breekpunten in js CCS, Polypane ziet de breekpunten en maakt op basis hiervan een overzicht. Je kan er ook voor kiezen om 1 view te zien. Je kan een screenshot maken van wat er op dit moment in de viewport zichtbaar is. Wat ook heel handig is synchronised scrolling, alle views scrollen dan synchroon mee en blijven ongeveer op de dezelfde hoogte. Als je de html of de css aanpast wordt dat in alle views zichtbaar. Polypane heeft dezelfde devtools als elke Chromiumm browser, je kunt dus snel even iets aanpassen of debuggen.

Polypane is beschikbaar voor Windows, Mac en Linux. Je kan kiezen uit een paar prijsplannen en hebt de keuze voor een maand‐ of een jaar abbonnement. Bij betaling per jaar krijg je 20% korting. Ben je lid van Fronteers dan kun je 25% korting krijgen. Lees hier meer over de korting op de site van FronteersGepubliceerd op 17 mei 2019

Polypane logo

cssscanis een browser extensie waarme je devtools minder snel hoeft te gebruiken om de CCS stijlen van een item op een webpagina te bekijken. Cssscan geeft je de mogelijkheid om over elk item van een pagina te hoveren, de stijlen verschijnen dan in een kader en met een klik kopieer je ze naar het klembord. Je kan de stijlen dan direct in je stijlsheet plakken en gebruiken.

css screenshotAls je de extensie activeert dan krijg je een balkje met wat menuopties. Voor de positie van het balkje kan je kiezen uit boven- of onder in de browser. Er zijn knoppen om cssscan te pauseren of helemaal te sluiten. Cssscan is te ook te bedienen met keywboard shortcuts. Er is een knop voor feedback en er is een knop voor enkele opties. Zo kun bijvoorbeeld ook de hoverstijlen kopieren of nesten voor SASS of LESS en je kan er voor kiezen om een grid over de pagina te plaatsen. Ik gebruik cssscan nu enige tijd. Als ik op een mooie site kom dan is het heel handig om even snel wat stijlen te checken. Het is nog geen gewoonte om cssscan tijdens het developen te gebruiken. Ben nog iets te veel aan de devtools gewend. Maar als je even snel wat stijlen wilt knippen en plakken dan is het zeker geweldig. Cssscan is te krijgen als extensie voor Chrome en Firefox. Safari is op dit moment in de maak.

Cssscan is niet gratis. De normale prijs is $ 29.99. cssscan is echter vaak in de aanbieding.Gepubliceerd op 24 mei 2019

cssscan logo

Git log --onelineis voor mensen die veel met Git werken misschien wel heel bekend maar ik kwam er pas recent mee in aanraking toen ik via Fronteers een workshop over Git volgde.

git log screendumpMet git log kun je in terug in de tijd kijken. Je ziet bovenaan de nieuwste commit en naar onderen toe worden ze steeds ouder. Je ziet dat ze uit twee regels bestaan. Een korte regel en daaronder een of meerdere langere regels. De eerste regel is een titel waardoor je snel kunt zien wat je precies gedaan hebt in de commit. Daaronder kan je dan met meer woorden uitleggen wat je gedaan hebt.

git log --online screendumpHet mooiste is dat je ook een log kan maken waarin je alleen de eerste regel te zien krijgt. Dit doe je door git log --oneline te gebruiken. Zo kan je snel zien wat er gebeurt is. Als nog meer informatie wilt hebben dan kijk je naar de lange logs. Als je een commit doet dan gebruik je: git commit -m "Hier een beschrijving". Dit zorgt ervoor dat je aanpassingen worden toegevoegd met een lange message. Wil je een titel en een body hebben dan gebruik je: git commit -m "titel" -m "body". Dus door twee keer -m toe te voegen kan je het bericht opdelen in een titel en een body. Ik gebruik dit nu voor al mijn projecten en het wordt er een stuk duidelijker van.Gepubliceerd op 4 juni 2019

git logo