Babel Transpilation

13 Sep 2017

Follow these steps to transpile ES6+ JavaScript code to ES5 in order to improve browser compatibility.

  1. Use npm init to create a package.json file in the root directory and give it a name and description.

  2. Install the Babel command line npm package and add it to the devDependencies property: npm install babel-cli -D

  3. Install the Babel preset environment npm package: npm install babel-preset-env -D

  4. Add a .babelrc file to the project folder: touch .babelrc

  5. In .babelrc, preset your local project’s config to "env". 
     {
   "presets": ["env"]
 }

  6. In package.json, add the script "build": "babel src -d lib". Don’t forget to add a comma after the “test” script.

  7. Use npm run build to transpile the code in src and write it to lib.

To check browser compatibility use caniuse.com.

Flexbox

04 Sep 2017

Flexbox is a great way to make a site responsive. The size, spacing and positioning of the boxes can be adjusted according to the screen size.

This is tutorial by CSS-Tricks gives a good overview of how to implement this CSS class and its attributes.

Adding the property display: flex to the parent element makes it a flex container. All underlying children are automatically flex items.

Properties of the flex container

  • flex-direction
    • row (default): left to right.
    • row-reverse: right to left.
    • column: top to bottom.
    • column-reverse: bottom to top.
  • flex-wrap
    • wrap
    • wrap-reverse
    • nowrap (default)
  • flex-flow: combines both the flex-direction and flex-wrap in a single property.
  • justify-content: horizontal alignment of the elements.
    • flex-start: to the left.
    • flex-end: to the right.
    • center: in the center.
    • space-between: evenly distributed with first element at the start and last element at the end.
    • space-around: evenly distributed with equal space around them.
    • space-evenly: spacing between any two elements (and the space to the edges) is equal.
  • align-items: vertical alignment of the elements.
    • flex-start: at the top.
    • flex-end: at the bottom.
    • center: centered.
    • baseline: baseline of the elements are aligned.
    • stretch: stretch vertically to fill the container.
  • align-content: vertical alignment when there are multiple rows.
    • flex-start: to the start of the container.
    • flex-end: to the end of the container.
    • center: to the center of the container.
    • space-between: evenly distributed.
    • space-around: evenly distributed with equal space around each line.
    • stretch (default): stretch to take up the remaining space.

Properties of the flex item

  • order: change the order of the items.
  • flex-grow: allows item to grow by setting a relative number.
  • flex-shrink: allows item to shrink.
  • flex-basis: default size of an item before the remaining space is distributed. Can be set in percentage, rem, etc. If it is set to auto it looks at the width and height property of the item.
  • flex: combines flex-grow, flex-shrink and flex-basis. Default is 0 1 auto.
  • align-self: vertically align an individual item.

Examples

Following the CSS-Tricks tutorial I created some examples using the flexbox class.

See the Pen Flexbox Examples by Miguel Tavares (@buzzmeekz) on CodePen.

Also check out this cool game where you have to move frogs around a screen to help you learn the flexbox basics.

Bootstrap Grid System

01 Sep 2017

Make a site responsive using the Bootstrap grid system:

  1. Make a container: <div class="container"></div>.

  2. Add a row: <div class="row"></div>.

  3. Define the column space for each box. There are 12 columns in each row.

This means you can make a row with 4 boxes like this:

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="card">
                <h3>Box 1</h3>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="card">
                <h3>Box 2</h3>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="card">
                <h3>Box 3</h3>
            </div>
        </div>
        <div class="col-xs-12 col-sm-6 col-md-3">
            <div class="card">
                <h3>Box 4</h3>
            </div>
        </div>
    </div>
</div>

The classes to set the column width are:

  • col-xs-12: on an extra small screen device (phone) the column width will be equal to the row width, i.e. all boxes will be below one another in a single column.

  • col-sm-6: on a small device (tablet) the column width will be 6, so there are 2 columns with 2 boxes each.

  • col-md-3: on a medium device (laptop or desktop) the width will be 3, showing the boxes on a single row.

You can test this here: https://codepen.io/buzzmeekz/full/mMvqey/

Jekyll

31 Aug 2017

Ok, I have to admit it took me some time to set up this site using Jekyll. The installation was actually pretty straightforward. But then you’re stuck with a generic blog template and have no idea how to customize it.

Installing a new theme

Being used to WordPress I mistakenly thought that I just would have to import some theme zip file, adjust some settings in the config file and commit the changes. Would that it were so simple!

Some themes can be installed using a ruby gem. I tried doing this with several themes on this list, but with little success. Another option that was suggested in Stack Overflow involved making a branch of the existing git repository, pulling in the new theme and then merging the changes. This seems like the correct way of handling a theme change, but a bit complex for someone just getting started with Git.

In the end I just found a theme I liked, cloned it to a local directory and started customising it.

Because I had cloned the repo, it was still linked to the original remote of the theme developer. To publish it with GitHub Pages I needed to link it to my own remote. I’m sure there’s a better way to do this, but I just made a new directory copied all the files into it and initiated a new git repo. Then I added my own remote to publish the site.

Why did I choose Jekyll to build my site?

The main reason I initially became interested in Jekyll is that it allows you to build a minimalist static site. Even though this proved to be harder than I thought, it was a good learning process.

For an aspiring developer Jekyll is actually the perfect way to build a site. It forces you to use essential developer tools like the command line, Git and a (markdown) text editor.

Google Home Page

30 Aug 2017

As part of the Odin Project curriculum I had to replicate the Google home page using html and css. You can see the result here.

The most difficult part was figuring out how to add the top and bottom navigation bars. There are many different ways to do this, for example using the html5 <nav> tag. I just used a regular unordered list <ul> with <li> items. Then I removed all the styling in css.

This video was really helpful: