career options

Frontend developers – What do we do?

Frontend developers have become one of the most popular career in the digital age. In my previous post frontend vs backend vs fullstack developers, we discussed about the difference between them. Now let us dig deeper into what exactly frontend developers do.

Tl; dr;

A front-end developer uses the knowledge of html, css and javascript to create an user interface for a website or application so that a user can comfortably interact and use a service with ease. The sole purpose of a front-end developer is to make sure the users can access the webpage in a format that they can easily read and understand.

A bit of historical context

In 1997, with the expansion of the Internet and the ease of connectivity, the web stopped being a place that only engineers entered to read materials on university servers. It became a more visual and competitive place. Which is why they emerged programs like Dreamweaver (Macromedia at the time) to facilitate the implementation of websites. In these editors you could work with images to take care of the visual aspect, the developer only had to drag and drop the image in the place where he/she needed it.

At present we can still find these visual editors and even in web version. For example, in the cloud there are many applications that allow you to create your site with just drag and drop. So far so good if you need a basic website, but when you need something tailored, things get a little more complicated.

Frontend development

Frontend development skills

Freelancer map – Career insights (2019)

A Front-end developer is like a masked hero who has a unique mission: to communicate a message. We make the web pages to have a harmonic distribution of the elements on the screen so you can locate quickly when browsing. In addition, we must take care of their aesthetics so that you, as a user, say: “Wow! What a beautiful website!”

And without so much adornment: a Frontend developer is the person who develops all the visual elements of a website with which a user interacts. To achieve this, this hero should have a “mix” of skills. On one hand, we need to know how to organize the elements on screen to please the eyes. And on the other, we must know markup languages, styles and programming: HTML, CSS, Javascript, PHP, among others.

“To be or not to be”: the midpoint between the designer and the engineer

To the Frontend we have to know everything a bit, from managing design programs such as Photoshop or Illustrator, to understanding specific topics such as SEO. We also need to be aware of the latest trends in design and update on advances on code writing.

With the emergence of new technologies, new challenges also emerge, because now with the increase in the development and acquisition of mobile devices, there are different types of resolutions and screen sizes, which forces the developer to make a specialized development for a user can access without any problem of visualization and/or navigation to the site you are designing. That is why it is important that the Frontend developers also learn to make tests in different resolutions and browsers.

We ensure that your website looks like this

good website

and not like this

bad website

But then, are Front-end designers?

It is not necessary to be a designer to be a good Frontend developer. But if you are, that would be much better! Since the designers have an ingrained visual and aesthetic formation which will help to take care of even the smallest detail of the final product.

Besides being Frontend developer  and designer, you can make the designs of the pages yourself and program them, which translates into better income and a resume more desired by the market. If you reach a good level in design and development companies will fight for you, or why not? You can even create your own company and be independent.

Things Front-end developers should know.

If you want to be a good Front, having knowledge about this will help you:

Languages

  • HTML (HyperText Markup Language): is a markup language interpreted by web browsers, that is, the skeleton of all websites. Its newest version is HTML5, which contains semantic tags to write clean code and has advantages as native support for audio and video.
  • CSS (Cascading Style Sheets): is the language that controls the appearance of the site, that is, with which we will give our HTML the visual style, defining colours, sizes, fonts and even mouse events. Its latest version is CSS3, which supports animations, shadows, curves among other things.
  • Javascript: is a programming language that runs on the client side (in the browser) and in most cases is used to make a website interactive.
  • PHP (acronym for PHP: Hypertext Preprocessor): (optional) It is a programming language that runs on the server. This means that a server can use PHP to run some logic and return data. By using PHP, we can create dynamic and manageable websites. It is also the language used by many Content Management System(CMS) like WordPress.
  • Other backend programming languages: some examples are Node.js, Python, .NET, Java, etc.

Skills

  • Accessibility: refers to the correct display of a website on all devices. It is relative to the concept of ‘Responsive web design’ that is achieved by adding CSS Media Queries that respond to the width of the screen or viewport.
  • Usability: refers to the relationship between the user and the ease with which he manages to navigate the site.
  • Performance: for our website to be competitive it must load fast, because if users notice a low performance in load times, they will surely leave the website.
  • SEO (Search Engine Optimization). It refers to the proper indexing that search engines such as Google, Bing, Yahoo, etc.. The making of a website to rank well in the search results. This is achieved through meta tags, titles and the correct use of keywords.

Summary

In this article we talked about what we do as a front-end developer, the historical background of front-end development. We went further to discuss the grey points between front-end development and designers.

To survive in this ever evolving profession, we need to keep improving ourselves via various methods.  Reading a lot, updating, studying and above all sharing our knowledge just to name a few.

By Tuan Nguyen

Programming paradigms

Programming paradigms – what is procedural programming?

