Using Flexbox CSS Part 2

Flexbox CSS in part 1 discusses about its use in aligning boxes inside a container. It further discusses arranging boxes vertically or horizontally. Another part discusses widths of the boxes and how we order the boxes inside the container.

In this article, we are going to discuss:

  • aligning boxes inside the container
  • justifying contents
  • making flexbox css responsive and mobile friendly
  • flex wrapping

Aligning Boxes Inside the Container

To align boxes inside container needs to add the align-items property to the container selector. Such that:

<style>
  .box-container {
    display:flex;
    align-items:flex-start;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin:0px 2px;
  }
  .box-1 {
    flex:2; 
  }
  .box-2 {
    flex:1;
  }
  .box-3 {
    flex:1;
  }
</style>
<div class="box-container">
  <div class="box-1">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-2">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-3">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

There are three possible values of the align-items property. Namely, they are flex-start, flex-end or center. When a flex-start is used like the code above, the resulting boxes would look like:

align-items:flex-start
Flexbox align-items:flex-start

To learn further, you may just experiment with the other values and see what happens.

Justifying Contents

Another feature of Flexbox CSS, is justifying contents. This is done inside the container by adding justify-content property to the container selector.

<style>
  .box-container {
    display:flex;
    justify-content:center;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin: 0 2px; 
  }
  .box {
    flex-basis:20%;
  }
</style>
<div class="box-container">
  <div class="box">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

The code above has all the boxes having flex-basis equal to 20%. This property (flex-basis) is equivalent to width. In fact, some implementations use the width property. Furthermore, the boxes are enclosed in a container that has a property justify-content. And this property is set to center. The resulting HTML when rendered may look something like this:

justify-content: center
Flex boxes justified center.

Other possible values of justify-content are: flex-start, flex-end and space-between and space-around. You may experiment with these values by replacing the above code.

A particular value that is very much useful is space-around. If you use space-around, you may not have the margin property of the boxes anymore. Unlike space-between, this will also add a space on the start and end part.

Making Flexbox Reponsive and Mobile Friendly

If we’re going to resize our browser to simulate responsiveness, we will see that flexbox by default isn’t really responsive. To remedy this, we need to enclose our container selector inside a media query. For example:

@media(min-width:768px){
    .box-container {
      display:flex;
      justify-content:space-around;
    }
  }

The media query will implement only flexbox if the screen is wider than 768 pixels. You may even add another media query such that if the screen width is lesser than that, it will flex vertically. That is, we use flex-direction: column for the container selector.

Content Wrapping

What about if we have a lot of boxes inside the container? Comes now the flex-wrap property. If we set it to wrap, a new row of boxes will be created if the current row is filled up. For example:

<style>
  .box-container {
    display:flex;
    justify-content:space-around;
    flex-wrap: wrap;
  }
  
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin: 5px 0px
  }
  .box {
    flex-basis:20%;
  }
</style>
<div class="box-container">
  <div class="box">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 4</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 5</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 6</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 7</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box">
    <h3>This is Box 8</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

When implemented, the above code will look like:

flexbox wrapping
Flexbox CSS wrapping

So, there you have it: our two part notes for Flexbox.

Please follow and like us:
error

Using Flexbox CSS Part 1

Flexbox or Flexible Box is a layout model in CSS used to easily align and order elements in an HTML page. To visualize it, flexbox is used to arrange boxes (components) inside a box (container). So you don’t have to code much in your CSS.

In previous styling models, designers use floats and design percentages to style inside boxes. But, gone are the days with Flexbox.

We could say that with Flexbox we:

  • say goodbye to floats
  • have a model that is responsive and mobile friendly
  • positioning children elements is now very easy
  • ordering elements would not require changes on HTML anymore

Let us dive in to some coding to see how Flexbox works. You can go over the code in scratchpad.

The basic Flexbox

<style>
  .box-container {
    display:flex;   
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
  }
  .box-1 {
      
  }  
</style>
<div class="box-container">
  <div class="box-1">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-1">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-1">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

The code above will produce 3 boxes each having a 1 pixel border arranged horizontally.

Three boxes arranged horizontally.
3 boxes arranged horizontally

The Column Arranged Flexbox

If we alter the css such that we add the property flex-direction and set its value to column like for example:

.box-container {
    display:flex;   
    flex-direction:column;
  }

The result is:

Three boxes arranged in column
3 boxes arranged in column

Flexbox widths

<style>
  .box-container {
    display:flex;
  }
  .box-container div {
    border: 1px solid #DDD;
    padding: 10px;
    margin:0px 2px;
  }
  .box-1 {
    flex:2; 
  }
  .box-2 {
    flex:1 
  }
  .box-3 {
    flex:1 
  }
