Muffin Man is back! This time with new visual identity.
This was long overdue, but new design took me 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:
I ditched custom Jekyll plugins to be able to use GitHub to automatically build the whole thing. Some of them got rewritten to Liquid.
Hope you like it!
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.
When asked how to learn more about design as a developer, design partner in my company recommended studying work of these two designers. I haven’t taken my time to do it, but it is on my todo list.
Frontend developers should have at least basic understanding of visual design. Because great products are symbiosis of both great design and great tech. Hopefully, these links will help you in that regard.
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.
componentWillReceiveProps it checks if
children prop has changed. When that happens, it will save currently rendered children and the height of the wrapper.
Then it will animate wrapper’s height to a new component’s height, fade out previous component and fade in the new one. Finally when animation is finished it will reset wrapper’s height to
I might release it as a standalone npm component, but it needs some polishing before I do so. If you make use out of it, please share in the comments.
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.
This is detailed step-by-step guide, as I’ll try to explain the whole process. If you just want code to play with, check this repository I created for this tutorial.
Every time I talk about changing a source file, I’ll paste complete file’s content beneath it. You can look for
ADDED IN THIS STEP comments which point out specific things that changed.
Please note that this tutorial is written on macOS using node 8.5.0, but it should work on Linux and Windows without any major issues. If you find something that is not working, please provide a correction in the comments.
Simple development setup for React applications using Webpack and Babel. But my main goal is for people to better understand these tools and how to use them.
Setup that we are going to create is minimal, but it follows the best practices and gives you a solid ground to start from.
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 changes, and both buttons and borders are not lighter as well. Code snippets are now using a light theme, which should be easier on the eye.
This is just a minor refresh until I do a full redesign (one of the trillion ideas).