DEV Community: Joseph David

A Simple Beginner’s Guide to Web Development

Joseph David — Sat, 12 Dec 2020 17:36:36 +0000

The Internet has made a profound effect and influenced a lot if not all activities we engage in. It is a broad concept that has lots of fields under it, with web development being amongst the popular ones.

Here, we'd look at a very brief overview of what web development is about, breaking it down by answering FAQs (Frequently Asked Questions).

What Is Web Development?

Web development is a term which involves either building or maintaining websites. It consists of developing simple websites, internet applications (commonly referred to as web apps), and social network services.

Some web development activities include:

Web design
Web engineering
Client-side/server-side scripting
eCommerce development, and
Network security

How Are Websites Developed?

There are several ways websites are created. Some professionals build webpages with tools like code editors, while others use Content Management Systems (CMS) like WordPress, Contentful, or Joomla.

The choice of tools depends on the requirements needed to fulfil a website's functionality. For example, WordPress is very suitable for building stable and extensible eCommerce platforms but with less customisable capabilities, while the Contentful CMS is great option for building something more flexible and customisable.

What Paths are Involved in Web Development?

In web development, there are three popular paths enthusiasts take. They include:

a. Front End Development

This path involves building the components of a website that users or visitors will directly interact with. Depending on the website, such components may include layouts, navigation menus, dropdowns, fonts & colours.

Professionals involved in this path are called frontend developers. Depending on the complexity of the website/web app to be built, they work alongside User Interface (UI) and User Experience (UX) Designers to bring prototypes/wireframes, from conception to production.

Core languages/tools front end developers use to achieve this include:

1. HTML

HTML is an acronym for HyperText Markup Language. It is made up of elements that help describe the structure of a webpage to a web browser, which would render it. The current stable version of HTML is HTML5.

2. CSS

An acronym for Cascading Style Sheets , CSS is used to add style to HTML elements. It is designed to separate the presentation of a web page from its structure (which HTML handles). This improves accessibility and visual control of elements.

3. JavaScript

Popularly shortened to JS, JavaScript is a programming language used to add interactivity to webpages. It is wrongly associated with Java due to the similarity in their spelling. Note that they are two distinct languages. For a detailed description of their differences, do read this article.

HTML, CSS, and JavaScript are basic requirements to build websites. To improve, or add extra functionalities to websites/apps, other tools/technologies are utilised. Popular ones include:

Bootstrap

Developed by Mark Otto and Jacob Thornton at Twitter, Bootstrap is a free CSS framework used by frontend developers to easily build responsive web layouts. This framework contains customisable design components including buttons, forms, and cards.

ReactJS

Now, this might be the most popular tool in the web development industry. Developed and maintained by engineers at Facebook, and also supported by a large community of individual developers, ReactJS is a JavaScript library for building component-based UI components.

VueJS

VueJS is also a very popular JavaScript framework. Created by Evan You, it is also used in building User Interfaces. It is considered to be easier to learn than ReactJS. In real-life situations, these frameworks are selected based on the requirements and complexity of a web app.

b. Back End Development

The backend development path involves building and maintaining the non-visual aspects of a web app. These non-visual aspects consist of servers, applications, and databases. Professionals in this path are known as backend developers. They are specialised in languages used to communicate between the servers, applications, and databases. Popular languages used to achieve these include:

1. Python

It is one of the most popular programming languages on earth. Created in 1991 by a Dutch programmer known as Guido Van Rossum, it emphasises on code readability and helps programmers to write clear logical code for small and large-scale projects.

2. SQL

It is an acronym for Structured Query Language. It is used to access and manipulate data held in databases.

3. Ruby

Ruby is a programming language focused on simplicity and productivity. It boasts of an elegant syntax that's clear and easy to write.

4. PHP

PHP is an acronym for HyperText Preprocessor. It is a general-purpose scripting language and is fast and flexible. It powers WordPress, the most popular CMS in the world.

Just like HTML, CSS, and JavaScript, the above languages are merely basic requirements to power the logic and functionalities that power a website/web app. Some popular backend frameworks include:

Django

Django is a Python-based framework created to ease the creation of complex database-driven web apps. It centres around less code and reusability of components. Some popular sites that use Django are Instagram, The Washington Times, and Mozilla.

Ruby on Rails

Ruby on Rails, commonly shortened to Rails , is a Ruby-based server-side web application framework. It facilitates the use of JSON and XML for the transfer of data. It helps backend developers to accomplish a lot of tasks/functionalities with less code.

Laravel

Laravel is a free back end framework based on PHP. It boasts of an expressive and elegant syntax. Its popular features include a modular packaging system and multiple ways for accessing multiple relational databases.

c. Full Stack Development

