Another talk I did back in November was on Polymer.
Polymer is an interesting framework which is used to create custom HTML elements using the browsers web components API’s if it can. In my talk we’ll make our very own elements and use them to create a cat pinterest style application for cat lovers everywhere.
As I was recording this my screen recorder crashed which meant I had to bail from screen recording my talk. I don’t think my mac likes screen recording while trying to power a projector and it’s screen!
I also listed some useful links which weren’t captured in the video so here are the links below:
I did this talk way back in November last year but it’s only now I’ve managed to see about putting it on the interwebs.
Apologies the fan noise towards the end, I’m still using an old mac from the days when only rappers had gold macs.
This time I’m talking about my latest escapades with the open source editor Atom. I really like using this editor as it feels approachable and most importantly for a coder, tweak-able!
In the talk I go through how atom works and some of the changes I’ve made to it to make it work for me. I also look at other projects which have benefitted from the work done on Atom and it’s child project Electron
Since then I’ve removed a lot of stuff that I originally had added, this is mostly to squeeze as much performance as possible out of atom as it can still be a bit of a sloth at times (usually when you’re trying to do just one quick change).
It was around this time 3 years ago I was putting the finishing touches to this design.
Back then Jekyll didn’t compile sass and since the design was quite simple I didn’t feel the need for it, plus I’d probably forget to compile half the time anyway!
I wrote my css the old fashioned way, starting with the header and working my way down to the footer. It was great in the beginning but after a while a few drawbacks started to emerge:
No build process to minify and concatenate (I could have made one but then I would have just used sass)
High specificity caused clashes and made it easy to add bugs
Duplicated code for similar objects and redundancies
I had been meaning to tidy it up for ages but I just didn’t know what to do. I was aware of OOCSS & SMACSS but didn’t understand them. Lately I’ve been getting into BEM because it is a simpler concept
After doing a bit at work and also reading about namespaces I finally felt confident to try and refactor this
I ended up with this structure which I’m not fully convinced by but it’s a vast improvement on what it replaces. It’s still BEM but with namespaces to add a bit more information.
These aren’t just namespaces plucked out of thin air either, they explain how explicit the styles are. Starting from generic wide ranging styles to more focused styles that only affect a handful of elements.
Settings & Tools: Contains sass variables and my animations
Generic: Resets, spacing and box models
Base: Element selectors only, no classes here
Object: Inspired by the media object in OOCSS this contains code shared across two or more components. Purely class selectors from here on
Component: Main parts of the design, highly specific code that affects very few html elements
Finally theres trumps which is the most explicit layer. Use of !important here is OK since I know that this is the final layer of specificity.
This format is nice to work in because I know what impact my changes will have. A useful tool I borrowed from csswizardry was his debug stylesheet which outlines different components on the page
which is handy.
As an added bonus naming my files like this makes it really easy to find what I’m looking for. I guess the only downside to this technique is knowing what to call things!
Additionally I added scss-lint to the CI to make sure that my code stayed consistent which while annoying at the time is really handy. I just had to spend some time making sure I had it set up with the correct rules.
Feel free to nose around the pull request. Thanks for reading!