shaunrashid.com

Random thoughts of a digital web weaver

A Specificity Calculator in Firefox Dev Tools?

As a CSS developer on enterprise-level software, debugging issues can be challenging for various reasons. On a platform that supports thousands of websites and over 75 designs with various moving parts, features, and widgets, there is a lot of CSS that needs to work together and overlap each other in just the right way.

For me, debugging starts in the browser with the developer tools inspector. I’m not going to go into the details of the debugging process in this post but one thing I often look for is specificity clashes. I spend time analyzing the selector lists to see what CSS is being applied/overridden on an element.

I use Visual Studio Code as my IDE. One of the tools that I really like is the specificity calculator that shows up when you hover over CSS selectors in the IDE.

However, because we use a preprocessor (LESS) to generate the CSS, looking at the code in the IDE doesn’t give a complete picture of the CSS specificity for an element.

I think it would be a great addition to the dev tools if a developer is able to hover over an element and see its CSS specificity. Perhaps something along the lines of (but much better implemented/looking than) the mockup below:

Mock up of the Firefox browser with a specificity calculator popup when hovered over a CSS selector in the developer tools

What do you think?

An Inclusive Web (for developers)

The Web has evolved at an unbelievable pace. We’ve come a long way from the Geocities-hosted personal homepages with guestbook and counter scripts hacked together by aspiring webmasters. Now, the Web is filled full scale applications and platforms built by teams of highly skilled software engineers to serve a multitude of business needs. It’s an incredible amount of progress in a very short period of time.

However, in that frenetic pace, I feel like we’re losing something: the accessibility for anyone to build for the Web.

When we talk about accessibility, we focus on the users of the Web and their ability to access and interact with information online. This is an extremely important and ongoing process. As Web professionals, we should all work towards building and maintaining a Web ecosystem that is inclusive to everyone, no matter their circumstance.

But as Web professionals, we should also be working to ensure that the Web is inclusive to anyone who wants to design and/or develop for the Web. We should be welcoming and open to anyone who shows interest in building something online whether they are a seasoned computer programmer transitioning to Javascript or someone who has discovered a browser inspector for the first time and wants to learn more about CSS.

The Web is a vast place with room for things as small as a personal site to experiment with and learn to enterprise-level applications serving millions of customers. Everyone should have the opportunity to find their place on the Web and be given the ability to contribute to it.

Exclusion only serves to hinder the Web. But just as designing and developing inclusively for users with disabilities helps to create better experiences for all users, being inclusive to everyone who wants to develop for the Web will help to create better developers out of all of us.

Breaking Down the Problems You’re Solving

As of late, I have found that one of the most common pieces of advice that I give to the developers on my team has been to take a step back and break down the tasks they’re working on into smaller chunks.

It’s not a novel concept. It’s part of the problem solving process. In many cases, the developers that ask me for help have already broken down the problem to a certain degree but just haven’t gone far enough.

When I go about the process of tackling a problem, I’ll go through “break down” process many times. The first time, I’ll break down the overall problem into big buckets of tasks. I might go through a few iterations of this to see if there are different ways to tackle the problem. Once I’ve got my basic buckets, I’ll treat each one as a problem to solve and then break down each one independently. By going through this cycle, I get a good sense of the tasks that need to be done.

If I am working on a task that I start to feel overwhelmed with, I’ll treat it as a problem and run through the break down process again. I find that it helps me refocus and provides me with a clear path to completion.

Most of the time, the developers already know the answers for themselves, they just need to take a moment to look at the problem again and break it down some more so that they can see the specific steps they need to take to move forward.

Change by Example

One of the questions that has been on my mind lately has been how do you change the culture at a company or team? It can be a daunting task, especially in company that has been around for some time and is set in its ways.

I find that people are willing to talk about culture change but when it comes down to doing something about it, the action items get lost in the shuffle, deliverables and client commitments get priority, and the discussion fades away.

It can be discouraging when you feel like the ideas get lost on deaf ears and all the talk just leads to false starts. However, after a discussion with some colleagues, I am starting to think that culture change isn’t a plan; it’s a set of habits that form over time.

Start with something as simple. For instance, if you don’t feel like your company properly recognizes individual contributions, take a moment to thank a person publicly for some work that they’ve done. Another day, take a moment to thank a different person. Form the habit with yourself first.

The hope is that it will catch on with others and they will start doing it as well, forming the habit for themselves. As more and more people form the habit, it becomes part of the culture.

