software development methodology

Software Development Methodology – Scrum

An agile way to manage a project usually software development, Scrum is a framework that allows member to focus on delivering business value in the shortest time. It has been used for a variety of work, but has initially been most popular for delivering software based products.

Here, instead of providing complete, detailed descriptions of how everything is to be done on a project, much is left up to the Scrum software development team. For the reason that, this team will know how to solve the problem they are presented.

scrum methodology

Source: APPDEC

Tl; dr;

Lightweight, simple to understand yet difficult to master, Scrum is a framework wherein people can address complex adaptive problems, while productively and creatively delivering products of the highest possible value.

Scrum provides simple structure of roles, events, artifacts, and rules designed for teams usually of 3 to 9 members, who break their work into actions that can be accomplished within time-boxed iterations, called sprints, then track progress and re-plan in 15-minute time-boxed stand-up meetings, also known as daily scrums.It involves planning, product demonstration, and a retrospective.

Getting to know Scrum

scrum workflow

Source: DZone

One of the implementations of agile methodology, Scrum is ideally used in the project where the requirement is rapidly changing. Here, incremental builds are delivered to the customer in every 2-3 weeks’ time.

Fostering a self-organizing, cross functional team, Scrum has no overall team leader who decides which person will do certain tasks or how a problem will be solved. Things are decides by the team as a whole.

In 2016, Scrum is said to be used by 58% of software development companies.

Scrum Roles

Scrum’s management practices are much similar to those of Extreme Programming (XP), but, unlike XP, Scrum does not prescribe particular engineering practices.

  • The Product Owner. Solely responsible for managing the Product Backlog, the product owner expresses product backlog items clearly, orders items in the product backlog, certainly ensures the work value of the Development Team, see to it that product backlog is visible, transparent, and clear to all, and shows what the Scrum Team will work on next.
  • The Development Team. Consisting of professionals who execute the work of delivering a potentially releasable Increment of “Done” product at the end of each Sprint, the development team are self-organizing, cross-functional, recognizes no titles, do not contain sub-teams dedicated to particular domains, and accountability belongs to them as a whole.
  • The Scrum Master. The Scrum Master is a servant-leader that ensures that Scrum is understood and enacted through guaranteeing that the Scrum Team adheres to Scrum theory, practices, and rules. This member serves both the Product Owner and the Development Team in several ways such as facilitating Scrum events as requested or needed, teaching the Scrum Team to understand product backlog items, coaching the Development Team in terms of self-organization and cross-functionality, and removing impediments to the Development Team’s progress.

Scrum Events

The Sprint, considered to be the heart of Scrum, is a time-box of 1 month or less during which a “Done”, useable, and potentially releasable product Increment is created. It usually consists Spring Planning Meeting, Daily Scrums, the development work, Sprint Review Meeting, and Sprint Retrospective.

*Each Sprint may be considered a project with no more than a 1 month horizon. Sprints are used to accomplish something, having the definition of what is to be built, a design and flexible plan resulting to a product.

  • Spring Planning Meeting. Work to be performed in the Sprint is planned at the Sprint Planning. It is time-boxed to a maximum of 8 hours for a 1 month Sprint. For shorter Sprints, the event is usually shorter. The Scrum Master see to it that the event takes place and that attendants understand its purpose.
  • Daily Scrum. A 15-minute time-boxed event for the Development Team, daily scrum is an event to synchronize activities and create a plan for the next 24 hours.
  • Sprint Review Meeting. Held at the end of the Sprint for inspecting Increments and adapt the Product Backlog if needed, sprint review meeting allows Scrum Team and stakeholders to collaborate about what was done in the Sprint.
  • Sprint Retrospective. Occurs after the Sprint Review and prior to the next Sprint Planning, is an opportunity for the Scrum Team to inspect itself and create a plan for improvements to be enacted during the next Sprint.

Scrum Artifacts

  • Product Backlog. An ordered list of everything that might be needed in the product and is the single source of requirements for any changes to be made to the product.
  • Sprint Backlog. A forecast by the Development Team that is the set of Product Backlog items selected for the Sprint, in support of the Sprint Goal.
  • Increment. It is the sum of all the Product Backlog items completed during a Sprint and the value of the Increments of all previous Sprints.
  • Definition of the word “Done.”, When a Product Backlog item or an Increment is described as “Done,” members must have a shared understanding of what it means for work to be complete, to ensure transparency.

