This article describes how to give monochrome SVG icons different colors with CSS and how to apply some effects.
Why do you want to use SVG icons? SVG is an ideal format for stylized icons.
SVG (Scalable Vector Graphics) is made out of vectors which makes them very small (as in file size) and are scalable,
which makes them look sharp even at high resolutions.
Styling SVG icons
You can use SVG icons in an img tag or as a background image.
In this article, however, we will use mask-image,
which h…
If you use a lot of SVG icons on your website, it is better for the performance of the site to merge them into one file:
the SVG sprite.
You can do this with the powerful svg-sprite package by Joschi Kuphal.
See svg-sprite
Install svg-sprite with npm:
npm install --save-dev svg-sprite
Next, we put all configuration data in a configuration file called svg-sprite.config.json:
{
"path": "out",
"mode": {
"view": {
"dest": "assets/icons",
"sprite": "sprite.s…
Take this tweet from Theo Browne, with 140k followers.
Math.max() is true and Math.min()
In the next tweet he explains it, but his “Javascript was a mistake” still stands.
It’s not about Theo, but about the general sentiment that JavaScript is a terrible language.
If it’s not the social media posts about JavaScript, it’s the comments below them
that are shitting on JavaScript.
Is JavaScript really that bad? Let’s investigate this.
I’ve analysed many posts claiming JavaScript is a bad langua…
Released today… BlendBlastCSS, the revolutionary new visual CSS color framework.
Prepare to have your world ROCKED and your screens SIZZLED with the most electrifying CSS color framework to
ever grace the digital universe!
Say goodbye to boring old RGB and HEX codes.
Who knows which colors #d2691e and rgb(153, 50, 204) are? Exactly: nobody!
We’re taking CSS color to the NEXT LEVEL
with our mind-bending, eye-popping, jaw-dropping CSS color system: BlendBlastCSS.
BlendBlastCSS’s color system is s…
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…
Web components is a W3C web standard that allows you, simply put, to create your own HTML tags.
Adding a map to your web page can be as simple as adding this tag:
<g-map latitude="52.3812258" longitude="4.9001255"></g-map>
With web components, you can work in a component-based way without needing a JavaScript framework like Angular, React, or Vue. However, the tag needs to be made available on the page using JavaScript. We’ll come back to this later.
According to Wikipedia, web components…
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…