I've been programming for almost three years and the thing that I find the most fascinating are tools like compilers, transpilers or anything that makes life easy for other developers.

Some time ago, I was discussing compiler construction with my best friend Waasiq. We talked about tokenizers, parsers, ASTs etc and this got me thinking, how are online tools able to compile HTML, CSS and JavaScript? What about LeetCode and Hackerrank that can compile languages like C++, Java and tens of others?

After thinking about it, I realized that there are simpler ways to get these things done. You don't need to write your own compilers if you want to create something similar to LeetCode and Hackerrank. For some reason, if you do decide to start writing your own compilers, it is going to take you a life time to come up with your own compilers for all the different languages.

We will discuss how LeetCode, Hackerrank and Algoexpert type sites work IE how do they compile the code and run tests on them. Codepen and other such tools may follow similar concepts and the keyword here is "concept." These sites may entail complexities but on a basic level, they are the same.

Motivation

This project is purely for educational/learning purposes. I'm not creating this in order to compete with Codepen. I'm just doing this for fun and for my own learning.

Journey

I'm also going to document all the progress I make on Codism. So, make sure to follow me here and on Linkedin as well as on Dev. Also join our Discord channel called, Dev's Hub.

Codism

Codism is an open source Codepen like tool where you can start writing HTML, CSS and JavaScript. Sometimes you may want to have a quick UI session but creating files and folders is a tedious task and not to forget that it might create a mess when all you wanted to see was how to center a div. For things like these, tools like Codepen can be extremely handy.

How It Works

Codism takes your markup, styles, scripts and compiles them right inside the browser using a clever "hack". The preview is an isolated iframe which is not affected by external CSS or JavaScript and has a completely isolated scope where you may add HTML, CSS and JavaScript using the code editors.

Compiling HTML

The HTML is directly added to the preview module whenever HTML code editor detect changes. Updating HTML also refreshes JavaScript afterwards in order to ensure that any event listeners that were lost during re-rendering are re-attached. This isn't complex and isn't even compiling by any measures.

Compiling CSS

The CSS resource is added after it is "compiled." When the CSS code editor detect changes, it takes the CSS as a string and turns it into a blob using the Blob web API. At this point the blob/file is inside our memory and we need a reference to it in order to access it. To create a reference, we use the URL web API.

After that, we create a link tag and assign the URI reference to the CSS blob using the href attribute. We must ensure to remove the previous CSS from the preview because if we don't, we'll end up with a memory leak where CSS files keep piling up, not to forget that the styles written previous will persist. When we add the CSS successfully to the preview module, browser automatically handles all the parsing and styling. This is the clever "hack" I referred to.

Compiling JS

This isn't different from how we load CSS resources. As soon as the JavaScript code editor detect changes, it takes the JS as a string, turns it into a blob using the Blob web API and creates a reference to it using URL web API.

Like with CSS, we make sure to remove any previous JavaScript and append the brand new JavaScript to the preview module. We also refresh HTML before adding the new JavaScript. The reason for refreshing HTML is any residual event listeners that were previously applied to the Markup.

Roadmap

Codism will have a lot more features in the future. I'll share what things I'm planning to add to Codism.

1. Add preprocessors like SASS, LESS, PUG.
2. Allows users to load CSS and JS libraries and modules using CDNs.
3. Make the code editor experience robust by adding autocomplete type features.
4. Ability to sign-up and sign-in.
5. Ability to save code as projects and share them.

Collaborate

Since, this is an open source project, I encourage you to collaborate on it. Pick any features you may like or any bugs you may want to solve and start hacking! Even if you want to improve the README file on Github, that is also something I'd appreciate.

Collaborate at: https://github.com/hasnaindev/codism

Follow Me

Follow me at: Linkedin and Dev.

1. What is Singleton?
2. Implementation.
3. When to Use?
4. An Anti-pattern?

What is Singleton?

Singleton is a design pattern that falls under the category of creational design patterns. Creational design patterns are associated with the simple creation of objects.

Singleton itself ensures that at any given point during the software's runtime, there should be only one instance of an object. Usually, this object is available to the software, globally.

Implementation

Before we talk about when to use it, let's quickly implement it and then we can try to understand the nitty-gritty details.

class Database {
  private static $instance;

  private function __construct() {
    // Connect to database
  }

  static function get_instance(): Database {
    if (is_null(self::instance)) {
      self::instance = new self();
    }

    return self::instance;
  }
}

If you look at the implementation, you see that the constructor is made private in order to prevent you from creating new instances of the class because database connections in a large system may be expensive.

We use private and static variable instance to store the instance of the Database class.

Using the get_instance static method, we access the instance of the Database class, if in case the instance does not exist, we make sure that it does and then return the instance of the class.

When to Use?

Use the singleton pattern only when you need an object to have a single instance throughout your software's runtime. From the example above, you can see that a connection to database is usually required only once.

Any other such expensive operations or global configurations should use singleton but beware that singleton is also called, "An Anti-pattern." It should be almost always be avoided.

An Anti-pattern?

Singleton is one of the patterns that is easy to understand and use. Thus, it may encourage engineers (at least new ones) to overuse it. It should be used only if there is no alternative solution.

Singleton also encourages the use of global variables. For any engineer to keep track of global variables, it increases cognitive load for them. Such cognitive load may lead to poor software. More on cognitive load and psychology later.

Besides, singleton is more or less, a unique instance of a global variable. It can introduce unnecessary restrictions, make unit tests a pain since they may rely on inheritance among other things.

Some call singleton pattern an "evil pattern." Design patterns in general are agreed upon solutions to commonly recurring problems. Systems may use it when there is a good reason to do so, thus knowing this pattern is essential.

