Coding Lawyer

Starting a New Blog!

noreply@blogger.com (Anonymous) — Wed, 09 Aug 2017 06:55:00 +0000

Dear readers,

Since I've been working as a developer for some time now, I decided to get back to blogging and write about programming topics that interests me and that might be useful to you as well.
However, I won't be updating this blog anymore. Instead, I created a brand new blog on my own domain.

Hope to see you all there.

https://codinglawyer.io/

First Days as A Developer: Nice to Meet You Backbone!

noreply@blogger.com (Anonymous) — Wed, 14 Sep 2016 20:03:00 +0000

It has been already more than three weeks since I started working as a front-end developer. So, I decided to share some of my initial experience. The topic of this article might be helpful to many of you who are starting to work with real-life applications which are often quite big. To quickly understand such applications and their code is a skill every developer must master. In particular, this post will focus on how to understand large projects written in the Backbone JavaScript library.

This was precisely what I had to do when I started my new job. One of my first tasks was to work with a complex JavaScript application. This meant that it already had a particular code structure that must be respected by anyone who would want to modify it.

What made it even more challenging was the fact that this application was written in the JavaScript Backbone library with which I had no previous experience.

What to do in order to understand the application’s architecture in a way that will enable me to properly modify it?

1. What is MVC?

When I googled what the Backbone is, I learned that it is a library for structuring JavaScript code which is based on the so-called Model, Controller, View (MVC) pattern. MVC is an architecture model for implementing user interfaces. It separates the application into three kinds of components – model (M), view (V) and controller (C). The idea is to promote a separation of concerns which should result in better structured and more maintainable applications.

MVC Pattern

There are many other JavaScript libraries and frameworks that implement MVC pattern, for example: Ember, Angular, and React (to some degree). None of these frameworks are better or worse than the others, each is just designed for the different purpose.

2. What is Backbone?

When I learned that the application, I will be working on, is built with Backbone library, I thought that it can't be that difficult to understand it. Since I already knew how to build applications in React, I was pretty sure that this knowledge will help me to grasp the Backbone logic as well.

‘They’re all based on MVC pattern anyway, right?!’

‘...or not?!’

The truth is that React isn’t a classic MVC since it is considered only as V in MVC. Moreover, Backbone is neither an example of classic MVC. Although it provides the concept of models and views, its views are more like controllers (more on that later).

So, there is no clear separation between models, views and controllers in Backbone.

I learned the difference between Backbone and React myself. If you compare the code structure of applications built in these two libraries, you will find out that it is pretty different. Nevertheless, they still have a lot in common. They are both great for building single page applications (SPA) which aim is to provide a rich user experience similar to desktop applications. In these applications, all the necessary code (HTML, CSS and JavaScript) is retrieved with a single page load.

Backbone has five components: events, models, collections, views and routers. However, to understand the Backbone logic, it is important to get to know the relationship between models and views.

