While searching for a job in the current market, we are asked to have prior knowledge of Frameworks like (React, Angular, Vue), these Frameworks provides excellent tools that help with creating complex sites, Facebook is a perfect example.

Working on these complex sites and interacting with their functionality behind the sense is a dream any internship will be weird to not to have. The reality it's unlikely that our first job will be in these companies, still we learn Frameworks because that what we have heard, Learn HTML, CSS and JS then choose a Framework to get that life changing job.

The Bitter Reality

We start applying for these life changing opportunities, we get rejected. It's fine, we apply for starts ups who post about internships, we get rejected, with emails saying we don't have enough "experience".

The rage we feel toward the companies that ask for "internship" with "experience" subsides, we keep at it we just need this life changing job so we learn more of the Framework, send Live demos showing that we know how to use them, again their answer is "experience".

I grow desperate, I thought I am going back to the job I hated to make a living. But I keep trying. I go to our close owns, or a lucky random encounter in LinkedIn connection. I receive the first gig and I am going to do it perfectly with best practices, and a lighthouse score of 90.

everything is ready, I deployed it, and The result is disappointing. the site is slow, but I don't know why. I followed best practices, and used everything in my knowledge.

The Ignored Elephant

So what's going on? why was a site with 90 score, wasn't good?

The answer simply is that I followed the best practices, and used everything in my knowledge. I was applying the cool tools of the Framework and best practices, that developers wanna see when they see your code. Organized file structure, External Style and Scripts files, you know stuff that makes you look "experienced".

So I made a site that looks good for another developer, while working for a client who need a site available for diverse users.

Bad Best Practice?

Bad best practices are concepts we apply to ourself to make our code more readable for other developers, which lead to making sites for other developers, but some of them come with a cost on users experience, So we create a bubble where the creators are the products which not practical in our current industry.

Although I said "the creator are the products" this isn't true. Ask yourself, when was the last time you visited a site was slow, and decided to dive deep into devtools to check the site?

So how is bad best practice bad?

• Organized file Structure:

This one is good almost everyone swear by it, but I think people love to add extra details, which pollute the original advice. when I heard that advice they added "break function into files then add them into folder for easier readability". They forgot to mention that when you do this you add extra load by increasing your JavaScript Bundle, this will make sites slow and worse; delay the functionality.

• External Styles and Script files:

This one is perfect fine, if the project is small, but it has a catch. In the past, when you open a site elements in the DOM would load from top to bottom, so the user can see parts of the site even interact with it. This disappeared from people talk, like making the user wait until everything loads is the way

if you wondering why the page is loading this way, the culprit is <link rel="stylesheet" href="styles.css" />, because the DOM is loading from top to bottom. it waits until style is loaded before loading anything else.

• use the cool tools of whatever Framework.

When have you asked your clients, family member, or the lucky encounter in LinkedIn "what do you want to add to your site, and with what Framework"? I did this to people who don't even know anything about front-end development, who can fault this? After all Frameworks are extremely fun powerful tools to create complex sites, But I didn't need to make complex sites in my gigs.

So not only I was building a wall between clients and me, by asking them indirectly to know about Frameworks and know what to trendy cool stuff they need. It would have been better to ask them "What is your goal from this site, and what is your target audience?".

Focus On The user

Here lays the issue. For clarity, I am Egyptian, in my country the cheapest mobile service gives 1gb a month, and it's normal to have devices with low specs. With these in mind, sites with big bundle size are ignored, that is 100 millions market that is left out. So my Landing page and sites alike would have been blocked for these users, whom my client actively wanted to reach.

I guess the same can be applied to other developing countries. I just used Egypt because that's where I Live

I have been taught so hard, I have to use best practices to be accepted in the industry, and to get jobs offers, but they didn't teach use best practices if used incorrectly will lead to worse experience, it will make your site obsolete for some users.

I strayed from the original reason of developing. Providing solution, opportunities, or information should be my reason to make a site. What use if you have the best solution, opportunity or information if users can't access it?

So How To Make Sites Reachable

Here are ways to reduce the load, I found while researching way to make mine faster.

• Use less JavaScript:

You may be tempted to use JavaScript to add this cool interactivity, but don't fall into this like I did. Adding JavaScript to make the famous hamburger menu is fine, but if you are trying to make that menu unique looking using more JavaScript, you should ask if it's worth it adding that hassle. CSS and HTML can add uniqueness perfectly fine, So unless it's a functionality the sites need, like subscribing to a newsletter or submitting data Use less JS.

• Use Astro (Not sponsored):

If you are new like me, then it's taxing to add more stuff that you have to learn, or apply with only HTML, CSS and JS in the resume. Adding Astro is good quick solution for us, to not worry at least for now about making site faster, while keep learning.

• Inline CSS shouldn't be frowned upon:

When was the last time you stood in a line? It isn't fun. If your site takes more than 100ms to load, it should focus on loading the important elements first. Styling them using inline CSS makes your CSS loading lighter, guaranteeing the user the ability to interact with the site.

if you are using React, server-side rendering may interests you

Conclusion

If you read this and still not convinced. It's fine, maybe I wasn't clear or your target users aren't the same.

Just know, that I hope more diverse users will be included in other people plans in site creation. Internet do provide Life changing opportunities. the worst feeling for someone who need these opportunities, isn't when Udemy courses are overpriced, it's when free courses aren't accessible, they feel secluded.

I am planning to make every project, I make as light as possible for it to be accessible to developing people as well. If you are planning to create courses or spread information, I hope that you do as well.

I think people love to add extra details.

I was lucky to find these by random, while needing info the most. have a look because I may have added extra details.

• Did We(b Development) Lose the Right Direction? • Stefan Judis • GOTO 2021
• Is .css a bad idea? Is inlining the way forward? | HTTP 203
• The state of responsiveness on the web
• Transitional apps