Forem: TechThatConnect

Array sorting with javascript

TechThatConnect — Tue, 09 Jan 2024 17:17:39 +0000

Sometimes, for fun, I like to give myself small leetcode-like questions in the morning and see if I can have an answer by the end of the day. This is a fun way to keep my skills sharp and learn new concepts. Today's task started simple enough.

Given an array of numbers not in numerical order, sort the array so that its contents are in numerical order(lowest to highest)

I made a mess

First I tried something using deeply nested for loops that became an unreadable mess before it became functional. Then I tried an approach that added all the numbers together, got the median then tried sorting based if higher or lower. This also didn't work. So I googled it to see what others have done. This is how I stumbled upon the bubble sorting algorithm. My final result now looks like this.


let arr = [10, 21, 3, 45, 15]


let test = function(arg){


let bul;


do{

bul = false

 for(let i = 0; i < arg.length; i++){

  if(arg[i] > arg[i + 1]){

   let temp = arg[i]

   arg[i] = arg[i + 1]

   arg[i + 1] = temp

   bul = true

  }

 }

}while(bul)


return arg

}


console.log(test(arr))

why does this work

The basics of this algorithm is to take the first element and compare if it is larger than the next element. If it is, swap them, then repeat until we have made a full loop of the array with no changes. That's it, just some simple math and conditionals.

how does this work

We use a variable bul that is a bullion to let us know if there have been any changes on this iteration. Declaring this variable is the only statement outside of the do/while loop. This loop is set up so that as long as the variable bul remains true we will execute the contained function. This function contains a For loop that iterates over the array. We then use an if statement to see if the current element is larger than the next element. If it is, we create a variable temp to store the current element. Change the current element’s value so that it is equal to the next element (if the second element was 2 now both the first and second element are 2). Then we use our variable to copy the value that was our current element into the next element. At the end of all this we change the variable bul to true, This is what keeps the loop going. Once the if statement is not triggered it means we have looped over the whole array without making any changes, meaning all values are where we want them.

when to do this

If you understand big O notation (an equation often used to measure the efficiency of algorithms in computer science) bubble sort is O(n^2). This is not great in terms of efficiency but let's talk about why. Since the algorithm is nested loops and we are making comparisons between different elements, the time it could take to complete is the square of the number of inputs. In Fact each time you nest another loop you would add another power to n. So nesting one more for loop would make the efficiency O(n^3).

Big O notation aside the long and short of this is The more you have to sort the longer it takes to sort it. Bubble sort is a great and simple algorithm but for large data sets is impractically slow for most use cases. If your array is a few hundred elements, bubble sort is probably a great fit. Thanks for joining me in learning about bubble sort, I hope this has helped you in some way.

Object manipulation technique.js

TechThatConnect — Sat, 16 Dec 2023 20:09:42 +0000

I am working on leveling up my javascript skills and like to learn by building things. So I was working on a simple javascript game as an experiment. When I figured out something weird you could do with object manipulation that kind of made my head screwy. You can reference one object within another and manipulate both of them simultaneously. Let's have a look at some code here.

Can I get a reference

Below I declare 2 variables. however the value of one variable is the other variable.


Let original = "unique string";

Let reference = original;

If you were to log out the value of these variables they would be identical. The same is also true for objects with nested properties.


let theOriginal = {stuff :'unique string', another : ‘second unique string’}

let theReference = theOriginal

Now if you log out theReference you will get the same key/values as theOriginal.

You can take this one step further and manipulate a value.


let theOriginal = {stuff :'unique string',

Another: ‘second unique string’}


let theReference = theOriginal


theReference.stuff = 'other string’


Console.log(theOriginal.stuff) 

// will now log ‘other string’

Ok whats going on here?

When I first learned Manipulating one variable affects the other in this way it kind of made my head spin. I was thinking about each variable as being its own separate thing. This however is not true. The reason this works is because in the actual physical memory of the computer this is running on there is really only one object. This object is referenced by 2 different variables. Much like having 2 doors to the same cabinet. If you add something to the cabinet with 1 door when the other door opens there will be a new item there.

Why do this?

You can add many more references to the same object as you want. Though this adds a lot of unnecessary complexity to your code. There are few use cases where it really makes sense to do this. For me, my use case was a turn based game where each player object takes a turn being the active player. Having the active variable just reference the player object meant any changes made to the active object during the turn would already be represented in the player object.