Backbone modified MVC pattern (source: http://backbonejs.org/)

Models are containers for application data that can also send AJAX requests to the server to synchronize the data on the client with the server. On the other hand, views are responsible for rendering the models and listening to any events raised by the DOM or events raised by the model. Collection is just an ordered set of models.

When you open a typical Backbone application in your text editor or IDE, the folders will at least be named as models, views and collections. If your Backbone application contains dozens of files (as in my case), you might feel a little intimidated. Believe me, that is only the initial and wrong feeling.

The file names will often help you to understand the application's structure. You can tell from the names what a particular model or view actually do. You will also need to dive deep into the code to be able to understand it and work with it. Try to change a thing or two and refresh the browser to see how the changes affected the functionality. With this approach, you will eventually understand the basic logic of the application quite fast.

When you understand the basic logic of the application, you will be ready to actually produce a code on your own which will fit into the application's structure.

ResWebDev #2

noreply@blogger.com (Anonymous) — Tue, 23 Aug 2016 13:30:00 +0000

Article

What is an API? In English, please

Do you really know what an API (Application Programming Interface) stands for? Are you sure? If not, definitely check this article! You will learn that it is possible to describe the concept of API from different perspectives. The word Application its name can refer to various things. It can be a piece of software with a distinct function or the whole server, the whole app, or just a small part of an app. In this article you will find very understandable explanation of API. It is one of the best that I have ever read.

Article
Presentational and Container Components

(Dan Abramov)

This article is from the creator of Redux library Dan Abramov. He describes division of components that underlies the logic behind using React with Redux. This approach lets you make such apps much more understandable and readable. The author divides components into two categories: container components and presentational components. Each of them has specific attributes.

Presentational components focus simply on how things work. This means that they are primarily represented by a markup. They don’t manipulate data in any way; they only reads them from props. Container components are on the other hand concerned with how things work. They update the state and fetch data. Moreover, they are connected to Redux and enable you to use Redux state in the components.

Article
Conquer Legacy Code
(Bill Sourour)

Sooner or later you will be probably working with the so-called legacy code - the code that was written a long time ago often by those who are not around anymore. That means you must understand it on your own to be able to work with it (improve or change it). The author claims that you should respect the legacy code. That means to understand why it is written the way it is in the first place. You should avoid immediate judgments like 'This code sucks. I can re-write it better way'. You should try to fix only the real problems that need to be fixed. The more code you change, the bigger is the probability that the application will eventually break.

Article
Don’t want to get hacked? Close your laptop
(Chet Corcos)

The point of this article is to stress the importance of your computer's security. It shows how it is easy to hack someone's computer. You will need only 50 lines of code to do that. And you will learn what different things you can do when you hack a computer.

What? Are you saying that you don't want to let anyone to hack your laptop? So then just make sure that your computer is locked when you are not around. You can use this guide to give a lesson to your friend who is forgetting to lock his computer :) However, the main point of this article is to keep in mind how vulnerable your computer is if you are not careful.

Programming Job Acquired: Mission Accomplished

noreply@blogger.com (Anonymous) — Sun, 14 Aug 2016 16:05:00 +0000

So it is finally here:

This week, I am officially unemployed. Next week, I will be working as a front-end developer, finally! pic.twitter.com/FEyjmB55ae

— Coding Lawyer (@coding_lawyer) August 10, 2016

Monday was the last day in my legal job. Starting next Monday, I will be working as a front-end developer at medium-sized company. So, I think that this is the perfect time for me to reflect on my coding journey whose first scenario, which lasts from the beginning until this week, is coming to an end. However, at the same time, the second one is ready to begin.

In this post, I will share with you my 'coding journey in a nutshell' and interesting insights that I gained along the way.

My coding journey began on

26th November 2015

On this particular day, I bought my first programming online course on Udemy. Back then, my programming knowledge was equal to zero (triple equal to be precise). I was at the beginning of my journey. I had no idea that this decision will have such a huge impact on my future career.

Long story short, I got my first programming job on June this year. So, it took me seven months to learn how to code from scratch. However, I needed to wait two more months until the statutory notice period expires.

Coding Journey Part 1: Overview

At the beginning of my coding journey, I had no idea that I will be a professional programmer one day. I did not even know I was a type of a guy that can do that kind of job in the first place. My major concern was that I had no formal computer science education whatsoever. I was not even a fan of exact sciences at high school.

From my own experience, a lack of formal computer science education is the main reason why so many people are discouraged from trying to pursue a programming career. There is deeply rooted belief, that you need some kind of computer science education to be able to get a job as a programmer.

Of course, I thought this might be a hurdle for me too. However, the more I coded, learnt about coding and about other people’s experience, my state of mind began to change. I started to play with an idea that programming can be something more than just a hobby for me. I really enjoyed the creative process whose outcome is a fully functioning application made from scratch, which even do something useful.

I was literally consumed by it

At that time, I have been reading so many posts from people who switched to the programming career in a year. Well, that is a lot of time, you might say. But if you think about it, it is actually a pretty short period of time. If you are able to learn new skill from scratch and find a job in a year, well that is just awesome. Keep it mind, that people study many years to get a promising job.

I myself was able to get a job in seven months. The length of the period before you are able to get a job can be affected by many factors. You must choose your resources wisely. I already wrote two posts about JavaScript materials in general and React materials in particular. You must think about the way you learn all the time, since it is the main thing that makes a huge difference to your progress.

Turning-point No. 1: Feedback

There are so many other factors that affect your overall progress (motivation, regularity, spare time etc.). Some of them are more important than others. It is really useful to code regularly every day, as I wrote earlier. In my opinion, the most important is the one that is not fully under your control. It is feedback (check out my older post on this topic).

If you are not able to get any feedback, your progress will be much slower

When you are learning to code, it is not that difficult to get at least some. If you do not know any programmer personally, you still have whole internet overflowing with communities of people willing give you feedback for free. You can always find somebody who will tell you what is wrong or right with your code.

Of course, you can learn A LOT from your self-studies without anyone’s help. Nevertheless, you will eventually get to the point at which it will become more and more challenging for you to move forward effectively without any feedback. Your progress will be much smoother if you have a mentor who will tell you what is wrong with your code or how you should structure it better. There are so many issues that must be considered when writing proper code:

Is this really the best way how to write a particular code feature?
Should you use promise or callback in a given case?
Is jQuery a perfect library for this project?
What about React and Angular libraries, will not they be a better choice for this app?
What coding design pattern should you use?

Without any mentorship whatsoever, you will be forced to not only answer these questions yourself, but to figure out that you need to ask them in the first place. Of course you can do this on your own, but you will need to read a lot of other people’s code and articles to be able to do that. Moreover, it will certainly take a significant amount of your precious time.

I myself was able to get some feedback on my coding projects I built from my friends as well as from an online community.

Turning-point No. 2: Real-life Projects

However, getting some feedback will not be the only crucial point you will experience on your coding journey. At least, this was my case. As I was gaining experience, I started to feel that by working only on my own small applications, I was not able to tackle more complex coding issues and concepts. For example, you can take a look at my JavaScript calculator (guide). I am proud of it. However, it is a relatively small application. I started to feel that I need to work on some larger real-life projects to be able to make significant progress.

In my opinion, this is the right time to start looking for a job

However, when I started applying for the front-end developer positions, I was not in this phase yet. I wanted to wait at least a month to learn more about various JavaScript libraries and frameworks. I still needed a little more time.

The reason why I actually applied for a job at that time was pure coincidence. On May this year, I visited startup job fair in Prague (Czech Republic). After talking to the people from different companies, I was invited to several interviews. I told myself, that I had nothing to lose. If I will not get any job, I will at least have a better knowledge about employers' job requirements.

However, it worked out well and I got a job as a front-end developer

Coding Journey Part 2: New Beginning

Today, two months later, a couple of days before the first day in my new job, I can say that I find myself in the exact position I mentioned above, which is the right one to start looking for a job.

I am now even more confident that my decision was the right one and I am really looking forward to my new job

Do you want to make effective progress? Code Every Day!

noreply@blogger.com (Anonymous) — Wed, 03 Aug 2016 14:22:00 +0000

Recently, I read an article from the author of famous jQuery (JavaScript library) John Resig. He talked about a topic which I am also familiar with (and I guess you as well). He discussed the fact that he does not have enough time for doing his coding side projects effectively. This led to insufficient progress when building them.

Making any side project can be very challenging, especially when you code eight hours a day at work. However, Resig's article can be also applicable to anyone who has a full-time job, not only to professional programmers. I am such an individual, since I am not coding for living yet. I know very well how it can be sometimes difficult to code after you come home from work. This means that your are basically able to code only in the evenings (or at night) or on the weekends. Since I often relax on the weekends, I code mostly after work.

This lack of spare time sometimes leads to non-consistent coding periods. In other words, I am not able to code for a couple of days in a row. Even two day gap might cause that I forget what I was working on. The worst case scenario is when my coding gap is longer than five days.

So, I am experiencing the same problem as John Resig in his article:

I am not able to code every single day.

As a solution, Resig set himself a couple of rules to become more effective and to make more significant progress when working on his side projects. In a nutshell, these rules were:

code every day
write only useful code
all code must be written before midnight
it must be open source up on Github

I guess these rules are OK for an advanced programmer, but not for me or for anyone who is not coding for living. Only skilled programmer can produce 'useful' code everyday.

So, I decided to set myself less strict rules. In reality, I created only one rule, which (I hope) will help me to become more effective programmer and to make better progress. This simple rule is:

CODE EVERY DAY – MAKE IT YOUR HABIT

However, this does not mean that you need to make your Github chart all green. I also have many of my projects on my hard drive only. As John Resig correctly pointed out: ‘this is about a change that you’re making in your life for yourself not a change that you’re making to satisfy someone else’s perception of your work. The same goes for any form of dieting or exercise: if you don’t care about improving yourself then you’ll never actually succeed.’

I also agree with his other claim that ‘the feeling of making progress is just as important as making actual progress.’ It is truly important for you to always feel that you are moving forward.

Before I go to sleep, I sometimes feel that I have not achieved coding progress that I wanted to that particular day. As a result, I code even after midnight and do not sleep enough. John Resig claims that with a habit of coding every day, this anxiety will melt away.

I guess that might be true. If I will be making progress each day, I will not feel anxiety to make bigger progress on a day, before which I was not able to code for a couple of days. Instead of feeling that I need to make progress every now and then, I will make it regularly each day.

Maybe you are now wondering, 'for how long do I need to code each day?' This of course depends on your personal preferences. I guess half an hour can be sufficient for experienced coders. However, I myself need to code at least one hour a day. Otherwise, I do not feel that my progress is sufficient. This is in part due to the fact that I often encounter an issue which takes more than a hour to solve. I guess this sometimes happens to anyone :)