</style>
<div class="box-container">
  <div class="box-1">
    <h3>This is Box 1</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-2">
    <h3>This is Box 2</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
  <div class="box-3">
    <h3>This is Box 3</h3>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet facilis deserunt, corporis possimus quia ratione voluptatibus enim fugiat non minima, cupiditate accusantium quas. Vitae nostrum ipsum libero perspiciatis error excepturi</p>
  </div>
</div>

In the code above, we changed classes on two boxes such that they are now box-2 and box-3 respectively. After that, we style each div inside .box-container to have a 2 pixel margin on the left and right side. We then alter the styling by adding a flex property to the selectors box-1, box-2 and box-3 to 2, 1 and 1 respectively.

The result is:

Three boxes with a wider first box

So this goes to say that using the flex property we can set widths to our boxes. In our case, the whole container is now divided into 4 spaces (sum of the flex values) with the first box occupying two spaces (as set in it flex value of 2). The rest occupies only one space each since each has flex equal to 1.

Flexbox Ordering

We’ll try to alter the code above by setting the CSS styling for the 3 boxes to:

.box-1 {
    flex:2; 
    order: 2;
  }
  .box-2 {
    flex:1;
    order: 1;
  }
  .box-3 {
    flex:1;
    order: 3;
  }

The result would be

The boxes reordered

What we did is to add the order property to 2, 1, 3 to the selectors .box-1, .box-2 and box-3 respectively. In the result, we see that box 2 comes first. This is because, box-2 has order property equal to 1.

To recap, in this article we:

  • have the basic flexbox that has boxes arranged horizontally by adding display:flex to the CSS of the container’s selector
  • then we have the boxes arranged vertically by adding flex-direction property to the container’s selector and setting it to column
  • after that, we changed the box widths with the property flex and setting it to different integer values
  • we then changed the order of the boxes using the order property

So, there you go. A followup to this article will discuss more properties of Flexbox.

Please follow and like us:
error

Cloudways SMTP Setting: A case on Troubleshooting

Recently, a client contacted me regarding a WordPress installation that has its Contact Form 7 (CF7) not sending emails. The installation was served on a Cloudways Hosting Platform (CHP). CHP has a feature that sends email via gmail’s SMTP.

SMTP stands for Simple Mail Transfer Protocol. When you send an email, your server simply uses the SMTP Protocol to connect to the recipient’s email server. So your server will be able to transmit your email content towards that server.

As with every troubleshooting, I would start with the obvious and move one step at a time to the least obvious. So based on experience, I see that the CF7 should be the best starting point.

Testing CF7

The client told me that the website sent the emails before and then suddenly stopped sending. This happened several days ago. So, I checked the CF7 and look for the forms. Good thing, it has only one form.

So I logged into the admin panel then checked the sending tab and set my email to the recipient. This is to confirm that it does not really send emails. After that, I opened the front end’s form, filled it up and send.

I waited for a while then checked my email. But, I did not receive the expected email.

The next logical way would be to check the server. Before that though, I needed to check the Cloudways panel.

Cloudways Panel

So I asked the client for access to his Cloudways panel. He invited me so I was able to log in.

Right under Servers menu > then selecting the server > then SMTP, we’d see the following:

Cloudways Server SMTP Setup
Server’s SMTP setup

I told the client to click “Update” and then input his credentials (gmail username and password). He replied that he already did that previously. So, if he did that and all his credentials are OK, then it would be better if we go to the server and check using SSH.

With some clicks on his Cloudways panel via Applications > Select what application > Access Details, I added an SSH user.

Cloudways Application Credential to ADD an SSH user.
Application Credentials add an SSH User

I encountered a problem when I cannot SSH. The server responded with:

 ssh_exchange_identification: read: Connection reset by peer 

SSH to Server

I searched the internet and found a solution here. Particularly, the solution is the one that discusses the connection error to cloudways. The cause of that error by the way, is having my IP blacklisted. So I whitelisted my IP and that is it: I was able to do secure shell to the server.

Using my bash shell, I used SSH to connect to the server. Since, the server in Linux, my knowledge on basic linux commands came to life when I navigate to the different directories of that server.

I then did the mail command to see if I can send an email. The command is like this:

> mail -s "This is the Subject" recipient@email.com
This is the body of the email.

this is a test to see if the email works.
[CTRL+D]

To end the body of the email, use CTRL+D.

The mail command will not give you a response, but you can see the emails on queue with the command: mailq. The response I saw with the command shows me the culprit.

mailq command result showing mails not yet sent.
Result of the Mailq command

There were several emails on queue. The two most common reasons as enumerated were:

(delivery temporarily suspended: connect to smtp.gmail.com[2404:6800:4003:c02::6                                                                                                                                                                                               d]:587: Network is unreachable)

and