Summary

Scrum is a subset of the Agile framework that is iterative and flexible. As a practice, it offers more specific rules and procedures to the project application development project management process.It has been used for a variety of work, but has initially been most popular for delivering software based products.Here, instead of providing complete, detailed descriptions of how everything is to be done on a project, much is left up to the Scrum software development team.

 

If you enjoy reading about software development methodologies, let’s take a look at other blog posts.

Software Development Methodology – Extreme Programming

Software Development Methodology – Kanban

Software Development Methodology – Lean

Software Development Methodology – Dynamic Systems Development Method (DSDM)

Software Development Methodology – Feature Driven Development (FDD)

Software Development Methodology – Crystal

By Tuan Nguyen

software development methodology

Software Development Methodology – Extreme Programming

A software development methodology, Extreme Programming (XP) is one of the most important software development framework of Agile models designed to improve the quality of software and its ability to be responsive to client/customer requirements.It has already been proven to be very successful in IT companies and other industries, worldwide.

Extreme Programming’s development goes all the way back in the 90s when Software Engineer Ken Beck introduced XP to find ways in writing high-qualitative software quickly and being able to adapt to customers’ changing requirements. In 1999, he refined XP approaches in the book Extreme Programming Explained: Embrace Change.

man thinking about technologies

Source: CBT Nuggets

Tl; dr;

An agile methodology, Extreme programming (XP) is considered to be one of the most effective in software development, operating with a test-first development scheme.

Managers, customers, and developers are all equal partners in a collaborative team. The team self-organizes around the problem to efficiently solve it as possible.

The customer’s involvement here is higher than in any other agile methodology, being an active member of the team throughout the project life cycle.

Introduction to Extreme Programming

extreme programming workflow

Source: freeCodeCamp

Extreme Programming empowers developers to confidently respond to changing customer requirements, even late in the life cycle. It implements a simple, yet effective environment that enables teams to become highly productive.

This software development framework recommends taking the best practices that have work well in the past in program development projects to extreme levels.

In XP, daily meetings also known as stand-ups that lasts up to 15 minutes. During these meetings, goals are introduced and collaborated with the team. But, at the end of each cycle, there is a longer meeting where the project velocity is measured.

Extreme Programming’s Values

XP’s simple rules are based on 5 values that will help the team work faster and attain effective collaboration. Each of these key values provides a strong impact in the work flow.

  • Communication. Teams work jointly at every stage of the project and keep all members updated. Any problems or concerns are addressed immediately. Face to face discussion with the aid of a white board is just one of the best examples.
  • Simplicity. In order to save time and effort, developers tend to write simple code to bring more value to a product. This principle avoids waste and do only things that are essentially necessary to keep design systems simple as possible for easier maintenance, support, and revision.
  • Feedback. Team members, through having constant feedback about their previous efforts, can identify what certain areas are in need of improvement and revise their practices.
  • Courage. Having no “white lies,” team members evaluate their own results objectively without any excuse. Also, they always respond to changes.
  • Respect. Every team member assigned to a project contributes to a common goal with openness to communicate, provide and accept feedback on each other.

Extreme Programming Team Players

The XP team size varies from a small number of five people up to 12. With the complexity and high velocity of work, they are in frequent verbal communication.

The customer:

  • Sets the rules (i.e. priorities, functional tests, and user stories); and
  • Has regular meetings with the tracker in order to keep them well-informed about project progress.

The tracker:

  • Like a manager, the tracker takes responsibility in supporting the team and make sure the project’s development is on the right track.

The programmer:

  • Implements customer’s requirements for the project; and
  • Defines tasks; and
  • Estimates workloads in relevance to the user stories.

The tester:

  • Carries out trials of the code;
  • Analyzes graphs; and
  • Reports the results to the rest of the team.

The coach:

  • Arranges daily and weekly meetings; and
  • Typically responsible for disseminating valuable information to the tracker.

Advantages of Extreme Programming

  • Transparency. Visible communication within teams help everyone to keep up with the project progress. Everyone works on each individual tasks, yet regular meetings record the improvement collectively.
  • Cost Efficiency. Having reduced feedback loops and so does the cost of change. Compare to other methodologies, changes are implemented through the development period.
  • Teamwork. As team members work hard to accomplish goals within tight deadlines. They support one another through the entire project. Pair programming gathers them in groups of two, sharing ideas and creating software side by side.