DiProgramming paradigms are different styles, different “ways” of programming. There are a lot of different paradigms, including some popular ones like procedural programming, object-oriented programming, functional programming, etc. And some which are not as popular, such as imperative programming, declarative programming, event-driven programming, etc. If you are curious, there is a very good summary of programming paradigms here. In this post, we will discuss a popular one, which is Procedural Programming.

Tl; dr;

Procedural programming is one of the most popular programming paradigms out there. By following procedural programming, we split the code into smaller units called functions or procedures so that it is easier to reuse and the flow of execution is from top to bottom. This style is easy to understand and implement. As a result, it is often taught in introduction to programming courses.

Other blog posts on the series:

Programming paradigms – is object-oriented programming better?

What is Procedural Programming?

Procedural Programming diagram

Procedural programming is a method of the programming which has a support of splitting the functionalities into a number of procedures. In procedural programming, a large program is broken down into smaller manageable parts called procedures or functions. Here, priority is given on functions rather than data. In a procedural programming language, a program basically consists of a sequence of instructions each of which tells the computer to do something such as reading inputs from the user, doing the necessary calculation, displaying output.

def add_number(a, b):
    return a + b

# workflow starts here
# call function add_number() to add 1 and 2 together and print the result to screen
print(add_number(1, 2))
# execute add_number() function 5 times and print the result to screen
for i in range(5):
    print(add_number(i, 1))
# workflow ends here

When a program becomes larger, it is then broken into smaller units called procedure or functions. A number of functions are supposed to be written for the accomplishment of a specific task. These functions do not let code duplication because of the same function call from multiple locations. This technique is only suitable for medium sized software applications

In procedural programming, two types of data local and global are used. Data within the function are called local data and the data and which are not within any function are called global data. Local data are accessible to the only function where it is declared. So each function may access its local data as well as global data.

// this is a global variable
$globalVar = 1;

function addNumber($a, $b) {
    // this is a local variable
    $randomNumber = rand();

    return $globalVar + $randomNumber + $a + $b;
}

The local data of one function is not accessible to other functions. If any data is to be accessed by two or more functions it should be made global. However, global data are vulnerable to another programmer to be changed unknowingly. The separate arrangement of data and functions does a poor job of modelling things in the real world. That’s why procedural programming approach does not model a real-world system perfectly.

COBOL, FORTRAN, C, Pascal are some programming languages that can implement procedural programming.

Characteristics of procedural programming

A large program is broken down into small manageable procedures or functions. This reduces code duplication, which improves readability and maintainability of the code.

Different functions can share data via global variables. Functions are completely isolated, therefore if we want to share data, we need to declare it in the upper scope.

Functions can change global data. Since global data are transferred from function to function; during the course of the transformation, the global data may be altered in function chains.

Top-down methodology. As mentioned before, procedural programming follows the top-down methodology, workflow is going from top to bottom.

Advantages of procedural programming

  • The coding is easy and simple.
  • The codes have the ability to be reused in several parts of the program.
  • The programming paradigm consumes less memory on the computer.
  • It is easier for tracking the flow of the codes in the program written in the procedural programming paradigm.
  • The programming paradigm is regarded best for general programming to learn and implement.

Limitations or disadvantages of procedural programming

  • Focus on functions rather than data.
  • In large program, it is difficult to identify the belonging of global data.
  • The use of global data is error-prone and it could be an obstacle in case of maintenance and enhancements.
  • The modification of global data requires the modification of those functions using it.
  • Maintaining and enhancing program code is still difficult because of global data.
  • The procedural programming paradigm does not model the real-world problem very well since functions are action-oriented and do not really correspond to the elements of the problem.

Summary

Procedural programming certainly offers a lot of upside, one of them are easy to learn and implement. New programmers can start their journey by learning how to write code in procedural style. That will help them understand how certain programming language works.

However, due to its limitation, real world applications are not using procedural programming. Therefore students will need to learn other paradigms in order to get exposed to real life problems.

Thank you for reading. You can browse more posts about technology here.

By Tuan Nguyen

microservices logo

Microservices – what are they?

Microservices is one of the buzz-word in the technology world these days. Every big name likes to say it, lots of salespeople speak of it. This post will discuss about what is a microservice, and how does it change the way we design the software architecture.

Thanos quote

Tl; dr;

A big monolithic application can be split out into smaller components, or in this case, services. A service should have one task, and one task only. This approach increases efficiency, scalability, and allow for smaller development teams.

What are microservices?

Monolithic vs Microservices architecture

A “microservice architecture” is an approach to developing a software application as a series of small services, each running autonomously and communicating with each other, for example, through HTTP requests to their APIs.

Normally there is a minimum number of services that manage common things for others (such as database access), but each microservice is small and corresponds to a business area of ​​the application.

