DEV Community: csharpforevermore

Annoying CSS issues

csharpforevermore — Wed, 11 Nov 2020 08:22:52 +0000

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

Enhanced YouTube viewing

csharpforevermore ・ Nov 10 '20 ・ 8 min read

#opensource #javascript #html

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:

Higher quality
Quicker development timescales
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)

Enhanced YouTube viewing

csharpforevermore — Tue, 10 Nov 2020 01:19:33 +0000

I've never wrote an article for anything before so please be gentle with me.

Why we made JavaScript

When I first discovered JavaScript, it was called JScript and was as a part of Classic ASP web pages, being as likely to be replaced with VBScript as used. The Web was a pretty boring affair - with mostly text and large, garishly coloured graphics - if any at all. JavaScript was a gimmick - and as far as I could tell - it was unable to do the stuff I needed it to. Coming from a desktop background, my first Windows coding was to create Excel macros in VBA (Visual Basic for Applications). It was hard for me to understand the world of the Web. I was looking outwards from the server-side towards the client-side and pondering over the futility of being limited to not being able to access anything except what the server-side code allowed you to have.

The strengths of JavaScript were far from being realised. It would take half a decade until 2005 before I would begin to see what some of the fuss was about - and the same time again before I really began to understand what it was all about.

Once the notion of the DOM existed, and could be manipulated, then JavaScript grew in power and ability.

My JavaScript

So I didn't go straight into plain JavaScript or ECMAScript or whatever you want to call it. My experience was to make the mistake that many new developers make. I would waste a large portion of my time learning a framework. Just as many teenagers are entering the job market now for front-end developers with React skills that are expertly honed through many personal projects - so too I started with jQuery. Indeed I believed for a while that jQuery was JavaScript. It would be about 18 months into my dev career that I realised the notion of a library. It was another year before I determined that I should master JavaScript instead of just jQuery if I didn't want to end up like many of the AS-400 developers out there on the job boards - with lots of experience and able to earn huge salaries - but only when they managed to get one of the handful of contracts that they were having to fight for against other equally skilled but ultimately lazy, dogmatic developers who had all refused to learn new skills and make sure they were competitive in the modern job market.

As someone once advised me - Software Engineers should aim to be Jack of All Trades - but the Master of One (or two or so). The point is that you need to have a good general knowledge and be an all-rounder - but with one or two main skills that earn you the money.
This means that you can cope with situations such as your main bread-winning skills becoming redundant. When the current trend for React as a SPA framework dies away - perhaps as far as 2030 - there will be those who float and those who drown. If you have mastered the basics of your trade - HTML, CSS and ECMAScript - as well as some of the design paradigms like OOP / OOD, SOLID, etc. then you will have a core set of transferable job skills for use with other frameworks.

If you've managed to get by because you are a React ninja - and know the framework inside and out but have never bothered with any of that uncool, boring stuff because you never needed to and were making so much money that you couldn't be bothered - then you will reap what you sow. I've seen it so many times with other developers, as well as experiencing it myself when the fad that was jQuery fell from favour, so I know that we have a duty as developers to keep our skills updated to reflect market needs rather than simply because we enjoy something. That hobbyist attitude earned a lot of money for many autodidactic self-taught coders, but ultimately you need to maintain a common language and quality assurance approach if you want to work with other developers. I've despaired a few times when I've tried to explain to other developers that they are wrong about something, but they are arguing with me. I seem like the dinosaur to them - with weird value systems that they cannot relate to - whilst I grow infinitely more frustrated with their arrogance as they state the subjective as the definitive.

In fact the other day, I had outsourced a piece of work to an 18 year old guy from Venezuela. He has potential and so I asked him to make a few CSS and HTML fixes. I expected to get the same document but with some extra classes in it. My expectation was to load his document alongside my original - and see the differences. I use a tool called Beyond Compare - and it's a bit like DiffMerge or TortoiseDiff - in that it highlights the differences in files. This sort of visualisation of what has changed in a document is a vital part of development. What I got back was a document that showed every single line with changes!! There were new lines inserted all over the show, and even the indentation had gone from spaces to tabs.

No problem I thought - I'll explain this to the guy and he'll rectify the problem. When I told him that he shouldn't prettify/beautify documents when he is working on a document that he is not creating as a new document - he starts to say that I am wrong. He tells me that I should realise that prettifying a document is essential and normal - and that he did nothing wrong. I literally couldn't believe what I was hearing. I asked him if he'd worked with other developers like this before. He said "yes and they've had no problems".