Disadvantages of Extreme Programming

  • Code compromise design. The ultimate focus of XP is the code versus the design. What sells the application is the design. So if code overcomes the design, well the customer could be unhappy with the product if the design is not good enough.
  • Location. Extreme Programming projects are difficult to attain when the customer is away from the developmental team. XP interactions are typically successful when team members meet face to face.
  • Lack of documentation. Constant changes cannot be properly documented. There are risks of unexpected failures that cannot be tracked.
  • Stress. Having a lot of pressure in working on tight deadlines. If team members develop high stress levels in completing tasks on time, they are most probably prone in committing mistakes with details concerning the project.

Summary

Extreme Programming (XP) is a methodology that allows companies especially IT companies to save costs and time required to accomplish a certain project.

It has 5 values namely: communication, simplicity, feedback, respect and courage.

XP is cost-efficient, requires teamwork to accomplish tasks within project development, and communicably transparent. While its downside is stress, location, lack of documentation, and code overcomes design.

If you enjoy reading about software development methodologies, let’s take a look at other blog posts.

Software Development Methodology – Scrum

Software Development Methodology – Kanban

Software Development Methodology – Lean

Software Development Methodology – Dynamic Systems Development Method (DSDM)

Software Development Methodology – Feature Driven Development (FDD)

Software Development Methodology – Crystal

By Tuan Nguyen

programmer sitting in front of computer

Discussion – When slow executing code is better than fast code?

Fast executing code has been the goal of many digital product. As a programmer, we always need to be careful with the performance of our code. But is there a case where we need to slow it down?

Turns out, there are cases where we actually want the code to perform slower than it normally is. One of them are password hashing.

Storing passwords in plain texts must NEVER be an option.

That’s why you need to provide a strong password storage strategy by hashing passwords.

hashing algorithm

Source: Auth0

Hashing simply refers chopping something into small pieces, making it look like a confused mess.

But hashing alone is not sufficient to mitigate more involved attacks like rainbow tables.

To better store passwords, you need to add salt to the hashing process.

Meaning, you are adding additional random data to the input of a hashing function, making each password hash unique.

It is generally designed to be slower to prevent future threats.

Tl; dr;

Optimizing for speed isn’t the norm after all.

Slow code is sometimes better over making speed as a universally important parameter.

It creates a fingerprint of data in assessing the integrity of the data, but not confidentiality. Slow code takes arbitrary inputs and transforming them into outputs of a fixed length.

With these, you get to prevent threats such as dictionary and brute force attacks.

Is slow code better than fast code?

code screen

Source: Codementor

Faster calculations means faster brute-force attacks.

That’s why you need a function that is slow at hashing passwords to bring attackers almost to a halt.It is designed to be inefficient and more difficult to calculate.

The function should be adaptive in order to compensate for future faster hardware by being able to make the function run slower and slower over time.

An ideal function should integrate two processes – hashing and salting, seamlessly.

One perfect example is bcrypt.

Bcrypt is a password hashing function designed to be slow and to make it even slower and slower over time. It was designed by NielsProvos and David Mazières based on the Blowfish cipher.

Its name originated from b for Blowfish and crypt which is the name of the hashing function used by the UNIX password system.

This function securely hash and salt passwords. It allows building a password security platform to guard against future threats against attackers that have computing power in cracking passwords twice as fast.

The password hashing function which is also regarded as a slow algorithm reduces the number of passwords by second an attacker could hash when crafting a dictionary attack. Systems that use slow bcrypt hashes are Linux and BSD.

Why is it better?

Irreversible.

Slow hash functions use extremely difficult and cumbersome mathematical operations to revert such as the modulo operator. It is designed to be resistant to pre-image attacks.

If an attacker knows a hash, it is computationally infeasible to find any input that hashes to that given output.

More secure password storage.

With the irreversible mathematical properties of slow hashing, it becomes a phenomenal mechanism in concealing password at rest and in motion. Also it is deterministic, meaning there’s guarantee given that the same input always produces the same output in order to verify user credentials consistently.

Instead of storing the password in clear text, you hash the password and then store the username and hash pair in the database table.

