DEV Community: Philip Mutua

How to target desktop, tablet and mobile using Media Query ?

Philip Mutua — Tue, 06 Sep 2022 06:22:26 +0000

Media Query is a popular way for delivering a style sheet to different devices with different screen sizes and resolutions. They are used to alter the look of a website across numerous devices. A media query is made up of a media type and one or more expressions that can be true or false. If the supplied media matches the type of device on which the content is viewed, the query returns true. If the media query returns true, the style sheet is used.

The screen resolutions of different devices are listed below:

Mobile (Smartphone) max-width: 480px
Low Resolution Tablets and ipads max-width: 767px
Tablets Ipads portrait mode max-width:1024px
Desktops max-width:1280px
Huge size (Larger screen) max-width: 1281px and greater

Syntax:



@media( media feature ) {
    // CSS Property
}

Assuming that you have a css file style.css:




        /* Media Query for Mobile Devices */
        @media (max-width: 480px) {
            body {
                background-color: red;
            }
        }

        /* Media Query for low resolution  Tablets, Ipads */
        @media (min-width: 481px) and (max-width: 767px) {
            body {
                background-color: yellow;
            }
        }

        /* Media Query for Tablets Ipads portrait mode */
        @media (min-width: 768px) and (max-width: 1024px){
            body {
                background-color: blue;
            }
        }

        /* Media Query for Laptops and Desktops */
        @media (min-width: 1025px) and (max-width: 1280px){
            body {
                background-color: green;
            }
        }

        /* Media Query for Large screens */
        @media (min-width: 1281px) {
            body {
                background-color: white;
            }
        }

What is the difference between Promises and Observables?

Philip Mutua — Fri, 29 Jul 2022 07:36:29 +0000

Both observables and promises help us work with asynchronous functionality in JavaScript. Promises deal with one asynchronous event at a time, while observables handle a sequence of asynchronous events over a period of time.

Here are the differences in concept between Observables and Promises.

Observables	Promises
Emit multiple values over a period of time.	Emit a single value at a time.
Are lazy: they’re not executed until we subscribe to them using the subscribe() method.	Are not lazy: execute immediately after creation.
Have subscriptions that are cancellable using the unsubscribe() method, which stops the listener from receiving further values.	Are not cancellable.
Provide the map, filter, reduce, retry, retryWhen, and so many other RxJS operators, that makes it easy to deal with Observables.	Don’t provide any operations.
Deliver errors to the subscribers.	Push errors to the child promises.

code snippets/examples of a few operations defined by observables and promises.

I've completely replaced the need for Postman with this one extension in VS Code!

Philip Mutua — Sat, 24 Apr 2021 23:10:51 +0000

I've completely replaced the need for Postman with this one extension in VS Code! The Thunder Client extension for VS Code
created by @ranga_vadhineni can do everything I need to when testing HTTP Requests.

Features

create and send requests
group requests into collections
use variables
much more!

Thunder Client

Aligning content in columns & adding custom width with Angular

Philip Mutua — Tue, 22 Sep 2020 18:17:07 +0000

To apply custom width to columns we can create helper classes with width provided in pixels as shown below.

.w-75{
    width: 75px;
}

.w-100{
    width: 100px;
}

You can add any number of these custom width classes according to your requirements.

After that just add them to the <th> element in the the table you created.

<ng-container matcolumnDef="id">
  <th class="w-75" mat-header-cell *matHeaderCellDef> id </th>
  <td mat-cell *matCellDef="let element"> {{element.id}} </td>
<ng-container>

How to Align Text in columns of data-table

In your CSS file just create classes as shown below:

.th-center{
  text-align: center;
}
.th-left{
  text-align: left;
}
.th-right{
  text-align: right;
}

Which we can add to th elements.

  <ng-container matColumnDef="id">
    <th class="w-75 th-center" mat-header-cell *matHeaderCellDef> id </th>
    <td mat-cell *matCellDef="let element"> {{element.id}} </td>
  </ng-container>

For Data-Tables using Component Elements as shown below:

<mat-table [dataSource]="dataList" class="mat-elevation-z8">

  <ng-container matColumnDef="id">
    <mat-header-cell *matHeaderCellDef [ngClass]="'w-75'"> id </mat-header-cell>
    <mat-cell *matCellDef="let element" [ngClass]="'w-75'"> {{element.id}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef> name </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef> username </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.username}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="email">
    <mat-header-cell *matHeaderCellDef> email </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.email}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="phone">
    <mat-header-cell *matHeaderCellDef> phone </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.phone}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="website">
    <mat-header-cell *matHeaderCellDef> website </mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.website}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
