Introduction

There are a lot of popular websites out there that have numerous issues - especially around CSS and HTML issues. As a follow-up to my previous post about how to make YouTube hide all content that you have already viewed, we'll look at how common CSS errors are, even amongst high-profile sites that should know better perhaps? :-o

Example of CSS error in an everyday situation

Looking at this very website, I spotted an issue today that actually led to me writing this article. In the "create new article" page, there is a heading section.

I've uploaded the screenshots to the Imgur website and you can see them using this link.

The issue is clear. Whilst the text box used to enter the title of your post is the correct height initially, it collapses to an unreadable height as soon as focus is lost - or in other words we move off the title entry text.

There is also the other issue that I found whilst explaining the first bug. Even at normal 100% zoom levels, in Chrome, the main text content window seems to occasionally scroll to the right by 1 character - meaning you cannot see the first character you have on each (or most) lines of text. This led me to many times entering the same character twice. It becomes a real nuisance when you are using the Markdown pound sign (#) for headers. One pound sign is "heading 1" equivalent in Microsoft Word. Two of them render the adjoined text using "heading 2" formatting, and so on. It's vital to see how many you have on each line.

Hack that bug!

So if you are working with this kind of website, and want to support it and not see it fail when the users see that the text editor is garbage - then you will want to persevere as I did. So we need to fix these silly little issues, to ensure we can continue working with the site.

What we are going to do is the job of the original web designers or developers. We are going to create the CSS fixes. Times like this I really appreciate open-source software where you can create a fix like this one, and create a pull request for the GIT repository so that your changes can be reviewed and hopefully deployed. The company benefits from you doing the work that they would pay someone at least £50 for the same thing, and you would get to have a better user experience.

Anyway - let us be positive and move on as we ask ourselves: how do we fix the issues on the dev.to website?

Editing CSS style using Chrome's developer tools

The first thing we need to do is be able to inject our CSS fixes into the current page. We can just hit F12 to bring up Chrome's Developer Tools, before making our changes.

View Chrome's developer tools for the new post page of dev.to website

Temporary fixes can be applied using Chrome's developer tools and within the tab "elements", we have a window called "styles". We can use the elements to select the HTML element we want to change, and then edit the styles to change the CSS as we wish. However, this is a temporary fix that will be replaced when the page reloads or we navigate away from the page. When the page has reloaded, or we have returned, we will find our styles are reset back to the original values as per the source code from the web server, as the page refreshes.

Chrome extension

To have CSS changes that remain in place even after the page refreshes, we need to have some kind of CSS injector. There are many such Chrome extensions, but I find the best ones are simply notepad-type text editors.

One that I swear by is Live CSS Editor. This extension causes a little text editor to open when clicked, and you can enter CSS or use one of the "improved" versions of CSS pre-parsers like LESS or SASS/SCSS - which have some powerful styling features like variables so you can declare a name for a specific colour palette on your website to avoid an unfocused styling - or add alternating styles to every other row in a HTML table).

With this extension, whatever you enter in the text window will be applied to the web page you are currently on. It will only apply so long as you have the text editor visible. The text will remain in the window even after you have closed down your browser and reopened it.

I tend to create some GitHub gists for each of the sites that I want to fix with my CSS changes. These are code snippets similar to Pastebin's samples, but with the benefit of version control so you can see each change you make and save, as a separate commit, in the same way as you would if you had created a whole GIT repository to store the changes you have made.

From an employability perspective, it makes sense to have a portfolio of your work. A good few projects on GitHub works wonders. Having a collection of gists as a minimum, will at the very least show that you take coding seriously. I find it often makes a great conversation starter. Serious developers will often ask why a certain approach was used, or even share their own suggestions.

Just as when developing a website it is useful to create a prototype or a proof-of-concept so you have a common frame of reference from where to start discussions, so too does it pay to use the best features that GitHub offers (gists, GitHub pages, etc). I would also recommend checking out the likes of GitLab as well. Hopefully you will see the reasons why I think that the GIT VCS (version control software) protocol is one of the best things that ever happened in development. It's like having the undo feature in a text editor, that can take you back to the moment you opened the document and began making changes, except that it persists even when you reboot the machine. You can roll back to earlier versions very easily, and for obsessively, overly retentive individuals like me - GIT is a dream come true!

Anyway, you need to know what changes you are going to make to fix the issues we have talked about. Then you can check them in as one of the many GitHub gists, retrieving them and copy & paste to the Chrome extension's text editor when you need to apply the fix to further allow you to get on with composing your dev.to post!

CSS

I found the easiest solution to my issues is to change the font size. You can see my CSS solution in my public gist. It's crude but effective (a lament I have often received from other sources for reasons I have yet to understand but oh well...).

You can see the results of these CSS changes - before and after - if you look at the Imgur screenshot I saved. Unfortunately I couldn't get the before shot to show the secondary issue I found where the first character was being omitted intermittently. If I didn't know better, I would swear my computer is determined to make me look like an idiot. The girlfriend says that's not a big leap - but I don't understand what she means?