In addition, each one is independent and its code must be able to be displayed without affecting others. Even each one of them can be written in a different programming language since they only expose the API (a common interface, which does not care about the programming language in which the microservice is programmed below) to the rest of the microservices. There are no rules on what size each microservice should have, nor on how to divide the application into microservices.

Comparing the “monolithic” approach with the microservices approach

So that you really understand what we are doing with the microservices, let us examine a very simple example. Imagine that we want to make a web application, Amazon type, but simpler. Users enter our website, see the products we have for sale, and when they buy an item, we manage the delivery of the product to their home.

Monolithic structure

monolithic architecture

A first idea of ​​how to deal with this application would be the following monolithic structure: We can access the website of the store, make purchases, etc., thanks to a server, a machine that is executing the code of the application, in the form of a war file, which eventually connects to a database to retrieve information.

When a user purchases a product via the web, the application will respond the way we have programmed, but the code of the different business logic (inventory, payments, shipments) although it may be separated into different modules of the code, it is finally packaged in a single executable file. That’s why we call it monolithic architecture.

In addition, to scale the application (for example, to serve many users) we will have to run copies of our application under load balancers, which will redirect users to one site or another, depending on whether the system is very saturated. In this case, we will have to replicate the entire application, even if only the payment module concentrates the overload.

But on the other hand, if our application is not very complex, the upload will be simple and easy to manage, since in this case, we are talking about a single executable file.

Vision of microservices

microservice architecture

Instead of having a single executable, each component is an executable by itself, and the services communicate with each other through calls. In this case, we also have a microservice that implements the web interface with which users interact and certain logic below to call the microservice for payments, inventory, and shipments when necessary.

Characteristics of microservices

Here are some of the characteristics of microservices.

  • Components via services. Each small components of the application, e.g. database, payment gateway, shopping cart, etc., can be put into their own services.
  • Services organized with a focus on business capabilities. Your payment gateway can be custom-tailored to your business needs. You need to integrate Paypal – make a service that does just that. You need to hide the apartments that do not allow pets from people who have dogs – make a service to do that, and intercept the dataset coming back from the API.
  • Products and not projects. Each microservice represents a product. They can be treated separately without the need of knowing what is happening to other microservices.
  • Decentralized government. There are no central application to dictate how the whole application works. Each service talks to each other, forming some sort of a peer-to-peer network.
  • Decentralized data management. As a best practice, microservices should have their own local data storage. Therefore each service can have the data that is relevant to its task stored locally.
  • Evolving design. Business requirements can demand microservices to be put in or pull out as needed. As the business grows, it is much easier to create/remove microservices than to alter the huge code base of a monolithic structure.

Advantages and disadvantages of microservices

Now we know what microservices are as well as their architecture and main characteristics. Therefore, we will detail some of its advantages and disadvantages.

Advantages

  • Minimal work team. Each team can manage the development of a microservice, and this generally does not need a lot of people (small team of 3 to 4 people is preferred)
  • Increase in efficiency. By optimizing each microservice, the total efficiency can be improved.
  • Scalability. It is much easier to increase the capacity of a microservice, and combine with other services, it boost the the application’s ability to serve more users.
  • Modular functionality, independent modules. microservices should be independent from each other. For instance, a microservice should only care about the input data, not where the data is coming from.
  • Freedom of the developer to develop and deploy services independently. developers can use any programming languages that he or she feels comfortable with, or it is the most suitable language for the task at hand. In monolithic application, there is less flexibility in choosing which language to use.
  • Allowing the deployment and development of the application quickly. With the introduction of Docker, Kubernettes, AWS, etc., continuous integration/continuous deployment is another buzz word now. Business needs to have a quick development phase to keep up with the ever-changing requirements. By deploying microservices concurrently, booting an application to its ready state is much faster.

Disadvantages

  • High memory consumption. Each microservice needs a certain memory and storage to operate. Having a considerable amount of them can cost a lot of resources.
  • The complexity of management of a large number of services. Netflix has over 13,000 git repositories, and most of them are services. Sometimes it is not transparent if there is an existing microservice that resolves a problem.
  • Network latency or load balancing. If not structure correctly, microservices will keep calling each other, resulting in a chaotic communication network. As a result, the time to return the result to the end user can be impacted negatively.
  • Complex tests or tests for distributed deployment. End-to-end tests can be a nightmare. For example, we need to test the workflow of putting a product into a shopping cart, then use American Express to checkout. This could involve multiple microservices and the testing solutions can be complicated.

Summary

As we have seen, microservices have numerous advantages that facilitate processes when using an app. However, being a novel system a large majority of CIOs will be slowed down to implement these systems in their company due to the complexity of some features.

However, the implementation of microservices could have a great impact on large companies in a positive way for increased efficiency. An example of this we see in Amazon or Netflix that have already implemented this technology.

More information on microservices can be found here.

