Month: April 2020

CSS Box Model broken down

What is the CSS Box Model.

CSS Box Model

When a web page is rendered, the browser's rendering engine will display each HTML elements as a rectangular box.

Every rectangle is composed of a margin, border, padding and the element. If you open google chrome browser's console and inspect an element, go to the right column and scroll down until you see a box.

css box model

How to calculate the size of the box?

width = content width + padding-left + padding-right + border-left + border-right 
height = content height + padding-top + padding-bottom + border-top + border-button

note: The margin doesn't affect the size of the box, but it affects other content interacting around the box.

You can control how the size of the box it calculated with box-sizing.
The box-sizing CSS property sets how the total width and height of an element is calculated.


box-sizing: content-box | border-box

See full example below for a better understanding.

See the Pen
Example css model box
by Jose Mendez (@jomendez)
on CodePen.

From the MDN:

Box model content area.

The content area, bounded by the content edge, contains the "real" content of the element, such as text, an image, or a video player. Its dimensions are the content width (or content-box width) and the content height (or content-box height). It often has a background color or background image.

If the box-sizing property is set to content-box (default) and if the element is a block element, the content area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties.

Box model padding area.

The padding area, bounded by the padding edge, extends the content area to include the element's padding. Its dimensions are the padding-box width and the padding-box height.

The thickness of the padding is determined by the padding-top, padding-right, padding-bottom, padding-left, and shorthand padding properties.

Box model border area.

The border area, bounded by the border edge, extends the padding area to include the element's borders. Its dimensions are the border-box width and the border-box height.

The thickness of the borders are determined by the border-width and shorthand border properties. If the box-sizing property is set to border-box, the border area's size can be explicitly defined with the width, min-width, max-width, height, min-height, and max-height properties. When there is a background (background-color or background-image) set on a box, it extends to the outer edge of the border (i.e. extends underneath the border in z-ordering). This default behavior can be altered with the background-clip css property.

Box model margin area.

The margin area, bounded by the margin edge, extends the border area to include an empty area used to separate the element from its neighbors. Its dimensions are the margin-box width and the margin-box height.
he size of the margin area is determined by the margin-top, margin-right, margin-bottom, margin-left, and shorthand margin properties. When margin collapsing occurs, the margin area is not clearly defined since margins are shared between boxes.

What if these values are not declared?

If margin, padding or borders are undeclared, they are either zero or the browser's default value.

See the box model with your own eyes.

You can visualize the box model in your page by opening the chrome developer tool and inspect the body of your page, add temporarely the following code:

