Wednesday, August 9, 2017

Starting a New Blog!

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/

Wednesday, September 14, 2016

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


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.


Tuesday, August 23, 2016

ResWebDev #2




Article

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.



(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.




Sunday, August 14, 2016

Programming Job Acquired: Mission Accomplished

So it is finally here:


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





Wednesday, August 3, 2016

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


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.

Friday, July 29, 2016

How am I learning React with Redux?



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.

Friday, July 22, 2016

WebDevRes #1




Article

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

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

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

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 .