Starting today, I commit myself to code every single day.

I will share my experience in some of the future posts.

What about you? Do you code every day? Or do you want to start and join me in my commitment?

If you have any experience with this approach, please let me know in the discussion.

How am I learning React with Redux?

noreply@blogger.com (Anonymous) — Fri, 29 Jul 2016 06:05:00 +0000

Roughly two months ago, I came to the conclusion that my knowledge of vanilla JavaScript is advanced enough. So, I decided to dive into one of the many JavaScript frameworks which would enable me to build more sophisticated apps.

I chose React library since I admired its smart architecture…just kidding :). I had no idea which framework or library to pick. I jumped into React because I heard that it is a simple component library suitable for my intended purposes. Moreover, many employers require it in their job descriptions.

In this post, I am going to describe how I started learning React with Redux and which resources helped me along the way.

If you find yourself in a similar position I was in two months ago, I hope you’ll find my learning path inspiring.

The Start

In the beginning, I needed to decide which React with Redux resources to pick. There are so many of them. Would it better to start with the official documentation, with a book or watch some video courses?

I decided to check the official docs first. However, this was not a smart decision since I had no idea about the logic of the library. I didn’t even know what some concepts meant since the only JS library I knew at that time well was jQuery. So, I skipped the docs for the time being.

Instead, I chose a book (ReactJS by Example - Building Modern Web Applications with React) and a video course (Modern React with Redux). Both resources claimed that they will teach me React (with Redux) in an accessible way.

The Book

I started with the book first. The style, in which it was written, seemed engaging to me at first. You’re learning React features from the conversation between senior web developer (React expert) and junior web developer (React newbie). I guess this is one of the few things I liked about this book.

However, the more I read the more I started to realize that there is a substantial downside to this writing style. It forces you to read too much of unnecessary text in order to understand a particular React feature. This fact made it difficult to just skim the text when, for example, you wanted to come back and re-read some topic. Moreover, the text also seemed often repetitive to me. Also, the code snippets in the book were not written in ES6 syntax, which is today’s standard of writing React apps.

These are the major reasons why I wasn’t able to finish it. I read roughly half of it.

The Course

In a short time after I begun reading the mentioned book, I started to watch the video course Modern React with Redux by Stephen Grider. Unlike the book, the course truly helped me to understand React and Redux. The instructor does a great job explaining React basics in a beginner-friendly way. You will learn not only how to write code properly, but also why are you writing it in a particular way. What I loved the most about instructor’s approach is that you’re building apps with React throughout the course. He will also write every single line of code with you – code along.

After few introductory videos, you will create the YouTube app where you will solidify your newly acquired knowledge. You are going to build your first React component, initialize a state and even make you first React AJAX call. After that, you’ll plug Redux in and create the Weather app using other JS libraries and frameworks as well. The final app, you’re going to make, will be a simple blog, where you will build a form in React and you will learn how to use React router library.

However, there are two things I missed in this course. Firstly, you don’t build your React developer environment yourself. Instead, you simply download it from the instructor’s Github account. From the hindsight, I think it is crucial for a React beginner (without any experience with node.js) to understand how is it possible that just by typing “npm start” into the console, your app magically appears on the screen. You might also have issues with understanding why the JSX code with ES6 syntax, you write throughout the course, can be read by the browser (hint: it is done by npm’s Babel package).

Secondly, I missed some theoretical introduction into the basics of React and Redux. When I’m learning something new, I need to understand the basic concepts and definitions from the beginning. This helps me a lot to fully understand the new material. For example, you won’t learn difference between React component, React element and React node in this course. However, I’m fully aware that this latter issue might be only my personal one.

To sum up, Stephen Grider’s Modern React with Redux course is a great introduction to React with Redux. It will teach you how to build fully functional apps with these technologies using modern ES6 syntax.

The Rest

Since I wanted to learn more about React and Redux, I tried another video course, this time from Cory House. Actually, he has two courses on React, one for beginners with Flux (with React.createClass syntax) and the other for not-React-beginners with Redux (using ES6 syntax). I did the latter one.

Although I knew that this course was not for beginners, I didn’t like the fact that the instructor just copied and paste the code most of the time. I’ve already done a couple of other advanced JS courses and in each of one of them, you code along with the instructor. The instructor was also too often referring back to his beginner’s course. This might get a little bit annoying sometimes. Because of this, I occasionally got a feeling that you needed to do the beginner’s course first in order to be able to get the most from the advanced course.

On the other hand, the instructor provided an introductory lecture before each topic with a couple of slides. This really helped me to get into the particular React (Redux) topic (the thing I missed in the Stephen Grider’s course).

Despite the mentioned shortcomings, this course was very well organized and it helped me to understand React and Redux even more.

The Docs

After going through all of the mentioned resources, I jumped back to the official React docs and read them all. This time around, I had no problem understanding it.

Currently, I am going through Redux docs and have no problems understanding it as well.

So, are you going to learn React with Redux too?

If you’ve already jumped into React and Redux, please let me know, in the discussion, what resources you used and how efficient they were for you.

WebDevRes #1

noreply@blogger.com (Anonymous) — Fri, 22 Jul 2016 11:51:00 +0000

Article

Want to learn JavaScript in 2016?

This article describes its author’s programming journey. As I mentioned in the previous post, the most difficult part of the coding learning process is to pass its intermediate stage, which is a phase between beginner and advanced programmer. The author of the article sees it the same way.
He makes also some very good points, for example that you should at least try to learn how JS frameworks and libraries work under the hood, which will help you to better understand JS functionalities.

The only problem I have with this article is that the author is only telling you which courses to take or which book to read, but he is not telling what you should do with the acquired knowledge. You should always keep in mind that the most important thing in a learning process is to build your own apps from scratch.

Blog post

My Bootcamp experience

This is a great article from Saron Yitbarek, founder of the code newbies, where she describes her personal experience with a programming Bootcamp. Among other things, you will learn what to look for when searching for the bootcamp that will meet your individual needs and that you should always carefully assess the employment percentage of the particular bootcamp’s graduates, since it can be easily manipulated.

Article

Getting Started with JavaScript Robotics

Have you ever thought about using JavaScript to program a piece hardware? …for example, to light up your LED?
This article will walk you through the process from getting your hardware to being able to control a LED with a JavaScript code using Node.js.
I was amazed by how simple is to get the hardware and to start control it with JavaScript. I'm even playing with the idea of buying the Arduino starter kit myself.

Blog post

Give it five minutes

I came across this blog post when reading the documentation to the React JS library. Its main massage is that you should always think hard about new ideas, which might seem like a nonsense to you at first. Before dismissing them straight away, you should ask questions about them instead. It is an easy task to dismiss someone’s unconventional idea, much harded task is to think about it and accept it .

WebDevRes #0

noreply@blogger.com (Anonymous) — Sat, 16 Jul 2016 16:10:00 +0000

As already mentioned, I will be regularly posting the most interesting resources (articles, blog posts, podcasts, tweets…), I encounter, that are somehow related to programming. These posts are called WebDevRes which stands for Web Development Resources and you're just reading the first post of this series - History in the making!

As you can see, the first "issue" begins with 0 and not with 1. Do you know why?

Yep, you’re right, WebDevRes Weekly is a kind of an array of interesting links, and array index, as we all know, begins with 0!

Ok, (stupid) jokes aside and let’s get real.

Here are the top five links to interesting programming resources, I recently read or heard. Enjoy!

Article

How to write Medium stories people will actually read

The author describes how to convince other people to read your article on Medium.com. However, many of the rules can be applied to any of your internet posts as well. The post also contains links to the articles analyzing what words you should use in your headline to get more readers. You will also learn how you should write your posts and that you shouldn’t be scared to show your credibility to your readers.

Podcast

Code Newbie Ep. 19 - The Hard Way

This is a great interview with Zed Shaw, author of the Learn the Hard Way series. What I personally like about him is his different approach to the code learning since he puts strong emphasis on the memorization. He claims that you need to memorize syntax of the programming language before you can jump into your first coding project.

Blog Post

Leveling up your JavaScript

This is a story about an aspiring web developer, who talks about his programming journey. The interesting part of the post is when he describes challenges he faced, when moving from a beginner to an advanced programmer. I bet that everybody undergoes such troubles when going through this particular period since you don’t know what you don’t know. The easiest way, how to move on, is to learn from other’s experience. You should therefore read this article!

Article

Angular versus React: Which One Will Reign Supreme?

The article describes differences between the two most popular JS frameworks - Angular and React. The author talks about the advantages as well as of disadvantages of each framework. Since many of the web developers need to use at least one of them, it is good to understand the differences between them.

Article

Atom treasures a list of Atom plugins I can’t live without

If you’re using Atom text editor, this article is for you. If you don’t use it, you should at least give it a try J. This post is full of great packages which will enhance your productivity. Try the power mode package at least!

What’s React!? : Introduction

noreply@blogger.com (Anonymous) — Fri, 15 Jul 2016 09:29:00 +0000

Introduction

If you read any article about web development or any front-end developer job description these days, you most likely get the impression, that everybody wants you to know JS library called React.js. Since I’ve read many articles about React and watch some online courses in the last couple of weeks, I decided to write a post about this popular library.

“Ok, so what’s this fancy thing that everybody is talking about?”

Put it simply, React.js is a JavaScript library developed by Facebook. It lets you divide your app into user interface (UI) components. However, this is nothing new since React is just one of the many libraries that let you build components with JS. You can use other JS frameworks such as Angular or Ember for this as well. However, in contrast to Angular, which is a full-fledged JS framework, React is only a view layer. This means that it doesn’t care about routing, data flow or deployments. You need to use other libraries to be able to use these functionalities in React (e.g. Redux, React-Router). React is thus a simple composable component library.

“Hmm, ok. But what’s so special about React? ”

One of its greatest benefits is its speed and responsiveness that is related to the way how it manipulates the DOM. It uses the virtual DOM that compares the current state of the DOM to the updated state and determines the most efficient way to update the DOM. In contrast, jQuery updates the whole DOM every time, the state is changed (e.g. the button is clicked). Furthermore, React enables you to easily nest components inside other components and to pass data from the parent component down the child components via the so-called props.

Syntax

React code be written in the pure JavaScript or in so-called JSX syntax. JSX is JavaScript syntax extension that looks like HTML. In other words it extends ECMAScript in a way that HTML-like text can co-exist with JavaScript code. You can simply write HTML and JS in one file. In JSX you can write tags just as you were writing them in a HTML file. However, if you are writing JS code in JSX file, you need to surround your code with curly braces {}.

JSX must be always transformed into JavaScript by a preprocessor (typically by Babel.js). Otherwise, the JS engine won’t be able to understand this code. If you are writing your React code in ES6 syntax, Babel will translate it into ES5 as well.

As I already mentioned, you can write your React code with JSX or with pure JS. However, JSX syntax is easier to write and read and is more popular as well.

Example of a React code in JSX syntax:

1	var greetings = <div>Hello World</div>

The same code transformed by Babel into pure JS syntax:

var greetings = React.createElement(
   "div",
   null,
   "Hello World"
);

As you can see JSX is basically HTML syntax written in the JS code. In this way, the React differs from the Angular and Knockout frameworks, where you write JavaScript code into HTML which has some disadvantages. Primarily, it is difficult to debug it because, for example, if you make a typo in the mark-up, the app silently fails because HTML is not strictly parsed as JS is. On the other hand, React is written in JSX which is the JavaScript. This means that if you make a typo in JSX code, you will get an error referencing the particular line of code.

React. JS is :

a simple composable component library

fast and responsive

easy to debug

See you in the next post…

If you like this post, or if you have any suggestions or critique, feel free to write a comment below. I will much appreciated that it.

I’m back!

noreply@blogger.com (Anonymous) — Wed, 13 Jul 2016 08:58:00 +0000

Lately, I spend all of my spare time learning new technologies and unfortunately didn’t write any new posts.

But that period is over... I will bring this blog to life again!

From now on, I will make a new post every week. Furthermore, I will also write regularly about the interesting programming resources.

So, Stay tuned…

Feedback - The Most Important Thing, Man

noreply@blogger.com (Anonymous) — Tue, 31 May 2016 19:00:00 +0000

If I should mention one thing, about which I often think about these days, it is feedback. The more I code, the more I am convinced that receiving feedback from an experienced individual is a necessary part of this learning process. I’ve never thought about this much before, and that was a mistake.

When you are learning to code, feedback is crucial for you since you want to write a good code and only an experienced programmer can tell you, if you’re on a right track or if your code looks like spaghetti.

When I look back at my legal university studies, I realize that I had a lack of feedback at that time. If you don’t have enough of it, you might get cocky and think that you have a complete knowledge of a particular field since there is no one who would tell you that you see only a tip of the iceberg.

If I think about that today, I end up realizing that the most important thing I was missing at that time was a constructive feedback. If you want to be really good at something, you need a help from the experienced 'one' who is willing to tell you not only that the result of your work is great but what is wrong with your work as well.

In the perfect world, feedback should be a part of every learning process.

The more I code I am writing, the more I am realizing that feedback is the single most invaluable thing that is helping me to move forward. This is true especially in the programming field, where you don’t know what you don’t know.

You can write dozens of apps in your favorite programming language, but does it mean you’re an expert in that particular language? I doubt so. You can write your versions of Facebook in jQuery and you might feel that you’re the jQuery ninja. However, no professional would really write such a complex app in jQuery. There is Angular, Backbone or React for this kind of app and also a lot of other JS frameworks and libraries for other stuff.