According to Jeff Atwood, “hashes, when used for security, need to be slow.”

Hashing needs slow computes to prevent brute force attacks, compare to fast computes which are more feasible, in line with the rapidly evolving power of modern hardware.

A slight change equates a big impact.

Another benefit of slow hash code is that it is not easy to predict. The hash for dontpwnme3 would be much different than the hash of dontpwnme4. Also, if an input is changed slightly, the output is changed significantly. This is what we call, the “avalanche effect.”

Summary

Slow hash code is much suitable for the modern industry.

Compare to fast code that is much feasible with the rapidly evolving power of modern hardware making it much vulnerable to dictionary and brute force attacks.

One concrete example of a slow code is bcrypt. It is a password hashing function designed to be slow and to make it even slower and slower over time, seamlessly integrating to process – hashing and salting.

By way of slow code, your development project get more security when it comes to password storage, be resistant to pre-image attacks, and very hard to predict inputs and outputs.

By Tuan Nguyen

students in classroom with computers

Discussion – Is Programming becoming a necessity subject at school?

Education, in general, plays a role to prepare children to be responsible citizens, with the necessary skills to be productive later in life: from kindergarten (learning basic writing, reading, solving simple mathematics equations, and practical logic problems)up to the other consecutive educational stages (acquiring immediate to advanced fundamental subjects). These are building blocks designed to keep the child on track with the learning flow and to get them ready for life, capable of earning a living.

When talking about computer-related knowledge, a typing class is one of the most important classes in schools. It allows the children to learn to touch type and improve typing speed. Although the typewriter is already outdated, it is still relevant until today – much applicable for programming particularly when entering data or programming devices.

In this digital age, computer programming is now regarded as an essential ability for 21st century learners not just with tech savvies and computer nerds and is becoming a key component of many curriculums.

With this, should programming be a necessity subject in schools?

Tl; dr;

In this digital age of information, technology plays a huge role in our daily lives with smart devices everywhere. Digital devices such as smartphones, smart speakers, tablets, laptops, smart lightings, smart cards, smart doorknobs, etc. utilized across offices, homes, and public spaces for entertainment, communication, transportation, and many more.

With this regard, computer programming is becoming a key component of many curriculums, getting you great chances to be accepted in tech companies in the near future.

Should programming be a necessity as subject in schools?

2 kids learning on the computer

Source: Xconomy

The answer would be a YES, because in this digital age it lets you connect with the advancements you utilize and experience in school, at home, in transportation, or on any public spaces, it is now all around you. Having to learn programming, a student can understand how devices work, how applications are designed and how software triggers devices to work. That’s why programming is the key subject in schools in the future. Without programming, the ease of life you experience now will never be possible and most parents agreed as well. In a recent poll commissioned by Google, 2/3 of parents said that computer science should be required learning in schools.

Here’s why student needs to learn programming in schools:

A basic literacy in digital age.

Kids are more technologically exposed than that of their parents. Having cellphones, laptops, digital cameras, or any digital device, children are much familiar with their usage. Coding allows the child to learn how things move, interact, or used with just simple programming. With their inquisitive nature, it is a huge digital shift.

A technological revolution to change the world.

Communication won’t be possible without programming certain social media sites. Voicing out opinions, fighting for rights, and demanding better legislation to help the humanity, is bringing change on the media landscape. Writing is not enough, that’s why everything turns digital.

A certain link to innovation.

In letting your child learn simple codes, it allows him/her to make ideas a reality. Codes are not just codes, they are keys to innovation. Although it’s critical to compose, it pushes your child to look for ways and means to think, build, and design better programs.

A path for a better career.

With programming, students learn to discover whether it is a suitable career they want to pursue. Programming is not just a “trader skill,” it is an important aspect in a country’s economy. According to a study, programming jobs are growing at twice the national average in the US. That’s why our ability to fill those jobs affects our global competitiveness.

Summary

Programming should be a necessity subject at schools because it is a basic literacy in the present, an important aspect for the creation of revolutionary communication mediums such as social media, trains students to think logically and innovatively, and opens an avenue for better career opportunities.

Do you feel students are busy as it is? Let me know by leaving a comment.

By Tuan Nguyen

career options

Fullstack developers – what do we do?