1. Preface
2. Need for Clarity
3. Inverse Goal Setting (The Bulletproof Method)
4. Consistency + Time

Preface

In life you need either inspiration or desperation. ~ Tony Robbins

Three months into my first semester I had to leave the university as it was clear we couldn't afford it. My father lost his business and we essentially became poor. With no education and a degree, I was rejected from a ton of places. I am a good teacher, I am really good with computers but non of that mattered.

In Pakistan, parents pay for their children's education until they get a degree. You cannot earn enough without a degree or get student loans either. Without any degree your chances of having a good and respectable job or a status in society are pretty low.

Looking at my peers, getting rejected and even being kicked out of an internship hurt me and made me angry too. It was a really tough time in my life where I lost, not only the chance to get a good education but friends too and I became extremely depressed.

I had made a decision nevertheless and I committed to it. I used all my "negative emotions" to drive me towards my goals. "Revenge" aside, in the end, it is all about having a better life not only for yourself but for your family too.

I did became a web developer and now I have one year and eight months of total experience. I do not possess any degree and or certifications.

Today, I'm going to share with you how I became a web developer in a year without any degree. What I'm about to share does not only applies to this field but to all other engineering and technical fields. Usually, in these fields employees require you to have a certain set of technical skills and these skills are measurable, both quantitively and qualitatively.

Clarity

The best time to have a map is before you enter the woods. ~ Brendon Burchard

Clarity is perhaps one of the most important thing you can have in your life. When you are clear about what is it that you exactly want, you have an edge over other people. You can divert all of your attention and energy towards the attainment of that goal.

Remember, this concept of clarity that we're talking about will not only make you a web developer but also a better person. This is an invitation to you to lead a life that has been examined rather than the one that is reactive and lived according to what other people expect of you.

Be precisely clear on what you want because a lot of people climb the proverbial ladder of success, only to realize that it was leaning against the wrong wall.

Inverse Goal Setting (The Bulletproof Method)

Do you want to become a web developer? Let's suppose you want to become a front-end developer. What you need to do is to google this term, "front-end jobs" and you will get a list of front-end jobs, easy as that.

What you need to do after that is to click on the job posts and look at the skills they're expecting from their candidates. Usually they'll contain things like HTML, CSS, JavaScript, SASS, ReactJS/VueJS/AngularJS. Write these skills down.

Go through as many posts as you can and write all the skills they require. Some of them may contain something unique and different, like a project management tool or a certain library. You may write those down too without any worry.

After that what you would need to do is to look for a pattern. What set of skills do you see being repeated in almost all of the job posts? For us, these skills should be repeated, "HTML, CSS, JavaScript, SASS and ReactJS." You may ignore things like RxJS, Bugherd or other such tools and libraries which are just mentioned a handful of times.

At this point, you should've figured out the pattern. The tools and languages that are essential for you to learn in order to land that specific job.

What we just did is what I call, "Inverse Goal Setting." I was thinking of a clever name but honestly, this is much better than "Inverse Back Tracking." I'm cringing really hard right now, haha.

Anyways, now that you know what skills you need, you can start your research on what to learn first and what comes latter. You make a map of sorts. In our example, we want to become a front-end developer. I would start with HTML and CSS and learn them before heading into SASS which is an intermediate concept. I will start with JavaScript before I head into TypeScript, Angular or React which are advanced tools and libraries.

As soon as you're done with that, you need to start taking action! Udemy, YouTube, e-books, FreeCodeCamp all of these platforms contain all the knowledge you need to become a front-end or back-end developer.

Study, make lots and lots of projects on your own. Sure, there are a lot of code-along project videos that you can watch and code along with but you also need to create something on your own. You need to take the concepts and apply them as you understand them, it will help you learn more than anything else.

After you learn most of the things that were on your list and you have projects online and your code is on Github, you are pretty much ready to start applying for jobs. Since, this isn't an interview advice post, I am not going to discuss data structures, algorithms, clean code etc.

Consistency + Time

Consistency is the key to mastery! If you want to become good at something, you need to spent large chunks of your time doing that thing on a daily basis, even when no one is looking and especially when no one is looking!

Ronaldo used to wear weights on his ankles and kick football for hours. Elon Musk used to work 120 hours in a single week and no wonder he is running multiple companies. There are tons of other such success examples.

It is in the moments of decisions that our destiny is shaped. ~ Tony Robbins

All such success stories have similar patterns, certain habits that they all had. They decided what they wanted, they trained and worked for hundreds of hours every single week or month for years. They trained when no one was looking, they trained when they felt like giving up and became depressed.

I had similar experience too. Studying for 12+ hours each day there were days when I completely burnt up and when I became depressed and really uncertain at times and questioned myself but I had made my mind and I was going to do it. It may become extremely hard at times but you keep at it anyway.

It is your decision to work hard on a daily basis that separates you from the crowd. In the end, the crowd will notice your success and cheer you on, they always do. Your critics becomes your supporters, but they will never see how hard you worked and that is okay because I think we're all like that unless we choose to gain awareness of self and choose to look closely and study successful people.

Conclusion

Know what you want! If you want to be a front-end developer or back-end developer, android developer or a game developer. Checkout job posts for that specific title and note down all the skills, tools and libraries they want from their desired candidate. Figure out what set of skills, tools and libraries are being repeated, viola, you now have a pattern. Make a sensible plan and get to work! Work hard, be consistent and be patient.

UPDATE: I'm really grateful to you all and very glad that this post served as an inspiration to many. This is my Linkedin profile if you guys want to connect. Have a great day!