I know that this short post might seem too trivial for many of you. But for me, undergoing this process of thinking about the importance of feedback helped me to move forward and to look at my progress from a new perspective. Thanks to this awareness, I was able to critically evaluate the past and future of my coding journey and learn new lessons from my wrong decisions.

JavaScript Calculator Guide PART 2: Code! (Free Code Camp Challenge)

noreply@blogger.com (Anonymous) — Fri, 13 May 2016 12:34:00 +0000

Welcome back!

This is my second post describing the implementation of the JavaScript calculator using the finite state machine (FSM). As I promised, I am going to start with the explanation of our FSM graph.

Graph

Although this graph might look a little bit complicated, it is actually pretty straightforward.

The graph displays many things about which, I have already talked about in my first post. You can see the variables (top of the picture) as well as individual states (in the rectangles).

From each state, you can see arrows pointing to the next states. Above every one of them is a text, separated by a slash, explaining what causes the transition into the next state and how it affects the variables.

The words before the slash refer to the calculator’s key that is clicked on:

num – number key
op_key – operator (except equal sign) key
equal – equal sign key
dot – dot key

The words after the slash refer to the defined variables which are affected by the pressed key.

For example, if you are in the START state of the calculator and you press a number key, you will get to the FIRST_ARG state and disp variable will have a new value which is the same as the particular number of the pressed key (num/disp = num). If you press a number again, disp variable will get a new character space which is the same as the value of the pressed key (num/disp += num). However, if you press an operator instead, variable op will be equal to that operator (op_key/op = op_key) and disp variable won’t get a new character, instead the acc1 variable will be equal to disp (acc1 = disp) because we want disp to be able to store a new second number which will be pressed after the operator.

This behavior is basically the same for the transitions between all the other states.

See? It isn’t that difficult, is it?

Only thing we need to do is to transform this graph into a code!

Code: The Set Up

Let’s start with the definition of the object kclass that will store all the calculator’s keys that can be pressed. This will help us later in the code to recognize which key was pressed. As you can see, these are simply keys which can be found on any calculator.

//object containing key categories that can be clicked
var kclass = {
  //number
  NUM: 1,
  //dot
  DOT: 2,
  //operator
  OP: 3,
  //clear entry
  CE: 4,
  //equal
  EQ: 5
}

The only key that is missing is AC (all clear) key, which resets the calculator’s memory. We will talk about this key later on. On the other hand, you can see a CE (clear entry) key which resets only the currently displayed input.

Now, we are going to define an object with all the calculator's states which you can also see in our graph.

//object containing states
var states = {
  //default state
  START: 1,
  //when the first number is added
  FIRST_ARG: 2,
  //when the first number begins with a dot (0.) or when it has a dot anywhere else
  FIRST_ARG_FLOAT: 3,
  //when the operator is added
  OP: 4,
  //when the second number is added
  SECOND_ARG: 5,
  //when the second number has a dot not at its beginning
  SEC_ARG_FLOAT: 6,
  //when the second number begins with dot(0.)
  SEC_ARG_DOT: 7,
  //when we get the result of the arithmetic operation
  EQ: 8
}

Now, let’s create an object calc that will contain all the functionality related to our calculator. I am going to separate this complex object into smaller snippets of code for the clarity's sake.

Let’s start with the declaration of the variables. Note that the state variable is set to the START state and other variables are empty. This is the default state of the calculator.