Full-stack development can be referred to as the combination of frontend and back end development tasks. Professionals who can perform both tasks are called full-stack developers. Most of them are assumed to have spent a lot of years working on both paths and find them appealing. Most of them serve as consultants in the industry.

For a well-detailed article on the three paths, here's one written by the Udacity team.

What Field Should I Start With?

This question is frequently asked amongst people who intend starting. Unfortunately, not getting adequate advice on it has discouraged a lot. A simple rule of thumb to follow is this;

If you find the concept of building beautiful interfaces, you should consider looking into the frontend development path.
If you love writing code, or logic, and find it more appealing than design, you might consider taking the backend development path.
If you like both and find yourself to be a jack of all trades , pursuing a full-stack path wouldn't hurt.

If you're still not sure, don't panic and just start with anyone. And remember, if you take one and don't find it satisfying, you can easily switch to another.

Deciphering The API Conundrum

Joseph David — Tue, 28 Apr 2020 01:05:16 +0000

Another mystery to unravel, APIs

An acronym for Application Programming Interface, APIs are best described as a medium or intermediary that allows two applications to communicate.

Nowadays, they are heavily used by developers to make software development super easy by providing most of the building blocks needed in a function. As a result of that, we tend to use them a whole lot, indirectly.

You might wonder why I termed it super easy.

Take for example, as a web developer, you intend building a web app that helps YouTube content creators to easily gain access to analytics based on the views they gained.

I know you might be pumped up to flex your skills in logic, but hold on 🖐

As a developer, to be precise, a smart one, it isn't really necessary for you to know how YouTube parses those data.

You can easily make development faster by implementing YouTube's Analytics API. It would help you integrate YouTube's functionality in the best way possible, into your desired web app.

Follow through, and congratulations, you have a successful project, working optimally with fewer flaws.

From the above illustration, you can tell that APIs allow developers to save time by helping them move on to other important aspects of their projects without doing the underground work and trying to re-invent the wheel

Alright, away from the developer's angle, let's see the last, and most probably, the simplest illustration of an API's function:

Now, if you've ever visited a site that required you to create an account, you might notice an easier way of doing so by clicking on the Sign in with …. Network instead of the classic Email approach

I'm so sure using that approach made your registration easy-peasy. Glad to tell you that you indirectly interacted with an API, the Web Authentication API to be exact.

Role

The main role an API plays is to simplify programming by reducing certain implementations and characteristics to expose only essential actions that a developer needs. In software engineering, this process is known as abstraction.

APIs vs Libraries and Frameworks

APIs are related to software libraries. The major difference is;

An API describes and prescribes a set of rules to be implemented.

A library, on the other hand, is the utilisation of this set of rules

Examples of APIs and their Uses

a. Spotify

It's mostly used to retrieve information from their catalogue about artists, tracks, and playlists

b. YouTube

We can grasp an idea from the illustration we earlier looked at. YouTube's API allows developers to access video statistics and YouTube channels

c. Twitter

The bird app's API allows you to search tweets, build custom direct messaging experiences, and create/manage ad campaigns

Progressive Web Applications | What Are They?

Joseph David — Wed, 15 Apr 2020 09:08:11 +0000

Progressive Web Applications are web apps that utilise emerging modern APIs to deliver a native app-like user experience to web apps.

In other words, they are web apps that look and feel similar to a native mobile app.

The modern APIs that PWAs are built with grant the web apps the unique features of native apps, all from a single codebase.

What Makes A Web Application Progressive?

One can't tell if a web app is progressive at first sight. It could be considered progressive if it implements a set of given features, or meets certain requirements which include:

Works offline
Is installable
Easy to synchronise
Send push notifications

Another way of determining if a web app is progressive is by passing it's URL to LightHouse, an open-source, automated tool for improving the quality of web pages. It then audits the URL, runs a series of audits and generates a score based on how well the page performed. If the web app is progressive, it ends up with a high score.

This is only a rough indicator

PWA Criterions?

When a PWA is being designed, three core principles are usually being followed:

a. Capability

From its definition, PWAs are built with emerging modern APIs, with Web Assembly included. As a result, it grants web apps more capabilities, similar to that of native apps. Examples of such capabilities are file system access, media controls, full clipboard support and app badging.

These capabilities are built with the web's secure, user-centric permission model, thereby ensuring that visiting a PWA isn't a scary adventure.

b. Reliability

A PWA has to feel fast and dependable, regardless of the network, in other words, it should be network independent.

Nowadays, performance is highly critical. A research carried out early 2018 by Google, showed that the probability of a mobile site's visitor bouncing due to long page load time increases by 123%. The performance also affects your entire experience, from how users perceive your application, to how it performs.

