Side projects log #3 – Mastering the Craft of CSS

12 weeks design to code challenge

Currently I am at one third of the challenge, at the time when I write this I have to edit the code video, and this challenge has taught me a lot of things.

  1. It’s really hard to speak without ehh, uuh, aah
  2. Video editing takes a lot of time
  3. Multitasking, speaking and coding is hard
  4. My coding skills aren’t as good as I want them to be, especially CSS

The fourth thing is something I want talk about a little bit more because there have been some trends in last couple of years which I have clearly missed. When I learned CSS at first it wasn’t complicated but that was in early 2000s and until now I felt fine using spaghetti code because that always worked before. But now as I design more complicated websites I am finding a problem with my approach.

I need more structure because without a good structure I tend to use search function a lot without a logical approach. So far I have found two approaches which I would like to try, BEM and Functional CSS.

BEM stands for Block, Element and Modifier. This approach is something which is logical and contrary to my former belief it is not complicated. The only downside which I can see at the moment are those double dashes ‘–‘ between Block and Element in the syntax which could make it harder for me when my dyslexia works against me.

On the other hand Functional CSS is more dyslexia friendly but I might need to use SASS. SASS is not bad by itself it is more the realm ‘I have used it long time ago and I didn’t like it then’. At that time I wasn’t sure if I am fine with couple of political decisions which the developers made.

Spin off

I made a decision to make this weeks design into a bigger project which I am currently expanding. Most likely I will have to rewrite the whole CSS except the normalizing stylesheet. The plan is to make it into a HTML/CSS template, Ghost and WordPress themes and sell it. I am not sure yet whether I’ll go with ThemeForest or go with Gumroad. I’ll write about my progress next week.

sg-716

That is the official name for the theme of this blog. For some reason it took me a lot longer to make the theme and at this point it’s in public beta because I am still looking for bugs and this I could’ve designed/coded better but I prefer semi-permanent solution than temporarily permanent one.

One thing which is visible at the beginning is that current theme’s design is ready for grids and I could’ve implemented them already for Safari users. Safari 10 is not out yet but TP has almost full support of CSS grids. I will update it as soon as Safari 10 is out or if I find a free time.

Instagram

In last log I wrote that I am abandoning it but instead I continued to add stuff. It won’t be as frequent as it used, no guaranteed updates everyday but there will be couple of lettering projects every week. There is also a limit how long I can spend on a mini-project and that’s 10 minutes which makes it more interesting. The reason why I am not dropping it after all is that it’s a good tool to brainstorm.

Conclusion

It’s been a long week, I did more than I expected and I didn’t do everything what I wanted. Time, energy and typing speed are my limits, I push the third one.

Resources