Have you worked on large websites that spans more than a few pages? If you did, you probably realized the horrors of not conforming to a robust CSS architecture. You probably would also have researched on ways to write maintainable CSS.
Since our industry is awesome, we don’t only have one recommended solution. Experts have jumped in and provided us with suggestions like BEM, OOCSS, SMACSS, Atomic Design and many others.
Now, instead of suffering from “I don’t know what to do”, the question becomes: “there’s so many ways. Which should I try?” Should I use everything, only one approach or create a custom architecture from the possible picks out there?.
I started off with only one approach. Then, as I tried different approaches, I began to include what I thought made sense into my process. In this article, I want to share with you how I structure my CSS and why I do so. Hopefully, it’ll help you find your preferred method.
Oh look! Everyone is talking about Webpack now! Should I upgrade my workflow to use Webpack?!
“Hmmmmm… Maaaybe I should use PostCSS since expert X highly recommends it. I can’t decide…”
“OH WOW. FACEBOOK USES REACT! REACT MUST BE HAWT! I NEED TO LEARN THAT TOO!”
Are you familiar with any of these conversations? It’s not surprising if you are! New tools pop up in the frontend world incredibly quickly. Whenever something new pops up, people scream about how cool it is. Even industry experts begin using them. Heck, the expert you love and follow may even recommend you to use them!
Do you feel pressured to try the new tool out? Do you feel like a shitty developer if you don’t keep up with the latest tools?
If you do, you’re not alone!
Today, I want to share with you a simple framework to determine if you should learn/switch to [insert shiny tool]. Read on if it sounds any interesting.
The act of choosing two typefaces is probably the first (and often most difficult) task you do when creating a new design. Many people get stuck here, myself included.
Recently, I discovered a simple method to pair typefaces effectively and I’d love to share them with you. (Hint: it’s a 3×3 grid).
It’s common for designers and web developers to suffer from decision paralysis. You know you’ve battled with it if you had problems like:
- Spending hours choosing the right typefaces
- Obsessing over choosing the right framework
- Scratching your head over what to learn next
- Facing writer’s block
Does any of them sound familiar?
Decision paralysis has been the bane of my life so far. I battled against it again recently and I’m happy to say I finally got out of the rut (today!).
In this article, I’d love to share my experiences with you and how I handle decision paralysis.
Reading is a skill I wanted to improve for ages. I wanted to read faster, because reading faster means I’ll learn faster. So, I tried to learn how to speed read many times in the past.
Speed reading wasn’t too difficult. The sad thing is, I can’t seem to remember anything I read, which makes the speed useless.
In 2017, since my theme for the year is experimentation, I wanted to see if I could improve my reading capabilities. This time, I found some success: I read 1.5 books and remembered most of what I read in three weeks.
I’m so elated by the discovery of this technique and I’m happy to share it with you!
2016 was a strange year. It was full of up and downs. On one hand, I had eye-opening experiences that taught me a lot about myself. On the other hand, I was horrified at the amount of time I wasted accomplishing nothing, so much that I ended the year loathing myself to the core.
But that’s enough. The new year is here. It’s time for me to recollect my experiences and regrets and move on. This article is a summary of my learnings in 2016 and my plans for 2017.
One of the best complement for a custom web design is a custom-made responsive grid system. You can customize everything you need, including the number of columns, the size of columns and gutters and even the breakpoints you change your layouts at.
Unfortunately, many people don’t even try building custom grids for their web designs because they lack the knowledge and confidence to build one.
So, in this article, I want to help you gain the knowledge and confidence you need to build a custom-made grid. Hopefully you can break away from frameworks and try a custom grid for your next project by the end of this article.
I’d be telling you the obvious if I said that grids are important in web design. You already knew that. You probably have even coded a few grids with frameworks like Foundation or Bootstrap. You may even have created a custom grid manually, or using a grid layout tool like Susy.
But have you stopped to think about these questions for the grids you’ve made?
- How many columns should you have?
- Should the columns be evenly sized?
- How big should columns and gutters be?
- How does the grid respond to different viewports?
What are your answers?
I have searched high and low for answers to these questions in the past few months. Here’s an article consolidating everything I know about designing grids right now. Hopefully, it’ll help answer the questions you have as well.
“Don’t reinvent the wheel”.
You heard that one before?
It’s an age-old wisdom that’s been passed around between developers since the dawn of time (at least for programming anyway).
It’s also the worst advice you’ll hear from anyone. But we say it on a daily basis. To others, and even to ourselves. It’s just that whenever we say this, we sugar-coat the words in different forms so we don’t feel as hurt.
We say things like:
- Just use [insert framework here]
- Use [insert plugin here] instead of creating your own. It’s not a priority.
- Don’t waste your time building something that has been done before.
Sounds familiar yet? Has anyone said these to you before? How did you feel? Don’t kid anyone. You felt something. Did you feel:
- A combination of many of these?
These statements challenge the receiver. With any questions that challenge, it not only challenges the decisions on the surface (for most of us, it’s a choice whether or not to do something for a project), it challenges the core beliefs of the receiver.
Like it or not, it happens unconsciously. And because these questions are directed towards the core beliefs, the repercussions can be severe.
“How do you learn and remember all that stuff so quickly?”, I get one of these questions now and then from well-meaning individuals who seek more knowledge. It’s a common thing for all of us. We want to learn fast, do things fast, get more things done.
However, I never managed to answer the question properly. I always winged it because It triggers a complex mix of emotions within me. Sometimes, I get arrogant. Others, I stay humbled and state the truth: I’m slow. And I want to be faster.
The poor person on the other side of the computer only has half answer, depending on which side I sway towards.
Today, I’d like to challenge this question seriously, both for my future benefit and for countless other ambitious individuals who feel like they need to conquer a never-ending mountain of knowledge.
gallery mixin behave unexpectedly (like the image below) when you’re using Susy?
You’re not alone. Many people have faced the same problems I outlined above. When they meet with these problems, the common question was how to “reset” the output from the
span, or the
gallery mixin, so the weird behavior goes away, but that’s not the best way to fix the problem.
In this article, I’m going to show you why “resetting” is the wrong approach and what you can do instead.
Have you ever asked code-related questions and never got a response? Even if you got a response, did you go through multiple back-and-forth clarification questions before you finally get a useful answer?
It happens. A lot.
It happens because you didn’t ask questions that were good enough for anyone to answer you immediately. In this article, I’ll help you learn the art of asking good coding questions so you’ll always get great answers.
Previously, I shared the theory about adjusting your Modular Scale scale to size your headers for different devices. I also covered how you can do it with the Modular Scale plugin for the 4th method.
Today, I want to share more about the Modular Scale library so you can learn to integrate it into your project easily. I’m also going to share with you how to use Modular Scale with Typi.
I spoke about why you may have problems with large font-sizes on the mobile and the four methods to deal with it in a previous article. In this article, we’re going to look at implementing the fourth method that was mentioned—changing the Modular Scale ratio at different breakpoints.
Do your font-sizes look gigantic on the mobile? You’re not alone. It’s a common problem many people have when using Modular Scale for responsive websites.
In this article, I want to share with you how this problem arises and how to fix it so you no longer have font-size woes.
Ready? Let’s go.
Just a few days ago, I received a design critique from Aurobind (a font, newspaper and magazine designer) regarding my website. He specifically pointed out that the spaces between my paragraphs could be reduced to achieve a better effect.
I was dumbfounded. I didn’t believe him at first since I was already using Vertical Rhythm. If I were to reduce the amount of space between paragraphs, wouldn’t I be breaking the Vertical Rhythm?
Even though I don’t believe it, I decided to try it out since I respect his expertise and the feedback he’s willing to give. And boy, I’m utterly convinced.
You might have noticed that I redesigned my blog recently if you followed me for a while. In this redesign, I switched from Wordpress to a static generator that I’ve created.
I love static site generators. They make it easy for me to create websites without having to go through a CMS like Wordpress. Since my blog is on a static site generator, I managed to simplify my blogging workflow because I don’t need access to the Wordpress backend anymore.
The only major problem I had with static site is that that I’m unable to schedule my articles and publish them on a different date. I tried several methods, burned myself, and finally found a solution that I’m happy to share with you.
Last week, I wrote a tutorial to show you how to use the mixins and functions of Typi, a library I’ve created for responsive typography. There’s a lot more to Typi that I can cover in one article. So, this week, I’m going to show you some advanced tips that I use with Typi so you can use them as well.
Typi is a library I’ve created to help make responsive Typography easy. I first talked about Typi when I released the article on responsive typography in January 2016. Since then, I’ve added new functionalities to Typi to make it even better.
In this article, I’m going to tell you what Typi can do and how to use it.
Are you sick of procrastinating?
I am. I have procrastinated a lot in my life, and I don’t want to procrastinate a moment further. But, somehow, procrastination always seem to creep up on me when I least expect it.
Recently, I got stuck with a serious bout of procrastination that paralyzed me for two full days. I couldn’t get any work done. I felt incredibly stressed. This incident reminded me about how awful it was to feel useless and powerless.
Having gotten past this serious bout of procrastination, I want to take this opportunity to tell you what goes through my mind when I procrastinate. I want this to serve as a reminder to myself, and also to hopefully jolt you into action.