When an HTML element becomes too narrow, its content starts to wrap into multiple lines. This is intended behavior and works well in many cases. However, for short text, it doesn't look great when the last word or icon drops to the next line, becoming an orphan. For example, you might see something like this: Click here for more info It...
.content p code { display: block; padding: 5rem 12rem; margin-top: 10rem; border: 1px solid var(--neutral-100); background: var(--neutral-50); color: var(--neutral-600); border-radius: 2rem; width: fit-content; position: relative; } .copy-button { position: absolute; left: 100%; top: 50%; transform: translateY(-50%); ...
If you encountered a case where you wanted to run multiple commands in parallel, the usual suggestion is to use the shell's & operator to send commands to the background. This approach kind of works, but it has its quirks. I often ended up with a process hanging in the background, multiple outputs being mangled, or the output of some commands...
HTML inert is a relatively new property, but it is supported in all major browsers since April this year. When you set inert on an element, the browser will ignore all user events on it, including tabbing into elements. It will also hide it from screen readers. I like to think of it as a "reversed focus trap". But we can use it to create focus...
It is incredibly hard to take a good photo of these. Colors have metallic reflection which I wasn’t able to capture, but it is very prominent in person. They are plotted using five different color markers. I framed them separately and plan to take a better photo once they are on the wall. Code is available on my GitHub.
What if I told you that we can make a timer without using setTimeout, setInterval or requestAnimationFrame? JavaScript is still necessary, but we can create the timer just by toggling some CSS classes. While I was working on an autoplay feature for a carousel, I thought to myself - CSS animations are kinda like timers. They have animationstart...
I started drawing these little houses a while ago, but never finished the project. Meanwhile, I decided to participate in Plot Party postcard exchange. So, I came back to my houses and used them to generate little towns as postcards. At the moment, they are on their way to five different countries, and I'll probably plot a few more.
I recently learned about the pseudo CSS class :placeholder-shown. Obviously, it is a class that is added only when input placeholder is shown. But what that also means is that the input is empty: /* Input is empty */ input:placeholder-shown By negating it with :not() we can detect if the input has value: /* Input has value */...
Recently, a colleague asked me if there is a way to customize an input caret using CSS. I knew you could change the color of it, but it got me thinking if we could completely replace it. The problem seemed interesting to solve. But before we jump into the implementation, allow me to show you what I built in the end. See the Pen Custom...
Some operating systems and browsers are not showing scrollbars by default. That often results in developers forgetting about these pesky gray bars and the issues they can cause. I'll give you two quick examples: When setting overflow: hidden on the body element, if there was a scrollbar visible, content will jump a little as it now has more...
To celebrate Work&Co's tenth anniversary, I'm excited to share this two-piece series. Both drawings are 3d scenes, hatched by my vector raytracer, Rayven, to get a hand drawn feel.
The second plot for Work&Co's anniversary, and my personal favorite. The bumpy sphere is an allusion to the challenging period we've all experienced due to COVID-19.
When writing Node.js scripts, I often want to output information to the console in different colors. Usually, it is to get the user's attention and signalize success or error. I could reach for a battle-tested library like Chalk, but I usually don't need all of its features. Instead, I have a tiny script I copy from project to project: const...
I would like to give you a preview of my new project that I'm really excited about - Rayven. It renders 3D scenes as if they were line-hatched by hand: I've had this idea for a while and after researching, I found three projects that became my inspiration: Michael Fogleman's ln, Kushiro's Hatch Lines Shader and Piter Pasma's Rayhatching....
This is an interactive article. To fully experience it, you'll need to turn JavaScript on. Today, I'll take you through the process I came up with in regard to transforming an SVG path into a vector rope drawing. We'll learn how to turn the path on the left into the rope on the right: The problem popped up on a project my colleagues were...
I was tasked with getting lines of text from an element many times. Usually it was to truncate the text (Before line-clamp was a thing) or to animate the text line by line. It sounds easy, but I have encountered many edge cases in practice. After trying out multiple approaches, I finally have a solution I'm satisfied with, although it has some...
It all started with the code challenge in our office. The weekly theme was waves, and I tried to think outside of the box. After dropping a few ideas, I remembered the waves people do on stadiums (According to Wikipedia these are known as Mexican or stadium waves) . So I made waves using CSS only (code is available on...
JavaScript part is actually pretty easy, it is more about preparing the video file correctly. If you just want the code for converting videos using ffmpeg, jump to the last section. Otherwise, let's start scrolling down to see these two videos scrubbing: Every 5 frames Every 100...
I'll be honest, this one came out as an accident. I forgot to revert some old code and it just happened. To me, it resembles atmosphere or a cell. My favorite from the series so far. It is plotted with pens of two different width, which gives it more depth, especially when you see it in person.
The second plot from the series. Polygons instead of the circle, to get this cube like shape.
As someone who maintains a couple of npm packages, I got frustrated by all of the notifications about security issues in my dev dependencies. In 99.99% I wasn't even using the vulnerable code, and usually it would be buried deep in the dependency tree. Therefore, I decided to revisit and simplify my workflow. These were the main things I wanted...
I started this blog in 2016. More than six years now. But if you check my stats page, you'll see that the number of posts started declining fairly quickly, since 2018. I finally decided to stop this downward trend and to remember why I started writing in the first place. Why I started writing # For the joy of small projects. Basically I was just...
End of an era. I started my career when IE6 (First time I wrote about IE6 was back in 2009.) was a thing. And yesterday, Microsoft announced they are retiring IE11. With that, no version of Internet Explorer is longer supported. Over the years it seemed that we are doomed to support IE forever. We even planned celebrating when we finally...
While making a simple SVG chart, I realized I would like to have non-scaling circles for data points. Unfortunately, SVG doesn't support it out of the box. If you are eager to see the result, jump to the examples below or play with the code on Codepen. Non-scaling stroke example # SVG does support non-scaling stroke width by setting vector-effect...
I'm super late with this post, but again, better late than never. I just couldn't find the inspiration and drive for writing last year. Generally, I lacked motivation and wasn't really productive. Generative Art # As for my art, 2021 wasn't as fruitful as the year before, but I did finish a couple of drawings. I'm still very much into it and...
This post was originally written for our internal technology newsletter at Work & Co. It is a little bit adapted for web, but the content is almost identical. About a year ago I made this plot. It is called "Krypton" (Named by a dear friend and ex-colleague) , and I'll try to break down how it was made. The wonderful thing about...
This is going to be a very straight forward post. Just a list of JavaScript libraries I use in creating my generative art. And I really mean I use (and abuse) them. All of them are used in multiple of my drawings. I'll include couple of photos under the respective libraries. I finally settled with these libraries after trying several other...
I still think it is not perfect, but I stopped here. I may revisit the algorithm and generate a different drawing in the future.
If you just want the see the submissions, jump to the Weekly Code Challege website. But please bare in mind that the most of these were created in a couple of hours. This post is long overdue. Earlier this year, I came with an idea to organize a weekly code challenge in our Belgrade office. With the whole COVID situation going on, I hoped it...
If you are only interested in the wiring diagram, jump directly to the wiring section. HyperX's Cloud II headphones come with a USB sound card, which looks like this: It is a convenient little dongle. I had it plugged in into the front USB port, and I bumped into it, bending the connector for ninety degrees. Naturally, it stopped working. Good...
Recently I implemented a fly out menu in React, and stumbled on the following problem - I had to catch a blur event on the menu, but it had multiple focusable children. When user is tabbing between these menu items, blur event is triggered every time on the parent, followed by the focus event on the next item. As I wanted to close the menu on...
Shading was done by generating (a lot of) dots. Then I used saxi's option to connect nearby dots in order to create these squiggly lines.
I wrote the blog post about the creation process. Fun fact, this plot got sold even before I plotted it.
You can see some ellipses are not being cropped properly. I love how it turned out so I kept it like this.
Everything is actually 2D, but made to look like 3D. Same algorithm as "Pokeball".
It took me some time to get the color blending just right. Because of so many colors, it was impossible to plot these. In the end I did five very tall prints. Be sure to check out the last photo to see all prints in one place.
2020 was a hard one. I started writing this post in December, but I couldn't make myself finish it. The whole situation with COVID made me anxious at times and I didn't really have motivation for my side projects including this blog. But I won't focus on bad things, everyone had a tough year, so let's try to stay positive. Generative Art # I had...
Two separate plots, and I'm super happy how I managed to align them. On the last image, you can see the lines I drew to help me align it. My wife insisted we keep this one. Pigma Micron pens are indestructible, just saying.
It ended up being vertically symmetrical because I forgot to change parameters for the bottom half.
Jump to content Art Blog Projects About Stats...
Back to Art The best photo I had is this one that I took while plotting was still in progress.Created:November 2020Size:42x23cmPaper:Fabriano Bristol 250gsmPens:Pigma Micron, Sakura Gelly Rolls
I already built a mount for my Raspberry Pi camera, but it was 3d printed. Meaning that it has one fixed position. I used it a couple of times, but I wasn't super satisfied. Then I stumbled on these images, and thought it was a great idea to use Lego to build a new, more versatile mount. A friend of mine had a bunch of spare Legos laying around,...
For multiple projects, I had to add a simple video component with play/pause button (Always include at least basic video controls for accessibility) and a buffering loader. It is not hard to detect the buffering state, but it can be tricky to get everything right. Therefore, I created a simple component which I now copy from project to project...
One plot ended up being smaller because I screwed up cutting it.
It was generated using the same algorithm as the previous drawing. Metallic pens give it a really nice effect in person.
Be sure t o check the timelapse in the gallery below.
It is funny, I would never say I would be sad to deprecate a software project. Especially a project boilerplate. But I just merged the deprecation notice, and I do feel down a little. I created Marvin about four years ago for my own needs. Since then it grew, became internal project at Work&Co (Fun fact, our website is made on top of Marvin.)...
A friend of mine asked for a color version of Black Holes. Again, it is so hard to take a good photo of these colors. They are nicer and more vivid in person.
You can play with algorithm here and download images. It took me ages to find appropriate pens to plot this one. Also check the blog post about how it is made. On the images below you can see two different drawings.
Generative process allows me to work with huge number of elements and tiny details. These details are sometimes impossible to plot, as they would just get lost in the process. That's why I love large format prints - they allow tiny details to be seen and shine through.
Plotted in two takes on a single paper. White could be a little stronger, I still regret not doing two passes for each layer.
Earlier today I removed Google Analytics script from my website. Long time ago I switched to self hosted fonts instead of Google Fonts. That means, as of today, my blog is completely Google free. Google Analytics is a great product, but I probably used up to five percent of it's features. Still I had a fear of missing out. That's why I delayed...
I always liked the flow on this one, it feels natural.
Real elevation data but with applied exponential scale to emphasize the relief. I made three plots, all three a little bit different. They ended up in three different countries.
Mobile iOS Safari doesn't display preview thumbnail until you tap on the video. My go-to solution was to define a poster attribute and move on. But today I learned I could use something called Media Fragments. Media Fragments specify a way of sharing parts of audio and video files by simply adding url params. Browser support varies, but...
It has been almost two months since my last post because I was super busy with my new passion, generative art (For now, you can see my work on my Instagram profile. Expect new posts about my process and tools in the near future.) . I also got my hands on the brilliant little machine by Evil Mad Scientist, AxiDraw plotter, and it is the best...
My first attempt at real 3D vector composition. The gap was initially added to hide the border between two papers, but it grew on me.
The base is white Bristol and the upper layer is tracing paper. I really like how it turned out, transparency gives it a nice sense of depth. But tracing paper is incredibly hard to work with, it has mind of it's own. Once it gets framed, I hope glass will press it evenly against the base layer.
On the second to last image, you can see one of my first attempts to simulate tearing. If I ever return to this algorithm, I'll make a new composition wider.
Another Zappa, again generated by my Vertigo project. I still have this one lying around, I have to finally frame it.
I love the patterns that emerged from polygon splitting, it is a perfect contrast with the geometrical base of the drawing. My plotter wasn't calibrated properly, resulting in some lines not being perfectly aligned, but to me, it just gave even more soul to the drawing.
Check more drawings on the mini site. I also did a write up on how it is made. I really need to plot a couple more of these.
Image was generated using Vertigo, a small vector shader tool I created. It is open source and you can try it live on it's website.
Today. I have a very personal project to share with you all. Letters from Sarajevo is a web adaptation of the book of the same name. My brother wrote the book using authentic letters our father sent us while being stuck in Sarajevo during the war in the nineties. For more information about the book, please check about page. Illustrations # In the...
I'm all about generative art these days. Today, I present you Metaballs, my latest creation. It is one of those projects that I visualized in my head and managed to pull it off exactly how I imagined it. Somehow I came up with an idea to generate spheres, smoothly merge them to get organic looking shapes, which then I would slice up and render...
Recently I started playing with generative art. I'm new to the whole thing and I'm absolutely enjoying it. Today I want to show you the first generative art project I'm satisfied with. It is called Neon and you can check it out here or by clicking on the image below. I will try to explain in detail how Neon works, however this won't be a...
Last time I wrote one of these recaps was in 2016. Not sure why I waited three years to write another, and from now on I'll try to do these annually. 2019 was a good year for me, and I want to highlight a couple of things. Blog # I'm really proud of my blog. And judging by the analytics, people are actually reading it - this year I had over 100k...
These days I'm playing with three.js again. I'm not an expert but I enjoy playing with graphics. Conveniently, a friend of mine sent me this Dribble, and I thought it would be a perfect exercise to try making it. I still haven't done it, but I did some exploration on how to built it. My plan was to draw the parallaxing layers as vectors, import...
Another Catalina rant, this time about Ruby. As far as I know, on MacOS, it is advisable to leave system Ruby version to the OS (For example users don't have write permission on the system's gems folder.) , and install a separate version for development. I had one installed via Homebrew, and never had any issues with it. But after Catalina...
Yesterday I updated my work laptop to MacOS Catalina. (To be able to use AirPods Pro with it :/) Apple made a change and switched the default shell to zsh (instead of bash). From what I have read, the reason is a licensing issue. Bash is not gone and everything will work like it used to. But every time you open a terminal, you will be greeted...
I love easter eggs in software. You may have noticed the keyboard image in the background of my blog. This thing on the right side of the screen. Those with a keen eye figured out it highlights keys as you are typing. It has been here for some time now, and on my colleague's request, I'll explain how it works. Let's break it down. Vector image #...
Short Firefox tip to disable Cmd + MouseWheel zoom. There is a weird interaction with it. Therefore I decided to turn it off completely (I never used it anyway). When I scroll a page using a trackpad and start switching tabs via Cmd + Tab, inertia scrolling would still be active, and the page I switched to gets zoomed in a lot (as I'm still...
Two years ago I wrote this rant. Firefox had a problem on MacOS on scaled resolutions, resulting in insanely high CPU usage and battery drain. Issue is finally fixed, and I'm happy to say I'm using it again. The fix is expected to land in the stable version in late October 2019, with the release of Firefox 70. Meanwhile you can download Firefox...
I'm using Staticman as a comment system on this blog. Unfortunately public instance can't handle all of the requests coming in. That resulted in some readers being unable to post a comment. That is why I decided to run my own instance on Heroku. It was easy to find this great article describing the process thoroughly. But after following it and...
Today I want to share three bookmarklets I love to use in development. You can add them to your browser, by creating a new bookmark and entering bookmarklet code instead of URL. Clicking on a bookmarklet (I usually keep them in the bookmarks bar to make them easier to find.) , will run the code snippet on the page you are currently on. For each...
Two weeks ago I got a pair of cheap Xiaomi's wireless earphones. This was an experiment to see if I like true wireless concept before buying something more expensive. Sound # Most of the reviews out there are saying AirDots are lacking bass, but that sound is good overall. Long story short - sound is bad. I don't like strong bass, but these...
I haven't published anything in a while, which is a shame because I have a couple of good things to write about. That said, today's post is going to be a short one. I wasn't sure if theme is interesting enough. But in the end I decided to write it anyway. And it will help me get back in the writing shape. While setting up a new project on...
This time I want to share a small range slider (progress bar) I built. Check the demo. Code and documentation are available here. Same story again, on a React project we needed a media progress bar, and I ended up writing one myself. Why I didn't like anything I found? Well, everything I tried was missing one of the things we considered mandatory...
Let me start with a little disclaimer. Just because you can, doesn't mean you should use it. Hiding scrollbars can be bad for accessibility and user experience. But there are rare cases where it makes sense, usually when you have scrolling effects or when modal is opened. So use it wisely. Check the demo. And find the cross browser code below:...
Exactly ten years ago, on my my friend's blog I published a blog post about Internet Explorer 6 CSS hacks. I remembered it recently, and thought it would be really cool if I republished that same post, on it's 10th anniversary. I added comments about the hacks from today's perspective to give you some context. Cited parts are from the original...
Few days ago, I was chatting with our design team, and we were wondering how hard would be to create a fake audio spectrum (that mimics human speech) and visualize it. I immediately said it should be easy, and that I will play with it over the weekend. Of course, I didn't wait for the weekend, but wrote it the same evening. It was fairly...
I want to brag a little - my npm packages have been downloaded more than 1 million times (Stats are coming from npm-stat.com.) this year! And I finally got a real domain: https://muffinman.io/ I've been quiet for the last couple of months. Mostly because I was busy with other things, both work and personal. But I do have a few small side...
I love my Nintendo Switch (I have a huge draft about Switch, and how it have put the fun back in gaming for me. It takes me forever to publish it.) Unfortunately, tonight I noticed that one of my Joy-Cons has weird lumps on it. (This is the image from the internet, not mine.) On multiple forum threads, people suggested using hair dryer to fix...
This is something I keep rediscovering, because I keep forgetting it. JSON.stringify will omit all object attributes that are undefined. In most cases, it doesn't really matter, because if we parse that string back, and try to access that attribute - it will be undefined by design. Check the example below: const user = { name: 'Stanko', phone:...
I want to share a hack (or a trick if you prefer) my colleague Marko showed me today. What is the problem? We want our flex items to be equally distanced between each other and from the parent's edge. Unforunately space-evenly (I wasn't aware of this property, thanks Marc for mentioning it in the comment below.) is not supported in IE and Edge....
Yesterday, one of my colleagues shared UI Movement website. It resulted in me playing with random animations trying to replicate mockups I liked. Here are the results: See the Pen Fancy input, CSS animation by Stanko (@stanko) on CodePen. See the Pen Kick input, SVG animation by Stanko (@stanko) on CodePen.
This happened to me couple of times - borders would just randomly disappear in Chrome. All other browsers render them normally, but they just vanish in Chrome, on some screen sizes. Resizing helps sometimes, but I never was able to catch real pattern for reproducing. If this ever happens to you, there is a (hacky) solution. Change border width...
TL;DR # If you just want to add git version tag after npm publish add this to your package.json: "postpublish" : "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags", I advise you to read rest of the post to see what...
This is a weird one, and not something you will stumble into every day. But it is a bug nonetheless. On iOS safari, if you use window.scrollTo(0, y) and y is larger than document's maximum scroll, any immediate call to getBoundingClientRect will return incorrect top value. (Same will happen for horizontal scroll and left value.) What happens is...
Recently I switched to a new laptop and had to set it up to my likings. (This comic describes my setup pretty accurately.) My setup includes a bunch of small apps I found over the years. It seems that most people are not aware of these, so I decided to share a list. All of them are free (with the exception of TotalFinder), and if you like them,...
Today I learned: To upload files using fetch and FormData (FormData is supported in IE10+.) you must not set Content-Type header. const fileInput = document.querySelector('#your-file-input') ; const formData = new FormData(); formData.append('file', fileInput.files[0]); const options = { method: 'POST', body: formData, // If you add this,...
Some CSS fun. Lately I've stumbled upon couple of websites with elastic hover effect on buttons. Each one was using SVG morphing, which is fine, but I was wondering how hard would it be to implement it in CSS. It ended up up being pretty easy. See the Pen Elastic hover effect (CSS only) by Stanko (@stanko) on CodePen. I created four ...
I've been really busy lately, doing both work and pet projects. At the moment I'm playing with three.js trying to clone old DOS game to JavaScript. Games (and animations in general) need animation loop in which we are going to update the scene and re-render it. Example animations are simplified and they just move a box 60px per second. But the...
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 one of the seven possible formats: now - if no...
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 series. We are planning to have one more meetup...
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.) Redirect to='/redirect-url-here' /> What I...
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 class (By default --tabbed is used, but it accepts custom class as parameter.) to html element....
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 few community contributions. Big updates #...
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 nothing about programming) showed me BASIC and...
That's my new year's resolution. Code, write, play and craft more!
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! Browser support # Tested on: Windows: IE9, IE10,...
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 you need a polyfill isomorphic-fetch is a...
Two days ago I released two npm packages, window-scroll-manager and react-window-decorators. Scroll manager # Scroll manager (Plx 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 requestAnimationFrame. Idea comes from MDN....
This is a sad rant :( I love Firefox (and Mozilla too) and have never switched to Chrome (Although 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 is giving me "Service Battery" warning when...
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 easier to browse. To name a few: Archive is now...
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 design # When asked how to learn more about design as...
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. See the Pen React transition between two components by Stanko (@stanko) on CodePen. In componentWillReceiveProps it checks if children prop has changed. When that happens, it will...
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 learn how setup React projects from scratch. This...
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 with the page. Typography did undergo some small...
But I need to regroup and focus on finishing at least one, instead of starting all of the trillion ones and finishing none.
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! I'm a junior front-end web developer and I recently found your amazing blog and fell in love with it. Since you don't have...
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);, but... ...you guessed it - it doesn't work in...
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, npm i -g npm didn't work. However, when I was...
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 silently in this case. That means it still...
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 it. But one of the other common tasks is getting...
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 many parallax components. Parallax is actually ...
I use the same wallpaper1 (warning, 6mb file) for a long time now. Not sure who is the author (if anyone knows the original author, please let me know in the comments). 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...
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 state to apply class or style to animate. 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 external contributions are welcome. Name comes...
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 decorator is not listening to a scroll event,...
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 on SoundCloud as well. Enjoy!
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 Tuesday, May 16th at Impact Hub Belgrade. See you...
Just a short one. I want to share a simple command to display nicer git log in the terminal. git log has --pretty=format option built-in, we are just going to pass formatting to it. git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)%Creset' And it looks like this: Then add it to your...
I started leading teams relatively early in my career. Mentoring and leading younger developers is something I tremendously enjoy. But there is one thing I really miss about being a "regular" developer. And that is - being able to put my headphones, play some rock 'n roll, and code for a couple of hours without any distractions. Something that is...
Most JavaScript developers used jQuery's .slideUp() and .slideDown() methods, and got used to them. As component based frameworks usually do not include such functionality, the first logic choice is to turn to CSS. But alas, CSS transitions do not work with height: auto. (Transitions can do a tween only between two numeric values.) As we use this...
In this post you can find seven talks I really liked in no particular order, most of them development related. I'll explain why I liked them, and why I should recommend watching every single one of them. Every talks is embedded, but link to a website or youtube is included as well. Please comment with the talks you think are worth watching....
Update March 2019 # Check this fix too. It works really well in most cases. If you ever used vh units and tested your work on mobile Chrome (iOS and Android), you probably were annoyed by page jumping when you scroll. As you probably know vh units are based on the window height. When you scroll, Chrome's address bar disappears and chrome actually...
May 2018 - Updated to match React Router v4 API. September 2019 - Updated to match React Router v5 API, added React Create App part. If you ever had to deploy React Router app to the subfolder on the server, you know what the problem is. Routes will get messed up once you upload it to the server. Here are two solutions I use in these cases. Easy...
We prepared another tech meetup, this time with four presentations. There will be a break after the second one. This should be the biggest one so far, with two guest speakers. It will happen on February the 4th, at Belgrade Youth Centre. Hope to see you there! Visit Facebook event or meetup.com page. And apply here. Thanks to everyone who...
Just something to cheer you up for the holidays :) I got this idea while I was sick in bed, and had nothing smarter to do. Pure CSS, no JavaScript at all. Hope you like it, I may add some more details. See the Pen Counting sheep by Stanko (@stanko) on CodePen. Check the code on codepen. Happy new year!
2016 was quite a ride. I just want to write a couple of random things, to close this year with one last post. Work & Co # Big news here, my company became a part of Work & Co. We're really excited about that, and I'm looking forward to the great stuff we are going to build. Our collaboration goes back for a few years now, it was very productive,...
Currently, I'm working on a relatively small pet project. While setting it up, I decided to extract a webpack boilerplate from it. As whole JS community is moving really fast, I found very hard to set everything up using Webpack 1.x. One package would ask to update the other, that would break the third one, then that one... and so on. Luckily, I...
Part three - also the last part # Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, more ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Where to go from here # I really wanted to continue this series, but unfortunately whole JavaScript / Node community is moving so fast, that I...
Update November 2017 # Unfortunately, I'm not maintaining this repo anymore. Still, there are couple of really useful links on it. People are making awesome lists on the Git these days. I'm spamming our company's slack dev channel, and someone suggested to put all of those links in one place. So I created one awesome list as well. Awesome web...
After the recent Apple keynote, it seems that community is not happy with the new MacBook Pro. Well, I'm not either. As for iPhone/iPad, those are toys, I could use pretty much any other modern smartphone/tablet. But MBP is my working horse, and I was always saying that it doesn't matter how much it costs, I would always get it. Things have...
Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As I already mentioned, GitHub pages do not work with the Jekyll plugins. It is a security measure. So I researched it a bit, and colleague of mine proposed a simple solution - Travis CI. There is a great repo with instructions how...
As you probably noticed I redesigned my blog and added some new features. This is a list of the new stuff. New design Category pages Comments Search Reading time Share buttons New design # My friend Nikola, from MIDA digital agency, helped me a lot with this one. I gave him a basic idea what I wanted, and he came up with this simple but beautiful...
Before modern frameworks, I always used jQuery's scrollTo method. At some point, not every project included jQuery, so I wrote simple function to animate window scroll. I have kept copying that function from project to project. Finally I took some time, cleaned it up and published it on the npm (this is the first npm package I published). Check...
We've all been there - trying to get right font sizes from PhotoShop to CSS. Designers usually work with points, which are used in the print, but not common on the web. They also use term tracking a lot, which is actually only a letter spacing with different units. You can recalculate everything by hand and try to keep track of it. But we can use...
Always try to use when element is clickable, but it is not a link. Avoid , , and other elements. Note that display: flex works differently on buttons in different browsers, but we have an easy fix for that. Why? # You will get multiple benefits - user can "tab" to it, and to activate it by pressing enter (that will trigger click event). There...
I decided to move my CSS playground to the CodePen, and this is the first one I made. Idea came to me while I was riding on a bus, and I might use it on this blog, as a part of it's redesign. This is CSS only animation (I used JS to create 50 elements though). And you can see the usage of SASS random() function. See the Pen Circle Logo...
Part two # Update: Part two is pretty much done. Part three will cover redux and production builds. Other parts: Part 1 - Webpack, Babel, React, Router, ESLint Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction...) Part 3 - Where to go from here Adding SASS # We will use SASS loader for webpack, so let's install it...
Update, October 2017 # I just released updated tutorial right here. So feel free to skip this one, and read a new one. It uses updated tools, and hopefully it will grow into a new series of webpack/react posts. Update, March 2017 # Webpack 2 is out, so this post is slowly becoming outdated. For webpack 2 - react boilerplate please check this...
Recently I lost my iPhone headphones. I didn't care much, as they were almost three years old, and I had a brand new ones. But today, while getting ready for work, I found them in the pocket of the pants I washed about week ago. I was sure they wouldn't work, but guess what? They do! Probably the fact that they dried for days helped. So I guees I...
Another tech meetup is behind us, even more people came this time. As promised, we will keep them coming more often. Miloš spoke first about learning in tech, and keeping up with it. My talk was about SPAs, and how hard they are. We hope that meetups like this will help to build and strengthen the community in Belgrade, and Serbia in...
For a current project I'm on, we needed both circular timer, and progress bar. Again, I wasn't able to find small library to do that. But I found awesome answer on Stack Overflow, decided SVG is way to go, and wrote Sektor. Sektor is a plain JavaScript library that draws circle sector (or an arc). Once it is drawn, you can change it's angle and...
If you ever had to fix element on scroll, you probably had an issue on iOS Safari (and other mobile devices). Element will usually flicker, and disappear until scrolling has stopped completely. Just force GPU acceleration by adding transform: translate3d(0,0,0); to your element. You will have something like this: .Element-header { transform:...
Atom Babel plugin doesn't highlight variables in ES6 (ES2015) template strings. You'll need to add this snippet to your Atom's style.less atom-text-editor::shadow .variable.js { color: #F8F8F2; } In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don't forget to add...
I'm a big fan of Sublime Text editor, which I was using for years now. Minimal, fast, reliable. But there is one big problem with it. Only one man is working on it's development and community really slowed down. JavaScript ecosystem is going forward at incredible speed, and I'm not sure if Sublime will be able to keep up. Even bus factor comes to...
Two days ago, we held the second Tech Meetup. There were two speakers including myself, and Nemanja Nićiforović, our CEO. Nemanja spoke How to Freelance, and I covered Intro to React. Grab slides: How To Freelance Intro To React We are very thankful to our friends at Zaokret where meetup took place. There were around 60 people and we hope even...
This is the one of my most popular repos. Once client asked for inline video that works on iPhone too. As Apple doesn't allow that (all videos are full screen in native player, and autoplay is not supported),. There was no easy solution, so this player was born. It uses HTML video and canvas. Script picks up the frame from the video and draws it...
This simple bash command finds all of the files matching *~ recursively, executes rm on them and prints out which files are affected. You can replace file matching pattern, and command you want to execute. find ./ -name '*~' -exec rm '{}' ';' -print
Generally when comes to replacing native UI components, I'm strongly against it. But, we've all been there, when the client insists on it. You'll see how to style it via CSS (webkit only), apply pure JavaScipt plugin with native scrolling or apply simple CSS hack. Well, let's go :) CSS solution, but only for webkit # Webkit scrollbars can be...
I needed simple React slider component, as we are building our new website as a universal React application. But I did not find anything lightweight. There is a crazy trend in JavaScript world - add gazillion dependencies. So again, I made something myself. Check the demo. It has no dependencies, and about 200 lines of code. Very simple and...
People need to realize that is not enough to have a nice website with a ton of animations and effects. There is no point having such website if I can't scroll it, while CPU and coolers go crazy. And I use latest MacBook with maxed hardware. Can't imagine trying to use those websites on the old machine (or IE8-9). Get your performance together.
It is nice to use post.excerpt instead of post.content on your Jekyll home page, but then users can't see if there is more to read until they open the whole post. To add Read more link, you can use this simple snippet. {% if post.excerpt != post.content %} Read more {% endif %}
Update, November 2017 # I don't use this setup anymore, it might be outdated, proceed with caution. Original post # As you probably know this blog is powered by Jekyll. It is a really nice platform, but it lacks a few things I'm used to during development. First one is live reload on file changes (and injecting CSS), using SASS, autoprefixer,...
Again, I've seen it somewhere on the internet and recreated it. This one uses jQuery, although I plan to rewrite it to vanilla JavaScript. It switches between two sides of the cube, every time you hover. Depending from which side cursor entered the cube, it will rotate in opposite direction. It is fully responsive, and on touch devices, direction...
Jekyll comes with simple pagination which has only Newer and Older links. I wanted a little bit more, now pagination shows at least five pages, with current in the middle. On the larger screens there are also first and last page links. Newer and Older links are, of course, still there. Check the gist with the code. You can see it at the bottom of...
Well I saw pretty nice mockup on Dribbble and decided to make it for fun. It didn't include mobile/responsive solution, so I came up with my own. Check the demo. This is pure CSS solution - it uses :target selector for changing states. Find more about :target on MDN. This is neat, as it also can be bookmarked on both states, and browser...
Everything starts with a Hello World so does this blog. In the first couple of weeks, everything will be under heavy development, until I get it the way I want. As I really enjoy making stuff, I decided to try to make small JavaScript or CSS (SASS) plugin/script every week. Those are going to be both big and small, proof of concepts and...