</mat-table>

We can use [ngClass] directive to add classes to Column and Cells but instead of width, we need to use max-width to columns as well as to cells because components use FLEX layout to define widths.

You can then update CSS classes to the following:


.w-75{
  max-width: 75px;
}

.w-100{
  max-width: 100px
}

Run MySQL on Port 3307 Using Docker Compose

Philip Mutua — Thu, 17 Sep 2020 09:57:01 +0000

Sometimes you would like to run MySQL image on different port other than the default one 3306. Suppose you have deployed your back-end application on a server and you find out that there is another service running on port 3306. That was my situation a while back and to solve this I just added the variable MYSQL_TCP_PORT: 3307 under the MYSQL image environments: section as shown below on docker-compose.yml file:


  db:
    restart: always
    image: mysql:5.7

    command: --default-authentication-plugin=mysql_native_password

    environment:
      MYSQL_ROOT_PASSWORD: test#$!
      MYSQL_DATABASE: default_schema
      MYSQL_USER: test
      MYSQL_PASSWORD: test
      MYSQL_TCP_PORT: 3307

    ports:
      - "3307:3307"

Make sure in your application's DB settings you change the database port settings in my case I was developing the back-end service with Django framework here are the settings below:

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql', 
        'NAME': 'default_schema',
        'USER': 'root',
        'PASSWORD': 'test#$!',
        'HOST': 'db',
        'PORT': '3307',
    }
}

Working with Multiple Containers Using Docker Compose on Linux with Django and NGINX

Philip Mutua — Fri, 11 Sep 2020 13:54:51 +0000

In this article we’re going to explore how to segment our app into a small network of multiple Docker containers, each with their own images.

Single containers are easy enough to build imperatively in the command line, but doing anything more complicated can quickly get out of hand. Instead we’re going to use a new special type of config file called docker-compose.yml. This declarative approach will allow us to quickly define our images in each container and setup the networking between them.

In this example we’re going to be setting up an NGINX server, a Django server.

Prerequisites

It would be helpful to know how to build images with Dockerfile, which you can brush up on here, but that will mostly be taken care of in the starter.

Make sure the following are installed in your local machine

virtualenv - for Python local environment
Docker
Docker Compose
Python - Should be installed in your system to run virtualenv.

Project Structure

├── botservice/
├── core
|   ├── core/
│   │    ├── __init__.py
│   │    ├── asgi.py
│   │    ├── settings.py
│   │    ├── urls.py
│   │    ├── wsgi.py
│   │ 
│   └── Dockerfile
│   │ 
│   └── db.sqlite3
│   ├── manage.py
│   └── requirements.txt
├── nginx
│   ├── default.conf
│   └── Dockerfile
├── env/
├──docker-compose.yml

Starter Setup

Create a directory in your workspace eg. botserver navigate to your directory cd botserver using the terminal.
Activate virtual environment - run virtualenv -p python env. Then to activate virtual environment run
source env/bin/activate
Install Django into the virtual environment by running pip install Django it will install the latest version of Django framework.
Create Django project run django-admin startproject core core is the name of our project. Inside the core folder where manage.py is located create a file called requirements.txt this is where we add our Python dependencies they will be installed when docker runs builds, in the requirements.txt file add the dependencies as shown below:

Django==3.1.1
gunicorn==20.0.4

Gunicorn 'Green Unicorn' is a Python WSGI HTTP Server for UNIX.

NGINX Setup

The NGINX server is different than the other containers. NGINX will act as the router for the server, directing requests to the server container.

In a special configuration file, default.conf, we’ll use upstream to tell NGINX on what server port each the container is running.

Create a folder called nginx in the botservice folder, inside botservice folder in the terminal run mkdir nginx
Navigate inside the newly created folder nginx and create a file called default.conf and add the following code.

upstream botservice {
    server botservice:7000;
}


server {

  listen 80;

  location /{
    proxy_pass http://botservice/;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_redirect off;
    proxy_connect_timeout       300;
    proxy_send_timeout          300;
    proxy_read_timeout          300;
    send_timeout                300;
  }

}

Now we just need docker to put this configuration somewhere more useful. The NGINX container will already have an empty default.conf file, so copying ours to its location will override the old one.

