Snippet for a rather popular requirement. Formatting a date in a nice way, using infamous "time ago" function. This is the basic version which I adapt to fit a specific project. To keep it easily customizable to your needs, I haven't packaged it up. Just pass a date to it, and function will return o...

This time we joined forces with our friends from IT Girls. They are promoting tech among women, and helping them start a career in it. Together, we are organizing a series of meetups and workshops about React. Last night, my colleague Nemanja and myself had a pleasure to give the first talk in the s...

React Router switched to component based routing starting with the version 4. Redirects are now done by rendering a Redirect component, like this:Please note that you can use included withRouter decorator but it can cause update blocking and introduce side effects. This is small subset of it. <Redir...

Short one today. I'm continuing to release small libraries. So let me present react-ratio, another small React component. You probably guessed what it does - creates element with the given aspect ratio. Check the demo or grab the source code

I just released tiny library called has-tabbed. Again, it is a small piece of code I regularly copy from project to project. I always considered it too insignificant for releasing it as a standalone package. When user presses tab key, it adds CSS classBy default --tabbed is used, but it accepts cust...

Marvin just got better! Few days ago I've released version 1.0 of my universal React boilerplate.Also known as Marvin There are some big changes, and I'm pretty happy with it's current state. At least 20 applications were shipped using Marvin. It has about seven hundred stars on GitHub with quite a ...

That's my new year's resolution. Code, write, play and craft more!

This was intended to be a single paragraph in the post I'm still writing. It ended up much longer so I decided to publish it on it's own. So without further due, I present you my programming story. Origins # I got my first pc when I was four, shiny 286 with a color monitor! My father (who knows noth...

Another one-liner I love, that returns body scrollbar width. If scrollbar is not shown it will return zero (including mobile devices). function getScrollbarWidth() { return window.innerWidth - document.documentElement.clientWidth; } Click on the button to try it yourself: Get scrollbar width! docume...

For handling API calls I have a small snippet I'm copying from project to project. I decided to clean it up, make more generic and share it. It is intended to be a starting point, so you might want to customize it to your custom needs. What it does? # It is a simple wrapper around native fetch.If yo...

Two days ago I released two npm packages, window-scroll-manager and react-window-decorators. Scroll manager # Scroll managerPlx uses the same scroll manager so I extracted it to the standalone package. is just a simple wrapper around scroll event, that broadcasts custom window-scroll event once per ...

This is a sad rant :( I love Firefox (and Mozilla too) and have never switched to ChromeAlthough I use Chrome for development. But few days ago I switched to Opera, because new Firefox's (aka Quantum) CPU usage is insane. Disabling extensions didn't help, it just hogs all available resources. MacOS ...

Muffin Man is back! This time with new visual identity. This was long overdue, but new design took me more than I wanted to.Mostly because of the trillion things I'm working on. Now I can get back to writing. Alogn with the new design, some other things got updated too, hopefully making content easi...

Just wanted to share two articles that helped me understand visual design better. I was already aware of the most of these things, but having someone explain it how and why was really helpful. 7 Rules for Creating Gorgeous UI Optical Effects in User Interfaces (for True Nerds) Learn more about desig...

Just a quick proof of concept I made for transitioning between two react components. It animates height (of the parent) and fades components into each other. In componentWillReceiveProps it checks if children prop has changed. When that happens, it will save currently rendered children and the heigh...

Last summer I wrote this post which quickly became my most popular one to day. With webpack 2 and 3 it got outdated, so I decided to write a new one. Before we start # I'll assume you have a basic knowledge of unix terminal, npm and JavaScript. You did some React, but now you want to level up and le...

I kinda got bored by the current design. Rotating SVGs in the header ate too much CPU power (oh the irony). So I decided to change a thing or two. First thing was to get rid of the rotation. Then logo got replaced and I added this marvelous font. Header is a bit smaller now and footer blends more wi...

But I need to regroup and focus on finishing at least one, instead of starting all of the trillion ones and finishing none.

Please note that I'm not using Jekyll anymore, so this post might be outdated.Update, March 2020 # This post is outdated and I simplified my setup a lot. I'll try to cover my current setup in one of the future blog posts. Original post # Few days ago I got a following message on LinkedIn. Hi Stanko!...

On the project I'm currently working on, client's logo is displayed in two versions, black on the white background and vice versa. To make their life easier, so they don't have to upload two assets, I suggested SVG. Alas they can't use SVGs (kinda long story), so I just applied CSS filter: invert(1)...

If you are JavaScript developer and not using nvm you might want to look at it. Node Version Manager is easy way to install, manage and work with multiple node versions. Recently I got npm update notification, that looks something like this: For some reason, when I had node installed through nvm, np...

If you didn't know, in Safari's private mode both localStorage and sessionStorage are not working. To be exact, Safari sets storage's limit to 0, so you can't write anything to it. I keep forgetting this, until QA people report it at some point. So I quickly wrote a small facade for it, which fails ...

When we left jQuery behind and embraced modern JavaScript frameworks, we thought we would never touch DOM directly again. Well that is not entirely true. There are a lot of cases when you need to get some DOM element size. For element's dimensions .offsetWidth and .offsetHeight are great way to do i...

I'm becoming predictable. Again, I haven't found component I like, so I wrote my own. This time, I've build React component for parallax (on scroll) effects. Check the live demo. It is called Plx, it is open source and available on GitHub and npm. What it does # So far in my career, I've built so ma...

I use the same wallpaper for a long time now. But with high resolution displays, wallpaper started to look blurry and noisy, so I stopped using it. But recently, my girlfriend reminded me of this great website which super-scales images using magic. Ok, not magic, but it uses "Deep Convolutional Neur...

On the frontend, we do a lot of animations. Most of the simple animations I create by using CSS transitions. Either I will change class or inline style of the element, and define transitions in CSS file. Easiest way to do this in React is to render initial state, and then when it renders, change the...

I'm happy to announce Marvin, boilerplate for kicking off React/Redux applications. Basically my boilerplate became Work & Co's internal project. It is meant to be a starting point for our React projects. This way faster development is assured along with higher quality code. It is open source, and e...

Update, December 2017 # Check this post for updated, more performant version. I love JavaScript decorators. One that I copy to every React project is scroll decorator. It is fairly simple way of injecting scroll position to react components. This way you can handle scroll using react lifecycle. This...

Friends of mine from the band Time Pills opensourced bunch of their tracks. You can find them on GitHub. They are looking forward to having them remixed by creative people and sharing it with the world Repo contains all of the tracks, stems, presets, loops and even midi files. Be sure to check them ...

Another tech meetup coming up. This time we have three great talks about engineering and project planning. We also have a special guest - IT girls team. The IT Girls team will share their advances in promoting the professional development of women in technology in Serbia. This one will be held on Tu...