var calc = {
  //monitors current state
  state: states.START,
  //monitors current operator
  op: "",
  //monitors what is currently displayed on the display
  disp: "",
  //stores the first number for further operations
  acc1: "",
  //stores the second number for further operations
  acc2: "",

Keep in mind, that you need to give classes and ids to the elements in your HTML document because you need to select them in a JavaScript code.

My code presupposes these selectors:

display of the calculator (id=“display”)
all number keys (class=“digit”)
all operators (except equal sign) keys (class=”op_key”)
dot key (class=”point”)
equal sign key (class= “equals”)
AC key (class=“allClear”)
CE key (class=“clearEntry”)

Code: FSM

Remember, that we are still inside the calc object. The main functionality that controls transitions between the states will be stored in the function doStep. This function represents the implementation of a FSM. It takes two arguments: a category of key that is clicked on (these are defined in the object kclass) and the particular value of the clicked HTML element (number or operator). Inside this function, we will use a switch for transitioning between the individual states of the calculator. Each switch case will represent a particular state.

  //function that controls transitions between states using switch
  //two arguments - key_class(key category), key(specific key)
  doStep: function(key_class, key){
      switch (this.state){
         case states.START:
            if(key_class === kclass.NUM){
                //state action
                this.dispSet(key);
                //move to the next state
                this.state = states.FIRST_ARG;
            }
            if(key_class === kclass.DOT){
                this.dispSet("0.");
                this.state = states.FIRST_ARG_FLOAT;
            }
            break;

Since the state variable is set to the default START state at the beginning, this state will be our starting state. Each switch case describes what choices we have in this particular state of the calculator. You can see that the only two things we can do in the START state is to press a number key or a dot key (if you look into our graph, you will see the same behavior). By pressing a number key, the first character will be a number. If you decide to press a dot key first, the first character will be “0.” instead. Function dispSet updates the disp variable with a value from its argument which is in this case the pressed HTML element (key) or “0.”. After that, it calls the displayUpdate function which (surprisingly) updates the display of the calculator.

At the end of every switch case, state of the calculator is updated.

        case states.FIRST_ARG:
            if(key_class === kclass.NUM){
                this.dispAppend(key);
                this.state = states.FIRST_ARG;
            }
            if(key_class === kclass.OP){
                this.op = key;
                //store value of the disp in a acc1 variable in order to be able to store second number in the disp
                this.acc1 = this.disp;
                this.state = states.OP;
            }
            if(key_class === kclass.DOT){
                this.dispAppend(key);
                this.state = states.FIRST_ARG_FLOAT;
            }
            if(key_class === kclass.CE){
                this.dispSet("0");
                calc.state = states.START
            }
            break;

The second state is FIRST_ARG. You can see that it works just as a first state. The only difference is that you have now much more choices, i.e. you can press a range of buttons which will affect the arithmetical operation differently. Function dispAppend differs from the function dispSet in a way that it concatenates two strings together rather than set a brand new value of the variable.

        case states.FIRST_ARG_FLOAT:
            if(key_class === kclass.NUM){
                this.dispAppend(key);
                this.state = states.FIRST_ARG_FLOAT;
            }
            if(key_class === kclass.OP){
                this.op = key;
                //store value of the disp in a acc1 variable in order to be able to store second number in the disp
                this.acc1 = this.disp;
                this.state = states.OP;
            }
            if(key_class === kclass.CE){
                this.dispSet("0");
                calc.state = states.START;
            }
            break;
        case states.OP:
            if(key_class === kclass.NUM){
                this.dispSet(key);
                this.state = states.SECOND_ARG;
            }
            if(key_class === kclass.DOT){
                this.dispSet("0.");
                this.state = states.SEC_ARG_DOT;
            }
            break;
        case states.SECOND_ARG:
            if(key_class === kclass.DOT){
                this.dispAppend(key);
                this.state = states.SEC_ARG_FLOAT;
            }
            if(key_class === kclass.NUM){
                this.dispAppend(key);
                this.state = states.SECOND_ARG;
            }
            if(key_class === kclass.EQ){
                //store the second number in the acc2 variable so that we can use it if the equal sign is pressed more than once
                this.acc2 = this.disp;
                //calculate the result
                this.operation(this.acc1, this.disp);
                this.displayUpdate(this.disp);
                this.state = states.EQ;
             }
            if(key_class === kclass.OP){
                //calculate the result
                this.operation(this.acc1, this.disp);
                this.op = key;
                //store the result of the operation in the acc1 in order to be used in the next operation
                this.acc1 = this.disp;
                this.displayUpdate(this.disp);
                this.state = states.OP;
            }
            if(key_class === kclass.CE){
                this.dispSet("0");
                calc.state = states.OP;
            }
            break;

The important thing in the SECOND_ARG state is a situation when we press an equal sign (EQ). If we do this, the disp variable is firstly stored in the acc2 variable because we need to remember this value for the scenario if we wanted to press equal sign again. Secondly, the function operation takes two numbers as arguments and performs a particular calculation with them. The type of the calculation is determined by the value of the op variable, which was set earlier when the operator key was pressed.

        case states.SEC_ARG_FLOAT:
            if(key_class === kclass.NUM){
                this.dispAppend(key);
                this.state = states.SEC_ARG_FLOAT;
            }
            if(key_class === kclass.EQ){
                this.acc2 = this.disp;
                this.operation(this.acc1, this.disp);
                this.displayUpdate(this.disp);
                this.state = states.EQ;
             }
             if(key_class === kclass.OP){
                 this.operation(this.acc1, this.disp);
                 this.op = key;
                 this.acc1 = this.disp;
                 this.displayUpdate(this.disp);
                 this.state = states.OP;
             }
             if(key_class === kclass.CE){
                 this.dispSet("0");
                 calc.state = states.OP;
             }
            break;
        case states.SEC_ARG_DOT:
            if(key_class === kclass.NUM){
                this.dispAppend(key);
                this.state = states.SEC_ARG_FLOAT;
            }
            if(key_class === kclass.CE){
                this.dispSet("0");
                calc.state = states.OP;
            }
            break;
        case states.EQ:
            if(key_class === kclass.EQ){
                this.operation(this.disp, this.acc2);
                this.displayUpdate(this.disp);
                this.state = states.EQ;
            }
            if(key_class === kclass.NUM){
                this.dispSet(key);
                this.state = states.FIRST_ARG;
            }
            if(key_class === kclass.OP){
                this.op = key;
                this.acc1 = this.disp;
                this.state = states.OP;
            }
            if(key_class === kclass.DOT){
                this.dispSet("0.");
                this.state = states.FIRST_ARG_FLOAT;
            }
            if(key_class === kclass.CE){
                this.dispSet("0");
                this.clearer();
            }
            break;
      }
  },

So, we are finally at the end of the doStep function. You can see that the logic that controls transitioning between the states is pretty straightforward. It just repeats itself again and again for every state. This is the power of the FSM.

The next part of our calc object is composed of methods about which we already talked about. The only method, I haven’t mentioned is the clearer method which is used when the AC (all clear) key is pressed. So, it simply resets the memory of the calculator.

  //does all the arithmetical operations
  operation: function(first, sec){
      if(this.op === "Ă·"){
          this.disp = first / sec;
      }
      if(this.op === "-"){
          this.disp = first - sec;
      }
      if(this.op === "x"){
          this.disp = first * sec;
      }
      if(this.op === "+"){
          this.disp = Number(first) + Number(sec);
      }
      if(this.op === "%"){
          this.disp = first % sec;
      }
  },
  //restarts the calculator to the default state
  clearer: function(){
      $("#display").text(0);
      this.state = states.START;
      this.op;
      this.disp;
      this.acc1;
      this.acc2;
  },
  //appends a display var
  dispAppend: function(key){
      this.disp += key;
      this.displayUpdate(this.disp);
  },
  //set a new value to the display var
  dispSet: function(key){
      this.disp = key;
      this.displayUpdate(this.disp);
  },
  //dipsplay display var
  displayUpdate: function(dispText){
      $("#display").text(dispText);
  }
}

Finally, to finish our project, the last thing we need to do is to set click listeners for the calculator’s keys and then define what will happen when a particular key is pressed. Most of the time we are just calling the doStep function with different arguments.

//when the number is clicked
$(".digit").on("click", function(){
  calc.doStep(kclass.NUM, $(this).html());
})
//when the operator is clicked
$(".op_key").on("click", function(){
  calc.doStep(kclass.OP, $(this).html());

})

//when the equal sign is clicked

$(".equals").on("click", function(){

  calc.doStep(kclass.EQ, $(this).html());

})

//when the dot is clicked

$(".point").on("click", function(){

  calc.doStep(kclass.DOT, $(this).html());

})

//when AC clicked - clear all variable values

$(".allClear").on("click", function(){

  calc.clearer();

})

//when CE clicked - erase the last entered input
$(".clearEntry").on("click", function(){
  calc.doStep(kclass.CE, $(this).html());
})

//default state of calculator
  $("#display").text(0);

Code: The Conclusion

To sum up, the hardest thing in the process of the implementation of the JavaScript calculator using the FSM was the creation of the graph which we used as a blueprint for our code. In this graph, we needed to address every possible behaviour of the calculator and display it in the graph. Once we finished our graph, the implementation of the calculator was much easier since we basically applied same logic from our graph over and over.

You can check my JS calculator with its code on my github or my codepen account.

I hope that my posts helped you to build your own JS calculator. Maybe you build according to my buide or maybe you just got inspired by my posts and you choose a different way of how to implement the calculator. And that is allright, because the final version of your project is always a reflection of yourself.

If you like this post, or if you have any suggestions or critique, feel free to write a comment below. I would greatly appreciate it.

JavaScript Calculator Guide PART 1: Think! (Free Code Camp Challenge)

noreply@blogger.com (Anonymous) — Tue, 03 May 2016 21:10:00 +0000

As I mentioned in the previous post, I am, among other things, following Free Code Camp’s (FCC) curriculum. If you’re interested, you can check my solutions on my FFC account as well as on Codepen and Github account.