Next post: Microservices – When NOT to use?

By Tuan Nguyen

WebAssembly logo

WebAssembly – Will it replace JavaScript?

WebAssembly is an initiative led by development teams Microsoft, Mozilla and Google (lately, Apple also seems interested), which is designed to run native code in a browser (or user agent, to be more precise), in a way Safe, fast and efficient. In addition, its architecture allows multi-threaded execution with shared memory (Shared Memory Multi-threading). Web assembly can be used for frontend development. You can read more about it here.

Tl; dr;

WebAssembly is a new way to develop website interaction using binary code instead of Javascript. Both WebAssembly and Javascript will work together to enhance the website experience.

What is WASM?

The JavaScript upgrade

We can load the most critical parts of our code and add them as standard Javascript modules.

The Browser upgrade

Browsers will use the binary format generated by asm.js, which means smaller packages, faster uploads, and compile-time optimization.

We can say that it is an Abstract Syntactic Tree (AST), which is stored in binary format. It supposes a considerable improvement in runtime on Javascript. In addition, its representation at a low level will allow (over time) to be the result of the compilation of any language.

We can have source code in C#, or Java, as before, and use a WebAssembly compiler to generate that low-level code that runs in the browser. In addition, it is also designed to run on other Javascript engines, such as Node.js. When available, it will have two forms of representation: one textual and one binary. Consequently, that binary language defined by WASM can become a new universal binary for the Web.

With WebAssembly (WASM), the start-up statistics are much more optimized in all cases:

  • The decompressed code occupies 66% less than the equivalent Javascript code.
  • The uncompressed code occupies 33% less.

It is about 23 times faster to analyze syntactically (“Parsing”).

How WASM benefits developers and businesses

One of the main advantages of WASM is that it will allow us to have more in less, that means we can have the same code in a smaller size favouring the implementations of mobile platforms that will not have to download as much weight.

At the level of optimization and performance, it will allow us to improve the load of the critical parts of our application, in addition to being able to use structures compiled from other languages ​​and not having to apply them in Javascript, creating them to simulate them.

Will Web Assembly replace JavaScript?

WebAssembly workflow

The chart shown above may have helped you to understand reality. It has made clear that WASM is not a replacement of Javascript but a new feature of Javascript engine which is based on its infrastructures. So, it is clear that WASM is able to be function well in the web platform.

According to Google, this engine will have the same evolution as Javascript, everything will be retro-compatible, this means that we can use it with the previous versions. It will run at the same level as Javascript and allow synchronization from Javascript .

How will Javascript and WASM exist together?

For performance-sensitive activities, such as rendering Virtual Reality environment, WebAssembly should be used to ensure that performance is at its finest. Other frontend operations can use Javascript to develop, as the community is much bigger and it is easier to work on at the moment. Moreover, loading assets using WebAssembly is significantly faster.

Example

Let’s take a practical example. Experimenting with a prototype WASM format, Jonas Echterhoff, developer of Unity Berlin, converted using WASM the famous AngryBots demo from a Javascript code size of 19.0 MB to a gzip-compressed to 3.0 MB. This means that there is 3.0x reduction in the amount of data the browser needs to process. And 1.4x reduction in the compressed download size.

Potential Uses

There are many areas where these possibilities are welcome: Virtual Reality, Collaboration tools, information encryption, CAD software, scientific simulation, “Machine Learning” and games are just some of those options.

There is a possibility to develop application for mobile application using WebAssembly, which is similar to how React Native works. The advantage of using binary code is that we can have a light-weight and performance-optimized applications.

Summary

WebAssembly allows binary code to work on user’s browsers, which can hugely boost the performance and allow certain high power consuming technologies like Virtual Reality to work smoothly on your browser.

Thank you for reading my research on WebAssembly. You can read more about other technologies here.

Javascript logo

ES9 new features reviews and examples

ES9 or ECMAScript version 9 was finalized on June, 2018. It brings various new features into Javascript standard that we can leverage to make our lives easier. In this post, we will discuss about them and how they help changing the way we use Javascript.

Since most details are available on other websites like Mozilla.org, w3schools, etc., I’ll just talk about scenarios that I think most of us will encounter every day.

Tl; dr;

ES9 brings us the following features:

  • JSON superset: allows string to allow unescaped \u2028 and \u2029 characters.
  • Symbol.prototype.description: expose description publicly for Symbol objects
  • Function.prototype.toString revision: prints all function’s code to the console
  • Object.fromEntries: converts an array of key-value pairs to an object
  • Well-formed JSON.stringify: converts ill-formed UTF-16 to escaped sequence string
  • String.prototype.{trimStart,trimEnd}: more options to trim string
  • Array.prototype.{flat,flatMap}: lodash/underscore-like functions

More details on the new features are listed here.

JSON superset