A full stack developer is not just any ordinary job title that is ordinary its complex than you think. Meaning the position is not only referring to someone who can do both “frontend” and “backend” development but someone who has the capability in handling the complete implementation of a website, from project management to installing the correct operating system on a server. In my previous post frontend vs backend vs fullstack developers, we already touch the surface of what it takes to become a fullstack developer. Now let us dig a bit deeper into it.

Tl; dr;

A full stack developer is an engineer who has a variety of skills and can be able to work independently complete a product using those skills. Everything from databases, servers, systems engineering, and clients depending on the project as to whether the customer may need a mobile stack, a Web stack, or a native application stack.

Fullstack developer illustration

Source: Fiverr

What does a Fullstack developer do?

Having a wide range of techniques, a fullstack developer is someone who can work on both ends primarily in frontend and backend developments. It is not really necessary to master everything that requires you to work with those development tasks, it only means that you need to be capable enough to do the job with an understanding of the mechanics in building an application.

fullstack tech stack

Source: Hackernoon

A fullstack developer is proficient, if not fluent on the following fullstack layers:

Server, Network, and Hosting Environments. The developer understands what can break and knows the appropriate use of the file system, cloud storage, and network resources. A fullstack developer also needs to have knowledge about application scale when given the hardware constraints, and works side by side with DevOps.

Data Modeling. The developer is capable in creating reasonably normalized relational model, complete with foreign keys, indexes, views, lookup tables, etc. . And he/she should have familiarity with non-relational data stores concept and understands where they shine over relational data stores.

Business Logic. The developer has solid object oriented skills.

API layer / Action Layer / MVC. On this level, the developer understands how the outside world operates against business logic and data model, uses heavily on frameworks, and writes clear, consistent, and simple to use interfaces.

User Interface. The developer knows how to create a readable layout and acknowledges the need of acquiring artists and graphic designers for help.

User Experience. The developer can step back and look at a process that needs eight clicks and three steps, and getting it down to one click and write useful error messages.

Understanding of Customer and Business Needs. The developer can be able to grasp what’s going on when the customer uses the software and also has a grasp of the business.

Other additional abilities:

  • Writes quality unity tests;
  • Understands repeatable automated processes for building the application, testing it, documenting it, and deploying it at scale; and
  • Is aware of security concerns knowing each layer presents own vulnerabilities.

Advantages of acquiring/hiring Fullstack Developers.

  • Adding groundbreaking features to products for market excitement, fullstack developers can manage to make the whole stack from the ground up and is capable to handle a web project in full 360-degree perspective.
  • Skilled in both frontend and backend development, these developers can attain customer expectations with independent solutions.
  • Updated with the latest technological innovations, fullstack developers can make web projects more user-friendly by implementing smart features to get the best interactive website.
  • Taking part different types of web projects, these developers are already equipped with in-depth knowledge in the web and app development field.
  • Fullstack developerscan help with the whole design structure and provides input on any level as needed.
  • Since fullstack developers can handle all aspects of a single project, one can save much money.
  • Fullstack developers can represent the company and product to stakeholders and are flexible enough to move from one operation to another, helping to streamline processes and fast-track development.
  • If you have fullstack developers in your team, sharing of responsibilities among team members becomes easy. Thus attaining faster delivery of the final output.
  • Fullstack developers can help with the quality assurance and quality control of your design project. And they give your web/app project the edge to dominate the market.

Summary

Fullstack developers can do both frontend and backend developments or has the capability in completing the implementation of a website everything from databases, servers, systems engineering, and clients with independent solutions. They:

  • Understand what can break and why;
  • Know about application scale when given the hardware constraints, works side by side with DevOps;
  • Are capable in creating reasonably normalized relational model; familiar with non-relational data stores concept;
  • Have solid object oriented skills when it comes to business logic;
  • Understand how the outside world operates against business logic and data model;
  • Write clear, consistent, and simple to use interfaces, creates readable layout and acknowledges the need of acquiring artists and graphic designers for help;
  • Can step back and look at a process that needs eight clicks and three steps, and getting it down to one click and write useful error messages; and
  • Understand customer and business needs.