It’s going to be slow and will require a lot of patience but by developing the process of creating those habits, you create a path to changing the culture of your company/team.

Another “Women in Tech” Thought…

I’ve always been a supporter of women in the tech industry. I have been lucky to work with quite a few during my career. They have ranged from managers to developers with similar experience to those I have mentored. Through it all, I knew that as women in the industry, they had overcome larger hurdles to get to where they were than I had to.

Up until now, I think I simply acknowledged the fact that the gender issue existed and agreed that it needed to change. I can look back, put the pieces together, and see various occurrences where women I know have been discounted, pushed aside, or looked over. I look back with disappointment with myself that I didn’t recognize the pattern.

It’s bothered me a lot lately. Whether it’s guilt for not seeing things sooner, or the fact that I work with a group of incredible women who I want to see succeed, or because I continue to hear stories of women I respect being degraded even today, it makes me angry.

Lately, I’ve felt very over-protective of the women I work with in the tech industry (either directly or through social media). I’m not sure if I have the right to feel that way because despite the fact that I support them, I don’t know if I’ve actually done anything to help them. I don’t quite know what I should do. When should I intervene? When should I step back and provide space? Maybe the answers are right in front of me and I’m just blind to them?

I’ve never been opposed to asking for help and this is definitely one area where I could use it.

Thank You to the Women in Tech

The tech industry is well known for it’s gender gap. It’s an issue that continues and to which I have no solution for. I don’t even think I am qualified to provide a solution because I can’t relate to the problem. Even though I can articulate some of the issues, I will never be in a position to suffer the hostility and disadvantages as the women in the industry do on a daily basis.

I recently remarked on LinkedIn that I have been extremely fortunate throughout my career to have had the opportunity to work with many strong female developers. They broaden my perspective and help me grow stronger as a developer. They have and continue to teach, guide, motivate, and inspire me every day.

To all of the female developers that I work with daily or interact with over social media, as well as those that I don’t know, I want to say thank you. I appreciate everything you have done for myself and the industry and will continue to support you in any way that I can.

Content Block Layout with Dynamic Content Using CSS Grid

With the impending introduction of CSS Grid in mainstream versions of major browsers, I have been playing around with it and trying to learn how I can incorporate into current production scenarios.

One scenario is a content block grid where we have multiple blocks of content that each consist of a title, some sort of image or media, copy, and some hyperlinks. In addition to making the grid of blocks responsive (which is the easy part), the scenario calls for each of the elements within the content blocks to line up with the corresponding elements within it’s sibling content blocks on the same row.

For example, if there are 4 content blocks in a row, the copy of each of the blocks should start at the same point on the x axis of the row. While this is relatively easy when you have total control of the content and can craft it so that each element has a consistent (or at least predictable) amount of content, the challenge arises when you don’t have control of the content.

I have been playing around with the following Codepen to see if I can get things to work. I’ve been able to line up the media at the top of the content blocks and the links to the bottom, but the title and copy sections in the middle look “jagged” because the image heights are different. Instead, what I’m looking for is a layout where the titles and copy sections of each block line up with each other so that there is a more uniform look to the grid.

I’m not sure if that’s possible but I’d invite you to checkout my Codepen (currently viewable in Firefox Nightly and Chrome Canary)  to hit me up on Twitter or drop me an email with any feedback or advice you might have.

 

UPDATE:

I’ve opened up an issue with this on Rachel Andrew’s CSS Grid AMA. Check it out and post any ideas you might have. Also check out the other issues on the AMA. It’s a great resource.

2016 US Election: Expression

Like many people, I was extremely surprised at the outcome of the 2016 US election. Many emotions and thoughts have run through my head over the past 24 hours. I have made an effort to be calm about the outcome and have tried to calm others and let them know that it’s going to be okay.

The more I think about it, in just the same way that many (including myself) assumed that Donald Trump would not be the Republican nominee and in the same way we assumed that the American public would not elect him as the next president, I’m making an assumption that everything will be okay.

The truth is, I have no idea what the next four years will bring. I don’t know what situation people are in or how a Trump presidency will affect them. I feel like by telling people it’s going to be okay, I might be coming across as dismissive and it’s certainly not my intent.

It’s a difficult time for many people. People are upset, shocked, confused, and scared. The concerns and fears they have are completely valid and should they should express them freely.