Repeating CSS – Trying to Stay DRY

Some sobering numbers from a recent article on meiert.com titled “70% Repetition in Style Sheets: Data on How We Fail at CSS Optimization” by Jens Oliver Meiert, shows the web as a whole has a CSS problem. For example Engadget has 28,909 CSS declarations with only 2,382 of them being unique. Other sites like Kickstarter and Booking.com have similar stats.

What this shows me more than anything is large sites with large legacy code bases tend to have under-optimized bloated stylesheets. It’s no surprise to any of us that have been in the industry for a while especially if we have ever worked for a large organization. The fact is CSS optimization is hard. I agree with the author though in that we have to try. That is probably why I am a fan of the ongoing conversations about CSS through Javascript. While I might not agree all the time with those conversations, I do think having them is important to moving beyond the issues we see with large CSS codebases.

https://meiert.com/en/blog/20170531/70-percent-css-repetition/


Saving the Programming Princess

Came across this post today, and I wanted to share it. No surprise Javascript is the most popular language right now. Just look at the barrage of frameworks and abstractions out there. I personally love Javascript as it allows me to prototype quickly, but I do feel the pain of its growth.

The article is a great overview of the language Battle Royale, but the comic specifically is priceless. The Javascript panel is spot-on, and the PHP one just makes me sad 🙁

What programming language should you learn first?

or just skip to reading the comic: Git the Princess: How to save the princess in 8 programming languages


Andy & Andy: The XOXO legacy

As a father of three kids, I think a lot about legacy and what I will leave behind for my kids when I’m gone. Hopefully that is a long time from now, but that thinking helps guide me through my daily and longterm decisions. It is a big reason why my wife and I travel with our kids as much as possible. It is also why we both try to keep a healthy balance of work and personal life.

Legacy isn’t the only thing, but it is a big thing for me. It’s not necessarily that I want to be remembered forever or anything like that, but rather I want the impression I have on my kids to help guide them towards their own successes and achievements and help them through the tough times.

At times though I see something so profound, that it shakes up my idea of legacy and what it really means. This past weekend at XOXO festival and conference in Portland, Oregon was one of those moments. Until this point, my idea of what I would leave behind mostly centered around a healthy dose of experiences and relationships. Although I still think that’s immensely important, I realized it’s confined to what the world offers me and my consumption of it. In other words, I am not doing anything that’s bigger than myself.

Bigger than myself.

Hmm.

That thought kept rearing its beautiful head over the course of the weekend and ultimately brought me to tears as I listened to that second half of Sunday’s talks.

What am I doing that’s bigger than myself.

Yes the topics were big and vastly important. The speakers themselves taking on battles and achieving amazing things. What I realized though sitting there in the balcony staring down into a sea of attendees is that this conference, festival, unconference or anything else you want to call it is something bigger than all of us.

The thing Andy Baio and Andy McMillan — founders of XOXO — created was more than just an amazing line-up of speakers and attendees. It was a community, a tribe, a family. Almost everyone I spoke with and heard speak kept referring to the idea of inclusion and acceptance. Andy Baio himself called it a conference of introverts, but more than that, it was gathering of anyone who has ever felt excluded doing something they find interesting. Whether we were gay, straight, designers, developers, bloggers, musicians, tall, short, no hair, long hair — it didn’t matter. We were all there because we loved creating something and wanted to find others like us.

I can’t tell you how many times I teared up and had to go the roof top deck just to take some deep breaths and soak it all in. The people I met and listened to I don’t want to ever forget. I want this experience to take on bigger change in my life. I want to be inspired by it. I want all of this, but at the same time I am terrified it won’t as many times before. Inspiration is one thing. Doing is another, and unfortunately I’ve always had trouble with the latter.

This time I want to be different. Dan Benjamin on an episode of 5by5’s Quit where he interviews the Andys, said XOXO “change my life.” I completely agree, at least I think so. I feel it did, but I’m not sure how.

Sitting here reading through the Slack channel and Twitter feed, I can see others have been affected too. An overwhelming response has flooded the feeds with praise and sadness over it’s uncertain hiatus. That’s right, this life changing conference will not be here next year or possibly ever. I don’t blame the Andys, and in fact I think they should only be congratulated on the success and beauty of what they have crafted. The thing is it stings. It’s a much needed hug as you say goodbye. Beautiful and heartbreaking at the same time.