* {
border: 1px solid red !important;

visualizing the css box model

Simplistic CRUD ionic 5 firestore TODO app example

Simplistic CRUD ionic 5 firestore TODO app example

This is a very simplistic CRUD (Create, Read, Update, Delete) Created with ionic 5 and firestore (database).

You can download the source code here.

I used this design as inspiration:

The idea here is to illustrate how to create a simple CRUD with firestore.

 Simplistic CRUD ionic 5 firestore TODO app example


My advice is that you install nvm (to manage your node versions), here is tutorial step by step.

After you install nvm run the following commands:

nvm install 12

If everything went well you'll have installed node 12.0.0 .

Now you'll need to install ionic cli:

npm install -g @ionic/cli

Now is time to download the project and install it's dependencies.

git clone
cd ionic-5-crud-todo-with-firestore
npm install

Next step it to create a config file that will contain your firebase config keys here:


If you are on bash you can use the following command:

touch src/app/config/firebase.ts

Assuming that you are familiar with firebase and already have an account, paste your configuration info into the firebase.ts file, it should looks something like this (This is just and example), If you are not familiar with firebase or doesn't have an account, I'll provide more information on how to do it bellow.

Example of configuration:

export const firebaseConfig = {
  apiKey: "AIzaSwERfdilPYtcNDfvFR6x944EowerdfghfSDFsfg",
  authDomain: "",
  databaseURL: "",
  projectId: "crud-456657",
  storageBucket: "",
  messagingSenderId: "10130122343423",
  appId: "1:1013012342277:web:sd9f8sd8fs8dfs89df89s",
  measurementId: "G-3FGJ34GFGJK"

How to get your firebase configuration.

Go to and login with your account or create a new one.

Click on create a web app (This is the screen that you'll see the first time you create a projects):


Or add a new project (If you have already other projects created):


Enter the name of your project, accept the terms, and finish the other two steps on the wizard:


Next you'll see something like this, from here you can grab the configuration key.


If you missed the previous screen you can always go to the cog wheel on the left side panel, and click on project settings.


Now scroll down to the Your App section and click on config radio button, and copy the code highlighted on the image bellow, and paste it on the firebase.ts file.


Create web apps with Webpack

webpack banner

A simple but powerful project to rapid prototyping and development of front-end apps, with scss (optional), pug (optional), ES7, webpack (bundlefy, uglyfy, etc). Very useful to create static websites or apps, without having to worry about setting up the environment.

You can get the source code free on Github.


  • Modern Technologies: Full support for HTML5, PUG, JavaScript (Vanilla and ES7) and CSS (Sass, scss and PostCSS).
  • Built-in Server: Local development server with live reloading.
  • Performance Tuning: CSS and JavaScript transpilation, bundling, autoprefixing, and minification.
  • Image Optimization: Optimizes images for loading speed.
  • Favicon Generation: Automatically generates all favicons for Web, Apple and Android devices from one image file.
  • Code Linting: Full support for JavaScript (ESLint) and CSS (StyleLint) linting.
  • Setup Wizard: Optionally install helpful libraries and snippets .including:
    • jQuery.
    • Google Analytics.
    • FTP deployment process.
  • Cutting Edge: Uses Webpack for processing and bundling your code.
  • Deployment: Built-in support for deployment via FTP.


  • Node.js (developed with node 12).

Installation Steps.

Clone repo:

 git clone &&
 cd simple-webpack-boilerplate &&
 rm -rf .git && git init
  1. Run npm install.
  2. Then run npm run setup to configure the app (include JQuery, etc).

In this step you'll be able to setup your google analytics, enable jquery, setup (optional) an FTP for deployments.


  1. Run npm run dev to open a browser and lunch a local web server with live-reload.
  2. Run npm run build build for production (./dist folder).
  3. Run npm run deploy to deploy your code to your FTP.

If everything went well (npm run dev)...

You browser should open a new tab and you should see something like this:


Quick example.

It is recommended to create a new page within the src folder or use the one that comes with the example page.pug to start adding your content.


Then you can go to src/js/app.js file and add the following lines:

const page = require("../page.pug");
document.querySelector('container').innerHTML = page();

The code above is going to transpile the pug file this particular case (but it can be an html file).
Then we will insert the content of the page into the container tag on the index.html.

My interactive portfolio

jose mendez portfolio

About the author

I describe myself as a passionate Front-end developer, focusing on create, test, and optimize full web apps with compelling user interfaces that runs in web browsers on any device, from desktop computer to tablets and cellphones, therefore, my principal allies are javascript, html, css, and the browser's event loop. That's why you will always find me learning and improving my skills to master those pillars and it's surrounding frameworks and technologies, such as angular, nodejs, ionic, react, etc.


Some times I find it a little bit hard to interpolate/transmit the description above to recruiters and hiring managers, just with my online presence (before any interview or conversation). That's why my intention is that they just get it by seeing and interacting with this portfolio.

Thus I decided to create a portfolio/profile/interactive resume as a complement for my actual resume and Linkedin profile, in addition to that, also for this two reasons:

  1. To challenge my skills with css animations and interaction.

  2. To create a showcase and challenge myself in a cool framework that I was recently immersing: Threejs which is used to create 3d environments, interactions, etc. on the web.

I wanted to do something different for this project, so I thought... why don't I create a 3d interactive version of myself. I did a research on the internet and I found this article, about how to create an interactive 3D character with Threejs, and I used it as a guide to create my own 3d interactive character:

About the (portfolio/profile/interactive resume)

Now, the portfolio/profile/interactive resume can be broken down into 2 main parts:

  1. The get to know the non-technical side of the person, the activities that he likes more (the 4 inner buttons) click on the buttons to know more about the author and see the interactions and animations of the character...

jose mendez portfolio inner menus

  1. The more technical part, more like a resume, showing the technical skills, places he worked, some of his recent work (games, Ionic starters, etc.), featured blog posts, certifications etc.That you can access by clicking on the outer buttons, (placed in the corners)


You can navigate to the portfolio/profile/interactive resume here:

Javascript is weird

javascript is weird

I mean, javascript could be weird for developers that are just starting with the language and mostly for developers that comes from other languages like C++ or C# for example.

There are certain areas of the language that cam blow your mind 🤯🤯
In this article we are going to see 5 examples, and keep it simple withing the ~2 min reading time.

Numeric separators

Lets take for example the following code:

const number1 = 2_0_0_0;
const number2 = 6_0_0_0;

console.log(number1 + number2);

What you think the result is going to be?

You can copy and paste the code on a browser developer console or you can play with it yourself on codepen.

The result is 8000, but why?

The thing is that the underscore (_) is a numeric separator for numeric literal. It is used to group digits to make long numbers more readable, for example:


1_234_567 <-- Therefore, it is more readable with the separator.

More info in this article.

Some weird types.

Another example is when you run the code typeof null

typeof null;
// result object

which incorrectly suggests that null is an object (it isn't, it's a primitive value).

well in this case it is not just a weird thing, it is a bug in the language that can't be corrected because it will brake other parts of the code.

There is a more deep explanation in this article.


 typeof NaN;
 // result number.

Is it weird that NaN — “not a number” is actually a number or is just me? On the other hand, NaN is not equal to itself.

console.log(NaN === NaN);
//evaluates false.


In javascript a function can self-invoke it self IIFE (Immediately Invoked Function Expression) , so you can do declaration and execution on the same statement.

(function() { console.log('hello'); })();
//display 'hello'

As far as I know this only exist in javascript. It is quite useful, can be used to avoid variable hoisting from within blocks, protect against polluting the global environment and simultaneously allow public access to methods while retaining privacy for variables defined within the function.

You can learn more on this article

Reset an array

And last but not least, the most weird way of resetting an array, you can set the length property to cero: arr.length = 0;.

const arr = [1,2,3,4,5,6];
// displays [1, 2, 3, 4, 5, 6]

arr.length = 0;
// displays []

I hope you like it, and if you know any other weird thing specific of the javascript language please feel free to share it with us. 😉