Navigatie overslaan
Hacktisch

Handige web development tooltjes

Ik zet hier een aantal kleine tools neer die ik regelmatig gebruik bij mijn werk. De programmaatjes die ik noem zijn voor Windows, maar er zullen equivalenten voor elk OS bestaan.

Clipboardmanager

Tegenwoordig kan ik niet meer zonder: een clipboard manager die onthoudt wat je allemaal hebt gekopieerd (in plaats van dat elke keer als je iets kopieert, het je vorige clipboard-item overschrijft). Ik kan nu altijd zorgeloos alles kopiëren zonder bang te zijn iets belangrijks te verliezen wat ik eerder gekopieerd heb. Vaak is het ook nodig om te wisselen tussen verschillende clipboard-items, en dat kan met keyboard shortcuts. Er bestaan meerdere clipboardmanagers, ik gebruik nu ClipDiary voor Windows.

ClipDiary screenshot

Transparante design overlays

Om designs precies over te nemen is het noodzakelijk om de website die je aan het bouwen bent, precies te kunnen vergelijken met het design. Veel developers doen dit op het blote oog, maar dat zorgt meestal voor afwijkende dimensies, marges, tekstgroottes, etc. Sommige webprogrammeurs zetten het design als achtergrond in de browser, met browserextensies zoals PerfectPixel. Ik hou het design liever in een apart scherm, en maak de browser zelf vervolgens transparant. Daarvoor heb ik een klein scriptje dat hieronder staat, en welke je kan compileren met AutoHotKey. Zorg er vervolgens voor dat de .exe die je krijgt, gelijk opstart als je Windows opstart.

opacity.ahk
Gebruik: Windows + muiswiel scrollen verandert doorzichtigheid van het huidige scherm. Reset met Windows + O.

; changing window transparencies
#WheelUp::  ; Increments transparency up by 3.375% (with wrap-around)
    DetectHiddenWindows, on
    WinGet, curtrans, Transparent, A
    if ! curtrans
        curtrans = 255
    newtrans := curtrans + 35
    if newtrans > 0
    {
        WinSet, Transparent, %newtrans%, A
    }
    else
    {
        WinSet, Transparent, OFF, A
        WinSet, Transparent, 255, A
    }
return

#WheelDown::  ; Increments transparency down by 3.375% (with wrap-around)
    DetectHiddenWindows, on
    WinGet, curtrans, Transparent, A
    if ! curtrans
        curtrans = 255
    newtrans := curtrans - 35
    if newtrans > 0
    {
        WinSet, Transparent, %newtrans%, A
    }
    ;else
    ;{
    ;    WinSet, Transparent, 255, A
    ;    WinSet, Transparent, OFF, A
    ;}
return

#o::  ; Reset Transparency Settings
    WinSet, Transparent, 255, A
    WinSet, Transparent, OFF, A
return

#g::  ; Press Win+G to show the current settings of the window under the mouse.
    MouseGetPos,,, MouseWin
    WinGet, Transparent, Transparent, ahk_id %MouseWin%
    ToolTip Translucency:`t%Transparent%`n
Sleep 2000
ToolTip
return

Color picker

Heel vaak krijg je designs aangeleverd als platte plaatjes zondere verdere annotaties. Als je dan het hele kleurenpalet wil overnemen kan je dat het best op een zo handig mogelijke manier doen, met je muis. Daarom gebruik ik een color picker zoals Just Color Picker waarmee ik met de muis snel een rits kleuren kan picken.

Just Color Picker screenshot

Image batch converter

Ik gebruik IrfanView om plaatjes te openen, maar voor web development is een apart programmaatje handig dat samen met IrfanView wordt geïnstalleerd: IrfanView Thumbnails. Daarmee kan je batch-operaties uitvoeren op grote hoeveelheden plaatjes, zoals herschalen, croppen, kleuren/contrast veranderen, etc. (zie ook onderstaand plaatje). Ik gebruik het niet vaak maar als ik het nodig heb, denk ik aan de vele uren handwerk die het anders zou kosten om alle plaatjes handmatig te bewerken.

IrfanView screenshot 1

IrfanView screenshot 2

Wappalyzer

Wappalyzer analyseert de websites die je bezoekt met behulp van vele herkenningstechnieken aan de kant van de Wappalyzerserver. Je kan Wappalyzer als browserextensie installeren, dan zie je bij elke site die je bezoekt waar die op is gebaseerd; OS, server-side taal, javascript extensies, CMSen, etc. Erg handig om te kunnen herkennen welke techniek waarvoor wordt gebruikt en tot welk soort websites leidt.

Wappalyzer screenshot

Screenshotmanager

Ook een onmisbaar gereedschap als je een layout of iets grafisch bespreekt via internet, is een screenshot manager, die je printscreentoets afvangt. Je kan een selectie maken van je scherm en annotaties maken. Ik gebruik Lightshot, die is beschikbaar voor zowel Windows als Mac, en daarmee kan je je screenshot ook gelijk uploaden naar hun server zodat je direct een url kan doorsturen.

LightShot screenshot

Lossless image compressor

Ik heb kleine tooltjes waarin ik regelmatig plaatjes lossless (zonder kwaliteitsverlies) comprimeer, dat kan veel uitmaken qua bestandsgrootte. Zoals PngOptimizer, een kleine executable waarin ik een lijst png's kan slepen, die direct worden verkleind. Een kleine ingreep die je website's laadtijd aanzienlijk verbetert.

PngOptimizer screenshot

Web Developer Toolbar

Een browserextensie die ik in Chrome gebruik, met een set handige mogelijkheden voor web developers.

Web Developer Toolbar screenshot

Oneindig veel e-mailadressen om te testen

Niet echt een tool maar gewoon een handig weetje: als je verschillende e-mailadressen nodig hebt om te testen (zoals wanneer je werkt aan de gebruikersregistratie op een website), dan kan je je gmail-adres 'oneindig' vaak gebruiken, door puntjes in je adres te zetten. Gmail telt die puntjes namelijk niet mee. Dus als je abcdefgh@gmail.com hebt, ontvang je ook de mails aan a.bcdefgh@gmail.com, ab.c.def.g.h@gmail.com, en alle andere combinaties. Alleen twee puntjes achter elkaar mogen niet. Dus je kan het beste een lang adres gebruiken, dan heb je veel mogelijkheden. Zo kun je makkelijk zelf een hoop testmails ontvangen zonder gedoe.


© 2017 Hacktisch | Sitemap