(delivery temporarily suspended: SASL authentication failed; server smtp.gmail.c om[XX.XX.XX.XXX] said: 535-5.7.8 Username and Password not accepted. Learn more at?535 5.7.8 https://support.google.com/mail/?p=BadCredentials v9smXXXX016pfg .144 - gsmtp)

Upon observation, the username and password is really the culprit. So, I told the client about it. I further told that it could be possible: he entered the right credentials on the onset. But, later on he changed password on his gmail.

“And that is it.” He said. He remembers.

So there you go. A few days ago, he changed his password on gmail. His Cloudways applications cannot access his gmail SMTP since the passwords don’t match anymore.

Please follow and like us:
error

AngularJS – How to Code from Scratch

AngularJS  or Angular JS is a front-end application framework based on Javascript. It adheres to the MVC (Model View Controller) architecture as well as MVVM (Model View View Model). Google is the main developer for AngularJS. However, it is also maintained by a lot of other developers. This makes AngularJS one of the most active open-source development frameworks.

To keep me abreast with this framework, I am planning to make a series of posts as tutorials. This will be the first part. Other parts are here:

On this tutorial, we are going to go through a development of a common app. To start off, we need NPM installed.

Installing AngularJS CLI

Once you have NPM, you can install a global instance of Angular CLI:

> npm install -g @angular/cli

The above command may take a while to do its thing. Just be patient. This will install a global angular CLI (command line interface) that we can call to create our project. After that, you may now start.

First, let us confirm whether it is properly installed by checking its version. The appropriate command is

> ng --version

As of this writing, I’m using Angular 7.1.3. On your command line you should expect to see something like this:

AngularJS CLI version
Fig. 1. AngularJS CLI Version information

Creating a AngularJS New Project

Now, lets go to creating a new project. Creating a project on our desired project folder is simply done with just one command. So, if you want to call your project my-app we can just do:

> ng new my-app

When we call this command, it will show us a dialog asking us whether we 1. use routes, 2. what css format we are going to use. For number 1, I answer yes because I’m going to use Angular routing. On the second dialog, I answer SCSS since I’m familiar with SASS or Syntactically Awesome Style Sheets.

As a result, we will see inside the my-app folder the following directory structure as shown:

AngularJS directory Structure
Fig 2. AngularJS Directory Structure.

Serving your Application

Once you verified that you get similar directory structure as above, you can now start your server. To start the server, we just do the command:

> ng serve

You can now open a browser and point it to http://localhost:4200. You may also add a switch -o to the command to open your default browser to that address.

Fig. 3. What you’ll see on your AngularJS App

If you see this image, you successfully created your AngularJS application. So, there you have it – Congratulations!

Please follow and like us:
error

Javascript Rest Operators and the “arguments” Variable

javascript rest operator and the argument variable
read about javascript rest operator and the argument variable

This article is all about javascript rest operators and how it could be used in javascript programming. A little discussion is also included for the arguments variable and how to process it inside a function.

Have you ever thought of how some Javascript built-in functions like Math.max() contain multiple arguments? Yes, it is possible – javascript functions may have an arbitrary number of arguments.

This is made possible with the javascript rest operators and it looks like this:

function getSum(...addends) {
  let sum = 0;
  for (let addend of addends) sum += addend;
  return sum;
}

alert( sumAll(1) ); // 1
alert( sumAll(1, 2) ); // 3
alert( sumAll(1, 2, 3) ); // 6

As you see in the function’s argument, we added three dots before our argument: addends. The three dots (…) also called the rest operator tells the function to merge the arguments in the function into an array.

In the function, we can then process the inputs similar to how we process arrays.

We must follow some rules though when we use rest operators. For example, it is not possible to place the rest operator at the first or middle part if your function has multiple arguments.

function person(...arguments, firstname, lastname) {
//the argument arrangement above does not make sense...
}

The above function does not make sense. So we must arrange the arguments like this:

function person(firstname, surname, ...args){
//this is clearer and this will work
}

Simply put: we must place the rest operator as the last argument.

The arguments variable

Another useful javascript trick is not placing arguments in the function. We may then process all inputs though with the argument variable. The argument variable is an array and we can process it like how we treat arrays. For example:

function testing(){
  for(var args of arguments){
    //arguments is the variable fed to testing function
    console.log(arg); //lets just output each argument
  }
}

testing('a','b');
testing('a','b','c');

However, creating functions like this would result in readability problems. The reason is that we don’t know what inputs we’re feeding our function. The arguments variable though is NOT really an array such that Array.map() may not work.

Another problem is: arguments can not be used with arrow functions. This will NOT work:

const arrowfunc = () => {
  for(var arg of arguments){
    console.log(arg);
  }
}

Take note that arrow functions cannot have their own this. They can not have their own arguments variable also.

Please follow and like us:
error