The Andys have left behind something bigger than them. They have started a family. Who knows how many of us will keep in touch, but I can say I will remember this weekend for the rest of my life. As someone who has felt left out many times throughout my life, it was incredible to feel such warmth and inclusivity from complete strangers. I’m not sure what will happen to XOXO, and I’m also not sure how its power will change me in the long run. I do know now that I want to achieve something bigger than me. I want my kids to feel that power and warmth. I want to recreate what I experienced. I just don’t want to lose that feeling. That’s their legacy on me, and I hope someday I can do the same for my kids, my wife, my friends, and all those needing that connection whom I may never meet.

Thanks Andy and Andy.


Favorite email development tools

Developing emails can be as simple as writing some HTML and sending it through an email application, but it’s a bit more nuanced than that when doing complex emails. Here are some tools that help keep me consistent:

Litmus or Email on Acid – both have pros/cons but having at least one is essential for testing

Parallels or VMware – I develop on a Mac, so seeing it opened in Windows is really handy for testing emails. Litmus or Email on Acid are great, but having an actual “native” device is great for confirming the render.

Office 365 – Always having the latest Outlook is super important when testing. Of course I keep older versions too, but Office 365 has bailed me out on a number of occassions.

Grunt or Gulp – Build tools are the standard for web development, but tools like Grunt and Gulp are really helpful in email development too for inlining CSS, zipping up folders for uploading to testing platforms, validating HTML, optimizing images, and even sending test emails.

Putsmail – For quick email tests, nothing seems to beat Putsmail (now owned by Litmus). Just paste in your code and send. Just make sure your images are hosted somewhere other than your computer or they won’t show up.

Campaign Monitor – I used to use MailChimp as my testing tool, but Campaign Monitor offers unlimited test sends which is critical for fully flushing out any bugs. I’ve also found that Campaign Monitor’s UI better suits my workflow when developing emails. I wish it had an API I can call directly from my build tools, but that’s getting super geeky.


Why I prefer email development

It’s no secret web developers and designers generally don’t like working on emails. Heck most of us don’t even like receiving or processing email, and often the emails that are “designed” are the ones we send immediately to spam or trash. However there are some reasons why email development can actually be rewarding and easier to deal with.

Here’s why I’ve transitioned almost all of my freelance work to email development:

Predictability

What??!! I know you think I’m crazy, especially if you’ve ever tried to troubleshoot and test emails on different applications or devices. But considering the ever-changing web standards, frameworks, hardware capabilities and devices, developing for the web has become a bit overwhelming to keep up. Email on the other hand moves at a much slower pace. I know next year, the process for developing an email will be pretty similar as today. That lack of change can be limiting, but also frees me of having to code to the latest advances.

Simpler builds

Pre-processors, post-processors, server configurations, deployment, content management systems, Javascript frameworks, CSS frameworks, minification, concatenation, CDNs, back-end, front-end, APIs, and you name it. Creating a website has become a complicated process. Email development remains mostly static although it can be “simplified” with web build tools like grunt and Sass. That means I can sit down in front of a text editor, bang out HTML and inline CSS, and send it immediately. I love that simplicity!

Short-term projects

I have a full-time gig and a family. I like freelance, but I also like my free-time. Emails rarely take longer than eight hours to develop and often only consume a few hours of my time. Meanwhile websites can take months to finish depending on how much time I can dedicate. I guess it depends on your personality, but I’ve always been a sprinter and not a marathoner.

Instant results

Once an email is deployed through a platform like MailChimp or Campaign Monitor, I can instantly see open and click through rates as well as a bunch of other useful information. These analytics can help determine conversion rates, best times to send, and deliverability of emails. There’s also something satisfying about knowing my email I just developed was “hand-delivered” to thousands of customers at once. This argument can be made about web to I suppose, but I like seeing the mail-list numbers when I hit send. Weird? Maybe.

Fine-tuning my skills

Developing for email is challenging and can be incredibly frustrating. Because the time frame for each email is significantly shorter than websites, I can bust out dozens of emails during the same time period it would take to development a website. This repetition allows me to fine-tune my skills much quicker than I could with developing websites. Ultimately this makes me much happier and more confident as a developer.


Concatenating and minifying WordPress plugin http requests

Chris Coyier answers listener question on ShopTalk Show podcast:

41:00 We use WordPress for all client sites and have pretty efficient gulp setup with sass compiling and concatenation. But as soon as you start to use a few wordpress plugins that all come with their own scripts and stylesheets the whole “Limited http requests” is out the window. Is there a way to get our theme to intercept the plugin scripts and stylesheets and combine them with my own and that way limit the amount of http requests?

