Useful Links

I just want to share some tools with you here, which can considerably improve your web design related workflow.
(I’m not affiliated with any of the makers)


‌‌ Bookmarks

  • Can I use – This great website helps a lot when you have to decide which new CSS or JS features you can actually use in the wild. Check it out.
  • Font Awesome Cheatsheet – Looking for a Font Awesome Icon to be used in print design, CSS, Javascript or HTML markup. This link makes it easy.
  • Character Entities Cheatsheet for HTML, CSS and JS – You can't remember them all. A very helpful bookmark.
  • Compresspng – PNGs can become huge in file size but if you need soft clipping or partial transparency (8 bit alpha channel), GIF and JPG are not an option. This online tool does a really great job crunching them.
  • RealFaviconGenerator – generate Favicons and Tiles for all browsers and platforms.
  • Looking for some free-to-use imagery for your Web or FOSS projects? Try Morguefile, PEXELS, Pixabay or Unsplash.
  • Want to host your own web fonts or custom web font kits? Go Fontsquirrel.
  • Build your own custom icon font? Check out fontello.
  • Still struggling with the Bootstrap grid? Shoelace is a great tool to learn it.
  • Looking for a playful way to learn FlexBox and CSS Grid? Thomas Park has both for you: FelxboxFroggy and GridGarden.
     

 

‌‌ Bookmarklets

  • The Bootswatchlet – For Bootstrap based Websites. Shows a Select Box at the top right of the page to select one of the Bootswatch theme styles, which will be applied to your page on the fly.
  • Hyphenator as a Bookmarklet – IE, Edge, Firefox and Safari already have CSS hyphenation support. Only the Blink based browsers (Chrome/Chromium/Opera, ...) still lack it and it's unclear if/when it will see the light of day. If you still want hyphenation, Hyphenator.js currently is the most comprehensive solution. With this bookmarklet you can test it on the fly.
  • Font Dragr – Want to test a specific font on your website? Try the FontDragr bookmarklet. Drag any TTF, OTF or WOFF/2 file into it. Slick thing.
  • Grid Displayer – Should I use 8/4 colums or 7/5? Will 2/8/2 work or do I need 3/6/3? The Grid Displayer bookmarklet can help making such decisions by displaying the Bootstrap (or Foundation) grid columns as an overlay over your web page.

 

 Browser Addons

  • Web Developer Toolbar – If you ask me, a must for every webdesigner and developer. This Browser addon (available for Chrome, Firefox and Opera) is the perfect companion for the browser-integrated Web Devloper tools or Firebug.
  • ColorZilla – Browser Addon for Chome and Firefox to choose colors or pick them directly from a web page. And of course they built the mighty Ultimate CSS3 Gradient Generator, a fantastic online tool to build sophisticated gradients.
  • Context Font for Firefox – get infos about the used font of an element in the browser context menu. Especially useful when you quickly want to see which cool web font that is.
  • Send To My Phone – This browser addon (again Firefox, Chrome and Opera) generates a QR Code you can easily snap with your mobile to check how the current webpage is rendering there.

 

Applications

  • Atom.io – GitHub’s awesome Open Source (MIT license) code editor. Admittedly, there are faster loading ones but only few as slick, beautiful and powerful as this one. (available for Win/Mac/Linux)