With regards to advantages, fullstack developers:

  • Are capable to handle a web project in full 360-degree perspective;
  • Can attain customer expectations with independent solutions having both frontend and backend development skills;
  • Can make web projects more user-friendly;
  • Are already equipped with in-depth knowledge in the web and app development field;
  • Can help with the whole design structure and provides input on any level as needed;
  • Are money-efficient since fullstack developers can handle all aspects of a single project;
  • Can represent the company and product to stakeholders and are flexible enough to move from one operation to another;
  • Can attain faster delivery of the final output; and
  • Can help with the quality assurance and quality control of your design project.

By Tuan Nguyen

Programming paradigms

Programming paradigms – is object-oriented programming better?

The errors faced in the procedural programming approach are the motivating factor in the invention of objected oriented approach. In the object-oriented programming paradigm, data is a critical element in the program and restricts freely transformation of data around the system.

Instead, data are associated with functions that operate on it and protect it from accidental modification outside functions. Object-oriented programming paradigm approach permits decomposition of a problem into entities, or objects and then build data and function around them. Data of an object are accessible only by the functions, or methods belonging with the object.

In this blog, we will discuss a rough concept of what Object-oriented programming paradigm is, and how it is a better solution comparing to procedural programming in some cases.

Tl; dr;

Object oriented programming is a way to write instructions for a software. It introduces 3 concepts: Encapsulation, Inheritance and Polymorphism, which form the backbone of the paradigm. There are various advantages of using OOP, as well as some drawbacks that can make us stay away from it.

Other blog posts on the series:

Programming paradigms – what is procedural programming?

 

What is the object-oriented programming paradigm?

Object-Oriented programming (OOP) is a programming paradigm that relates the structures of data with a set of operators which work with the data. In OOP, an instance of such an entity is often referred to as an object. In other words, OOP is a method of implementation in which programs consist of objects, each of which represents an instance of some classes. Classes are all members of a hierarchy of classes united through a concept called inheritance.

// a simple C++ class
class Rectangle {
  int width, height;
  public:
    void Rectangle(int x, int y) {
      width = x;
      height = y;
    }
    
    int area() { return width*height; }
};

Advantages

Eliminating redundant code using various techniques like inheritance and templates.

Imagine you need to store a list of users, which can have various roles such as admin, user, sales, etc. Instead of having to copy the duplicated fields to each user object, we can utilize a trademark feature of OOP paradigm: Inheritance

Object oriented programming visualized

class User {
  protected:
    string name;
    int age;
  public:
    void User(string n, int a) { 
      name = n; 
      age = a;
    }
};
class Admin: public User {
  public:
    bool isAccessible(string page) {
      return true; // admin should have access to everything
    }
};
class Sales: public User {
  public:
    bool isAccessible(string page) {
      return page == "sales" ? true : false;
    }
};

In the example above, we don’t have to re-declare name and age for each child class, because `User` class already provides them.

Data encapsulation

Hiding of the data enables the programmer to code the most secure programs where other parts of the program will be unable to access the hidden data. This separates the data from other logic and avoid making changes of data where inappropriate.

Code management

Division of program into objects makes software development easy.

Software complexity is less severe than conventional programming techniques.

Upgrading and maintenance of software are easily manageable.

Message passing technique makes the interface simpler with external systems.

Code reuse-ability is much easier than conventional programming languages.

Reduce code duplication

Parent class can contain similar behaviours so derived classes can use them without duplicating the logic. And if there is something different, we can simply override the method to custom tailor it to what we want. This is what polymorphism is about.

class User {
  protected:
    string name;
    int age;
  public:
    void User(string n, int a) { 
      name = n; 
      age = a;
    }
    bool isOld() {
      return age == 50 ? true : false;
    }
};
class Admin: public User {
  public:
    bool isOld() {
      // overriding the parent method
      // making admin always old :troll:
      return true;
    }
};

Disadvantages

  • Compiler and runtime overhead is high because the object-oriented program requires more time during compilation and for dynamic and runtime support it requires more resource and processing time.
  • Re-orientation of software developer to the object-oriented thinking.
  • Requires the mastery in software engineering and programming methodology
  • Benefits only in long run while managing large software projects.
  • The message passing between many objects in a complex application can be difficult to trace & debug.

Summary

Object-oriented programming is one of the most popular programming paradigm among other methodologies. Its emphasis is on data rather than procedures by dividing programs into objects. Functions and data tie together in a single unit and therefore hiding data from accidental alteration from other function or objects. Also, data access is done through visible functions so that communication between objects is possible.

By Tuan Nguyen

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

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.