This content originally appeared on DEV Community and was authored by InHuOfficial
Oh dear, I write these angry rants and people are actually silly enough to ask me to review their websites in the comments?
Strap in as I destroy a young developer's site, with their permission of course!
They actually asked you to do this?
Yes, how silly of them! And they did it on one of my angry rants posts too so I knew they were up for punishment!
That very much depends, do you want "a review" where I look at your site and give you a few pointers and tips to improve it.
Or do you want "A REVIEW" where I pick apart every tiny little thing that isn't absolutely perfect with the site and trash you to within an inch of your life making you wonder why you ever thought you wanted to become a developer? (same as this article, anger is for fun!)
Happy to do either, if you are brave enough to go for the second option I will do a whole article on it...but it will be brutal 🤣!
I want a genuine review so I am ok with 2nd option.
See I am not lying, they volunteered to be shredded so here goes (angry man rant mode full engaged!)
Trigger warnings: The anger is for fun but the article will be aggressive and there are likely to be swears. If you are sensitive to either of those things then you should leave now! Oh and if you are a fan of TailWind I bash it repeatedly throughout the article, so you have been warned! 😉
First Impressions
When I landed on https://www.bhagyamudgal.me/ I was greeted with a pleasing dark theme and a nice waving hand emoji.
Aww bless Bhagya, you even have a picture of your handsome face, which is great.
But you have fallen into that trap of copying shitty ideas from other developers.
Don't be so weak with your openings.
First the main heading "Hi👋🏻, I am Bhagya Mudgal".
Talk about a weak opening! Yes I know who you are your name is in the fucking URL.
Also I don't really care what you are called yet, I have a problem and I want to know if you can fix it!
That is immediately followed by a typewriter effect telling me all of the things you are!
When did developers start thinking that they had to list 50 different attributes to make themselves appear interesting? Are we arrogant enough to think people care or it is even relevant?
Also do you really expect someone to sit there and wait 20+ seconds to read 5 "interesting" factoids about you?
Ditch the typewriter effect, only developers think it is good.
Finally let's talk about that nice picture of that beautiful face of yours in pride of place.
You look smart and professional which is great.
Unfortunately it looks like you are in the scope of a sniper due to the circular surround and the line across the background! (I added the red dot just to complete the effect!)
What should you do!
Bhagya why are you doing this to yourself?
You were smart enough (or is it stupid enough?!) to ask for a review, how can you not see how weak the first impression is if you just copy crappy developers who have no imagination!
Rethink this bit. Ask yourself the key questions:
- why did I build this site, what is my goal?
- what do I want people to do when I finally persuade them to click on my link and visit my site?
At the moment the answers are "I don't know" and "look at a pretty animation"?
Fuck that, I can see you have just started freelancing, that is fucking great! So what do you want?
My guess is freelancing work!
But what work? Who do you help? Small businesses, development companies looking for temps and sub contractors? Do you do designs or do you build things from designs?
Answer those questions before anyone has chance to click that back button.
I am making this up obviously but something like:
I build high quality software and web experiences that drive customer engagement and improve sales
Fuck me, you are the man I need, where is the contact button!
No seriously, where the fuck is the contact button?
Don't make me look for the next action.
If you want me to contact you then place a "contact me" link (styled like a button) right below the opening paragraph.
Or if you think I will need more information before making a decision then make the link lead to your projects page with the text "See how I can help".
And for the love of God will you retake that picture (or photoshop out the background line) so you don't look like you are about to eat the wrong end of a .50 cal armour piercing rifle round?
What the fuck is Butter CMS?
I was going to ask you why you were being a cheapskate and allowing advertising on your site. Then I saw the price of butter CMS and realised you were actually smart!
Fuck me that is some expensive software (that you really don't need!) for a brochure site!
$333 a month ($399 a month if you don't want to part with $3996 in one go and pay annually!) for a 100 page maximum website? (they want me to pay extra for page 101?)
Fuck me I will build you a CMS for $299 a month, how is that for a deal?
Anyway this isn't a rant about Butter, the point is a big fat advert in the corner of your site is very off-putting!
Ditch that over priced CMS and take the time to find an open source alternative if you want stuff for free!
I mean, you spend ages writing an article, promoting it on social media, someone likes what you have to say and finally visits your site, excited that you might be able to help them.
They see the massive and out of place advert, click it and go away from your site.
They get confused by Heroku and all manner of words they don't understand, see the expensive prices of the CMS and go back to Google.
Visitors are hard to get, don't give people a reason to click away ffs!
You fucking hurt me with your Markup
Oh man, you used an SVG as a button for the mobile menu?
Rather than cover all the ways you fucked up in detail, I already have a rant perfect for your site:
Go on, read that shit before you continue!
Read it? Good! Now please, for the love of God, will you just use a <button> for a button. It is right there in the name.
This means that people using assistive technology such as a screen reader when viewing your site on a mobile can still reach your navigation and enjoy your site.
But that isn't the worst of it!
You used <button>s for your navigation items themselves (on desktop and mobile). Buttons with hrefs! It isn't even valid HTML!
These should be anchors (<a>).
Here is a golden rule to remember what to use - if the URL changes when you click something then it should be an <a>, otherwise use a <button>.
Additionally the links to other pages should also be within a <nav> element as they are navigation - the HTML spec peeps really outdid themselves making this element easy to remember.
Yet again this helps screen reader users as they can then navigate the page by regions and find the navigation easily!
Here is the Markup you should be using:
<button class="md:hidden Other TailWind Attrocities" aria-controls="main-nav" aria-haspopup="true" aria-expanded="false">Your SVG for the menu on mobile</button>
<nav id="main-nav" class="hidden md:flex">
<button class="Arrrgghhh Tailwind mess">Your SVG for closing the menu</button>
<ul>
<li>
<a class="nav-button" href="/" aria-current="page">Home</a>
</li>
<li>
<a class="nav-button" href="/about">About</a>
<li>
<li>
<a class="nav-button" href="/blog">Blog</a>
<li>
<li>
<a class="nav-button" href="/projects">Projects</a>
<li>
<li>
<a class="nav-button" href="/contact">Contact</a>
<li>
</nav>
Fucking simple to make things accessible isn't it!
First thing you will notice is I added aria-current="page" to the current pages hyperlink.
Instead of disabling the navigation item for the current page you can just add this attribute to tell screen readers what page they are on!
What is even more cool is that you can use this for styling with:
.nav-button[aria-current="page"]{
/*your styles*/
}
Well you could have done if you hadn't used TailWind! But there will be plenty of opportunity for me to slip in digs at TailWind throughout the article so I will leave that alone for now.
Now there are a load of weird attributes I added that you might not recognise.
Don't worry it isn't your fault that courses don't teach you about accessibility so it all looks scary!
Let me break it down for you:
-
aria-controls="main-nav"- This associates the button with the navigation so that screen reader users know what this button is related to. Themain-navpart is theidof the navigation and that is how we make the link. -
aria-haspopup="true"- This lets screen reader users know that clicking this button will open some sort of modal / window. -
aria-expanded="false"- This attribute lets screen reader users know the current state of the modal / popup (that we associated earlier witharia-controls). It should start asaria-expanded="false"as the menu isn't open. However when the menu opens you need to change this toaria-expanded="true"to let screen reader users know that the popup is now visible.
There are a couple of other things to note.
When I press the "open" button and the menu is displayed you should change the focus to land on your "close" button (which I have changed to a button in the same way I did with the open button).
SVG accessibility
Also with SVGs you need to provide a text alternative.
Basically at the moment your SVGs do not contain any text that a computer can use to announce what the image is about.
As we are using these images as the contents of buttons we need to give them a programatically determinable name so a screen reader user knows what the open and close buttons do!
Luckily SVGs have a way of adding accessible names built in, this is the <title> element.
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-labelledby="close-title" role="img">
<title id="close-title">Close</title>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
</svg>
You will notice how I added the <title> as the first element above any paths in your SVG.
Think of the <title> as an alt attribute on an image.
The only other thing to note is that I used aria-labelledby and pointed that to the <title>.
This is just a way to make the SVG more robust for screen readers.
Finally I added role="img". This tells the browser to treat this SVG like an <img> element and is just another thing we have to do to make it more robust.
I know that is a lot to take in but as long as you remember to:
- add
role="img"to the SVG element, - add a
<title>element with a suitable description, - give the
<title>element a unique ID - use
aria-labelledbyto point to that ID
you will be fine, even if you don't understand the exactly why at this stage.
Finally you should also trap focus within the menu but that is complicated and something for another day, especially as this is a mobile menu so it is less relevant.
A new sin!
Here is one I haven't covered before in any of my writing.
You put a <button>...in an <a> on your projects page?!?
What on Earth is that about?
Your poor browser will be screaming!
"Ok did he click the button, or the anchor. What should I do? Should I fire both or just one? Who am I? What day is it? Why did you do this too me, why?" - your poor browser
As an added side effect of this atrocity it means that when tabbing through the page every single linkbutton (a new term! you invented a new shitty element!) has 2 tab stops.
As each card has 2 linkbuttons within it you have added so many additional tab stops that I got fucking Repetitive Strain Injury (RSI) reviewing your crappy site!
Never nest interactive elements (well almost never but that is a long and nuanced conversation).
Ditch the <button> inner container in favour of a <div> as the outer anchor (<a>) is the right element to use here.
Contact Page
You added labels to your form! You even put them in the right place (just above the relevant input and aligned to the left)
I was starting to forgive you for the button fiasco and my heart rate had dropped below 150 Beats Per Minute (BPM) finally. Then I noticed that you didn't associate the label with an input! 🤦♂️
Are you trying to give me a fucking heart attack? My heart's BPM is back over 180 now!
Web Development 101: You need to give your inputs IDs. Then on the relevant label you add for="IdOfRelevantInput".
Really fucking easy!
<div class="flex flex-col my-4">
<label for="nameInput" class="TailWind Bullshit">Name</label>
<input id="nameInput" name="name" type="text" class="More TailWind Bullshit" placeholder="Enter Your Name" value="">
</div>
What this does is make sure that a browser can tell a screen reader "this input is linked to this label so please say "Name" to describe this field".
Oh and by doing that you will be able to click on the label to focus the input as well as the input itself, which is really handy if you are someone with accuracy / dexterity problems (i.e. someone with Parkinson's Disease or Cerebral Palsy).
There are other problems like the fact that the error messages are not linked to the input, your inputs don't indicate they are invalid etc. etc. but let's start with the basics and link the inputs together first, I can help you with that stuff later or you can read up on making forms accessible.
Oh and just a heads up, a certain angry accessibility guy not too far from here is going to release a monster article on forms in the next 2 weeks so you may want to keep an eye out for that as it will probably cover all the bits you need to know (and more besides!) 😃!
About Page
Yes I know I am not going in order, tough shit! I like making you have to think!
Now being really brutal you have to ask: Is the about page actually relevant?
Well yet again I do not know the goal of the site. If you are looking for love then you are certainly on the right track as this would make an excellent dating profile.
But if you are looking for work, or looking to get more readers etc. then you need to cut the crap that doesn't matter.
I like to ask myself the following question when writing copy:
"Does this tell the person reading it one of the benefits of using my services / reading my stuff" etc.
In this instance I will offer two variations:
You want more readers
"I am a student in New Delhi with a passion for writing.
I like to write about the MERN stack due to my extensive experience using it in personal projects, for client work and in open source projects.
I also like to write about my journey and experiences when learning to use new technologies, as I believe this may be useful to others.
If this is the sort of thing you like to read about then why not connect with me, I love making new friends in the developer community and seeing how we can help and learn from each other:"
You want freelance work from other developers
"I am a college student by day and freelancer by night.
I have created several site clones and helped several clients bring their ideas to life. "You can check out some of my work here" (link to projects and add any client work you have done).
As a student I am able to offer a fresh perspective on common problems and utilise the latest technologies to help you achieve your end goals.
I am proficient with [list of 3/4 core items] and can quickly pick up new frameworks if the need arises."
Hopefully you get the idea, focus in on one thing. There is a saying "Jack of all trades, master of none" here in the UK. It basically means you haven't learned how to do one thing well and so do lots of things to an average or poor level.
This leads me onto the massive list of technologies on the about page.
It isn't helpful, it actually hurts you. Do you know what people think when they see all of those icons, "What a talented young man who can do everything".
No I am fucking kidding, they think "yeah right, a student who has worked with all of those technologies is going to know how to do "hello world" at best in each of them and won't be any use!".
I have no doubt you can do more than hello world in each of those technologies, but you should focus on the ones your are particularly strong on and show maybe 5 / 6 key ones to people.
Also I would recommend changing them to be a list with the icon for the technology to the left and then the name of the technology and an example of your work with the technology (if applicable).
This is due to the simple rule of "don't make people think". I was looking at those icons and it took me a few seconds to recognise some of them, and I have been at this for years.
People have short attention spans and so they will only glance at the icons and then move on, possibly missing the very technology that will trigger them to think "ah, Bhagya uses that and we need someone to do XXX" and get you some work!
A final thought here is if you want work from small businesses you need to scrap this page entirely as it stands.
They do not care about tech stacks, small business owners care about what pain points you can fix.
So if you are after work from small business owners focus on how you can bring them customers, fix problems with their current sites, help bring their next big idea to life etc.
Blogs!
Now we are talking, some of your writing!
Now before I tear you a new one over your shitty code once again let me just say you write well and I enjoyed your articles!
Sorry, I don't know what came over me, back to the rant!
First the blog landing page, <h1> heading, check!
A list of blog posts...yeah but in a load of nested divs!
If something is a list, use a fucking list!
Wrap your posts in a <ul> and make it easier for people using assistive tech (as it will then announce the number of posts...same principle as the navigation part I mentioned earlier!)
Also your article "headings" are just styled to look like headings.
By adding a <h2> to contain your headings instead of <p class="text-gray-800 text-xl font-medium mt-4 mb-2 break-words"></p> it means that people using a screen reader can also navigate by heading levels (the most popular way to navigate a site!)
It is also good for SEO!
Also do we really need the fucking "click to read more" in 2021? Meh, minor point but I would ditch that.
Finally just as an observation but why have you got an author at the bottom of your posts? They are all written by you what is the fucking point? Are you thinking people are going to guest blog for you with your 12 visitors a month?
Wait until you scale this blog up to be a monster, then add the author info to the blog cards!
Now an actual post
Yet again it starts promising, you used a <h1> for the first heading (honestly I shouldn't be fucking impressed by this but as so many sites fuck this up I suppose I better praise you!)
Now onto the article headings and...they are <h3>s.
Why oh fucking why would you do that? What made you think "oh yeah start with a <h1> and then skip to a <h3> that makes sense!"
Do you not like <h2>s? Are you h2phobic?
Fix this shit, don't skip heading levels!
The irony that one of your articles is called "Signs that bad programmers have" while skipping fucking heading levels is beyond funny, thanks for the laugh!
The final thing to mention is the publication date.
This should be located within a <time> element. This is just good practice!
When using the <time> element you should also set the datetime attribute on the element so that computers can understand the date you have entered. So for example:
<time datetime="2021-09-12">Sun Sep 12 2021</time>
Final thoughts
You have made fewer mistakes than most "senior" developers so I suppose you deserve some praise for not being as shitty as everyone else.
Obviously there are still more things I haven't slated you for and I don't want to miss my chance!
These include:
- Lack of
<main>element - The fact your site "only" scores 90 / 100 on web.dev/measure - but that is because you are using Client Side Rendering for a brochure site and that is just stupid! Don't worry though you are certainly not alone in this and 90 is respectable enough!
- The fact you don't use
prefers-reduced-motiondetection or a way to switch off animations to make sure animations are reduced for people with vestibular disorders. - The lack of relevant
WAI-ARIAattributes on your contact form that I mentioned earlier. - using white text on a black background is just as fucking blinding as black text on a white background - find a slightly softer palette ffs! (Yes I am complaining your site has too much contrast...get over it!)
As you can tell I could go on and on and on telling you how many things you fucked up, but I feel like I have done enough damage for one day!
Hopefully I have succeeded in destroying your site as requested!
You're fucking welcome! 😂
Being serious for a second
Ok the angry man rants are switched off now, I wanted to give my honest opinion.
I just want to say Bhagya, the site is nice and simple and gets the point across well.
It may look like a long list but honestly you have done quite well.
The site is reasonably easy to use with a keyboard, the colour contrast is pretty good, the navigation is clear etc.
One thing that is hard to get across in angry rants is where the important fixes are.
The 3 things that you should tackle first from an accessibility perspective are:
- the labels not being associated with the inputs
- the skipping heading levels problem
- the nested / misuse of buttons and links.
Fix those and the site becomes much more usable for people using a screen reader.
Oh, and I am serious about that picture on the home page, you look really smart but also really like you are about to be taken out due to the unfortunate line behind you! 🤣
Thanks for letting me unleash the angry man on your site, it was fun (and therapeutic!).
If you have any questions just let me know and I will try and help / point you to useful information on how to fix stuff.
Thanks for being my first victim and good luck with the BCA and freelancing!
Oh and I have a super important post going out later today so stay tuned - titled "1000 days to £1million - this should be fun!" so check that out please!
This content originally appeared on DEV Community and was authored by InHuOfficial
InHuOfficial | Sciencx (2021-12-07T11:41:01+00:00) I 👿 BRUTALLY 👿 review your crappy sites, first victim is Bhagya Mudgal!. Retrieved from https://www.scien.cx/2021/12/07/i-%f0%9f%91%bf-brutally-%f0%9f%91%bf-review-your-crappy-sites-first-victim-is-bhagya-mudgal/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.
Can you review my Portfolio bhagyamudgal.me