• Web Development

    How to set up base frameworks with npm, Webpack and React 2019

    This is a guide of the simple React configuration I have used for my current React projects.

    1. Start off by creating your project directory
    2. mkdir webpack-react-tutorial && cd $_
    3. Initialize NPM project
    4. npm init -y
    5. Install React
    6. npm install react react-dom
    7. Configuring Webpack 4
    8. npm init -y
    9. Configuring Webpack 4
    10. npm install --save-dev webpack webpack-dev-server webpack-cli
    11. Add the following script to package.json
    12. "script": { "start": "webpack-dev-server --mode development",},
    13. Create an index.html file in your root with the following codes
    14. <!DOCTYPE html><html> <head> <title>My base framework setup with npm, Webpack and React</title> </head> <body> <div id="root"></div> <script src="./dist/bundle.js"></script> </body></html>
      
    15. Create a new directory named src and create index.js file in the new dir
    16. mkdir src && cd src && touch index.js
      And then, write a React component in the index.js
      import React from "react";
      import ReactDOM from "react-dom";
      class Welcome extends React.Component {
          render() {
              return (
                  <h1>
                      Hello World from React boilerplate
              </h1>);
          }
      }
      ReactDOM.render(, document.getElementById("root"));
      
    17. Install Babel
    18. npm install --save-dev @babel/core @babel/preset
    19. Create a webpack config file
    20. module.exports = {
          entry: './src/index.js',
          output: {
              path: __dirname + '/dist', publicPath: '/',
              filename: 'bundle.js'
          },
          devServer: { contentBase: './dist', },
      
          module: {
              rules: [{
                  test: /\.(js|jsx)$/,
                  exclude: /node_modules/,
                  use: ['babel-loader']
              }]
          },
      };
    21. Create a file named .babelrc
    22. touch .babelrc
      And then, write the following codes
      {
          "presets": [
              "@babel/preset-env",
              "@babel/preset-react"
          ]
      }
      Now run, npm run start!
      npm run start

    References

    • How to set up & deploy your React app from scratch using Webpack and Babel by Nathan Sebhastian [LINK]
    • Tutorial: How to set up React, webpack, and Babel 7 from scratch (2019)[LINK]
    • React JS Setup using Npm Babel and Webpack By frugalis_blog [LINK]

  • Web Developer Interview Preparation

    CSS Variables

    Definition

    Create Variables

    We can make custom properties with values that can be used in other declarations. These property names are prefixed with –, and used in the var( ) function. 

    1. Define a root rule
    2. Put your variables inside of the root
    (At the top of your CSS file)
    :root {
    	--first-color: hsl(175, 49%, 42%);
    }

    Different Types of Variables

    1. A regular variable has two dashes 
      • --second-color: #ffff8c;
    2. A custom variable has @ sign
      • @custom-media --min (width <= 600px);

    Using Variables

    // Using regular variables
    #header {
    	background-color: var(--first-color);
    	color: var(--second-color);
    }
    // Using custom variables
    @media (--min){
    	display: block;
    }

    Create and Use a Custom Selector

    ...
    	@custom-selector :--headings h1, h2, h3, h4, h5, h6;
    }
    :--headings {
    	margin: 0 0 1rem;
    	color: var(--first-color);
    }

    Create a more complicated variable

    --my-button: {
    	display: inline-block;
    	padding: 6px;
    	background-color: var(--first-color);
    	...
    }
    .nav .my-button {
    	@apply --my-button;
    	@media (--min) {
    		display: block;
    	}
    }

    Note

    This is one of the most useful features in CSS, but still new and experimental technology. Browser compatibility is pretty good, except for IE. You need the post CSS plug-in to make CSS variables work in IE. 

    Reference

    Do you know how to use CSS variables? [LINK]
    Custom properties: CSS variables [LINK]

  • Web Developer Interview Preparation

    calc( ) function

    Definition

    calc( ) is a feature that lets you perform mathematical calculations when you specifying CSS property values.

    Example
    width: calc(100% - 50px);

    Features

    1. Mix and match the units: you can subtract a pixel size from the percentage size 
    2. Nest calc( ): you can nest calculations inside other calculations, and use it with CSS variables
    3. Good browser compatibility: even down to IE 9
    Example of nested calc()
    .foo {
    	--widthA: 100px;
    	--widthB: calc(var(--widthA) / 2);
    	--widthC: calc(var(--widthB) / 2);
    	width: var(--widthC);

    Note

    The + and – operators must be surrounded by whitespace.
    * and / operators do not require whitespace, but adding it for consistency is recommended.

    Reference

    How do you use calc() in CSS? [LINK]

    calc() MDN web docs [LINK]

    ]]>
  • Web Developer Interview Preparation

    Promises

    Definition Promises are JavaScript objects that describe what is supposed to happen when an asynchronous operation takes place. They provide certain guarantees and structure to help callbacks and make a time-based operation easy to use. If you want to know about callback function, check out my previous post. [LINK] There are some problems with callbacks because results of callbacks rely on a condition of the network. Therefore, callbacks often suffer from clarity and a lack of guarantees. So, we need promises to guarantee an execution. Here are important features for promises, which are resolve( ), reject( ), and then statement. With resolve( ), we specify what will happen when all our requests will work. And reject( ), we specify what we want to execute when our request doesn’t work. then statement is a special method that will execute when the promise is work correctly. Let’s take a look at the following example.

    var isHeeyaMotivated = true;
    // Promise
    var isHeeyaAchievetheGoal = new Promise {
    function (resolve, reject) {
        if (isHeeyaMotivated) {
            var goal = {
                task: 'Graphicdesign',
                topic: 'mainscreen'
        };
        resolve(goal);
        } else {
            var reason = new Error('heeya is not happy.');
        reject(reason);
        }
      }
    );
    // call the promise
    var askHeeya = function() {
        isHeeyaAhievetheGoal.
            .then(function (fulfilled) {
                console.log(fulfilled);
            })
            .catch(function (error) {
                console.log(error.message);
            });
    }
    askHeeya();
    So, this is how promises work. When we want to do something after something happens, we create a promise. Once the promise resolves, it is going to do whatever we specify in the then statement. We can also make a chain of promises.
    
    var reportHunya = function(goal) {
        return new Promise(
            function (resolve, reject) {
                var message = 'Hi Hunya, I have achieved ' + goal.task + ' for' + goal.topic
                resolve(message);
            }
       );
    };
    If something happens to the promise and it does not execute, the chain promise will not be executed. It is always better to be specific to what happens when the promise is fulfilled, and what happens if it is rejected. Reference What is the relationship between promises and callbacks? Mastering Web developer Interview Code – Ray Villalobos, Lynda.com [LINK] ]]>