20 Tips & Tricks, Handige tools en plugins voor webshop design en -bouw

Darius Rosendahl   •  13 februari 2014

Als het webshop design- en front-end team bij De Nieuwe Zaak zijn wij continue bezig om te innoveren, de snelheid te verhogen en de kwaliteit te verbeteren. Een onderdeel hiervan is een combinatie van verschillende tools en plugins om onze workflow zo efficiënt mogelijk te maken.

Sublime en Photoshop

Workflow tools

Bij het Front-end team van De Nieuwe Zaak maken we voornamelijk gebruik van Photoshop en Sublime. In het onderstaande artikel geven we tips, tools en plugins om je werk zo efficiënt mogelijk te maken.

Aan het einde hebben we ook een lijst met handige website(tools) voor Front-end Developers.

Design: Photoshop

Helaas is er momenteel nog geen perfecte tool voor het ontwerpen van (responsive) webshops. Wij maken gebruik van Photoshop, gelukkig zijn er wel verschillende plugins die het werk makkelijker maken!

Overigens groeit het aanbod design tools enorm en voor ons gevoel zal het niet lang duren voordat de perfecte standalone responsive design tool  uitkomt. Wij kijken bijvoorbeeld erg uit naar Macaw.

Met Macaw kan je herbruikbare elementen maken en voor verschillende schermgroottes (breakpoints) websites ontwerpen. Ook kan dit programma HTML en CSS genereren.

Macaw is vanaf nu the preorderen en komt 31 maart uit voor de Mac en hopelijk ook snel voor PC.

Plugins voor Photoshop

CSS3 Photoshop Plugin
CSS3 Photoshop Plugins is een zeer handige plugin voor het omzetten van Photoshop stijlen naar CSS3 stijlen, zoals box-shadows en gradients. Natuurlijk kun je dit allemaal handmatig doen, maar dit maakt je werk net iets makkelijker.

CSS3Ps

GuideGuide
Als front-end developer of designer zul je vaak gebruik moeten maken van grids. Als je dit handmatig doet kost het veel tijd en een foutje is zo gemaakt. Met guide-guide zet je in een paar handelingen een perfect grid neer. Voor Front-enders is dit ook een handige plugin om bijvoorbeeld sprites op te zetten.

GuideGuide

 

Renamy
Als designer maak je, als het goed is, gebruik van vele lagen en mappen. Renamy is een handige plugin voor het snel hernoemen van meedere lagen. Dit is vooral handig als je met honderden verschillende lagen werkt en het wel overzichtelijk wilt houden.

Renamy

HTML en Javascript: Sublime Text

De laatste maanden hebben we veel editors uitgeprobeerd en Sublime Text is toch wel de meest efficiënte. Deze tool heeft ontzettend veel opties en plugins om de editor nóg uitgebreider te maken.

Sneltoetsen
Zoals met ieder programma werk je het snelst door gebruik te maken van sneltoetsen. Sublime Tekst is hierin geen uitzondering.

Een overzicht van alle sneltoetsen kun je hier vinden.

Multiple select
Naar mijn mening dé kracht van Sublime, je kunt eenvoudig op meerdere plekken tegelijk iets aanpassen in een document. Hier zijn veel manieren voor:

  • Houd control in en klik, nu heb je meerdere cursors.
  • Sleep je muis met de middelste muisknop en je selecteert meerdere regels
  • Selecteer een woord dat je op meerdere plaatsen wilt aanpassen, met CTR + D selecteer je nu ook het volgende woord.

Command Palette
Een krachtige tool binnen Sublime.

Met de Command Palette kun je bijna alles bedienen, zoeken en aanpassen in Sublime. Druk bijvoorbeeld in een CSS file eens op CTR + R. Sneller en nauwkeuriger zoeken binnen CSS kan gewoon niet!

Meerdere bestanden naast elkaar

Meerdere bestanden naast elkaar
Handig om meerdere geopende HTML en CSS bestanden naast elkaar te tonen zodat je bijvoorbeeld tegelijkertijd in de HTML en CSS kunt werken binnen een project.

Sneltoets: ALT +SHIFT + 1 (of 2, 3, 4, enz. voor nog meer schermen)

Projecten
Projecten zijn een krachtig middel als je met  Sleep al je bestanden en mappen in 1 venster en sla het op als een project, door middel van een sneltoets kun je ook nog eens eenvoudig wisselen tussen projecten.

Handig als je aan meerdere projecten tegelijk werkt.

Sneltoets: CTR + ALT + P

Snel wisselen tussen bestanden
Snel wisselen tussen alle bestanden uit je huidige project en andere bestanden die je open hebt.

Sneltoets: CTR + P

Handige plugins voor Sublime (packages)

Package Control
Voor dit script eenmalig uit zodat je vanaf nu eenvoudig plugins kan installeren.

Sneltoets: Na installatie, CTR + SHIFT + P en kies ‘Install package’