A couple of days ago I finished FFC’s JavaScript Calculator challenge. I spent a good amount of time on it because I did it twice. When I made the first version of my calculator, I haven’t thought about it too much before I implement it. Although it had all the basic functionality, you can also type basically any number or operator whenever you wanted (e.g. 1….5 +++ 8 =+-). However, if you take a real calculator, you will find out that it lets you use only certain numbers or operators at the certain situations. So I tried to address all these issues in the first version of my calculator but it was kind of overwhelming. Therefore, it seemed to me that it will be easier if I start all over again.

At that time, I knew that I needed to think more about the implementation of my JS calculator before I started to code. I needed to think through every possible scenario since in each phase of the arithmetical operation, you want your calculator to react only when particular keys are pressed. So I just did what you should do every time before you start to code a new project.

What really helped me back then was that a friend of mine gave me a tip to try built the calculator using a finite state machine (FSM). FSM is “a state machine is any device that stores the status of something at a given time and can operate on input to change the status and/or cause an action or output to take place for any given change.”

Finite State Machine

First, I was like “No way, that sounds too difficult and it seems to me that it must be some abstract programming concept which would be hard to learn.” However, after a couple of days, I changed my mind and I started to implement the calculator using a FSM.

This post is the first from two posts where I am going to describe my implementation of the Free Code Camp’s JavaScript Calculator using a FSM. I hope that these posts will help you to build a fully functional calculator in a very effective way you’re maybe not familiar with. Also these posts will help anyone who want to program a calculator in JavaScript but struggle with it or don’t know where to start.

This post will be a little bit theoretical because we need first to think about the functionality of the FSM and how it is going to help us to build up our calculator.

Are you ready? Let’s code!

Step 1 – HTML and CSS

Before you can start to implement the calculator’s functionality, you need to design your calculator using HTML and CSS. Since we are making a calculator with the basic functionality, it should have at least these keys (of course you don't need the "info" key):

Designing your calculator is a very simple task, so I am not going to describe this part of the process.

When you have a visual version of your calculator, you need to (if you haven’t done so already) think about its functionality. When implementing a FSM, it is very useful to draw a graph of your machine first, otherwise you can get easily lost during its implementation. But before we make this graph, we need to define the states of the calculator and the variables that we are going to use to store numbers and operators.

Step 2 – Define States

If you think about calculator’s functionality (enter a number, press operator, enter a second number, press equal sign), it is obvious that it will need at least 5 basic states. You can also figure out what keys must be pressed in order to get into a certain state.
However, you need take into account the "dot" key as well. For example, if you press this key on the real calculator as a first character, your number will start with "0.". So, in the end we need to define 3 more states, that is 8 states in total.

States (you can call these states whatever you want) - the calculato transitions into a particular state when:

START – default state of the calculator
FIRST_ARG – a number key is pressed (as a first number)
FIRST_ARG_FLOAT - a dot is pressed as a part of the first argument (number)
OP – any operator is pressed (except equal sign)
SECOND_ARG - a number key is pressed (as a second number)
SEC_ARG_FLOAT - when a second number has a dot not at its beginning
SEC_ARG_DOT - when a second number begins with dot (0.)
EQUALS – when an equal sign is pressed

It is convenient and it will make your code more readable, if you store these states as the properties in an object. Each property will represent a state of your calculator. The idea is that when you refresh a page, your calculator will be in a default state and by clicking on different keys, the state is going to change. This process will go on and on, until you press a clear button on your calculator or when you refresh the page itself.

Step 3 – Define Variables

Now, you will need to define the variables. These variables are going to change a lot since they will store everything you type into your calculator. Try to keep the number of the variables as low as possible, otherwise your code might become unnecessary complicated.

Five variables should be enough:

var state - monitors current state of the calculator
var disp – stores the number and monitors what is currently displayed on the calculator’s display
var acc1 - stores the first number for further operations
var acc2 - stores the second number for further operations
var op - monitors current arithmetical operator

In our code, these variable will be also stored in the object.

Step 4 - Graph

At this point, you have everything you need (the basic states of the calculator, which keys needs to be pressed in order to transition between these states, variables which are going to store user’s input). So, it is the right time for you to draw a graph which will put this information into the context and help you to visualize the functionality of your calculator.

When drawing this graph, you need to keep in mind that you can press only certain keys during the particular state of the calculator. For example, a real calculator won’t let you to type five dots in a row or twenty operators in a row. From every state, you can only go to the limited number of other states.

There are many ways how to draw a FSM graph and Google will help you with that.

According to the previous instructions, your basic graph should look like this:

I will describe this graph at the beginning of my second post :)

Stay Tuned!

If you like this post, or if you have any suggestions or critique, feel free to write a comment below. I would greatly appreciate it.

Best Resources to Learn JavaScript

noreply@blogger.com (Anonymous) — Mon, 18 Apr 2016 16:39:00 +0000

… was the phrase I googled many times when I was starting to learn how to code. Once I typed these words and hit enter, I got hundreds of results, each recommending different learning path to pursue. This was really intimidating for me because I had no idea as an absolute beginner which resources to choose.

…there were (and still are) so many choices and opinions on how to effectively learn JavaScript.

Should I believe all of those who are writing articles about this topic on various sites and blogs?

Who are they anyway? ... experts, beginners or do they even know how to code? Should I believe unknown individuals who express their views in the forums?

Should I believe all those opinions claiming 'this is the right way to learn JavaScript' which can be found on a variety of sites offering paid online courses? Do these sites really want to help me to learn or they just want to sell their product?

What should I do?

I guess that obvious reply to all my concerns is: 'Just google it, dude.'

It's true that you can google all of these issues. But it will make your search for the right learning path only little bit easier. Again, you'll find tons of opinion and reviews. All of them written by the people with different backgrounds. So, it will be challenging to choose which opinion are the best for you.

In the end, you'll be back in the situation described at the beginning of this post - you don't know which resources to choose.

A couple of months ago, I was in this situation too. There were so many options and I had no idea where to begin...

If you are starting to learn programming, I bet you are dealing with similar questions as I did back then.

I am writing this post to help you find the right answers based on my own experience. Because my aim is not to overwhelm you with resources, as the whole internet does (!), I will only mention resources that I studied from and only those I consider as the best ones for beginners. Moreover, I will organize them in a order I deem they should be studied. If I had studied these resources in that order from the beginning, I am sure that my learning process would have been faster and more effective.

Probably you are now asking yourself a question: 'Why should I believe this guy?'

My answer is: 'Well, you don’t have to.' I just want to share with you one possible way of learning JavaScript which stems from my personal experience. I want to share with you resources that helped me (and are still helping) significantly on my way to become a web developer. I hope they will help you as well.

Just take it or leave it!

A I mentioned, choosing the right resources to learn from in the field of web development might be challenging, especially for an absolute beginner. I presume that you don’t want to invest significant sum of money (e.g. bootcamps), so I am going to talk only about books and online courses which are affordable.