Details: https://github.com/tc39/proposal-json-superset

Remarks: most of us will not encounter a need for this feature, since it deals with an edge case of evaluating unicode characters.

Symbol.prototype.description

Details: https://github.com/tc39/proposal-Symbol-description

Remarks: exposing Symbol’s description can be useful when we manage a big list of symbols. Previously, given a Symbol object, we will never know what it represents until we print the object out.

const symbol = Symbol('some description');
console.log(symbol.description);
// "some description"

Function.prototype.toString

Details: https://github.com/tc39/Function-prototype-toString-revision

Remarks: this is a useful feature that I can use every day. When I have to, say, try to know what the `onClick` event handler do, without having to search through a big code base. Now I just need to print the function out, and I see it’s full source code. And in development environment, that is the full, un-minified version of the code.

const fn = () => { console.log('test'); };

fn.toString();
// "() => { console.log('test'); }"

Object.fromEntries

Details: https://github.com/tc39/proposal-object-from-entries

Remarks: I have a use case for exactly this in my previous projects. Before, I had to create a custom function to handle the conversion. This feature definitely makes my life easier.

const arr = [
  ['a', 'b'],
  ['c', 'd'],
];

const convert = (data) =>
  data.reduce((obj, keyValue) => {
    obj[keyValue[0]] = keyValue[1];
    return obj;
  }, {});

// old way
convert(arr);
// {a: 'b', c: 'd'}

// new way
Object.fromEntries(arr);
// {a: 'b', c: 'd'}

Well-formed JSON.stringify

Details: https://github.com/tc39/proposal-well-formed-stringify

Remarks: Escaping unicode characters have always been a headache for us. By integrating this into Javascript standard, our lives will continue to be easier and easier. I have spent too many hours pulling my hair out because of a stupid unicode characters not escaping correctly. As a conclusion, this feature is a life saver. You can check out the examples in the link.

String.prototype.{trimStart,trimEnd}

Details: https://github.com/tc39/proposal-string-left-right-trim

Remarks: we already have the same function, if not better in lodash. Let us take a look at the code to understand better.

const str = '       some actual string   $$   ';
_.trimStart(str);
// 'some actual string   $$   '
_.trimEnd(str);
// '       some actual string   $$'
_.trimEnd(str, '$ ');
// '       some actual string'

str.trimStart();
// 'some actual string   $$   '
str.trimEnd();
// '       some actual string   $$'

As we can see, for Lodash we can specify characters to trim as well, while the ES9 standard version does not. Therefore this feature may not be beneficial to me as much as it does to you.

Array.prototype.{flat,flatMap}

Details: https://github.com/tc39/proposal-flatMap

Remarks: quite similar to lodash’s equivalent. Therefore it will come in handy when I have to deal with environment that does not allow me to install lodash.

const arr = [1, 2, [3, 4, [5, 6]]];
array.flat();
[1, 2, 3, 4, [5, 6]]

// flatten all nested arrays
array.flat(Infinity);
// [1, 2, 3, 4, 5, 6]


const flatArr = [1, 2];
flatArr.flatMap((val) => [val, val * 2, val * 3]);
// [1, 2, 3, 2, 4, 6];

Summary

“What’s known as bleeding-edge technology,” sez Lucas. “No proven use, high risk, something only early-adoption addicts feel comfortable with.” ― Thomas Pynchon, Bleeding Edge

Living on the bleeding-edge version may not be the wisest thing to do on production, stable product. Therefore we will need to wait for a while before these features become more stable. However, we can start using them in small projects, reaping the benefits and getting familiar before we implement them into the big projects.

As usual, if you think this is useful, let us share the knowledge. You can read about my other posts here.

career options

frontend vs backend vs fullstack developers

Computer science students often get asked, what will you become after graduation. To those who commit to the life of programmer, there are a lot of different paths that you can take. Today we will discuss about the buzz words that everyone knows about: Frontend developers, Backend developers and Fullstack developers.

Why do we need to know about the above job roles? It’s because different roles require different skill sets to focus on, and to be good at one of them, we need to switch our mind toward it. To keep it simple, we will discuss about web development only. However, the same concept can be used in other fields, such as software and mobile development.

 

Tl; dr;

Frontend developers: mostly working on the client side interface of an application, which includes html, css and javascript for web development, user interface (UI), user experience (UX). Basically they are responsible for anything that users can interact with.

Backend developers: working on the server side of an application, which includes any logical structures that form a server, an infrastructure for an application, including server configuration, database management, and backend logic.

Fullstack developers: fluent in frontend and backend responsibilities, and some extra knowledge about deployment operations (DevOps).

 

Frontend developer

frontend developer skills

Frontend development includes a deep knowledge of HTML, CSS and Javascript. Nowadays, we have various third-party libraries and frameworks that help with our development process. Some well-known third-party modules are:

– Javascript Frameworks/libraries: Bootstrap, jQuery, Angular, React.js, Vue.js, Ember.js, etc.

– CSS preprocessors: LESS, SASS, etc.

– Optimization/packaging: webpack, browserify, grunt, etc.

However, knowing those frameworks does not mean you have what it takes to be a good frontend developer. You also need to have a good knowledge about multimedia design, UI/UX design. Some of the aspects to acquaint are choosing a suitable color palette, typography, website layouts, etc. Experiences with the above fields can be what separate you and the rest.

For a student who decided to pursue a frontend developer career, I would start with the basics like HTML, CSS and pure Javascript, then move up with popular libraries like jQuery and Bootstrap. After that, you can open yourselves to more advanced fields like color rules or typography.

Backend developer

backend developer skills

Backend developers need to know almost everything about the server side code and how the server is configured. Several programming languages and technologies that are useful are:

– Languages: PHP, Javascript(Node.js), C#, Java, etc.

– Database: MySQL, PostgreSQL, MongoDB, etc.

– Understanding of popular CMS and web builders like WordPress, Wix, Drupal, etc.

– Knowledge about operating systems, e.g. Linux, Windows server.

Similar to frontend developers, backend developers also need to know about advanced topics like design patterns, knowledge about web infrastructure. These aspects are very important in optimizing and scaling a website/application. Developers who are fluent can be paid very high, estimated at $120,000 – $140,000 per annum (which I haven’t gotten to that level yet 🙁 ).

For students who want to become backend developers, I would say that you can start with a simple programming language like Python or C, to learn about the fundamental of computing. By learning about algorithms and design pattern logics, you will improve your knowledge of how to optimize your code, how to manage memory and therefore improve the scaleability of your programs. After that, you can continue with database interactions, and play around with various CMS platforms. Once you get to that level, then open yourselves to advanced web infrastructures and server configurations.

Fullstack developer

fullstack developer skill

As mentioned above, a fullstack developer is meant to have knowledge and experience about frontend and backend operations. Moreover, they need to understands how to deploy code into different environments, maybe less than a DevOps engineer, but to some extent they can understand the principle of continuous integration/continuous deployment.

Fullstack developers have to train themselves a lot harder than the above roles. They need to have a lot of experience regarding the mentioned fields. Some people that I know started out with a frontend role in a company, then move on and be a backend developer in another company. After that, they trained themselves with DevOps technologies and dabble with the fullstack developer role. Recruiters often think that fullstack = frontend + backend. However, it goes deeper than that and you will need to tackle the advanced topics very soon once you take the role.

Summary

“Success is no accident. It is hard work, perseverance, learning, studying, sacrifice and most of all, love of what you are doing or learning to do.” – Pele

Each role may deal with different technology stacks. But underneath, they all share the same computing principles. We all need to optimize our code, using the least resources possible to produce the biggest outcome possible. Technologies move incredibly fast these days, and as developers, we will need to continue learning while we’re working.

By Tuan Nguyen

React logo

React 16.8 – Captain Hook is here

React 16.8 was shipped on Feb 06, 2019, bringing with it the Hook feature that everyone was waiting for. It was a version behind schedule, as React 16.7 was going to be the one.

Captain Hook with binocular

Ok maybe not that Hook!!!

After over 6 months from its introduction in React Conf 2018, Facebook development team finally released Hook feature into a stable version release. This feature helps our functional components having most class components features, including having internal state, context, and even lifecycle methods!!!

Tl; dr;

React 16.8 shipped with the stable Hook feature, allowing us to use state, context and lifecycles inside functional components. Hooks resolves 3 problems that React had: Wrapper hell, Huge components, and Confusing classes. Facebook team advises that we should start using Hooks in our new React features for a consistent code style as well as reducing duplication.

Hooks overview

Hook is released without any breaking changes. It is a brand new feature and does not interfere with existing features.

Class components are hard to test, especially lifecycle methods. Using hooks can decouple the lifecycle functions and make them easy to test.

There are multiple kind of hooks: State Hook, Context Hook, Effect Hook, or build your own Custom Hooks.

Facebook has released a good documentation to Hooks here. In this post, we will just discuss about what I think is important to mention outside their documentation.

 

State Hook

More details here.

// what you see in their documents can be confusing
const [count, setCount] = useState(0);

// what it is actually is
const [state, setState] = useState(initialState);

Best thing about `useState` is that you can have multiple state control in your component. Traditionally, we only have 1 state object in a class component. But with this approach, we can have as many state objects as we need.

Context Hook

More details here.

// returns the value of the context
const value = useContext(SomeContext);

Nothing special here, calling `useContext` will return the value of that context, and instead of having to consume the context, we just need to use that value.

// traditional way of using context
render() {
  return (
    <Context.Consumer>
      {(value) => (<MyComponent value={value} />)}
    </ContextConsumer>
  );
}