This is a classic example of the power of using Chrome extensions to subsidise the routine tasks we perform. This fix took me less than 5 minutes. It's frustrating to know that this was nothing more than sloppy development of the web site. If I were in charge of development, this sort of thing would be discovered quickly and dealt with effectively. I would probably have a button for editors to "report issues". A textbox would appear, allowing users to describe the issue. This would not be mandatory though, as the thing about encouraging your users to freely offer their time and brains to you for your service, is that you must make it as easy as possible. This means having as few a button clicks as possible. Each keypress counts as a button click. When I have worked on developing website in the past, I will typically have a bug tracker JavaScript extension running on the environments of dev and testing / UAT / QA. This allows anyone to right click on a page and click "report issue". The extension will gather some of the most important bits of information a tester needs including screen resolution, browser version, operating system, element affected, expected behaviour, actual behaviour, reference number, contact details, etc. None of these fields are mandatory, and the key thing is for the extension to grab as much data automatically. Even having your users report an error on a page without doing a screenshot that highlights the affected element, is better than nothing. Testing environments are the last chance to catch bugs before they go live. This extension will be removed or disabled when the site is live, and the visitors to your site on UAT are generally testers or other stakeholders who have a vested interest in ensuring the quality of the website is there.

Summary

There are so many web developers in the world who are less than concerned with quality assurance over delivering as soon as possible, that this kind of bug is ridiculously common. It's reflective of the society that exists where people are ridiculed for pointing out grammatical issues, whilst being accused of being Grammar Nazis in the same way that my peers had their books slapped out of their hands, and their lunch money stolen by the bullies who taunted the geeks for their obsession with computers.
It would be not without some irony that years later, those same bullies would approach their victims and implore their help and assistance to complete an order for say a particular adult website. I took great delight in loudly asking if anyone else had heard of the website that this sweaty, quivering man-child was now begging me for help in accessing. Maybe I should have been a better person and smiled politely whilst helping, but there will always be bullies and idiots who don't understand the point in pushing themselves towards excellence. Why bother to learn to spell, when spellcheck exists?

In a way I understand. We have a lot of subsidised information around us. I personally, was never great at driving because I would struggle to visualise maps and directions. However, I tried repeatedly despite my frustration. It just turned out in the end that it was easier to concede defeat after 2 decades, and learn to love Tom Tom satellite navigation before migrating to Google Maps or Waze apps on my smartphone.

So on one hand, it is understandable that individuals adopt an air of indifference towards website QA. I am living proof that people will always prefer the easier option, and few hesitate to employ the services of a third-party app to make their lives easier.
The reason why I will not accept CSS errors from large websites is that although I used Google Maps to make navigation easier on my brain, this form of "cheating" would not be tolerated so easily if I worked as a taxi driver for a living. It worries me when I seat myself in a taxi only to see the driver squinting at a smartphone screen whilst demanding you spell out your postcode. There can be nothing more basic than a job that has you perform a role that a robot would be perfectly suited for. All they are doing is making the case for AI obliterating many of the unskilled jobs like that.
However, web design is a skilled creative career, requiring the combination of many skills to produce something that the general public may use and which could be very high profile. I have worked on websites that have had millions of users per day, so the pages need to be pixel-perfect with their layouts, in order to justify the enormous project expenditure that my daily rate requires.
Not only do I personally verify my acceptance criteria with every ticket I work on, but I also demand that we have someone in charge of quality assurance and testing. Our Agile teams will have designers, developers, project managers, account managers, stakeholders, quality assurance testers and maybe even DevOps staff. The more people employed in the team, the more bandwidth the team has in order to ensure a good result.

The problem is that with any project, you have 3 desirable vectors that every client will claim they want all of:

1. Higher quality
2. Quicker development timescales
3. Lower Costs

Any experienced professional will tell you - choose 2 - because you absolutely cannot have all 3. You can have something quick and cheap, but the quality will suffer. You could have something with high quality, and cheap, but it will take a long time to develop because you will not find a full contingency of staff to make up those roles I mentioned earlier.

Lastly...

So given that we are always going to have people cutting corners and ignoring standards, and cocksure teenagers who just do not get what the fuss is about with this quality BS then we have to mitigate the problems they cause the end users by learning some basic skills with CSS and HTML. Just as people learn to read and write as essential skills in most schools in the world, so too should all college students and above learn at least a bit of CSS and HTML to make their lives easier. Failing this, knowing a bit of Markdown for example, will make your writing more expressive where it counts.

If you haven't built a web page before, I strongly suggest you install the Chrome extension I mention and being hacking your favourite web site. Combine the CSS Chrome extension with the jQuery Injector and you are away! You can create some enhanced experiences for yourself - from reordering sections of a page - to animating single page applications (SPA) like Gmail and such.

No matter what you do - have fun! Thank you for taking the time to read. Peace, love, and empathy.

• By Chris Randle (csharpforevermore)