DEV Community: Piotr Sławiński

What is Object-Oriented Programming?

Piotr Sławiński — Sat, 30 Oct 2021 09:40:58 +0000

Is it a combination of data and functions?

Maybe a way to model the real world?

Or just a mix of encapsulation, polymorphism, and inheritance?

Please tell me. I really need to know.

How I Learned to Stop Worrying and Love the JavaScript Engine

Piotr Sławiński — Sat, 27 Mar 2021 11:39:40 +0000

It appears that there aren't many sources on the internet that would comprehensively describe what exactly happens when you feed your browser some code. I'm talking about the moment between parsing your code up and popping the program off the call stack. With this post, I'll try to fill the gaps as best as I can. Anyway, here's what I've found out.

What's a JavaScript engine?

The simplest explanation of what a JavaScript engine is might be that it's a program that:

Translates source code into machine code and executes it on CPU.
Provides mechanics of parsing and JIT compilation.

If you want to score extra points, you might want to add that:

JavaScript engine should be created to ECMA standard.
There are many JavaScript engines (V8 in Chrome, Spidermonkey in Firefox, etc.)
Different JavaScript engines handle the code differently.

Imagine that we're dropping into our browser an HTML file with some markup and a script tag containing:

function helloWorld() {
  return 'hello world'
}

Then the following steps happen in order:

Firstly, the HTML parser encounters the <script> tag, but that has nothing to do with the JavaScript engine yet.
Decoding.
The script gets loaded from the network, cache, or service worker and passed to byte stream decoder as bytes for each character
Tokenizing.
The byte stream decoder creates tokens (like function, helloWorld, (, ), {, return, ', hello world, ', }, etc.) from the decoded stream of bytes
Parsing.
The tokens are then parsed by pre-parser (a.k.a lazy parsing, for code required later on) and parser (a.k.a eager parsing, for code required immediately). Parsed tokens create nodes of the Abstract Syntax Tree (like Program, FunctionLiteral, ReturnStatement, StringLiteral, etc.)
Code generation.
Then the interpreter goes through the AST and generates unoptimized bytecode, which can be executed immediately by the engine's virtual machine. Once bytecode is generated, the AST gets deleted.
Optimization.
If the code (or part of it) runs a couple of times, then the JavaScript engine begins to translate the code into highly optimized machine code using Just-In-Time compilation. Then the compiler runs the machine code directly on the CPU.

What's a Just-In-Time compilation?

It's a compilation that is done during code execution (contrary to Ahead-Of-Time compilation done before the code is run.)
It enables different code optimization for each user or use case.

How it works