I think this is a cool tid bit of knowledge that really expanded my understanding of javascript as a whole. Below is a code pen where I experimented with this concept.
I want to thank you for reading this through and I hope you found this article helpful in some way.

Swords and Hammers

TechThatConnect — Tue, 07 Nov 2023 13:14:02 +0000

This is part 2 in a series. Please read part 1 first.

So last time I went over the challenge I set out for myself. I have come up with the name sword and hammers. I feel this represents what happens well. I would also like to talk about why I am doing this. Which is first and foremost for me to learn. But hopefully others can learn from this as well or better yet notice bugs or improvements that can be made. With that out of the way it's time to talk about the implementation. The nitty gritty so to speak.

I have split the javascript code up into 2 parts: game logic and UI logic. Today I am talking strictly about game logic. Which is just a collection of functions that when called statically could play the game within the console. First I create some global objects that will form the basis of the game. These objects will be manipulated as the game is played.

Player Objects

So what do we actually need? It has 2 players who have stats such as hit points and gold. So I create 2 identical objects. These objects have a fair amount of properties, some of which are arrays that grow and shrink as the game is played.


let playerOne = {

  hp: 20,

  gold: 10,

  building:'none',

  totalAttack: 0,

  totalDefend: 0,

  workers: [],

  fighters: [],

  graveyard: []

  }


let playerTwo= {

  hp: 20,

  gold: 10,

  building:'none',

  totalAttack: 0,

  totalDefend: 0,

  workers: [],

  fighters: [],

  graveyard:[]

  }

Let me break down what each of these properties are for and how they affect the game.

Hp and gold are numbers representing how much health and resources a player has respectfully.

The building property will have 2 states: the string 'none' or an object representing a unit selected by that player for creation in the build phase.
TotalAttack and totalDefend are numbers representing the number of fighter units with the action attack or defend respectively.
Workers is an array containing the individual objects for each worker unit that the player has.
Fighters is also an array with individual objects for each fighter unit the player has.
The graveyard is an array as units are killed of their objects are pushed to this array.

Game Object

There is also a game object. It has the following properties.

turn which is a number representing what turn the game is on. Default value is 0.
active is a reference to the player object whose turn it is. The default is playeOne. Since this is a reference we can manipulate the properties within active and have the changes also appear in the actual player object.
p1select has a default value of the string 'none' meaning the playerOne has not selected to build any units this turn. Or it is an object representing the unit selected by the playerOne for creation. This object will then be passed to the validation algorithm to see if the player has enough gold to build it and has no other units with the same name.
P2select is the same as p1select but applies to playerTwo instead.


let game = {

  turn:0,

  active : playerOne

  p1Select:'none',

  p2Select: 'none',

}

Unit Objects

The next challenge was the unit objects. I needed two, one worker and one fighter. I opted to use object constructor functions for each. There will be many of each unit for each player but they will all have the same properties.


function worker(input) {

  this.type = 'workers',

  this.cost = 5,

  this.action = "none",

  this.name = input

  }


function fighter(input){

  this.type = 'fighters'

  this.cost = 10,

  this.action = "none",

  this.name = input

  }

The functions take in one argument which is a string. This string is a unique name assigned by the player that will be used to identify that specific unit from others in the same array. I feel the names are a fun way to give more meaning to the game. Losing your first fighter 'jimmy the slayer' has a slightly bigger emotional impact compared to one less number in a list. Let's talk about the properties.

Type is a string that tells us what type the unit is. The string remains constant and is never manipulated. This is used by the testing algorithm to determine if a unit is a worker or a fighter.
Cost a number telling us how much gold it will cost tye player to make this unit
Action is a string whose default is 'none' meaning the unit has no assigned action for this turn. Each unit has 2 possible actions represented by strings. Workers can have 'gold' meaning they produce 1 gold this turn or 'sac' meaning they are sent to live in the castle and give the player 1 hit point. Fighters can have 'attack' meaning they will do 1 damage to the other player. Or 'defend' which cancels out an attack from one of the other players' fighters.
Name is a unique string that identifies this unit from others in its array. This string is passed as an argument to the function when the object is created.

Wrapping up

