bitstorm.org

Weblog by Edwin Martin about frontend webdevelopment and related topics

Should frontend web developers worry about security? A backend developer once told me that as a frontend developer I didn’t have to worry about security. All security would be handled on the backend. He did have a point. Topics such as injection, path traversal and DDoS attacks take place on the backend. If you look at the OWASP Top 10 Web Application Security Risks, you only see server side vulnerabilities. And also, a browser cannot be trusted. Someone’s computer may have been compromised or …

Developers often complain when they have to support time zones or daylight saving time. The time they want to show differs by one (or more) hours from the time in the data. Sometimes they solve this by adding the difference themselves, not knowing that this only made the problem worse and the time after the next summer-winter time change is probably incorrect again. While the solution is very simple. Always save time as GMT, so without time zone offset and without daylight saving time. You can …

Machine learning is a subfield of artificial intelligence that focuses on developing algorithms that are able to automatically learn and improve based on data. This technology can help front-end web developers by providing them with powerful tools and techniques to solve complex problems and improve and accelerate their work. There are several ways machine learning can help front-end developers. For example, machine learning algorithms can be used to analyze and predict data, which can help opt…

This summer, I’ve been working on updating my Game of Life site. I looked at several JavaScript frameworks, but was not satisfied with the performance of any of them. I could’ve used my own miq lilbrary, but that mimicks the jQuery API too much. When you write in native DOM, you probably use document.querySelectorAll(selector) a lot. After a while, you probably write a helper function like this: const $ = (selector, dom) => Array.from((dom || document).querySelectorAll(sele…

In HTML and JavaScript, you can easily apply some styling with the style attribute or property. But if you just want to pass a value, like a color, style falls short. Fortunately, there is a solution for this, which has now been adopted by all modern browsers: CSS Custom Properties for Cascading Variables, or CSS variables for short. How do CSS variables work? Let’s start with an example in CSS: :root { --warning-color: orange; } .warning { color: var(--warning-color, red); border: 1px s…

Before the year 2000, people who made websites did it all: designing, programming, deployment, SEO et cetera. It didn’t take long to figure out that programmers weren’t great designers and designers weren’t great programmers. Some people where great at both, but they where rare and a statistical coincidence. So the design and programming of websites where assigned to different roles. Around 2007 a new role emerged: the front-end developer. For a long time, front-end was thought of as easy, some…

With HTML, CSS and JavaScript, it’s not prescribed how to format your code. Everything on one line or not, lots of spaces, tabs or everything packed together, for the computer it doesn’t really matter. The result is that everybody will develop its own style. On itself, that isn’t bad, but when multiple developers with their own styles will work on the same code, it will become a bit harder. With different styles, the code will become harder to read and changes to the style will pollute the vers…

A while ago I was working on several websites in a Vagrant container. The problem was that we couldn’t test the sites on mobile devices. The IP address of the Vagrant box was known inside my computer, but not outside, on other devices. I could use a proxy like Squid, but it was too big, had to be configured and couldn’t be installed with npm, like the other tools. I wrote a simple tool in Node to provide the necessary functionality. Now, I have complete rewritten the tool, named it testproxy an…

A nice way to let visitors of your website know about your twitter feed, is to show your latest tweet. Fortunately, Twitter provides several means to do this. One is the Twitter Widget. Aside from changing some colours, you can’t change much of the layout. The second is the Twitter REST API, which gives you a lot of control, but you need a script on the server side. I don’t want to use a server side script, but I do want full control. So none of Twitter’s options are suitable for me. So I creat…

Today I released miq, a tiny jQuery like library. Since the first release of jQuery a lot has changed: lots of array functions, promises, querySelectorAll, CSS transformations… and jQuery can only partially use them because the makers want to keep it backwards compatible. I created miq to combine the power of jQuery with modern JavaScript. You might not need jQuery A couple of years ago an article appeared that showed how to do the usual operations in plain vanilla JavaScript. It was an eye ope…