The unique position of Vite in our ecosystem
Many meta frameworks are now relying on Vite as their build tool. Let's explore what this means in comparison to frameworks that aren't built this way.
Matija Marohnić's blog
A blog about frontend and DX development
Latest posts
Cypress vs. Playwright: end-to-end testing showdown
Like Cypress, Playwright is also a framework for end-to-end testing. Find out what are some of the differences and write your first Playwright test!
What Tailwind taught me about the separation of concerns
Despite trying out numerous methods of writing CSS, I never felt that my code was resilient. Utility-first CSS helped me rethink separation of concerns.
Make your JavaScript project accessible to newcomers
Introduction to the concept of developer experience and advice on why and how to improve it in JavaScript projects.
Checking your static site for dead URLs
One of the challenges of maintaining a static site is continuously ensuring that links work, both local and external.
Managing complex tasks with gulp v4
Make your development workflow more readable by replacing long npm scripts with gulp tasks elegantly composed using new API in gulp v4.
Migrating from Gatsby to Next.js
My experience of rewriting my Gatsby blog to Next.js, what went well, and what didn’t.
Taking Control of Your Git History: The Importance of Git History
In order to learn how to take care of our Git history, we first need to understand its short and long term value.
Taking Control of Your Git History: Staging Accurately
In order to record meaningful sets of changes, we need to learn how to select exactly what we want through partial staging and unstaging.
Taking Control of Your Git History: Editing History
When we aren't happy how we recorded our changes, we can alter that piece of history as much as we want using various techniques.
Taking Control of Your Git History: Resolving Conflicts
Git conflicts are a dreaded topic, but the discomfort usually stems from the fact that they are unexpected. So let's talk about them here, very expectedly.
A Built-in Alternative to Redux with React Context and Hooks
Redux was created when React Context was still experimental, learn how to imitate Redux using modern React API, based on a few posts by Kent C. Dodds.
Mocking with Jest: Spying on Functions and Changing Implementation
Improve your unit testing experience by using Jest to record calls of particular methods and even changing their implementation as needed.
Mocking with Jest: Taking Advantage of the Module System
During testing you might not want certain modules to behave as usual, in that case you can use Jest to reimplement them!
Integrating and Enforcing Prettier & ESLint
There is an overlap in functionality between ESLint and Prettier. Find out how to resolve this conflict and use ESLint to enforce Prettier in your codebase.
Bridging the Gap Between CSS and JavaScript: CSS Modules, PostCSS and the Future of CSS
Exploring tools for "plain ol' CSS" by refactoring the Photo component from the example in the CSS-in-JS article, the previous part of this series.
Bridging the Gap Between CSS and JavaScript: CSS-in-JS
Digging into the concept of CSS-in-JS. If you're already acquainted with this concept, you might still enjoy a stroll through the philosohpy of this approach.
Why I Migrated Away from Medium
My blog used to be on Medium, but it had some missing features and odd behaviors that eventually drove me away.
On Code Folding and Minimaps
Frequent use of code folding and the minimap feature might indicate that the codebase should be restructured in a way that doesn't require hiding code.
The Nuances of React Transition Group
react-transition-group is a library intended to be combined with CSS transitions to animate elements in and out of the DOM.
Writing codemods with jscodeshfit
Codemods are really useful for automatically refactoring large amounts of code in a similar way, yet there aren't many resources on this topic.
Custom Project-Based ESLint Rules
The best code rules are not written, they are enforced. Find out how to create your own ESLint rules using an existing rule and syntax tree selectors.
Don't Split render() into Functions
Splitting large JSX expressions into functions affects readability in the sense that the reader has to look elsewhere in order to understand the expression.
dependencies or devDependencies
The question of where to save a dependency is clear when building a library, but in application codebases it's usually just a convention.
Testing with AVA: React Components
Building and testing the UI using Enzyme, Test Utilities, Sinon.JS and redux-mock-store.
Testing with AVA: Common Redux Patterns
Testing Redux actions, reducers, and selectors, and configuring the Redux store.
Testing with AVA: Getting Started
Setting up our todo application using Create React App, configuring AVA, and running our first test.
Downvoting Comments on YouTube Does Nothing
While watching a video about the terrifying comments that women on YouTube have to endure daily, the downvoting feature caught my attention.
Intro to ESLint (ft. Daft Punk)
Many view ESLint as a nuissance, but if used correctly it can improve the quality of your project and even teach you JavaScript.
Setting Up an End-to-End Testing Workflow with Gulp, Mocha, and WebdriverIO
Manual testing is usually slow, tedious and error-prone, we need a way to automate testing across different browsers and platforms.
CSS preprocessing drama
Lately there has been a lot of talk on Twitter about Sass, PostCSS, cssnext etc. How do all of these tools work together?
Getting the most out of Bower
After installing a Bower component there is still some manual linking to do, which can be tedious depending on the number of assets. Let's automate this!
Simple layouting with Gulp
Templating languages are really useful for generating HTML, learn how to use a simple Gulp plugin to start building a website.
CSS pre- vs. post-processing
Adding vendor prefixes to our CSS is repetitive, so we started using Sass mixins, but now we can use Autoprefixer instead.