Svenv.nl

Nowadays, many webpages are being styled using some kind of preprocessor (like SASS or LESS). This is also the case for HTML, which is usually generated by a CMS or web framework. All these abstractions make us think less about the basics of HTML and CSS and even worse, often result in bad quality code.

I decided to write down some of what I think are best practices (that can be used with or without advanced toolchains) which can make your basic frontend code better.

Update: 5 days after this blog post the jQuery team released version 3.0 which is A+ compatible.

jQuery has been good to us, since it's arrival back in 2006 it helped us by abstracting away many browser incompatibilities. It came with good documentation and made our lives as web developers in general much easier. jQuery provided us with a powerful (Sizzle) selector engine, easy DOM manipulation and a simplified way of working with AJAX. And even if something wasn't in jQuery, its was often available as a plugin. I think it's fair to say that jQuery changed a lot in web development.

Ad blockers are becoming more and more common on desktops and laptops and ever since Apple allowed ad blockers in iOS 9 (at least in Safari) it’s easier than ever to block these annoying ads on all your devices. Still, ad blocking plugins might not be the best way of keeping your browser ad-free.

Apart from providing a more pleasant browsing experience, blocking ads has various other advantages:

The last couple of years radically changed frontend development. Now that 2016 is here, let sum up some of the coolest tools in frontend development today:

If you haven’t switched to ECMAScript 6 (ES6) yet you should do so today. ES6 offers many improvements over traditional JavaScript and will work on all major browsers (once compiled with Babel or Traceur). These improvements allow you to write better and cleaner code. For a nice list of new ES6 featues checkout es6-features.org.

When you want to apply markup to select elements. You might notice that sometimes it isn’t particularly easy to get the results that you want. Selects inputs (especially on Apple devices) don’t seem to work well with CSS and this can make some simple tasks rather difficult.

There are various solutions to this problem and they all seem to use one of these methods:

Bootstrap is one of the most popular frameworks for fronted web development. It allows developers of all skill levels to build a webpage that looks at least adequate in only a small amount of time. However, as the title of this article suggests, I think Bootstrap really sucks and you shouldn't use it. Here's why:

Almost every project utilizing Bootstrap has a terrible front-end code base. Bootstrap relies on utterly complex and meaningless HTML structures for components, almost every template using them becomes bloated and messy. This makes projects hard to maintain and templates not very reusable.

Both Ansible and Docker are great tools, and when you're managing (development) environments you might already have been using one or both. However, if you use only one of these tools (or both separately), you might still be missing out.

Combining these tools and deploying Docker containers using Ansible might utilize the full potential of your development environment.

In an earlier post, I wrote how Varnish can make a huge difference in website performance. Varnish caches content and acts as a proxy (in front of a web server) to serve pages with extreme speed. The downside of Varnish however, is that it doesn't support SSL or TLS connections. Now that security becomes more and more important (not just for the sake over security but also for Google ratings) this is a problem.

(TLDR; put Varnish behind the webserver)

Ubuntu ships with a very nice and simple frontend for iptables called ufw (uncomplicated firewall). Ufw makes it possible to setup a firewall without having to fully understand iptables itself. When you however are using Docker and you want to combine Docker with the ufw service. Things do get complicated.

The docker service talks directly to iptables for networking, basically bypassing everything that’s getting setup in the ufw utility and therefore ignoring the firewall. Additional configuration is required to prevent this behavior. The official Docker documentation however, seems to be incomplete.

Today I needed to change the extension for a batch of files. I didn't wanted to do this manually so I worked out a simple oneliner. Might be useful!

Simply replace OLD and NEW and run this in the directory you want to change files from. This script works recursively so better don't start from "/".

I use markdown in my blogposts to apply some basic formatting to my content. I chose markdown over HTML because it's far more readable and much less cumbersome.

The downside of markdown however, is that because of it's simple nature, sometimes it can be quite limited. I encountered this problem when I needed to apply formatting to an image. A simple CSS class on the image was al I needed but markdown doesn't support this. I fixed this by extending markdown.

When it comes to database administration, HeidiSQL seems to be the best (gui) tool available. Unfortunately, it's only available for Windows and it doesn't look like a cross-platform is coming anytime soon. Fortunately, there are some really good cross-platform alternatives and in this post I will have a quick look at five of them:

MySQL Workbench is a MySQL client maintained by Oracle (which also maintains MySQL server these days). It is the most advanced client I've tested and packs some really nice features like server load statistics. On the downside: it seems to be a bit unstable and occasionally crashed on my system.