// with useContext
const OtherComponent = () => {
  const value = useContext(Context);

  return (<MyComponent value={value} />);
};

 

Effect Hook

More details here.

Basically just an implementation of lifecycle methods. Every extra tasks that a component does besides rendering DOM elements are side effects, and should use effect Hook to execute them. I’ll use the same example in the documentation.

import React, { useState, useEffect } from 'react';

// class example
class Example extends React.Component {
  state = {
    count: 0,
  };

  componentDidMount() {
    // set title on mount
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    // set title on update
    document.title = `You clicked ${this.state.count} times`;
  }

  setCount = (count) => {
    this.setState({ coount });
  };

  render() {
    const { count } = this.state;
    return (
      <div>
        <p>You clicked {count} times</p>
        <button onClick={() => this.setCount(count + 1)}>
          Click me
        </button>
      </div>
    );
  }
}

// functional example
function Example() {
  const [count, setCount] = useState(0);

  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

We can clearly see that the code is duplicated on `componentDidMount()` and `componentDidUpdate()` lifecycle functions. Effect Hook helps us removing that duplication.

Custom Hooks

More details here.

Something to remember here, React will consider a function to be a custom Hook if it starts with use.

useTitleUpdate = (count) => {
  document.title = `You clicked ${count} times`;
};

// usage
const MyComponent = () => {
  const [count, setCount] = useState(0);
  useTitleUpdate(count);

  return (...);
};

Important thing to remember

– Hooks are only declared at top level, meaning we CANNOT declare Hooks in the following examples.

// loops
for (let i = 0; i < 10; i++) {
  const [value, setState] = useState(1);
  ...
}

// conditions
if (x === 1) {
  const [value, setState] = useState(1);
  ...
}

// nested functions
const MyComponent = () => {
  const handleSave = () => {
    const [value, setState] = useState(1);
    ...
  };
};

There is a linter plugin to prevent developers doing this.

Other releases

Along with Hooks, React 16.8 also releases bug fixes and test utilities to test Hooks feature.

 

Quick recap

Hooks feature certainly offers a way to make React code more readable and efficient. However, we do not need to change the existing class components to use Hooks, as suggested in their talk at React Conference 2018. Both of them are doing the same thing under the hood, it’s just the implementation that is different.

Presentation Skill image

Presentation skills – An overview – Part I

When being asked, what is the most fearful thing that you never want to experience, nearly 40% said “speaking in front of many people”, significantly higher than death itself at 5%. You can read more about the survey here.

Presentation skills are considered one of the most important skills for a leader. To be able to convey your ideas, or to promote your company, you need to know how to engage many people at the same time, through your presentations, through your talks. That is why I spent time to research about this topic and now I decided to share with you what i learned.

For part I, let us discuss about what to do before the presentation.

Tl; dr

For a successful presentation, you need to do the following things:

  • Prepare your presentation, it needs to suit the target audience that you are going to talk to.
  • Practice your speak, keep practicing until you are absolutely confident in delivering the content.
  • Come to the venue early so you can be more familiar with the ambience.

Preparing your presentation

According to Simon Sinek and other great presenter, a great speaker always needs to plan his or her presentations to suit the target audiences. Knowing your audience is the key to deliver your message through successfully. This is one of the most important skill to master when it comes to presentation skills.

“If you know the enemy and know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle.” – Sun Tzu, The art of war.

What does it mean to suit the audience? If I’m speaking to a group of students about my job as a fullstack developer, will it be different from presenting about the same topic to potential employers? The difference is obvious here, talking to students about my job is much relaxing and I can use certain jargons and jokes to make them interested about the topic; while to the employers, I need to be more professionals and discuss more about my previous employments and how can my expertise assists their companies.

Practicing your presentation

After we’re done writing our presentation slides and scripts, we need to practice presenting the content. This will build confidence within us so we can express it in front of the audience. If we don’t feel the confidence from the speakers, we have a feeling that they do not know what they are talking about.

“Confidence comes from competence.” – Dan Lok.

I would say we need to practice our speaking until we remember every slides, every contents that we intend to communicate. We should be able to speak without the need to look at the slides. That is when we are competent enough to deliver the presentation. When we practice so much that it becomes a reflex, there is no difficulty in doing the actual presentation itself.

Coming to the venue early

I’m sure that most of us feel weird, or nervous when going to an unfamiliar place, let alone having to talk at that venue. One of the ways, suggested by Mr. Dan Lok, is that we as the speakers need to arrive at the place earlier, even before the first audience comes.

“All things are ready, if our mind be so.” – William Shakespeare, Henry V.

According to Mr. Lok, a speaker needs to be ready to do the presentation when the time comes. He or she needs to be familiar with the atmosphere of the settings. Before the event, he would go up on the stage, look around and naturalize himself with the lights and the floor. Once he feels comfortable with the stage, the readiness level increases significantly. He is ready to do the presentation.

You can watch more about how Mr. Dan Lok presents in his YouTube Channel here.

Quick recap

Above are the points that I learned about presentation skills, before your presentation. All of it can be summarized in a word: PREPARATION.

Part II will discuss about what you need to do during your presentation. Stay tuned and read other blogs of mine while you wait, right here 🙂

As usual, I am open to comments and discussions. This is the place where we can openly discuss about the topic, no hard feelings.

Katalon logo

Software review: What is Katalon?

One of my friends was looking for an end-to-end testing framework to integrate with his stack, and suggested that Katalon was something that he had been considering.

Let us take a quick look into it and deduce some of its advantages as well as disadvantages.

 

Tl; dr;

Katalon will not be my first choice when it comes to E2E testing. I think if I have a choice to rewrite my end-to-end testing code, I would choose a framework like cypress or puppeteer. Mainly because I am heavily tech oriented.

Some pros that I uncovered:

  • Non-technical oriented.
  • What you see is what you get.
  • Can use different browsers (Firefox, Chrome, etc.).
  • Less work to create test cases to start testing.

And some cons, of course:

  • Usage of versioning to keep track of updating/creating test cases are not straightforward. I have more thoughts into this below.
  • Big application size.
  • Unknown backward compatibility for created projects.

 

Installation

Katalon is free to download and use. You can easily get it from https://www.katalon.com.

This step really takes me back to the old day when software applications didn’t come with an installation file, instead they came with just a zip archive and after extracting the file. Boom!!! You got the ready to run software.

Only thing that I personally feel a bit uneasy is the size of the software. The archive file is about 331.5MB, and after extraction, the whole thing takes approximately 500MB. Big application size can sometimes slow down your CI/CD process, since it takes some time to download and therefore delays other dependent tasks to run.

 

First look

Katalon first look

Looking quite simple. To start using Katalon, you just need to open the application, and create a project. Then, click on Record web button to start working on your first test.

 

“Writing” your test

Not really writing though, the brilliance of Katalon is that you can interact with the website normally, and it will record all your activities, step by step. Then you will need to add your own conditions into the test to verify that the workflow is doing what you want it to do.

Let’s see a simple workflow below.

You can see that just in a few clicks, I already have a simple test case to test whether the login failed text displays. This is super useful for non-technical background people, since they can just interact with the website and do little editing, they can already test the website.

 

Some thoughts…

The documentation seems to be detailed. Most of the information that I need to have a quick look-around is in there. They clearly have spent quite a bit of time into documenting and make our lives easier.

Workflow is simple and visual. Personally if I am not technical oriented, this will be my first choice to learn about E2E testing. However, comparing to other frameworks like cypress or puppeter, we need to commit the whole project and note down the version of Katalon so that we can replicate the project in another machine. This can cause incompatibility and inconsistency. With other frameworks, we can create a git repository and simply push all test cases code to it. With npm, it is easy to reinstall in another machine.

Imagine that you created a project in version X, then later on decided to upgrade Katalon to version Y. There are unknown compatibility issues that may happen, which we will need to read the actual test cases code to resolve the problems. I think it defeats the purpose if we need to actually write/edit the code for Katalon, even though they offer an option to do so.

 

Epilogue

Well that is my 5 cents on Katalon, and how would I use it to test a website. There are so many features that I have not touched yet. There is a high possibility that it offers something extraordinary that defeats other frameworks. However for a quick look, it does not appeal to myself as a technical person.

React logo

React 16.7 feature preview – What is new?

React 16.7 ships in December 19, 2018. Let us look into the changelog and see what has been changed.

No new feature 🙁

This post is going to be short indeed.

Version 16.7 does not bring us any new features, but rather fixing various bugs and performance boost. One main performance improvement is for React.lazy for large number of lazy components.

Facebook team promised to release Hooks feature along with React 16.7, however, they did not release the API in this version, and now we have no idea when it will be released. If you want to read more about Hooks, I will have another post discussing in details about this feature. For now, the proposal is available at https://reactjs.org/docs/hooks-overview.html

EDIT: You can read all about Hooks here.

Backwards compatibility

Since this version ships with only bug fixes. There should not be any difficulty in upgrading react version in your project.

 

Future version prediction

According to this comment, Hooks feature will be released very soon, the proposal has been accepted and the implementation is merged into master. We just need to wait for them to test thoroughly.

Facebook team will likely release Concurrent mode after Hooks feature is out. More details will be revealed at the end of Q1 2019, since the roadmap states that it will be released in Q2 2019.

 

Tl; dr;

React 16.7 release does not include any breaking changes. Upgrade from 16.6 to 16.7 should not break your projects.