And there we have it. These global objects form the basis of the game. All we need now are some functions to manipulate them. Thats a story for another day though. So check back because next time we will deep dive into the validation algorithm and, if we have time, talk about the functions that make the battle system work. I hope this article provides some value to you as writing really helped me learned a lot. See you next time.

Mental health lessons learned in software

TechThatConnect — Mon, 11 Sep 2023 18:21:28 +0000

When I first decided I am going to learn how to code I was terrified of making a mistake. Terrified of someone else seeing me make a mistake. Terrified of someone else thinking that I don't know something. What I told myself at this stage is, this stuff is hard and complex and you aren't expected to know everything. There are no stupid questions and there is a good chance someone else has asked that same thing before. Feeling bad or guilty for not being knowledgeable is a trait I find very prevalent in our society.

Our Society

In fact I find Western society such that we are taught mistakes are bad and we shouldn't make them. That we are bad or stupid for making mistakes. This belief makes it difficult to learn. Failure is the best opportunity for growth and learning but only if you accept yourself in spite of that failure. I mostly blame the school system but I can't keep blaming something I finished 10 years ago for my problems. So this is where the real work comes in.

Error Handling

We all make mistakes. It's how you react to these mistakes that will really define you. Do we accept the mistake and carry on? I would assume so. I would do this. I would solve the "problem" but be left angry with myself for making the mistake. It wasn't until I learned to really accept myself in spite of failure that it all really changed.

Mental Health

