Ever wished you chose a slightly different data structure for your structured content? Let's learn how to fix it!
TypeScript is fantastic, but without Json Decoders, your code (probably) isn't type safe.
Style Dictionary is one of the very best tools I've ever encountered. It's powerful, fun, and great for managing your design tokens!
Learn how to easily build your own Tool Plugins to customize Sanity.
Everyone that works with development of web pages has to deal with universal design. Accessibility should be considered from the start and it is therefore smart to test with a screen reader during the development. It is often more costly to make an existing project accessible, rather than just doing it right the first time. This fall I have tried to learn how to use VoiceOver on Mac. I want to share with you the most essential parts I have learned and I hope this introduction will help you get started with VoiceOver.
Have you ever inspected an object in your browser's console and stumbled upon the field [[Prototype]] or __proto__. Or maybe you have seen someone use the mystical prototype field on classes, such as String.prototype. Ever wondered what kind of sorcery this prototype is? Great! ️This article will hopefully make things a bit clearer, and make you an advanced prototype wizard. 🧙♂️
I work on the internal applications in Bekk, including a front page that shows key information about employees and the company. One of the sections shows upcoming birthdays, so you can congratulate your colleagues on their big day. But something was missing. You know, that little extra that tends to light up people’s faces. How about some confetti bursting out the top of your head? 🎉
Ever wanted to implement a search as-you-type? What about transforming something while the user is scrolling. Just add an event listener for this works, but it can really impact the browser performance. Fetching from the server on every keypress isn't just unnecessary, it may also be hard on your server. This can be solved by two functions, debounce and throttle. Let's have a look at the difference between the two and how they can be implemented
After years of disagreements about the long awaited next version of ECMAScript, on December 3, 2009, the 5th edition was finally released. A full 10 years after the previous version. With it came a lot of security improvements, one of which is known as "strict mode".
Wintertime has always struck me as somewhat offset from the holiday season. The weather gets cold and dark, but snow seems to be in its primetime around January and February, at least here in Oslo. As a result, people around the world may have to resort to simply dreaming of a white Christmas. But regardless of where you live and the level of crystalline precipitation thereabouts, we have the technology to make it snow right now! In your browser at least.
Have you ever struggled with CSS? Have you found it hard to structure a large CSS codebase, even when using methodologies like BEM or OOCSS? Have you tried using CSS-in-JS solutions, but struggled with the setup or lack of typing? Or maybe you've used Tailwind, but find the initial bundle size intimidating, or the tooling to reduce it too complex? Stitches is a new CSS-in-JS library from Modulz and Christian Alfoni, creator of Cerebral and Overmind. It promises "Near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience." We'll take a look at what this means, and how Stitches compares to existing CSS-in-JS solutions like Styled Components, Emotion and Material UI.
Have you ever wanted to add extra functionality to strings? With tagged template literals you can build useful templates, add logic, or write different languages inside strings. How can that be useful, and how does it even work? Dive into how tagged template literals let us build enhanced strings!
As a developer, you have surely wondered if the web can do full 3D beyond tweaking the z-index and fiddling with CSS 3D transforms. WebGL is the API for making such fully customizable visualizations in all dimensions. We can use this together with de facto standard framework three.js to unlock this mysterious domain.
Maybe you are burning inside with an idea of an NPM package that could revolutionize the world? Or maybe you just want to see what it's all about? This article will be a simple tutorial on how you can get started with creating NPM packages - which I, personally, found to be a quite useful skill to have!
The new version of ECMAScript, ES2021 is expected to be released in June 2021. What new features can we expect from the new release? This article covers some of the features in the upcoming release, and how we can put them to use.
Although I've been a professional developer for over seven years, there are still many programming terms I've yet to fully understand. I've heard the term "closures" many times, but I never really bothered to dive into the meaning of it. Maybe this is because I had a decent idea of what it was about, and I knew pretty well how to use it? It's about time I take the leap to figure this out, and finally get some closure.
The world of front end frameworks is always evolving. For years it was dominated by jQuery and Backbone, but these days we hear most talk about React and Vue. However, there is another framework that hasn't been talked about so much, namely Svelte. Although this framework is actually three years old, it had a rebirth in April this year with the release of its third major version.
Maybe you’ve heard of Fetch? The promise-based Web API for making network requests in the browser, and a favourite amongst developers. If you paste fetch(‘https://www.google.com’) into the Chrome DevTools console and run it you can take a closer look at how it works. Sadly, you can’t do the same in Internet Explorer. It won’t work. That is because Internet Explorer has not implemented support for Fetch. Or Promise for that matter.
I like TypeScript. I also like Magic the Gathering. What if we combine them; can the magical domain of planeswalkers and spells help us understand the awesome but advanced type system of TypeScript?
I used to think that feature switches were clunky if-statements in my code that would require re-compilation or at least restart of my app. Launch Darkly proved me totally wrong, swinging me from cynical scepticism to deep love!
Modern frameworks are easy to learn. From zero web experience, they help you get productive in a matter of weeks. But for me, the web remained a mystery until I taught myself the very basics.
Let us look at what it takes to create our own SPA
This year the 10th version of the ECMAScript Language Specification was released, often referred to simply as ES2019. Let’s take a closer look at what new features we got and how we can put them to use.
I recently became a frontend developer. Again. The last time I was, was back in 2014. And it's pretty much like riding a bike: if you haven't done it in 5 years, you're going to feel pretty damn wobbly. Especially if the bikes started using create-react-app and Sagas in the meantime. So, with all the wisdom of a child who just fell of his bike, I'm going to try to share a few insights on the state of ~biking~ frontend in 2019!
Do you wake up at night fearing your app's dependencies might have scary vulnerabilities?
Knowing more than one way to solve a given problem can help you write more readable code. Let's look at three different ways to remove duplicates elements from an array.
Quick tips on all you can do with Promises. Because my tips don't lie!
Yeah. I know! Me too. I was also shocked when hearing this for the first time.
Imagine pulling up a search on Google for something web tech related. Let's say you look up how the text-align property works in CSS. The two first hits are from w3schools.com. A little further down we find Mozilla Developer Network's (or MDN) article on the subject. MDN is obviously run by the altruistic, open-web freedom fighters at Mozilla, but what's the deal with w3schools, and why does some people dislike it so much?
There are books with entire chapters dedicated to this topic, but this article will give you the crash course you might actually remember.
Why is Console.log everybody's favourite?
Destructuring your structures
How we bundle our code for development and production
All work and no play makes Jack a dull boy
Let your tools do the dirty work
Have you ever wondered what the real difference is between == and === ?
What is the truth?
How to rock and roll with Optional Chaining
Did you know that you can reload the current webpage in over 500 different ways?
Let's clear it up, once and for all.