The fact is that we have all done this before. We've all had to learn that when we do changes, our pull requests must be atomic and easy to read. If the PR doesn't show clearly just the essential changes made, then it will be rejected.
Looking back, I should have used GIT instead of mailing him the file. I assumed that he had the same views as me. Instead he didn't. His mistake was to be arrogant and presume he knew more about this fact than me. He didn't ask me to explain why he had done something wrong. He only came up with excuses rather than logical reasons.
So now I have paid this guy to do work for me in order to save time - only to realise that I now have to revert the formatting in order to see exactly what he has changed. It will take me almost as long to discover the essential changes - rather than those aesthetic ones he chose to add.

Uses of legacy skills and the fun of DOM manipulation

So one of the things I find jQuery most useful for is quick and easy customisation of a web page. My habit is to use the Chrome extension jQuery Injector so that I can run jQuery on any page I want. Now I can hide or show elements according to any logic I want.

A practical demonstration of why jQuery is still useful

So one of my habits is to spend a lot of time on YouTube. I have a real penchant for anything to do with science, technology, development, space or the paranormal. I watch a lot of videos. Since working from home as a developer, I find that I leave YouTube videos playing on a television in the background. They are constantly distracting me from doing what I am supposed to do, but I love this way of working. I learn stuff constantly, and use it to ensure my knowledge is up to date. The only problem is knowing what videos I have watched and those I haven't. YouTube doesn't support many options for this. It doesn't care if you have already watched a video. It wants you to just keep watching.

So we have to do what we need to in order to keep on top of our viewing history. YouTube will cache a list of videos you have already watched - and show you a red line underneath all videos you have watched. On top of this, I always ensure that I rate videos I watch. A thumbs-up or down ensures I can quickly skip a video I've watched.

When I view the list of suggested videos on the right-hand side, I want to only see those videos I've not watched already. The way I do this is to hide those videos that have a red line on the bottom of them. This red line indicates the last position watched of that particular video. A full red line indicates that the whole video has been watched. A bar 1/10th across indicates I've watched 10% of the video.
This is the only DOM information available to us when we are looking at a list of videos in YouTube. I used to believe this line was cached at a browser level, but it applies across YouTube and is saved against your account. YouTube knows where you reached on every one of your History videos. We can use this to our advantage.

How to only show unwatched YouTube videos

Here are the steps to remove all watched videos from a list of videos in YouTube (suggested viewing, channel list, etc).

Open up Chrome browser
Install jQuery Injector
Go to YouTube and ensure you are signed in
Go to a channel you are subscribed to and has a mixture of watched and unwatched videos
F12 to open the Console window.
Run jQuery injector (right click and select) so the page loads a script tag including the jQuery library in the page. You should see some messages in the console window stating something akin to jQuery(//code.jquery.com/jquery-3.5.0.min.js) loaded
To double check, enter console.log(jQuery().jquery); You should see the version of jQuery available to you 8. In another tab, navigate to the script that I made. I saved it as a GitHub Gist. These are useful snippets, not quite as good as Pastebin because Gists lack the number of views so you cannot be aware of how many people are looking at your code snippet, but they do have the version control history that GitHub offers. 9. Paste the script into the console window. You should see the videos with a red line on them disappear. This causes the lazy loading to kick in as though you had scrolled the page down, and the places where the hidden videos once were, are now filled with new content.

// example data
var selector = '.ytd-thumbnail-overlay-resume-playback-renderer'; // CSS selector for red bar indicating video has been watched
var exampleUrl = 'https://www.youtube.com/channel/UCN64HIrZNqFQYZ2BuyY-4zg'; // example URL for text
var jQueryInjectorExtension = 'https://chrome.google.com/webstore/detail/jquery-injector/ekkjohcjbjcjjifokpingdbdlfekjcgi?hl=en'; // url for chrome extension to inject jQuery into page for code below to run

$(selector)
  .parent()  // ytd-thumbnail-overlay-resume-playback-renderer.style-scope.ytd-thumbnail
  .parent()  // div#overlays.style-scope.ytd-thumbnail
  .parent()  // a#thumbnail.yt-simple-endpoint.inline-block.style-scope.ytd-thumbnail
  .parent()  // ytd-thumbnail.style-scope.ytd-grid-video-renderer
  .parent()  // div#dismissable.style-scope.ytd-grid-video-renderer
  .parent()  // ytd-grid-video-renderer.style-scope.yt-horizontal-list-renderer
  .hide();

Future ideas

I would like to make this into a Chrome extension. If someone wants to do this, I'd appreciate a credit. That's all I ask.
The fact is - jQuery has some very useful features. It only needs a single library to give you all this control over the DOM. Sure - it's not as popular as the new SPA frameworks - but it does do the job correctly. It's very polished and still maintained.

Any feedback would be welcomed.