Definitely adding Minqueue to my arsenal of WordPress plugins and tools!


Follow links vs no follow links

Another SEO mystery solved for me:

Megan Marrs, writing for WordStream

Follow links are links that count as points, pushing SEO link juice and boosting the page rank of the linked-to sites, helping them go higher in the SERPs as a result.

A no follow link is a link that does not count as a point in the page’s favor, does not boost PageRank, and doesn’t help a page’s placement in the SERPs.

As a webmaster, you might find yourself wondering when to use the no follow attribute and when to allow for do follow links. No follow links primarily belong in:

Paid links (it wouldn’t be fair to buy link juice, now would it?)
Comments
Forums
Anything involving what Google calls “untrusted content”


Making caniuse.com more useful

No front-end developer today can get by without knowing browser support for all the latest HTML and CSS features. Luckily Alexis Deveria’s caniuse.com provides the ultimate visual cheatsheet for this. Using the website is great; however, lately I’ve longed for something more. Two tools—When Can I Use Web Widget and caniuse-cmd—is exactly what I was looking for:

1. When Can I Use Web Widget by Andi Smith gives me the ability to add caniuse.com information on blog posts

The “When Can I Use” Web Widget provides authors with the ability to include up to date information about browser support for a feature they are talking about based on the data crafted by CanIUse.com.

2. caniuse-cmd by Sam Gentle allows me to use caniuse in command line! Seriously can’t applaud this enough

$ caniuse websockets
Web Sockets ✔ 85.22% ◒ 1.35% [W3C Candidate Recommendation]
Bidirectional communication technology for web apps #JSAPI

IE ✘ 5.5+ ✔ 10+
Firefox ✘ 2+ ◒ 4+¹ ◒ 6+ᵖ² ✔ 11+
Chrome ◒ 4+¹ ◒ 15+² ✔ 16+
Safari ✘ 3.1+ ◒ 5+¹ ◒ 6+² ✔ 7+
Opera ✘ 9+ ◒ 11+¹ ✔ 12.1+

¹Partial support refers to the websockets implementation using an older version of the protocol and/or the
implementation being disabled by default (due to security issues with the older protocol).
²Partial support refers to lacking support for binary data.


Tips for CSS calc() usage and syntax

Honestly I don’t know what I ever did before calc() especially for calculating margins. Here’s some helpful tips and tricks I’ve read about and used in the past:

1. Ana Tudor, writing for Smashing Magazine:

We need to keep a few things in mind to ensure that the calc() function works. First, division by zero obviously won’t work. Having a space between the function name and the parenthesis is not allowed. And the plus and minus operators must be surrounded by white space. This means that the following are not valid:

calc(50% / 0)
calc (1em + 7px)
calc(2rem+2vmin)
calc(2vw-2vh)

I highly recommend reading Ana’s full article if you are just getting started with calc() or you simply need a refresher.

2. Vincent Pickering writes:

A quite common design decision is to have multiple containers within a wrapping container. The inner containers will be a percentage width of the outer container, so are equally spaced. Given this scenario, you would usually just assign width:33%; to each container and move along. But sometimes, you want extra flexibility for those containers. For example, if you want each box to have a border, you then have to take this in to account as well.

Calc to the rescue again!

width: calc(100% / number of boxes – total margin size);

3. If you’re using calc() in Sass, don’t forget to interpolate the variable!

$var: 10px;
height: calc(100% - #{$var});


Disappearing icon font in Chrome

Just ran across a weird little bug while updating a client WordPress site.

On this particular site, I’m using an icon font in the header for social media icons, and in Chrome on my Mac (it may have been on Windows too, but I didn’t test it) when the page loaded, the icons would not appear. To make it even harder to troubleshoot, as soon as I interacted with the page in anyway (open developer tools, hovered over the icon, scrolled, etc), they would suddenly appear. It seemed that either the font wasn’t loading or some Javascript or CSS was getting hung up on something.

Finally after some digging, I came across a Typekit blog post talking about this very issue on Chrome v33. Some further digging in Chromium, I found a temporary solution by using JQuery to slightly manipulate the body after a slight delay. The follow code worked great for me. Here’s the code:

$('body')
  .delay(500)
  .queue( 
    function(next){ 
        $(this).css('padding-right', '1px'); 
    }
  );

Pages:12