A big topic today. The Mental Health market was anticipated to achieve a revenue of US$36.73bn by 2023 this is what people are paying to simply "feel better" in a lot of cases (this is a generalization, I know it's much more nuanced than that). But one simple thing I found that I really think saved me. the general approach to software engineering and applying those lessons to other aspects of my life. This opened so many doors and cast new light on aspects of my life I didn't even know existed.

Let Me Explain

If something in my life wasn't going the way I wanted I always blamed myself for letting it get that way in the first place. Be it romantic relationships, financial situations or your day to day home life. Learning how to break down these big issues I was having into small actionable steps. Was life changing. Accepting myself in spite of the way things are and then doing something to better the future gave me so much hope. Then I started to see my problem differently.

Your Problems are a Bug in Production

This was the real part that hit me hardest of all these discoveries. Looking at an issue i'm having like a bug in production. Often the quick fix can break something else. Fixing your financial situation is great but not if it's at the expense of your mental health or families well being. Taking note of your issues then taking the time to get to their root causes is not always a quick easy fix. If it is, good for you but please be patient with the rest of us.

I hope this is helpful to anyone else struggling. Keep in mind this is what worked for me and may not be what works for you. I am by no means a mental health expert and just a person on the internet. I would be interested if you have had any similar experiences. Did the ways we solve software problems help you solve other problems in your life? If so please share them in the comments. Cheers and stay well everyone.

My new side project

TechThatConnect — Sun, 27 Aug 2023 14:30:03 +0000

Once you gain the basic knowledge to understand a programming language it's still a while before you feel competent with that language. The best way to learn and gain competence is by making something. Then re-making that thing several times because you just didn't like the way it felt the first few times.

I am working on my proficiency with javascript so I decided to make a game. I picked out a clear goal of what I wanted to make and am fumbling through the logistics. I am learning a lot. Let me go over the idea itself in more detail.

the Idea

To make the logic easier to implement I decided to make a turn based game that two people would play together on one device. I loved RTS type of games like starcraft, age of empires and stronghold growing up so I was inspired by that. Each player would be building a castle producing gold and using that to buy units that will make more gold or attack the other player. To keep things simple I will only have 2 unit types, one for attacking and one for making gold. Each player has a set of 20 hit points and the goal is to make your opponents hit zero before yours does.

the Goal

To make this game using a functional appoach so that it may be expanded with ease. Publish all the code on git hub and write detailed blog posts about making the game and how it works which will then act as the docs for the project. Doesnt sound to hard right? Now that I have clear goal its time to get to work.

the gameplay

Each players turn will consist of three phases. The first will be when they select which unit they want to produce. Gold is deducted from the player at this point but the new unit will not appear in their list until the following turn. The second is when they decide on actions for their worker units. Workers have 2 actions make gold and sacrifice for hp. When making gold the unit produces 1 gold added to the players wallet the following turn. When sacrificed the unit is removed from playets list and the player gains 1 hp. The hit point is awarded after all other action have taken place for that turn. Note that if a players hp reaches zero before the awarded points from a sacrifice are added the player whos hp hit zero still looses the game. The thrid and final phase is actons for fighters who can defend or attack. The attack will inflict 1 damage against the opponents hp. However if set to defend a fighter will cancel out the damage from an opponents fighter set to attack. Both units will then be removed from the players lists. If you set a fighter to defend and are not attacked nothing happens.

So now the goal is layed out. Still not sure what the UI will look like yet but thats for another post. Just working on the basic logic for now using console.logs to test function outputs. I hope you find this helpful or interesting.

UPDATE
Here is a link to the github repo
The following articles will explain how the code works and why I made the choices I did.

My First Client

TechThatConnect — Sun, 02 Jul 2023 20:48:32 +0000

Ok so the title might be misleading. They aren't paying me and I know them so the lead was very warm. But I am making a website for a real business. This might not feel like a big deal to someone with experience but its a big deal to me. I am self thought this is my chance to prove I can do this. This is part of my plan to build a portfolio that will get me hired as a freelancer. Do 10 site for free and then use that portfolio of actually functioning sites for real businesses to promote myself and my work. Each new client will be a learning experience, and here are 3 things about freelancing I learned already.

Manage Expectations

Learning how to professionally communicate why something is a good or bad idea to non technical people is hard. It's also an invaluable skill in the industry of tech. Having a library of micro descriptions and infographics of technologies in layman's terms might prove to be a valuable thing for me. This got me thinking about the client intake process over all. Having some pre-written documentation of what the client can expect from each step of the process would be a big time saver. I might do this as a static page on my site or as a pdf I can send to the client.

Do you know, what you want?

This ties in with the above but deserves its own category. Getting the client to communicate what they actually need in terms you can understand and implement is probably the biggest challenge facing freelance devs. I thought that this was mostly hyped up on internet posts by people with bad experiences. But here it is day one staring me in the face. They have an idea of what it might look like and some of the things it might do but the funny thing is they expect you to figure out the rest. This In my case this wasn't much and they have been very communicative about any new info required. I can just foresee some nightmare situations in the future if this stage is not handled with care though.

Deadlines

This one can really only be fixed with experience. I don't know how long it will take me to do things. Often it's my first time doing it that way. I work in a factory so I understand project management quite well. But this is different, right now I guess and then double my estimate. I am also thinking about how once your done with the site you will have to document it and make sure that those updating it know what they are doing. This will probably take more time than you think. I am already planning on next time doing docs as I go along not at the end.

When the site is finished and with their permission I might share the results here if people would be interested. Maybe share some if the problem solving process I went through to get the product to where it is. Anyways thanks for reading I hope you have fun on the internet.

Why I havent been as active this year

TechThatConnect — Tue, 23 May 2023 20:03:06 +0000

Why haven't you heard from me much this year? Well there are a few reasons. One, me and my family had to move fairly suddenly. Packing and unpacking as well as finding a place during a housing crisis took a lot of my time. Second, as I learned more about blogging and setting up my site I realized I had no idea what I was doing. Yes blogging about the stuff you learn is a good idea but hard to get noticed or have much impact let alone make any money. I didn't have a plan or much direction and my topic choices were too broad. I have been recently re-evaluating what it is I want to do. Starting to get a plan and put it into action. Because one of the main things I learned is if I don't have a deadline. I can work on my project forever and no one will ever see it.

So what do I want to do?

I want to make websites for people and businesses that help represent them and their brand. I know a big surprise huh? My plan is to go the freelance route and start my own business. I have decided to focus mainly on front end web development, Mostly design but all the other bits that go along with front end code. While I identify as a full stack developer, my main focus will be building a great UI that the client can identify with. I want to focus on profile sites and landing pages for artists/working professionals or small to medium businesses. As I feel this is a great place to start.

time for a change

This will be a big change for me( I currently work in a factory as a laborer) so starting my own business will be exciting and new. This is a change I am very ready for. I have spent too long now where my interest in web dev is a hobby and not a "career".

My main plan for growth is to make 10 sites for friends and family free of charge and have them leave me a review. This will give me a decent portfolio with reviews to attract new clients.

The other strategy is content marketing using the blog section of my site to gain organic traffic with SEO. I Am currently trying to consult with other boutique designers in my area and see how they run their business.

Anyways that's what I have been up to. How has 2023 treated you so far?

Parsing, what does a browser do with my code

TechThatConnect — Tue, 31 Jan 2023 13:04:08 +0000

After much time learning all the ins and outs of web development I came to the realization that I had little to no idea how a web browser actually functions. I knew that it would take my code to spit out a result. So I started to do some reading.

What is Parsing

So what is parsing anyways. You might hear the word but not know exactly what it means. Well you came to the right place. This word has meaning outside of computer science. In fact the meaning is almost the same in English. Merriem-Webster defines it as.

Parse - to divide (a sentence) into grammatical parts and identify the parts and their relations to each other.

We parse English text when editing a paper for example. Insert meta joke about me editing this article. In programming the definition is very similar. MDN defines it as.

Parse - to analyze and convert a program into an internal format that a runtime environment can actually run, for example the JavaScript engine inside browsers.

You can think of parsing like a sign language interpretation. Converting the show into a usable format for people without hearing.

Web browsers

The web browser isn't new technology but you might be surprised just how they work. First and foremost a browser is a piece of software. The purpose of a browser is to take in data from the web or other sources and then display the Information in a way we humans can understand. Now you would probably assume that we at this point have the way in which a browsers parse code to a global standard. However this is far from the truth. If you have spent much time writing css you have probably heard of browser prefixes. This is a prime example of how different browsers parse data.

How does this affect my code?

It might and it might not. Let's think about a parser like Google translate. Depending on what language you are translating from and to the end result may vary. This is much the same with parsing engines in modern browsers. Safari might render some html differently than Chrome will. These inconsistencies are the reason that front end devs worry about cross browser support. Why testing your site on as many browsers as possible before releasing it to the wild is a must.

A parser is just a part of a web browser. There are many other elements, a javascript runtime engine for example. Front end devs write a lot of code for web browsers. I feel understanding core concepts of how a browser works can only make you a better developer. This is only a broad overview and you can go a lot more in depth as to what a parser is and how they work under the hood but that is another article for another day. I hope this helped you in your journey to better understanding the web. Feel free to leave a comment in the database so my browser can parse it.

My first PI

TechThatConnect — Thu, 29 Dec 2022 15:44:28 +0000

I finally got one. This year for Christmas my lovely partner got me a raspberry pi. It was basically the only thing I asked for so it was a big surprise… not. It's the modal 3 A+ so not exactly the latest and greatest but it will be fine to learn with. I already have a few ideas of what to do with it.

What is a raspberry pi

A single board micro computer. These computers are made by the raspberry pi foundation. A UK based charity with a specific mission.

To enable young people to realize their full potential through the power of computing and digital technologies.

These computers run Linux, in a flavor specific to the raspberry pi with the main appeal being price point and power consumption. These boards are often under 50 bucks and are extremely modular.
Due to this they have many use cases and are loved by computer science and IT enthusiasts worldwide.

what will I do with it

Well learn Linux. I have been a windows user up until now. But being a dev I use the terminal a lot so I am in good shape.
My first few ideas are to set it up as a VPN server so I can access my home network from anywhere. Or make the pi into my own DNS server. The pi comes loaded with Java and python dev environments so learning those languages would probably be next on my list. What's so exciting is the list of possibilities and how endless it feels.

All and all this little computer should be a lot of fun to experiment with. Have you ever owned a raspberry pi? What did you do with it? Leave a comment and let me know.

A Brief History of Javascript

TechThatConnect — Thu, 22 Dec 2022 19:50:35 +0000

So what is javascript? JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles. That's a mouthful and it doesn't really matter if you understand it at this point. Just know that javascript is a high-level language that provides computing logic for the internet. If you imagine your website like a house. html is the walls and boards that make the frame, css is the paint and countertops and javascript would be the wiring and plumbing that makes the house usable. So now we know what javascript is, let's look at how it got here.

Who's Idea was this Anyways

In 1995 a web browser called netscape navigator was set to add a scripting language to their browser. The original plan to implement this was to embed Java or scheme. Though shortly after netscape decided that a new language based on Java should be created. This task was given to Brendan Eich who was originally hired to embed Scheme. In just 10 days Eich turned around and handed over a scripting language which at the time was called livescript. The name was later changed to javascript.

Early Adoption

The programming language Java was the buzz word of the day so many people think that the name Javascript was a marketing ploy. Those working with Java viewed this new scripting language as UI glue to be used by designers and non-technicals. Turns out UI glue was just what the web was missing and the language began to take hold. Javascript began to grow rapidly and by 1997 netscape handed over Javascript to the European Computer Manufacturers Association (ECMA) for them to create a specification.
Microsoft reverse engineered the netscape Javascript interpreter for IE 5 creating a scripting language called Jscript. Which was a defacto standard for the late 90s early 2000s in term of client side scripting languages used on the web.

Things began to change in 2004 when Mozilla release the firefox browser. This took some market shares away from IE and Jscript. In 2005 Jesse James Garrett wrote a paper titled "introduced Ajax". This paper was about a suite of technologies for the web that featured Javascript as the backbone. This really helped to push the popularity of JavaScript and helped it be seen as a serious programming language.

Conglomeration and Maturity

In 2008 GOOGLE released Chrome, which featured the v8 engine The big innovation with v8 was JIT (just-in-time) compilation that made it faster than the competition.
This was the point where large tech giants began working together. In 2009 after a conference they decided to combine all their relevant work and this eventually lead to the release of ECMAscript 5.
There was a lot of work happening to the language at this time with many new proposals and ideas being thrown around. A key innovation at the time was not from a standard body but from a single individual. Ryan Dahl created node.js, a javascript runtime environment that let developers run javascript outside of a web browser using the v8 engine. By the time 2015 rolled around a new standard ECMAscript 6 the most current version of javascript was released. By this time javascript is a serious coding language essential for anyone working in web development, front or back end.

About 98% of the web uses javascript in some way and 78% of developers use javascript. Thanks to runtime environments like node or deno, javascript can be run anywhere, to do just about anything. So I think it's safe to say it's not going anywhere and now you know a bit about how it got here. I hope you enjoyed these articles on the history of web technologies. It's been very eye opening as a new dev to learn the history of things I use all the time. Cheers and Have fun coding javascript out there.

Curious case of css: an origin of cascading style sheets

TechThatConnect — Sun, 27 Nov 2022 14:50:00 +0000

CSS stands for cascading style sheet. These sheets are used today for styling how HTML will look using a simple declarative syntax.
Style sheets have existed in one form or another since the beginnings of Standard Generalized Markup Language (SGML) in the 80s. The problem was each browser had its own idea of how stylesheets should operate and what their syntax should be. These sheets and their capabilities were limited at best. Many web developers at the time complained they lacked styling options for their sites. And you can forget about cross browser support for those limited style options. That all began to change in 1996 with the release of the css standard. While it took a while to catch on css was a big step towards the modern web we know and love today.

Whos idea was this anyways?

It all started with a Norwegian man, Håkon Wium Lie Back in 1994. This was at a time with less than 40 million internet users in the world. A very different landscape compared to the modern web, and it sure didn't look good. You had more control how your document looked in a word processor than you did on the web. Lie looked to solve this. He hoped to create a universal standardized style sheet for the World Wide Web.
He spent time proposing his new style sheet to the W3C and at many tech conferences. Bert Bos was another developer who proposed an alternative style sheet but ended up joining forces with Lie to help create CSS. While the interpersonal relationships of these people and how they resulted in CSS being released is interesting, Including it would make this article a novel. So just know the following people played integral roles in setting the css standard and its early adoption.
Marc Andreessen, Robert Cailliau, Tim Berners-Lee and Thomas Reardon of Microsoft, who pledged support for CSS in upcoming versions of Internet Explorer.

So why CSS

As I had mentioned before, styling sheets have existed since the 80s. Even in 94 there were at least 10 other proposed style sheet languages.
So what made this one special?
CSS has one feature that distinguishes it from all the others and it's right in the name, cascade. This refers to a structure of inheritance which is effective because it takes into account that on the Web, the style of a document couldn't be designed by either the author or the reader on their own. Both author and reader need their wishes to be combined, or cascaded, in some way; and, not just their wishes, but also the capabilities of the display device and the browser. Today we call this specificity.

Long road to adoption

While you would expect for something like CSS to become a standard overnight due to the demand. this was not the case. In fact it took about 4 years to be exact.
The specification for CSS was published in 1996 and it wasn't until 2000 when internet explorer for the mac os announced 100% implementation. That's right it was internet explorer 5, created for use on Mac OS that first to have full css support. By 1998 a level 2 of CSS came into existence hoping to fix and improve upon the original standard. Again not a single browser had 100% implementation of CSS level 1 when they released level 2. At this point work began on CSS level 3 which is technically still under development as it is published in modules that affect specific aspects of the language as a whole.

From today's stand point html and css go hand in hand. But as we just learned that wasn't always the case. If you ever found css to be full of outdated practices and techniques it's because it is and now we partly know why. It's over 25 years old, took a long time for major adoption and is updated in modules. This is why a simple declarative styling sheet can have just about any developer pulling their hair out finding a way to center that div. There is a lot to this story and I have only really given you a brief explanation of some key points. I feel that learning about how technologies like this are created helps us to understand them better. Anyways stay safe and have fun writing css out there in the big bad world.

Coding with MS notepad

TechThatConnect — Thu, 03 Nov 2022 15:04:04 +0000

Microsoft's notepad, a bare bones text editor. That is what I learned to code with. Mind you this was in 2020, so the idea would seem rather primative. But I think it actually makes sense and has given me a better understanding of what I am doing. I will admit it is tedious and I can get stuff done a whole lot faster using VScode now. But the fact there was no auto coloring, no emmit to suggest a method gave me a solid foundation of understanding. I had google and stack overflow. I had to stare at my little bits of code and find the syntax error myself. I had to arrange and indent my code into a readable format manually. While most people might find this excruciating, and at times it was, I am overall happy for the expirence.

This was a choice

I wanted to start this way. As a kid I figured out how to write some bits of html and css into notepad then open the file with a browser. I messed around with Frontpage a little bit but didn't have my own copy of the software. This was fun but I never stuck with it. I guess I always just wanted to know how websites worked, even then as a kid. When the tech bug bit me again during the pandemic I did a lot of reading first. I knew about VScode, Atom and the rest of the mainstream code editors but in the back of my mind I remembered my childhood tinkering. I knew I could just manipulate text and get it to run in a browser and that, to me, was way more exciting. So I started making landing pages for businesses that didn't exist. Writing all my HTML, CSS and Javascript in different instances of notepad. If that sounds like a god awful developer experience, it was, however it drove the basic building blocks into my brain. It was trial and error, the true scientific method approach to web development. I had also been working through the basic lessons on codecadamy and w3school as well as using MDN and a bunch of blogs and youtube videos for reference. So I wasn't walking blindly in the night as they say. I feel this approach led to me wanting to learn the computer science fundamentals much earlier than if I used VScode and frameworks to make my first projects. I had to figure out what questions to ask and this really helped my problem solving. Eventually the tediousness got to me and I downloaded VScode then started learning about Bootstrap. But I certainly appreciate all of the features of basic tools like this, so much more than I feel I would have if I started with them. I don’t take anything for granted now.

Lessons I learned

Starting with nothing but text and working my way up has taught me alot.
I now need to know what problem a tool seeks to fix before I want to use it. Then when I want to use it I love learning how it does it. I don't feel I would have that same outlook if not for my so-called primitive approach. One of the nightmares yet ah-ha moments of the whole thing was how I came to understand the Document object in javascript. Over and over again I would try to access an HTML element in javascript and get an error in the browser. Here is why.

Let x = getElementById(‘elementName’);

It took me an embarrassing amount of time to understand why this didn't work. But I now have a better understanding of how a browser works and how Javascript objects work in a very applied fashion. I might have been able to learn this information otherwise but I don't know if I would retain it as deeply as I have. Since I have a background in music I think about technology like a symphony. Each musician is like a piece of software or hardware. On their own each instrument would sound like a sporadic mess of notes but when combined make something beautiful that flows and conveys a message. That's why I think learning this stuff is so difficult, it's like trying to conduct when you don't know how to read music. Now forget conducting, try composing. You need to know how all the parts fit together, who comes in when and for how long and most importantly why that all works together. Good music is often said to be greater than the sum of its parts and I feel this is also true with technology.

In closing I don't think anyone else needs to take this approach but I am very grateful for it. The wide variety of things computers can do means you can pick your own path based on what interests you. This was my path and I am excited to see where it goes. I still feel like a tinkering kid when I am coding sometimes. Playing with something far out of my grasp of understanding and just seeing what it does . That child-like curiosity I feel is what drives a lot of us to keep learning. I hope you gained something from this and have fun coding with notepad.