The who, what and why of Python

So you’ve decided to start programming and may have heard Python is a popular language to start with. It’s important to know what the language is about before diving in. In this article, we will be taking you through what Python is, what it can be used for and you will understand a bit about how Python works under the hood.

What you will learn

Why is python so popular?

You may have…


Learn this fundamental concept in React!

In a previous article we talked about rendering in React and as a simple example rendering React elements. But this doesn’t reflect what everyone who uses React does when creating an application. In this article we will be discussing the concept of components and an important concept called props which goes over how data can flow in React.

React components allow an application to be split into discrete, reusable user interfaces. A somewhat accurate analogy would be that React components are very much like JavaScript functions.

React components can be either function Components or class components. …


An in-depth overview of how React renders onto the Page

In the blocks of understanding necessary to get a model of React in our minds the concept of rendering is key. We are using the syntax of JSX to design our user interface and translating this into an output on the screen, this is rendering.

Now suppose in an HTML document you have <div id="root> </div>. We can use this to create our React application.

We call this the root DOM node. In fact, applications build solely in React you usually only have one root DOM node.

From the very simplest of building blocks of a React application, we have…


Learn this most fundamental concept in React

React is a JavaScript library that uses a syntax called JSX this stands for JavaScript XML. It is a syntax much like XML/HTML that can co-exist with JavaScript code. This means we can write HTML like content and combine it with JavaScript.

This syntax is intended to be used by a preprocessor like Babel which converts this syntax into JavaScript that the JavaScript engine can run.

JSX is a concise HTML like structure in the same file as we write the JavaScript code. Unlike in the past, we can put HTML into JavaScript.

So let's see some code, as we’ll…


Learn how React uses the virtual DOM

The virtual DOM is a concept within the React library that is at the heart of how it works. Here in this article, you will come to understand what it is, a basic abstraction of what it might look like and why React uses it.

What is the Virtual DOM?

Think of the virtual DOM as a concept, there is nothing called the virtual DOM within the React codebase. It serves as a useful tool to do what React was meant for, creating user interface components that deal with state (we will briefly define state below)

The virtual DOM is an in-memory representation of the…


Learn how the DOM relates to JavaScript

The first time you read about React, the concept of the virtual DOM (Document Object Model) appears. Don’t worry if you haven’t come across this term! To begin to understand what the virtual DOM is, the first important step is to have an overview of the DOM first and then why React uses the virtual DOM instead. Here in this article we will look through the DOM to enhance why you’d want to know about this for React.

At its simplest, the DOM provides an in-memory structure for the web browser to communicate the structure of the page that displays…


How to level up your React application by using React.Fragments

In a previous blog post (see here) we looked at why need to wrap our React elements in a div, please see here if you haven’t already read that post!

At the end of that post, we discussed why having unnecessary div elements entering the DOM could potentially cause problems. Well, I guess there must have been a solution to this right?

In the React release 16.2, a new feature was introduced called a React fragment. Think of this as a component that doesn’t translate to HTML.

Instead of using <div>'s to wrap the elements we use or the shorthand…


Understand div wrapping in your React Apps!

The Problem

So when you first start using react, you will have no doubt written something like the below

const App = () => {

What’s wrong with that you might ask?

React tries to convert our JSX and this pops out

Failed to compile.
Syntax error: Adjacent JSX elements must be wrapped in an enclosing tag (6:8)

Behind the scenes for all the JSX statement you write in a component, they need to be wrapped into one container. But wait why is it necessary?

Behind the Scenes of React

To answer this problem we have to think about what happens…

@youssefsarhan —

How to create a seamless QR code scanner and Browser in one screen


For a recent freelancing project I was asked to provide QR Code scanning functionality embedded in a stand-alone mobile iOS app. I was aware of QR Code scanning packages available on the node package manager but never really needed to use them in my work!

Some searching on blogs and packages' documentation showed you how to read a QR Code and display the information, but not actually DO anything with that information. This was relatively frustrating given that the point of a QR code is to transfer information and usually in the form of a link to a browser.


@carlheyerdahl Unsplash

Hacking productivity with python

In this article, you will learn

Introduction to the Pomodoro Technique

The Pomodoro technique is used to break down work into intervals with short breaks in between. It was created by Francesco Cirillo in the late 1980s and in the last 40 years it has had a great amount of success for those wanting to increase the ability to study effectively for hours on end without significant fatigue.

The key to this technique is an interval is not…

Aaron S

Hello! My name is Aaron. Healthcare professional with an interest in python, technology, education and healthcare.I run for python enthusiasts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store