Create a Dockerfile inside the nginx folder add the following to the Dockerfile


FROM nginx

RUN rm -rf /usr/share/nginx/html/*


COPY  ./default.conf  /etc/nginx/conf.d/default.conf

We also need to add a Dockerfile for the Django server
inside the core directory where manage.py file is located add a file called Dockerfile then add the following.


FROM python:3.8-slim-buster

ENV PYTHONDONTWRITEBYTECODE 1
ENV PYTHONUNBUFFERED 1


WORKDIR /src


COPY requirements.txt /src/

RUN pip install -r requirements.txt


COPY . .

Docker Compose

Create a file called docker-compose.yml inside the botservice folder and add the following:


version: '3'

services:
  botservice:
    container_name: botservice
    build: 
      context: ./core

    command: sh -c "gunicorn --bind 0.0.0.0:7000 core.wsgi:application"
    restart: always
    volumes:
      - "./core/:/src/"
      - static_volume:/src/static

    expose:
     - "7000"


  nginx:
    container_name: nginx
    restart: always
    build: ./nginx
    ports:
      - "80:80"
    volumes:
      - static_volume:/src/static 

    depends_on: 
      - botservice

volumes:
  static_volume:

Let’s go over exactly what this is trying to do:

service - Declares each container with its particular configuration, which we can name however we like.
build - Tells how we want our container built, in this case which file to use and where it is with dockerfile and context.
restart - Tells Docker what to do if a container fails during runtime, in this case we always want it to attempt to restart.
ports - Remaps whatever port we want to the default port, just like the -p flag when working in the terminal.
volumes - Are the persistent data connected to each container. We’re duplicating parts of our container and its dependencies in a way that when we throw the container away and start a new one it’ll have that cache to avoid the time of reinstalling everything.
depends_on - Express dependency between services, which has two effects:
container_name - Specify a custom container name, rather than a generated default name.
expose - Expose ports without publishing them to the host machine - they’ll only be accessible to linked services. Only the internal port can be specified.
command - Override the default command.

More info about Docker Compose file.

Finally we can create our services and attach our containers together using the docker-compose up command and the --build flag to build out our Dockerfiles.

Navigate to where the docker-compose.yml file is located via terminal and run:

docker-compose up --build

Closing Thoughts

This may have been a very simple use case, but Docker Compose is definitely one of the major tools you’ll be using with almost all of your Docker projects. You can check out a demo here to see how I did it when developing some chatbot.

Pushing a Docker container image to Docker Hub🔗

Philip Mutua — Fri, 11 Sep 2020 10:13:50 +0000

To push an image to Docker Hub, you must first name your local image using your Docker Hub username and the repository name that you created through Docker Hub on the web.

You can add multiple images to a repository by adding a specific :<tag> to them (for example docs/base:testing). If it’s not specified, the tag defaults to latest.

Name your local images using one of these methods:

When you build them, using docker build -t <hub-user>/<repo-name>[:<tag>]

By re-tagging an existing local image docker tag <existing-image> <hub-user>/<repo-name>[:<tag>]

By using docker commit <existing-container> <hub-user>/<repo-name>[:<tag>] to commit changes

Now you can push this repository to the registry designated by its name or tag.

$ docker push <hub-user>/<repo-name>:<tag>
The image is then uploaded and available for use by your teammates and/or the community.

Regex for Kenyan Phone Number format 07XXXXXXXX in Python

Philip Mutua — Thu, 10 Sep 2020 06:08:51 +0000

Regex for Kenyan Phone Number format

The common formats that people use to represent mobile phone numbers: 07xxxxxxxx, +2547xxxxxxxx or +2547xxxxxxxx or 7xxxxxxxx.

In this tutorial I will show you how to check a phone number matches in the following format 07xxxxxxxx

We are going to import re Python module to achieve this.

import re

The we define the regular expression pattern that will check if the phone number matches. The Pattern is normally a string.

pattern = "^0(7(?:(?:[129][0-9])|(?:0[0-8])|(4[0-1]))[0-9]{6})$"

That's it we have the pattern defined.

Then we are going to define our matched variable. phone_number variable is the number we want to check if it matches.

phone_number = "0700000000"

We are using the re.match() function which checks if zero or more characters at the beginning of string match the regular expression pattern, returns a corresponding match object. Then returns None if the string does not match the pattern.

matched = re.match(pattern,phone_number)

Now let's check

is_match = bool(matched)

This will return a boolean True

And there you go ;)