CSS Isn’t Black Magic – Understanding Browser Rendering of CSS

I just came across this really amazing article by Aimee Marie Knight, called CSS Isn’t Black Magic, that explains how CSS Rendering works in the browser, as well as the CSSOM (CSS Object Model) and the CSS stack(s). One great thing is that it expands on how specificity works, and what gets prioritized – which is really important for targeting tags and elements, and knowing which css portions will be effective in making the changes you want.

I thought I’d developed a pretty solid knowledge and understanding of CSS by now, but this is a whole new area I wasn’t really aware of, and it’s really integral to writing great CSS code.

I highly recommend giving it a read!

Advertisements

Disabling Emojis In WordPress

Back in WordPress 4.2, they added emoji into WordPress – which I think is one of the loveliest things in the world ūüôā

Unfortunately, YSlow does not… those lovely little emoji take up some precious¬†HTTP requests – one of WordPress’ biggest challenges can be that it comes with so much overhead – which can slow down your load time quite a bit!

Thankfully, they’re super easy to remove:
Disable emojicons introduced with WP 4.2 

Between turning off the emoji and disabling Jetpack (sorry Jetpack!), my YSlow speed went up by almost 10% to an 81 ūüôā


To be fair to Jetpack, it is a pretty nifty plugin – I just wasn’t using it for anything on this site :p

Teaching Git Internals Better: Use Your GUI

Programming is unnecessarily unfriendly to newer programmers.  We can make it better through simple optimizations.  This is the Third of a Series of blog posts where I’ll be exploring that!


A lot of people teach Git Internals. ¬†It’s a great thing! ¬†It helps people understand Git and just how it works, and what all those commands do. ¬†However, there’s one frequent problem with their approach: They don’t use their Operating System’s GUI*.

The problem with this is that the command line is implicit. ¬†You have to¬†trust that it’s just doing its thing. ¬†Yes, at some point, every programmer needs to be proficient and comfortable with the command line, but it’s inaccessible and confusing to most newer programmers. ¬†This makes your presentation harder to absorb and learn from.

On the other hand, there’s something we all already know how to do: Double click our folder in our Window System and see what’s actually going on. ¬†There’s another thing we all know how to do: Open up a file with a text editor, and see what’s actually inside! Continue reading “Teaching Git Internals Better: Use Your GUI”

Making Your Open Source Project More Accessible To New And First-Time Contributors

Programming is unnecessarily unfriendly¬†to newer programmers. ¬†We can make¬†it better through simple optimizations. ¬†This is the Second of a Series of blog posts where I’ll be exploring that!


One of the most challenging and popular topics amongst newer (and especially self-taught programmers) is contributing to open source. ¬†The scope of making your first open source contribution can be extremely overwhelming – especially when so many open-source projects don’t make any significant efforts to be inclusive of new or first-time contributors.

Here’s a list of light-weight suggestions for your Readme.md and Contributing.md files that will¬†make your open-source project accessible to beginners, and build a stronger community around your project*. Continue reading “Making Your Open Source Project More Accessible To New And First-Time Contributors”

Git & GitHub Resources

Git & GitHub are essential tools for almost any software developer. ¬†Here’s a list of what I’ve found to be the best resources for them:

Git:

GitHub:

A List of Beginner-Friendly Open Source Projects

Last night, I presented at the¬†Women Who Code NYC “Open Source¬†Workshop“. ¬†It was very much a learning experience for me, and I hope to share more thoughts later. ¬†In the meantime, here’s a (work-in-progress) list of some beginner-friendly open source projects:

If you know of more, feel free to leave them in the comments, and I’ll add any that seem like a great fit!

Fixing Sublime Text 3’s CSS Comments

I’ve been doing a lot of web design work lately, and I’ve noticed that Sublime Text 3 has this really weird quirk with CSS¬†comments. ¬†When you press Ctrl+/ you get a strange your comment comes out like this /*This is a Comment*/ instead of like this /* This is a Comment */

Since it’s Sublime Text, I knew it had to be possible to reconfigure this. After asking a friend or two (special thanks to Kara McNair), and doing some digging, here’s the solution, using Package Control & Package Resource Viewer: Continue reading “Fixing Sublime Text 3’s CSS Comments”