Emmet

Emmet

Naar mijn mening beste plugin die er is voor Sublime (en andere editors), dit is de opvolger van Zen Coding, hiermee kun je makkelijk HTML maken op een manier zoals je CSS schrijft.

Voorbeeld:

#nav>ul>li*6>a

Zodra je op TAB drukt komt er het volgende uit:

<nav>
    <ul>
        <li><a href=””></a></li>
        <li><a href=””></a></li>
        <li><a href=””></a></li>
        <li><a href=””></a></li>
        <li><a href=””></a></li>
        <li><a href=””></a></li>
    </ul>
</nav>

Emmet maakt het zelfs zo makkelijk dat je vervolgens met TAB naar de juiste posities springt om je lijst te vullen. Eerst naar de href, dan naar de tekst, etc

005

Tags om een tekst heen zetten? Selecteer de tekst en gebruik CTR + SHIFT + G of CTR + ALT + ENTER en vervolgens kun je een afkorting ergens omheen zetten.

All Autocomplete
De beta van Sublime Text 3 doet dit al, maar deze plugin sluit je (HTML) tags automatisch goed af als je typt.

SidebarEnhancements
Handige plugin als je iets moet aanpassen buiten Sublime Tekst zoals het kopieren van een bestand. Hiermee kun je al je bewerkingen direct vanuit de sidebar in Sublime Tekst doen.

SyncedSidebar
Deze plugin laat in de sidebar de juiste locatie zien en opent de juiste map zodra je naar een bestand toe gaat met CTR + P.

Modific
Een plugin die erg handig is als je gebruik maakt van versiebeheer zoals SVN en Git, Modific deze laat zien welke regels je hebt aangepast sinds de laatste update van het bestand.

TortoiseSVN
Voor gebruikers van het Subversion versiebeheersysteem, geeft TortoiseSVN je direct opties in Sublime om bijvoorbeeld een update of een commit te doen.

Thema’s en settings

 

Settings
Je settings kun je textueel aanpassen via Preferences > Settings – User, Ik heb gekozen voor een grote, duidelijke user interface.

Dit thema heeft bijvoorbeeld een grote cursor, de huidige regel waar je bent krijgt een achtegrond en in indent lijnen vallen extra op.

Mocht je die van mij willen gebruiken dan kun je de onderstaande settings kopieren en die van jouw overschrijven, laat wel even de regel van het thema staan in je eigen settings:

{
    "always_show_minimap_viewport": true,
    "caret_style": "large",
    "draw_indent_guides": true,
    "draw_minimap_border": true,
    "font_size": 14,
    "highlight_line": true,
    "highlight_modified_tabs": true,
    "ignored_packages":
    [
        "Vintage"
    ],
    "indent_guide_options":
    [
        "draw_normal",
        "draw_active"
    ],
    "preview_on_click": false,
    "show_full_path": true
}

Thema’s
Voor Sublime zijn er heel veel thema’s, in plaats van hier tussen te zoeken heb ik zelf het standaard thema aangepast zodat bijvoorbeeld de begin en eind tags duidelijk opvallen.

Mijn thema kun je hier downloaden: DNZ-Monokai-Soda

Handige websites voor Front-enders

Responsive Testing Tool
In de tijd van responsive websites moet er veel getest op verschillende formaten, Responsive Testing Tool is de perfecte tool om snel te testen of alles er goed uit ziet zonder uit je browser te gaan.

Px to Em
Tegenwoordig werken we veel met em’s om font sizes en dimensies te bereken, met deze tool is het omzetten van px naar em’s een peulenschil.

Aspect Ratio Calculator
Voor het eenvoudig berekenen van beeldverhouding tussen 2 bestanden.

CSS triangle generator
Het berekenen van hoeken kan vervelend zijn, met deze tool wordt het een stuk eenvoudiger.

HTML Entity Character Lookup
Weet je niet meer precies welke HTML entity was? Met deze website kom je er in een paar seconden achter.

Can I use
De wereld van HTML5 en CSS3 verandert dagelijks maar helaas ondersteunen nog niet alle browsers de nieuwste functionaliteiten. Met Can I use kun je makkelijk opzoeken wat er mogelijk is.

Ok, en nu?

Dit is een selectie van handige tools en plugins die wij gebruiken bij het ontwerpen van webshops. Van welke tools en plugins maak jij gebruik? Wat doe jij om je workflow te verbeteren? We horen het graag!

Darius Rosendahl is teamlead Front-end. Binnen De Nieuwe Zaak houdt hij zich bezig met de realisatie en ontwikkeling van de front-end van uw webshop, plus de aansturing van het Front-end team.
Blijf op de hoogte

Meld u aan voor onze wekelijkse e-commerce nieuwsbrief en blijf op de hoogte van het laatste e-commerce nieuws!

© 2018 De Nieuwe Zaak