Byte code when being run by the virtual machine is observed by the monitor (profiler). Monitor watches how many times the code runs and what types are being used. If the same lines of code are run a few times, that code is considered warm. If it’s run a lot, then it’s considered hot.
When a function starts getting warm, the JIT will send it off to the baseline compiler (in V8 it's called Ignition) to be compiled to machine code. Then it will store that compilation.
When a part of the code is very hot, the monitor will send it off to the optimizing compiler (in V8 it's called TurboFan). This will create another, even faster, version of the function that will also be stored.
If code suddenly returns a different type of data or property list (a.k.a shape of an object), then the machine code gets de-optimized and the engine falls back to interpreting the original byte code

Eventually, all code has to be run as machine code on the CPU. The difference between the interpreted machine code and the optimized machine code is that the interpreted one is not controlled by your engine. The virtual machine runs unattended while optimized machine code is examined thoroughly to only run the exact instructions required for the CPU.

Regardless, whenever any code is executed in JavaScript, it’s run inside an execution context. So when that happens, the JavaScript engine creates an execution context and pops it on the call stack.

What's a call stack?

A place in memory storing code in wrappers called execution contexts.

As the JavaScript engine comes across an actionable item (function call), it adds it to the call stack.
When the function finishes execution, its context is removed from the stack.
Execution contexts are handled in a Last In, First Out manner (a.k.a LIFO).
The space in the call stack is limited, and if exceeded (calling recursive functions without a break), will cause a stack overflow error (but no crash).

What's an execution context?

In simplest words, it's a place in the memory where the JavaScript code is evaluated and executed/called/invoked (it means the same thing).

When a javascript engine (during translation or optimization) goes through the code line-by-line in a single-threaded manner, it creates execution contexts.
The abstract thing which goes line-by-line and in-and-out of functions is called the thread of execution.
If the script is being executed for the first time, a global execution context is being created. Even if the script has zero lines of code.
When a function is called, a new functional execution context is created.
There's a separate execution context for eval() function.
Each execution context is being added to the call stack during its creation phase.
Execution context gets popped off from the call stack at the end of its execution phase.

Global execution context

The code that is not in any function belongs to the global execution context, meaning everything outside of a function is global
There can only be one global execution context in a program

Functional execution context

Every time a function is called, a new functional execution context is created
There are as many functional execution contexts as there are function calls in the code

Each execution context has two phases: the creation phase and the execution phase.

Creation phase

During the creation phase, the following environments are created:

Lexical environment consisting of:

Environment record where variable and function declarations are stored within Lexical environment. It, on its own, is consisting of:
- Declarative environment record for functions. Also stores arguments object.
- Object environment record for code outside functions (global scope). Also stores global binding object.
Reference to the outer Lexical environment where JavaScript engine can look for variables if they cannot be found in the current Lexical environment (a possibly null reference).
this binding.

Variable environment (also a Lexical environment but for vars)
used to store variable bindings only (var)

So to sum up, this is what happens:

Global execution context	Functional execution context
A global object (`window` for a browser or `global` for node), to which the executing code belongs, is created in Object environment record.	An arguments object which contains a reference to the parameters passed to the function is created in Declarative environment record.
Memory for the variables and function declaration within the global execution context (defined globally) is allocated in Object environment record.	Memory for the variables and function declaration within the function execution context (defined within the function) is allocated in Declarative environment record.
`this` variable referring to the global object is created.	`this` variable referring to the global object (or to an object to which the current code that’s being executed belongs) is created.

Variables are initialized as undefined (except let and const which will remain uninitialized). Functions get placed directly in the memory. That is why accessing var defined variable before declaring any value to it gets you undefined, but the same with let and const gets you a ReferenceError.

It's is when hoisting takes place as well as where closures are created.

Execution phase

The first function to be executed is the one with its execution context at the top of the call stack.
Execution context gets popped off the stack when assignments to all the variables are done, and the code is executed (function is returned).
Finally, when the global execution context gets popped off the call stack, the program ends.

Conclusions

Well, this is it. That is how the JavaScript engine does on a high to medium level. Each concept could, of course, be covered in even more detail, but that is beyond my needs for now. Maybe someday. In the meantime, keep on coding!

References

Getting invited to a technical interview

Piotr Sławiński — Mon, 21 Sep 2020 07:37:03 +0000

It appears my writing has caught your attention. If you wish to hear from me on regular basis, please consider subscribing to my newsletter.

In accordance with the famous philosopher Mike Shinoda, to ace a tech interview, the following ingredients are required: 10% luck, 20% skill, 15% concentrated power of will... The list goes on. But how to make sure that you're going to stand out in a sea of candidates?

Resume

First off - resume. Unless you're talented in the field of arts, I do not recommend designing your resume from scratch - there are so many aspects you need to be aware of that it is easier to use a template. There are immense numbers of them available online, but I recommend starting with free Google docs resume templates.

Linkedin profile

Recruiters use LinkedIn extensively to source promising candidates, so to stand out also on that platform, you need to fine-tune your profile page (not to mention keeping your profile up-to-date). I used to think my profile page was OK until I watched a couple of live-streams where HR specialists reviewed other people's profiles. Their feedback allowed me to improve my profile drastically.

Github profile

Another place to shine is your Github profile. Until recently, there weren't many ways to advertise yourself on Github, but that has changed with the introduction of the Profile READMEs. That's right. You can now create a README in markdown, which will be displayed on your profile page. As you can expect, the choice of information to put there is limitless. Here are some fun examples as well as a step by step guide on how to make one yourself.

Conclusion

That's it. It isn't much, and it certainly won't help you pass any interview, but it will (or at least I hope it will) increase you chances of getting that interview in the first place. The rest is up to you. Good luck!

You need these Visual Studio Code extensions!

Piotr Sławiński — Sat, 22 Aug 2020 20:27:32 +0000

It appears my writing has caught your attention. If you wish to be up-to-date, please consider subscribing to my newsletter

VS Code is a powerful tool but "batteries included" is not the expression this IDE is known for. Here's how to proceed to have the best developer experience.

Visual Studio Code - Insiders version

There's actually a 'flavor' to choose when downloading VS Code. You can download the stable release or you can opt to use the latest build released for the earliest of adopters - the Insiders version. The choice is up to you but if you're reading this post then it's rather obvious you should go with the regular.

Extensions

Ok, let's get down to business. I categorized them into groups. Essentials, in my opinion, are required to conduct any kind of coding and stay sane. Strongly recommended extensions are welcome, but some of you might find them unnecessary or annoying. You can easily live without Recommended - they add value to your workflow but it's a very specific kind of workflow. Who knows? Maybe they work only for me?

Essential

Auto Rename Tag - It actually cuts in half the time required to edit two HTML tags!
Bracket Pair Colorizer - Enables color-coding of your brackets which helps to distinguish one scope from another.
Color Highlight - Gives you a hint of what color you've just typed in.
DotENV - Enables syntax highlight of your secrets in the .env files.
ESLint - This thing (if well configured) will save your butt. Hands down the biggest time-saver on this list. It finds problems in your code and it fixes them most of the time. Unless you're coding in TypeScript. Then it just sits there and does nothing.
JavaScript (ES6) code snippets - Less typing, more time to debug.
Prettier - Not as useful as ESLint but if configured together they actually make your codebase consistent and... Pretty.

Strongly recommended

Better Comments - If you comment on your code then this extension will make your comments shine! Really, TODOs, JSDocs, etc. They will look amazing.
Error Lens - When you eventually screw something up your IDE will not only add a squiggly red underline to your code but also provide the error definition inline.
GitLens - Similar to the above only this time it's the details about the given line's git history. Also provides an additional menu in your activity bar.
Live Server - Launches a development server and opens up a port to check your work in the browser. Live-reload included!
npm Intellisense - Helps out typing in those npm packages.
Path Intellisense - Similarly to the above but for files.
Settings Sync - Do you use VS Code on more than one machine and have trouble syncing your IDE between them? This one is for you. It stores your configs, extensions, etc. in a gist and enables you to download them to any machine you're currently using.
Turbo Console Log - No more `cosnole.log' typos! With this extension, your logs will be inserted instantly, flawlessly, and elaborately.

Code Spell Checker - Helps with that pesky typos. Of course, a linter will make sure your code works, but this one just takes care of the orthography exclusively. You'll need to add some of the exotic words to your dictionary though.
Night Owl / Cobalt2 Theme Official - VS Code basic color theme is okay I guess. But if you want to spice things up I recommend one of those themes. They're the best looking in my opinion.
Image preview - Gives you a nice inline thumbnail of and image the path to which you've just typed in.
Kite Autocomplete for Python and JavaScript - This one's big. It requires additional stuff to be installed on your machine and uses MaChiNe LeARnInG to predict what you're about to type in. In the end, it saves keystrokes.
Material Icon Theme - I don't know why but I just like to see nice colorful icons in that project tree.
Polacode - makes a professional screenshot of your code. Looks great on twitter.
Sort lines - It sorts your lines. Ascending, descending, case sensitive you name it.

Bonus round - tool-specific extensions

Here I gathered extensions which definitely aid only my workflow due to being framework or tool-specific.

GraphQL for VSCode - Syntax highlighting and linting of your GraphQL queries.
IntelliJ IDEA Keybindings - That's a thing people will make fun of me for. I used Webstorm exclusively at work and I have grown very fond of its keymap. I know - I'm weird 🤷‍♂️
Tailwind CSS Intellisense - Recently I fell in love with TailwindCSS and this helps with typing in those utils
Vetur - This is for Vue.js and its ecosystem
Vue VS Code Snippets - Never too much of those snippets!

Conclusions

There aren't any. Just pick what you like from the list above and keep on coding!

How to configure Visual Studio Code right the first time

Piotr Sławiński — Fri, 21 Aug 2020 15:59:47 +0000

This post was originally published on slawinski.dev

When it comes to choosing an IDE you have to choose wisely because a certain career-defining moment is secretly unveiling upon you. Should you go with Sublime, Webstorm, Atom, or VS Code? Obviously, there's no sorting hat to decide for you and you can change an IDE as many times as you want but have in mind that only one of them will be your favorite. I hope you chose VS Code because otherwise reading the rest of this post is pointless.

Visual Studio Code - Insiders version

There's actually an option or 'flavor' when choosing a VS Code as an editor. You can download the stable release or you can opt to use the latest build released for the earliest of adopters - the Insiders version. The choice is up to you but if you're reading this post then it's rather obvious you should go with the regular.

Extensions

Ok, let's get down to business. First up - Extensions! I categorized them into groups. Essentials, in my opinion, are required to conduct any kind of coding and stay sane. Strongly recommended extensions are welcome, but some of you might find them unnecessary or annoying. You can easily live without Recommended - they add value to your workflow but it's a very specific kind of workflow. Who knows? Maybe they work only for me?

Essential

Auto Rename Tag - It actually cuts in half the time required to edit two HTML tags!
Bracket Pair Colorizer - Enables color-coding of your brackets which helps to distinguish one scope from another.
Color Highlight - Gives you a hint of what color you've just typed in.
DotENV - Enables syntax highlight of your secrets in the .env files.
ESLint - This thing (if well configured) will save your butt. Hands down the biggest time-saver on this list. It finds problems in your code and it fixes them most of the time. Unless you're coding in TypeScript. Then it just sits there and does nothing.
JavaScript (ES6) code snippets - Less typing, more time to debug.
Prettier - Not as useful as ESLint but if configured together they actually make your codebase consistent and... Pretty.

Strongly recommended

Better Comments - If you comment on your code then this extension will make your comments shine! Really, TODOs, JSDocs, etc. They will look amazing.
Error Lens - When you eventually screw something up your IDE will not only add a squiggly red underline to your code but also provide the error definition inline.
GitLens - Similar to the above only this time it's the details about the given line's git history. Also provides an additional menu in your activity bar.
Live Server - Launches a development server and opens up a port to check your work in the browser. Live-reload included!
npm Intellisense - Helps out typing in those npm packages.
Path Intellisense - Similarly to the above but for files.
Settings Sync - Do you use VS Code on more than one machine and have trouble syncing your IDE between them? This one is for you. It stores your configs, extensions, etc. in a gist and enables you to download them to any machine you're currently using.
Turbo Console Log - No more `cosnole.log' typos! With this extension, your logs will be inserted instantly, flawlessly, and elaborately.

Code Spell Checker - Helps with that pesky typos. Of course, a linter will make sure your code works, but this one just takes care of the orthography exclusively. You'll need to add some of the exotic words to your dictionary though.
Night Owl / Cobalt2 Theme Official - VS Code basic color theme is okay I guess. But if you want to spice things up I recommend one of those themes. They're the best looking in my opinion.
Image preview - Gives you a nice inline thumbnail of and image the path to which you've just typed in.
Kite Autocomplete for Python and JavaScript - This one's big. It requires additional stuff to be installed on your machine and uses MaChiNe LeARnInG to predict what you're about to type in. In the end, it saves keystrokes.
Material Icon Theme - I don't know why but I just like to see nice colorful icons in that project tree.
Polacode - makes a professional screenshot of your code. Looks great on twitter.
Sort lines - It sorts your lines. Ascending, descending, case sensitive you name it.

Bonus round - tool-specific extensions

Here I gathered extensions which definitely aid only my workflow due to being framework or tool-specific.

GraphQL for VSCode - Syntax highlighting and linting of your GraphQL queries.
IntelliJ IDEA Keybindings - That's a thing people will make fun of me for. I used Webstorm exclusively at work and I have grown very fond of its keymap. I know - I'm weird 🤷‍♂️
Tailwind CSS Intellisense - Recently I fell in love with TailwindCSS and this helps with typing in those utils
Vetur - This is for Vue.js and its ecosystem
Vue VS Code Snippets - Never too much of those snippets!

Conclusions

There aren't any. Just pick what you like from the list above and keep on coding!

Resources for beginner developers

Piotr Sławiński — Sat, 04 Jul 2020 09:20:53 +0000

It appears my writing has caught your attention. If you wish to be up-to-date, please consider subscribing to my newsletter.

Important disclaimer:

The list is not definitive. You can help by expanding it!

Getting down to business

If you don't know anything about programming and/or web development I recommend you to take a look at any of the three resources listed below. They were created with beginners in mind and will set you up for the upcoming journey of becoming a developer. I really recommend to check out the rest of this list too - it's full of great stuff!

🔥 Colt's Code Camp
🔥 Free Code Camp
🔥 Javascript30

Blogs

There are a lot of creators out there and some of them particularly focus on beginners. I regret this list is so short!

link	description
BaseCS	"Exploring the basics of computer science, every Monday, for a year."
https://dev.to/top/infinity	Just read some of the most popular blog posts listed here and you're golden!
https://randallkanna.com/blog/	A bunch of posts from the author of "The Ultimate Guide To Getting Started As A Software Engineer"
https://www.giftegwuenu.com/	Great articles and a lot of videos on many aspects of programming
We learn code	"Ali’s friendly guides to your biggest coding questions."

Blogposts

Every now and then I stumble upon a post which resonates with my inner programmer. I hope you also will find them interesting.

link	description
Am I a real software engineer yet	Interesting take on what poeple think about web developers and why should you care
Deep work	"How to master the #1 job skill that will never be obsolete"
Why learning code is so damn hard	"What every beginner absolutely needs to know about the journey ahead"
Yes, You Should Learn Vanilla JavaScript Before Fancy JS Frameworks	There's no argument it that. Read it to learn why

Books

The problem with books is while they get written, edited, printed, and optionally translated, the javascript world moves forward and they quickly stop being relevant. But if books work for you and you enjoy the smell of that freshly downloaded pdf then here's a short list of books you might find useful.

link	description
Eloquent Javascript	Probably the first book a beginner should read
You Don't Know JS Yet	Definitely the second book (series) a beginner should read because it gets very technical very quickly
The Ultimate Guide To Getting Started As A Software Engineer	"This guide will help you get started coding with low risk to your financial future and time."

Online courses

I like to have a plan of what should I learn. A step-by-step guide. Someone who will say "Welcome back!" when I log in. Online courses have it all (the 'welcome back' part depends on the good will of the presenter though).

link	description
Data Structures and Algorithms in JavaScript	"This course teaches you how to implement your first data structures and algorithms."
Getting Started with JavaScript	"Want to learn to code using JavaScript? This is a great place to start!" from the one and only Kyle Simpson
Harvard CS50	"An introduction to the intellectual enterprises of computer science and the art of programming."
Javascript30	"Build 30 things in 30 days with 30 tutorials. No Frameworks. No Compilers. No Libraries. No Boilerplate"

Gamification

Some aspects of programming can be taught by games which makes learning fun and, hopefully, quicker.

link	description
Code Combat	Students master core coding concepts such as while/for loops, functions, and algorithms all while playing a game. Unfortunately only part of it is free
CSS Diner	"It's a fun game to learn and practice CSS selectors."
CSS Grid Garden	"Write CSS code to grow your carrot garden"
Flexbox Froggy	"A game where you help Froggy and friends by writing CSS code"
Learn Git Branching	"The most visual and interactive way to learn Git on the web"
Mastery games	"Mastery through Deliberate Practice. Escape from tutorial hell"
Typing Club	The most effective way to learn how to type. Oh, you already know how to type? But do you use all 10 fingers while you type? That's what I thought!
Warrior.js	"Code your way through dungeons, prove your skills, and get hired."

Git

You will need git. Probably sooner than later so it's a good idea to grasp the basics.

link	description
Git and Github in Plain English	"This blog post aims to explain the “theory” behind version control (Git and Github) in plain English (...) No code. Nothing to download. No muss. No fuss."
Git Command Explorer	"Find the right commands you need without digging through the web."
Git Immersion	"A guided tour that walks through the fundamentals of Git, inspired by the premise that to know a thing is to do it."
Globalna konfiguracja Gita	How to make global .gitignore (it's in polish)
How to not f- up your local files with Git	Some good tips on how to use git with a team and not fudge up your files
Oh Shit, Git!?!	"Git is hard: screwing up is easy, and figuring out how to fix your mistakes is fucking impossible (...) So here are some bad situations I've gotten myself into, and how I eventually got myself out of them in plain english."
Understanding the GitHub flow	"GitHub flow is a lightweight, branch-based workflow that supports teams and projects where deployments are made regularly. This guide explains how and why GitHub flow works."

Career

Interviewing is hard. Passing an interview is even harder. Increase your chances of landing a dream job by consuming the below material.

link	description
Ace the coding interview, every time	"A practical blueprint, refined with the help of experienced Engineers, that will help you succeed in a code-intensive technical interview"
Career tips	Career tips for Software Engineers and Recruiters
Decoding the Front-end Interview Process	"Let’s take a look at the front-end development interview process and learn some tips to have successful interviews."
Get that job at Facebook	Pretty old post from a facebook engineer and interviewer
Get that job at Google	Even older post about interviewing for Google
How to fail a programming interview	A list of most common mistakes a candidate can make
How to write a killer Software Engineering résumé	"An in-depth analysis of the résumé that got me interviews at Google, Facebook, Amazon, Microsoft, Apple, and more."
The 30 Most Important Interview Questions to Ask This Summer	A candidate can also ask questions!
The Guerrilla Guide to Interviewing	Interesting take on interviewing from the interviewer point of view
Watch technical mock interviews	"Watch technical mock interviews with engineers from Google, Amazon, and more"

Knowledge base (or brain dump)

Sometimes I need a solid source of knowledge. Reliable, up-to-date and easy to understand. So far I found these to be of that kind.

link	description
30 seconds of code	"Browse 898 short code snippets for all your development needs on 30 seconds of code."
30 seconds of interviews	"A curated collection of common web development interview questions to help you prepare for your next interview."
33 Concepts Every JavaScript Developer Should Know	"This repository was created with the intention of helping developers master their concepts in JavaScript. It is not a requirement, but a guide for future studies. "
50+ Data Structure and Algorithms Interview Questions for Programmers	"In this article, I’ll share some frequently asked programming interview questions from different interviews for programmers at different levels of experience"
BlockScoped - Random coding questions by topic and difficulty	It's all in the title
Developer Roadmaps	"Step by step guides and paths to learn different tools or technologies"
Front End Interview Handbook	"Almost complete answers to "Front-end Job Interview Questions" which you can use to interview potential candidates, test yourself or completely ignore"
Refactoring Guru	"Refactoring is a controllable process of improving code without creating new functionality. Design Patterns are typical solutions to the commonly occurring problems in software design."
SourceMaking	"Design Patterns and Refactoring articles and guides. Design Patterns video tutorials for newbies. Simple descriptions and full source code examples in Java, C++, C#, PHP and Delphi."
VS Code can do that?!	All the best things about Visual Studio Code that nobody ever bothered to tell you

Javascript

Also a lot of knowledge, this time purely about JavaScript

link	description
Guide for the daily JavaScripter	"This document is a summary of good programming practices in js in general."
JavaScript Algorithms and Data Structures	"This repository contains JavaScript based examples of many popular algorithms and data structures."
JavaScript The Right Way	"A quick reference to best practices for writing JavaScript -- links to code patterns and tutorials from around the web"
JavaScript Questions	"From basic to advanced: test how well you know JavaScript, refresh your knowledge a bit, or prepare for your coding interview!"
JavaScript Visualized	First part of a great series on javascript fundamentals
The JavaScript Beginner's Handbook	The title is self-explanatory
The Modern JavaScript Tutorial	"How it's done now. From the basics to advanced topics with simple, but detailed explanations."
What the f*ck JavaScript?	"A list of funny and tricky JavaScript examples"

Online editors of things

Need to quickly put together some code? Not enough time to set up your favourite environment? The below websites come to rescue!

link	description
Code Sandbox	"An instant IDE and prototyping tool for rapid web development"
Carbon	"Create and share beautiful images of your source code."
regex101	"Free PCRE-based regular expression debugger with real time explanation, error detection and highlighting"

Learning platforms

It's all there.

link	description
Free Code Camp	"You'll learn to code by completing coding challenges and building projects. You'll also earn verified certifications along the way."
The Odin Project	"Provides a free open source coding curriculum that can be taken entirely online."

Podcasts

There are plenty of podcasts. I'm subscribed to, like, thirty but I regularly listen to one or two. Here's the ones which might be of use for the beginner developers.

link	description
CodeNewbie	"The most supportive community of programmers and people learning to code
Ladybug Podcast	"We’re debugging the tech industry."
Syntax	"A Tasty Treats Podcast for Web Developers."

Whiteboard challenges

If you're thinking of becoming a professional developer then sooner or later you're going to encounter coding challenge during an interview. Why not prepare for that in advance?

link	description
Code Wars	"Achieve code mastery through challenge"
Leet Code	"LeetCode is the best platform to help you enhance your skills, expand your knowledge and prepare for technical interviews."

link	description
Design Resources For Developers	Curated list of design and UI resources from stock photos, web templates, CSS frameworks, UI libraries, tools and much more
Here are 450 Ivy League courses you can take online right now for free	"Here are 450 Ivy League courses you can take online right now for free"
How to Hack Together Your Own CS Degree Online for Free	A list of resources related to computer science like algorithms, operating systems, maths etc.
Learn Vanilla JavaScript	Open source list of paid & free resources to learn vanilla JavaScript

Youtube channels

I wish I had the time to watch all of the videos my subscription feed is throwing at me.

Academind
Coding Blonde
Colt Steele
Fireship
mayuko
The Net Ninja
Traversy Media

Twitter people to follow

Twitter is a gold mine when it comes to talking about tech. Here's a list so you won't have to dig through hordes of people. Sorry if you're on Twitter and you're not on the list.

@_marcba
@cassidoo
@DThompsonDev
@EmmaBostian
@flaviocopes
@kentcdodds
@kvlly
@Madisonkanna
@ossia
@sarah_edo
@techgirl1908
@tlakomy
@WellPaidGeek

Old man’s guide to rebranding

Piotr Sławiński — Tue, 11 Jun 2019 20:18:33 +0000

It appears my writing has caught your attention. If you wish to be up-to-date, please consider subscribing to my newsletter.

You may think that in order to land a job in the dev world without previous experience, you need knowledge and skill. Well, not only that. You also need courage and luck. And boy it takes a lot of courage to pivot your career. Especially when you're in an age when you've probably already established one, and senior developers are by average five years younger than you. Allow me to show you that not all hope is lost and how to increase your chances of getting hired.

Getting ready

Alright! Let's assume that you are confident that you want to learn to code with a not so distant goal of becoming a professional developer. What's next?

As always - the hardest part is to start. Fortunately, with the web technologies, you don’t even have to move from your couch. All that you could ever need lies at your fingertips - in the vast space called the internet. But the abundance of information is overwhelming. Tons of articles, hours of videos, and dozens of online courses should make the process easier, but frequently it’s the very opposite. Not to mention that the quality of the things you will find may and will vary. Should I take that insanely discounted course on Udemy? Should I learn from books? What about tutorials, podcasts, or boot camps? Does it contain good practices or only teach anti-patterns? Let’s get down into the nitty-gritty! (Oh, and don't make the mistake of trying to learn everything. Pick a language and stick to it!)

Online courses

A great choice if you don't know where to start, or you’re looking for a comprehensive curriculum from a particular field, or you enjoy being led by the hand. Usually inexpensive - you either pay per course or a monthly fee. Oh, and before paying full price on Udemy, remember that you can get up to a 90% discount now and then. As a disadvantage, you can consider that as a beginner, you might have problems with transitioning from a course to real life as described in Moving Past Tutorials.

Books

Things about books are that the web dev world changes insanely fast (in comparison to other technologies). So when a book gets written, edited, printed, and optionally translated, it’s suddenly not very relevant anymore. But when a book is about one of the fundamental stuff: algorithms, design patterns, etc., you can easily grab a decades-old book and still learn useful stuff (not for beginners though). I find the printed books a great source of knowledge (I also love the new book smell), but I know that others might enjoy reading PDFs from screen more. It's up to you. Oh, and I advise picking the latest edition available.

How-tos

The Internet is full of them, which means you need to know what to look for. Videos, articles, blog posts - you name it! It seems every subject with every possible configuration of tools was already covered by someone and posted online. It's useful if you know what you want to create, but you got stuck. You might dig through tons of them until you find the right one though. And even then there’s no guarantee that the code we shamelessly copied to our project will work. Let’s be honest. We’ve all been there at some point - 50% of the code from StackOverflow and 50% from other peoples projects.

Podcasts

Amazing if you’re doing mundane stuff for a couple of hours a day every day. Like daily chores or commuting to your 9-to-5. Put those headphones on and immerse. It's not easy to recite whole blocks of code, so Podcasts mostly focus on news, tooling, personal experience, etc.

Boot camps

I don't know much about them, but from what I read, there are good ones, and there are bad ones. They cost a ton of money, so be careful if you considering this path. As with almost everything, the best approach is to reach people who attended boot camps and ask for their recommendations. Going on a boot camp is not essential, but certainly, a good one will boost your efforts to become a programmer.

Live coders

I was surprised when I learned that there are a lot of people on Twitch who stream their work. Why should anyone care? Well actually watching someone code can teach you stuff which a refined tutorial can't - the given coder's approach to problem-solving. In a scripted tutorial or a course everything, even the bugs have to be implemented deliberately. It's great that the trainer wants to show us how to troubleshoot an error, but it's often acted-out (poorly) as if it was a surprise and we cannot be sure that they covered all the errors. But when there's an error in a live-stream, trust me, the struggle is real.

In the end, there are no magic beans, and you still will have to learn — a lot. To become a rockstar developer, you will have to acquire a sort of student mentality because you will have to learn until you basically retire. And don’t jump instantly into that new and trending framework everyone is talking about. Wait a while until the technology matures. You don’t want to waste your time on stuff which will not stay around for long, do you? Remember - cutting edge is not the place you want to be.

Expectations vs. Reality

Ok, now that you’ve read most of the books and watched some of the tutorials you might think the time has come to take a look at the job market and start applying. And you're right, so do it. Did you do it? Ok, now take a look at the chart below.

The above chart was taken from Why Learning to Code is So Damn Hard and in my opinion, it's the best representation of the Dunning-Kruger effect. What is it? It's a psychological phenomenon when people mistakenly assess their abilities as greater than they actually are, which means that they cannot objectively evaluate their competence or incompetence.

When I started to learn to code, it took me four weeks to get to the peak of the hand-holding honeymoon. I was convinced that the amount of HTML and CSS I learned was enough to land me a job. Right about then I applied for the first time. For me, it was a massive failure, and for that company, it was a complete waste of time. The downfall of confidence came shortly after. It was obvious that I couldn't assess my competences correctly. A little over a year has passed, and I can tell that I’m somewhere on the upswing. I eventually got hired, but the hard work is not over, in fact, the hard work has only begun. Let me present you another chart - the Dunning-Kruger-Slawinski effect which describes what happens when you finally find a job

It starts all over! The cycle never ends, and the conclusion is to remember that besides the inability to recognize one's lack of ability, humans also expect instant gratification but in real life, it’s more like small increments day by day. For now, it is easier to assume that you know nothing and that this cycle repeats itself each time your life reaches a particular milestone.

Survivor bias

Do you remember when I said that you need to start applying as soon as possible? It's because I care for you and I want you to fail. Yup, you read it right - FAIL. Failure is unavoidable in the hiring process, and sooner you realize it, the better. Failure is also free, so fail fast, as they like to say.

Who are they you may ask? They surely are not the people who author the success stories you've probably read over the internet. You know which ones I'm talking about. The ones about pivoting someone's life, taking up coding and landing a dev job in a couple of months without a CS degree. I read dozens of them, each one more impressive than the last. I'm not trying to mock anyone, and I don't have any reason not to believe them, but none of them was about someone failing and giving up.

This phenomenon has a name - survivor bias. It means that only success stories get proper visibility, and you rarely hear about someone who failed (unless you count the bulk sellouts of programming books on facebook groups for beginners that is). So if you are looking for a real-life example of someone who has been in the same spot as you are right now, then you only see a bunch of successes. Don't you think it would fair if you could also read about people who didn't make it? I believe everyone can code, but not everyone is fit for the job. I know it sounds harsh, but I wish that boot camps wouldn't forget to mention that in their ads.

Hiring process

According to Technical Interviewing is Broken, But We Can Fix It and F*** You, I Quit — Hiring Is Broken, the whole thing is flawed in general. I wouldn’t know - I just started. But while I read those articles, I kept nodding my head at every point the authors have made. From my own experience after many failed interviews, I was left with a feeling of not being fairly assessed as a candidate.

I can only imagine that for experienced candidates, it has to be even more infuriating. It should be expected that they were already vetted while applying for previous jobs and probably already have created a successful code. But nooo… It needs to be checked yet again if you know textbooks by heart and can solve irrelevant algorithms on a whiteboard. What about other skills a successful candidate has to have like fitting in the team, identifying with the company values or delivering results on time?

But for someone with little to no experience, it does not make much of a difference - a failed interview is a failed interview. Anyway, in this crazy world, your chance to get a job grows with every application sent. Do you remember when I wrote in the beginning that luck is essential to become a dev? It took me seven months from sending out the first resume to finally accepting an offer for junior javascript developer. The whole thing is a matter of match and fit so keep on keeping on - you might get lucky next time. Below you will find the flow diagram of my job hunting efforts, and I recommend you to do one yourself.

So eventually, if you'll try long enough, you will get an offer. But before you sign anything, think about what you're doing. The temptation after a long and weary job hunt might make you accept the first offer you get, but you can still end up with a dead-end job working for less than you deserve. I’m not saying never accept the first offer, I’m just saying don’t let the initial success distort your perspective. Assess the offer cold-heartedly. Is it what you’ve wanted? Can you squeeze more from it? In the end, the person who says no to things is the person who is in control of their stuff.

Imposter syndrome

But you got the job! Congratulations! It’s only sweet, sweet work from now on. Do you feel comfortable? Not really? More of a never-ending fear of embarrassing yourself in front of your coworkers? Well, you might have the imposter syndrome. It’s that feeling when everyone seems smarter than you, and in your opinion, you faked your way here, and you're about to get exposed as a phony. The feeling is not so uncommon - I get it almost every day.

You might want to fight the impostor syndrome with acting that you know your stuff. Fake it till you make it, riiiight? I’m sorry. People in the company will see through you in a matter of days. Be honest. Don't be afraid to say I don't know. No one will fire you right away after you admit that you don’t know something. Hardly any new employee brings revenue in the first couple of months, even in a senior position.

I get through the impostor syndrome by making a list of my coding achievements and looking at it whenever I'm questioning my skills again. They can be even the smallest of things like I solved a merging conflict by myself or I made an alias for a very long command line. It helps a ton when I start to experience the symptoms of imposter syndrome yet again. Also the bunny from the tweet below has a spot on advice for you.

|￣￣￣￣￣￣￣￣￣￣￣|
| YOUR IMPOSTER'S |
| SYNDROME IS LYING |
| TO YOU |
| ＿＿＿＿＿＿＿＿＿＿＿|
(\_❀) ||
(•ㅅ•) ||
/ 　づ
— Ali Spittel 💁 (@aspittel) April 9, 2019

My way

Four words: Read, Solve, Network, Create. I got where I am because I did just that - I completely immersed in programming and did nothing more for little over a year. I'm talking of course about my free time because I still had to go to work!

Read: Read all you can as much as you can. Read at home, read on a bus, read in a line in a grocery store. It works as long as you’re reading about programming. You don't like reading? Watch a video then but remember to make it relevant and watch stuff about programming.

Solve: This means whiteboard challenges. For the time being it is a required step at almost every job interview, so if you want to pass one, you need to know how to calculate that n-th Fibonacci number.

Network: Start networking as soon as you can. Try to be in the same room as people who code. Go to meetups. Make friends who are in the same spot as you. Find people to code with. Speak with more experienced programmers. Find a mentor. Can’t find a meet up nearby? Network digitally.

Create: Learn Git as soon as you can, get yourself on GitHub and start committing to your own projects the moment you create an account. The less your GitHub timeline looks like a lousy Tetris game, the better. When job hunting if you don't have the experience, your portfolio will have to suffice, so it's good to have a couple of finished projects. They don't have to be huge or impressive in any way but contributing regularly and showing progress is very important.

Blinding Finding (because Sick Pick was taken)

Here are a bunch of useful (and free!) links I wish I knew about at the beginning of my coding journey. I really hope you will find them as helpful as I did.

freeCodeCamp - I owe them the most, especially at the beginning of my coding adventure. I really really recommend it to anyone who wants to code but does not know where to start. It's a great place to learn the basics and more of many web technologies.
30secondsofinterviews - They have answers to almost all trick questions a recruiter can ask. Unfortunately, I only learned about this website after my first failed technical interview. Embarrassingly when I decided to bookmark it, I discovered it already was in my Bookmarks folder.
You Don’t Know JS - I don’t know which book about JavaScript should be your first, but I sure do know that You Don’t Know JS should be your second. Kyle Simpson covers a lot of material and gets very technical very quickly; that's why I do not recommend it for beginners. It also has answers to all that trick questions from interviews, including a thorough technical substantiation.
Syntax.fm - A podcast from Wes Bos and Scott Tolinski. They talk about everything related to web dev and more (barbeque and dancing usually) for over 100 episodes, and it does not get dull for even a second. Best. Podcast. Ever.
codewars - Are you interested in whiteboard challenges and martial arts? Then this website is for you. For every solved algorithm (kata), you get points (kyu) which eventually gets you a belt. Just like in Karate Kid!
CS50 - This is a whole curriculum which in its design will teach you the basics of computer science. It's taught at Harvard, but it's also available online.

Conclusions

Hey, you're still reading! What is left for me to say is that you're about to perform the greatest stunt in your career. You may have regrets along the way, maybe cry a little (or was it only me), but that feeling of satisfaction for scoring the best job on earth is priceless. I hope that after reading this, your road to success will be much smoother.

DEV Community: Piotr Sławiński

What is Object-Oriented Programming?

How I Learned to Stop Worrying and Love the JavaScript Engine

What's a JavaScript engine?

What's a Just-In-Time compilation?

How it works

What's a call stack?

What's an execution context?

Global execution context

Functional execution context

Creation phase

Execution phase

Conclusions

References

Getting invited to a technical interview

Resume

Linkedin profile

Github profile

Conclusion

You need these Visual Studio Code extensions!

Visual Studio Code - Insiders version

Extensions

Essential

Strongly recommended

Recommended

Bonus round - tool-specific extensions

Conclusions

How to configure Visual Studio Code right the first time

Visual Studio Code - Insiders version

Extensions

Essential

Strongly recommended

Recommended

Bonus round - tool-specific extensions

Conclusions

Resources for beginner developers

Getting down to business

Blogs

Blogposts

Books

Online courses

Gamification

Git

Career

Knowledge base (or brain dump)

Javascript

Online editors of things

Learning platforms

Podcasts

Whiteboard challenges

Other aggregators of tasty links

Youtube channels

Twitter people to follow

Old man’s guide to rebranding

Getting ready

Online courses

Books

How-tos

Podcasts

Boot camps

Live coders

Expectations vs. Reality

Survivor bias

Hiring process

Imposter syndrome

My way

Blinding Finding (because Sick Pick was taken)

Conclusions