PWAs need to be usable and highly interactive regardless of the network connection, be it slow or flaky

c. Installable

PWAs when installed, run in a standalone window instead of a browser's tab. They can be launched from the user's home screen, taskbar, or shelf. They can also be searched on the device. These features make them feel like part of the device.

When a PWA moves out of a tab and into a standalone app window, it transforms how users think about it and interacts with it

Examples of PWAs

Twitter
Instagram
Spotify
Uber
Pinterest

Conclusion

At their core, PWAs are web apps. By utilising progressive enhancement, new capabilities are enabled, making them more reliable and installable. Even if new capabilities aren't available, users would still get the core experience

They help developers deliver a unique web experience their users would love. They allow what you build to be installed by anyone, anywhere, any device, all with a single codebase.

Data Science | In Simpler Words

Joseph David — Tue, 07 Apr 2020 07:21:32 +0000

Here we go with another buzzword, Data Science. The enigmatic field purely designed for Math geniuses, and is more of a conundrum to those who don't like dabbling with calculations. Before making these conclusions on this field, why not read through this article to gain a better view on it. Let's get started 🚀

Definition

According to Wikipedia, data science is an inter-disciplinary field that uses scientific methods, processes, algorithms and systems to extract knowledge and insights from many structural and unstructured data. Not minding these buzzwords, it can be simply referred to, as the study of data which involves developing methods of recording, storing, and analyzing data to effectively extract useful information.

The goal behind this field is to gain insights & knowledge from data, which could be structured or unstructured

It is related to Computer Science , but is a separate inter-disciplinary field. Computer Science involves creating programs and algorithms to record and process data. Data Science, on the other hand, covers any type of data analysis, which may, or may not use computers. This field is closely associated with the mathematical aspect of Statistics.

Demand

Everyone wonders why Data Science is in high demand, and to be honest, it is. This is evident due to the exponential rise of companies seeking for mavens in this field.

Now, to the question, " Why is it in demand?"

This due to the fact that modern organisations generate a huge amount of data on a daily basis. The application of Data Science would help in generating meaningful insights from them

The Field's Cycle

There are 5 steps involved. They include:

Capturing
Maintenance
Processing
Analysis
Communication

Who are the Mavens in The Juicy Field?

Wondering why I used the word maven , right 😅? Well, people who are proficient in this discipline, are a peculiar blend of mathematicians and computer scientists. Fascinating, right 😍?

Now, what roles do they play?

They can take a number of roles. This due to the fact that Data Science combines several disciplines. Roles in this field could be that of a:

Data Scientist
Business Analyst
Data Architect

Tools & Languages Used

Thinking of diving straight into this field? Curious about the tools, languages, or technologies utilized? Well here are a few languages and technologies Data Scientists get their hands dirty with:

Python
R
SQL
Julia
Scala
Tensorflow

If you're looking into Data Science, or an established one, I'd recommend you read this detailed article 🤗

Conclusion

Data Science truly remains an attractive, tantalizing, and enticing field, since it's fueled by big data and AI, and having knowledge of it could prove to be helpful

Know someone who keeps asking a plethora of questions on this topic? Kindly do them a favour by sharing this article with them 😊

Here's the detailed version of this article on Medium

Web Applications – A Quick Digest

Joseph David — Thu, 02 Apr 2020 08:12:34 +0000

Web Applications – A Quick Digest

Simply put, a web application or "web app" is a software that runs on a web server.

It is different from a traditional website. A website is simply a group of globally accessible, interlinked web pages which have a single domain name, while a web app, on the other hand, is a software or program which is accessible using a web browser

Development

There are two sides involved in the development of web applications; the client side and server side respectively. The client side handles the web app's UI and interactivity, and is made possible using it's three core web technologies namely:

HTML
CSS
JavaScript

Development on the client side seems easy to deal with, but it could be tasking depending on the complexity involved in it's intended use, this is where web app frameworks come in handy. They're developed to ease the burden in such scenarios by providing a standard way to build. Major client side web app frameworks include and are not limited to:

The server side handles the web app's intended logic. It supports the client side and isn't visible to the end users. It is developed using major programming languages, which includes and not limited to:

Python
JavaScript
Ruby
Java
PHP

Major server side frameworks include:

A web application also utilises databases which stores it's data. Popular ones used by developers include:

Web applications have been the major go to solution for enterprises seeking to establish or rebrand their online presence, since it's more modular and easier to maintain and improve upon

This is because web apps are not OS dependent, but browser dependent. This is cost effective since developers wouldn't have to develop a software for multiple platforms. This gives the software a consistent UI across platforms, because the appearance is dependent on the browser alone, rather than the end users' OS

Hopeful this sheds more light on your view on web applications 🤗

Happy reading!