The problem with books and online courses about web programming for beginners in general is that they are not written or made by beginners themselves (I know that this last sentence sounds weird, but just keep reading!). This simply means that authors of these books and courses have different perspective than someone who is only a beginner. In other words, they will almost always presume that you already have some knowledge about programming.

The problem is that every one of us knows different stuff than the others. I have experienced this myself a couple of times and it was kind of frustrating because I was not sure if the programming was so difficult or I was just dumb. In fact I was only lacking some basic knowledge that the author presumed I had.

At the beginning, you just don’t know what you don’t know.

Because I don’t want you to have similar experience, I am sharing with you a list of JavaScript resources. They are organized in the order, I consider understandable if you are starting as an absolute beginner in web development.

The Web Development Bootcamp (online course)

Web Developer Bootcamp

this course is for anyone who wants to learn about web development, regardless of previous experience
this course covers not only front-end technologies (HTML, CSS and JavaScript) in detail, its second part also covers back-end stuff(Node.js, Express.js, MongoDB, deploying) as well
what I love about this course is that the instructor explains all the important concepts in a very accessible way and offers exercises with solutions as well

Jon Duckett – HTML & CSS (book)

if you feel that you need more HTML and CSS knowledge, I recommend this book as a companion to the mentioned course (however I don’t consider it necessary)
the layout of the book is visually appealing and the language is easy to understand
this book is really targeted at beginners without a technical background, and it does an exceptional job in serving this audience

Jon Duckett – JavaScript & jQuery (book)

this book is one of the best resources for understanding the basics of JavaScript language and serves well as a companion to the course
it is great for the visual learners, as just about every remotely difficult concept is illustrated in detail with helpful notes
if you consider books with lot of text boring, you will love this book even more
all of the code examples found in the book are available online for you to follow along, and every line of code is explained in clear detail

Free Code Camp (online course)

this course offers tons of exercises - it starts with HTML, CSS and JavaScript exercises separately and then it will take you through the range of projects where you combine all these languages together and create some cool and useful web apps
you will also deep dive into algorithms along the way
it offers front-end exercises and back-end as well
I encourage you to combine it with the already mentioned resources – remember the best way how to learn to code always means BUILDING PROJECTS

Anthony Alicea - JavaScript: Understanding the Weird Parts (online course)

this course will take you further into the JavaScript realm
it explains what happens under the hood of the JS in a very beginner-friendly way
this course will cover advanced concepts such as objects and object literals, function expressions, prototypical inheritance, functional programming, scope chains, function constructors (plus new ES6 features), immediately invoked function expressions (IIFEs), call, apply, bind, and more
what you'll learn in this course will also improve your abilities in Javascript-based technologies such as Angular.js or React.js

Kyle Simpson – You Don’t know JavaScript (book series)

these books serve as a great companion to the Weird Parts course since they also offer explanation of more advanced JS concepts
however, they cover advanced JS concepts in more depth and are thus more comprehensive than the Weird Parts course
plus they’re free!
6 books in the series:

Up & Going: By learning the basic building blocks of programming, as well as JavaScript’s core mechanisms, you’ll be prepared to dive into the other, more in-depth books in the series.
Scope & Closures: Covers closure primarily, which is one of the most important foundational topics of JavaScript.
this & Object Prototypes: Covers the mystery of how the this keyword works, and then tackles the misconception that JS has classes. Instead, JavaScript has prototype delegation, and we should embrace that rather than trying to fake class orientation.
Types & Grammar: Goes deep into coercion mechanism. I encourage you to dig into it and learn it, because coercion can help improve your code if you learn how to use it properly.
Async & Performance: Explains why callbacks for async programming are insufficient, then goes deep into promises and generators as much better async patterns. Also covers optimizing and benchmarking JS performance.
ES6 & Beyond: Covering all the changes to JS coming in ES6, as well as forward looking to beyond-ES6 evolution on the horizon.

The key to learn anything in programming and beyond is always to combine different resources.

Don’t believe those who claim that a single book or a single course can teach you everything you need to know about web development! This would be a huge mistake because you will be tempted to follow only one single perspective which might not be the right one for you (or not the right one for anyone).

If you like this post, or if you have any suggestions or critique, feel free to write a comment below. I would greatly appreciate it.

My First Post: Why I Started to Code

noreply@blogger.com (Anonymous) — Tue, 12 Apr 2016 16:38:00 +0000

In this post, I would like to briefly introduce myself and tell you why I decided to become a programmer.

My name is David and I love to learn new things and meet new people. A couple of years ago, I graduated from law school and start working as a lawyer. At the law school I did a lot of extracurricular activities since I was very interested in the law. I always thought (surprisingly) that I am going to be a successful lawyer one day. However, after a few years of working in the legal field, I have begun to have doubts about the direction of my career.

I felt that the legal job was not satisfying to me anymore.

So I decided to look into other fields which I found interesting. I checked some online course on sites such as Coursera, edX and Udemy. Because I love cooking, I enrolled in the Science & Cooking first. This course was great and I definitely recommend it for anyone who wants to learn science that lies behind the creation of delicious meals. However, this course was just a hobby for me.

When I was searching for other online courses, I came across many programming-related courses. First, I was like ”How can I possibly code? I said goodbye to sciences after finishing high school and I was happy for that.” Nevertheless, I bought one of the courses – The Web Developer Bootcamp - which was kind of a new at that time and was aimed (as the title suggests) on front-end as well as on back-end web development.

This was the moment, when my journey to become a web developer began.

As I went through this course and experienced coding in HTML, CSS and in JavaScript, it was a brand new feeling for me. “Wow, I can now create something from nothing which can be even useful. Plus I don’t have to memorize tons of information to be able to do that.” It was primarily this creative process which is involved in programming that excited me the most. The added value of this particular course was also a Gitter room where I could chat with other students and get more coding tips.

When I finished the JavaScript part of the course, I was thinking that I am learning some really cool new stuff but I was thirsty for more practical exercises. And then I have discovered the Free Code Camp, the site which purpose is to teach you how to code by doing tons of exercises.

It seemed to me that The Web Developer Bootcamp and Free Code Camp were two puzzle pieces fitting together – theoretical background + tons of exercises.

These two courses became basis for my journey to become a web developer.


Web Developer Bootcamp

Free Code Camp

At the time of this writing, it has been already a couple of months since I have written my first HTML tag. As every self-taught programmer (at least I hope it is not just me!), I know how challenging learning to code can be. This is also one of the two reasons why I started this blog. Although, I am not an absolute beginner, I hope I can convey to all of you, through my future blog posts, an original perspective on how to successfully learn to code.

Via this blog I also want to share challenges I am going through every day from the beginning of my coding journey as well as projects I am working on and other programming-related topics.

To sum up, two reasons that lie behind the creation of this blog are:

sharing my experience, projects and ideas
document my coding journey