Wordpress Hierarchy is very important for theme development in wordpress. Hierarchy determines what custom template to display during specific situations. For example we can have a custom category or a custom archive page if we want to.

Here’s a hierarchy chart that shows the ranking of the hierachy wordpress template. However, to be honest I only use couple of the custom templates.

Custom page

For custom page you want to create a page-$slug.php (for example page-about.php). Then in your pages in wordpress we can select which page template we want to use for this page. I use this the most in my custom theme development.

Some of the other ones in the hierachy chart is pretty obvious like category.php is a custom template for category page, archive.php for archive page, single.php for single post page.

If you really want a specific template css for a specific category page. Then you would need to look up the chart and look at the options for category. So the ranking is category.php > $category-$id.php > category-$slug.php.

Reference

• WP hierarchy template
• WP Hierarchy Visual Reference

Recently I’ve been learning wordpress theme development, and I built my first wordpress site for my client. I want to share some of the wordpress plugins that I use.

Plugins

Custom Post Type UI

Provides easy interface to register and manage custom post type. I use this to create a custom post type when I need more than the original post type. The UI interface make it really easy to create and custom your post type.

Advanced Custom field(ACF) link

Add custom field, such as image, text, tabs to your post or page. You can add ACF to page or post. This is a great plugin and can do many CMS features with Custom Post Type UI. Wordpress has its custom field with get_post_meta API. However, it will become very messy and unscalable in the long run.

Contact form 7 link

I use contact form 7 to build custom contact form. With it’s custom field API we can design our contact form. We can also customize our form with CSS.

Yeost SEO link

Optimze your post and pages for google. It also has a preview of how your post will look in google search result. It also has recommendations for how to optimize your post for SEO.

All in One migration link

This is the easy migrate your wordpress site from one place to another. Simply export and the plugin will compress all your wordpress site into a zip file. Then you just need to go to your hosting website and install brand new wordpress. Finally install the plugin and import the compress zip file. Then you should be good togo.

Duplicator link

This is another wordpress migration plugin. I use this plugin sometimes when WP migration doesn’t work. Duplicator is a little harder to use. But it’s still not that bad.

I’ll consistently update more plugins in the future when I encounter them.

Background

Peter Lynch is an American investor and manager of Magellan Fund between1 1977 to 1990. During his period he averaged an annual return of 29.2%. In his book is describe where he gets stock ideas from everyday life and common sense. For example if you are in the auto industry, you will have more knowledge than average people in the auto industry and auto related industry (ex. steel, oil, auto-components, tires, auto-finance, and etc). Then you should look at stocks in these industries.

You will be able to see cyclicals turn around before other people, or spot opportunies that average people won’t see.

6 Different Types of Stock

Peter lynch also group stocks into 6 different main categories.

Slow Growers

These are usually large companies that are generally older and expected to grow slightly faster than the country’s gross national output.Lynch is not against these companies, he simply says not to expect huge returns on these companies. For example KO and GE.

Stalwarts

The stalwarts are companies that don’t do a lot of shaking during recessions and economic downturns. For example, McDonalds.

Fast Growers

You don’t need to have a fast growing industry to find a fast growing company. These types of investments are Lynch’s favorites, as many new, fast growing companies can turn into 10 to 40-baggers or more (in Lynch’s experience).

Cyclicals

According to Lynch a cyclical company is one ‘whose sales and profits rise and fall in regular if not completely predicable fashion.”

Turnarounds

Companies that can barely make it to the bankruptcy lawyers before completely dying are candidates for the turnaround category.

Asset Plays

These companies have a certain known asset that will set it apart from other companies in the future. The asset might be cash or it might be an island full of oil off the coast of a country. Patience is the most important aspect for investing in these companies, because it may take a while before you see any profits come from it.

Conclusion

Overall this is a great book for beginner investors. He also mention some metrics to look at to avoid disaster. Also he focus a lot of growth. An formula he uses is (Dividend yield + Growth) / PE Ratio. Some people refers to as PEG ratio.

Reference

• StockFeel Peter Lynch(Chinese)

• 6 Stock Categories Peter Lynch Uses

Htaccess is a file that config apache server. We can make our website more secure and faster. These facilities include basic redirect functionality, for instance if a 404 file not found error occurs, or for more advanced functions such as content password protection or image hot link prevention.

You can google htaccess configuration online and you will find plenty of them. Below I’ll show my configutation.

Find your htaccess

In your cpanel dashboard, go to file directory. However, hidden files will not be displayed. In order to do that, we go to our URL and add showhidden=1. This configuration will display our htaccess.

Setup code snippets

Here are some code snippets that I use for my wordpress site.

1. This prevents anyone to visit wp-config

   1 2 3 4

   <files wp-config.php> order allow,deny deny from all </files>

2. Prevent Directory Browsing

   1 2	# disable directory browsing Options All -Indexes

3. Enable Browser Cache. Basically if the image remains unchanged, then it will be stored on client’s browser and will not need to reload. This will improve the user experience.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 2 days" </IfModule> ## EXPIRES CACHING ##

4. No Hot linking to your images. Outside can not link to your images. This will reduce exccess traffic.

   1 2 3 4 5

   RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourwebsite.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?yourotherwebsite.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://i.imgur.com/g7ptdBB.png [NC,R,L]

References

• WordPress Htaccess Tips And Tricks
• htaccess guide

React-Router is a routing library for react js. This is important if you want to build single page application.

The reason that you want routing to be on the frontend is mainly for user experience. It reduce the loading time because the web app has been initally loaded in the beginning.

A good example of this is the angular 4 website. (link) You will notice that the website doesn’t load. (hint: you can see the refresh bottom doesn’t change)

Front end routing has pros and cons. The pros are great for user experience so that the web app performs like native apps. The cons are that your web app is not SEO friendly. Some SEO crawler does not read javasript well.

How to use it

1. Create a App.js(some use route.js)

2. import router related components & our Components

   1 2 3 4 5 6 7 8 9 10 11 12 13

   // import router related components import { BrowserRouter as Router, Route, Switch, } from 'react-router-dom' // import our components import Nav from 'containers/Nav/Nav' import MovieList from 'containers/MovieList/MovieList' import MovieShow from 'containers/MovieShow/MovieShow' import NotFound from 'components/NotFound/NotFound'; import Footer from 'components/Footer/Footer';

3. Set up our routes

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   class App extends Component { render() { return ( <Router> <div> <Nav /> <Switch> <Route exact path="/" component={MovieList}/> <Route path="/movie/:id" component={MovieShow}/> <Route component={NotFound}/> </Switch> <Footer /> </div> </Router> ); } }

4. import to our index.js

   1 2 3 4 5 6 7 8 9

   import App from './App'; ... ReactDOM.render( <Provider store={store}> <App /> </Provider>, document.getElementById('root') );

** Some important notes

• We link our routes with the component that it refers to. For example the route “/movie/:id” is link to the MovieShow component.

• exact means that the path must be exactly or it will load anything with “/“

• is unique in that it renders a route exclusively. There’s more desciption on react router api. Link

References

• Sample Code from my netflix-clone app
• A simple react router v4 tutorial
• Beginner’s Guide to React Router
• React Router Offical Doc

You want to use dev tool because it’s great for debugging. It will track your state and action at all times. First, you want to install Chrome Redux Dev tool. Chrome Link

Setup

Then you want to setup your dev tool in your app. So we can view it only in develop mode not in production.

Here’s my setup for redux dev tool. Since I have middleware, I have to set it up a little differently. For different setup you can view it here. Link

1
2
3
4
5

//index.js
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, /* preloadedState, */ composeEnhancers(
    applyMiddleware(promise)
));

How to use it.

When you dispatch an action, you can check out the process in the dev tool. You can track action and state. With this tool you can properly see if the state has changed.

Tip # 1 How to use local storage with Redux Store.

Here’s another tip, I want to share. Here’s how to setup localstorage with redux.

1
2
3
4
5
6
7

//index.js
const persistedState = localStorage.getItem(' _username_recipes') ? JSON.parse(localStorage.getItem(' _username_recipes')) : {}

const store = createStore(reducer, persistedState);
store.subscribe(()=>{
  localStorage.setItem(' _username_recipes', JSON.stringify(store.getState()))
})

Links

• Redux with local storage
• [Redux Dev tool Doc](https://github.com/zalmoxisus/redux-devtools-extension
• My Netflix app with redux dev tool

Background

First we must separate our react component into two different types, and they are container and components. Containers are components that interacts with redux. They handle the data and state management. Sometimes they are refer to as “smart component”. Components are sometimes refer to as “dumb components”. They only deal with markup and styles. They receive props from containers and display the data.

Setup

I’m going to show you the following steps with my recipe app. You can view demo here or view source code here.Recipebox Github

1. First we must install redux-react

1

npm install redux react

1. Next we connect our redux with react in our index.js (where we do all the exporting)

1
2
3
4
5
6
7
8
9
10
11
12
13

//index.js
import { createStore } from 'redux';
import reducer from './reducers';
import { Provider } from 'react-redux';
...
const store = createStore(reducer);
...
ReactDOM.render(
  <Provider store={store}>
  <App />
  </Provider>,
  document.getElementById('root')
);

1. Now we go to our container which is App.js and import the following modules and we connect mapStateToProps and mapDispatchToProps to our App.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

// App.js
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as RecipeActions from '../actions/index';
...
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(RecipeActions, dispatch)
})

const mapStateToProps = (state) => {
  return {
    recipes: state.recipes
  }
};
...
connect connect(mapStateToProps, mapDispatchToProps)(App);

1. If you do the above step correctly, now we get actions and state as our props. We can test by using console.log.

1
2
3

// App.js
    // console.log(this.props)
    const {actions, recipes} = this.props;

1. Now I can pass the state and actions as props to my components (aka. dumb components). In my example I passed it to the Recipelist component and AddForm component. Then I can use the actions and states in my components.

1
2
3
4
5
6
7
8
9
10
11
12

//App.js
  <Grid>
    <Header />
    <Recipelist
      recipes={recipes}
      deleterecipe={actions.deleteRecipe}
      editrecipe={actions.editRecipe}
    />
    <AddForm
      addrecipe={actions.addRecipe}
    />
  </Grid>

Conclusion

We successfully move our state to redux. As our app gets bigger having a central store management is imperative. This is not it. With redux install we can track our actions and state via Redux Dev tool. In the next blog post, I’ll share how to use the debugging tool and some extra tips.

Links

• My FCC Recipebox Github
• My FCC Recipebox Demo
• Redux React Documentation

Redux is a global state management object for your react app. It’s basic idea comes from the flux architecture. We Need to redux because as our react app gets bigger. It’s hard to manage our state. If two child component share the same state from parents. The child must pass the state back to parent and then to the other child component. To solve this problem, we need a global store.

Now with redux, we just need to change the state in our redux and all the react component will automatically be updated.

SO How do we use it.

I’ll use one of my demo app as in example. First we need to identify an action type. It is basically a string but we defined it as a variable. We do this for best practice so we don’t make typos.

1
2

//Action Type
export const ADD_RECIPE = 'ADD_RECIPE';

Now we identify our action. Here we call our action types and our payload(data that we want to send to our state.)

1
2

// action.js
export const addRecipe = recipe => ({ type: types.ADD_RECIPE, recipe })

Next we pass the recipe to our reducer to add to our state. And our state is now updated!! yay!!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//reducer_recipes.js
const initialState = [
  {name: 'Sushi', ingredients: ['3 tablespoons rice vinegar', '4 sheets nori (dry seaweed)', '1/2 cucumber, sliced into thin strips']},
  ...
];

export default function(state = initialState, action){
  switch (action.type) {
    case ADD_RECIPE:
      return [
        ...state
        ,
        {
        name: action.recipe.name,
        ingredients: action.recipe.ingredients
        }
      ]
    default:
      return state
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// reducers/index.js
// Now we export our reducers.
const rootReducer = combineReducers({
  recipes
});

export default rootReducer;
//index.js
const store = createStore(reducer);
ReactDOM.render(
  <Provider store={store}>
  <App />
  </Provider>,
  document.getElementById('root')
);

Here’s a diagram on how redux works. I also attach two examples with demo site that uses redux.

This is it for redux. You can connect redux with jquery for plain javascript. Next I’ll talk about how to connect redux to our react component in the next blog post.

Links

• My Netflix redux example
• My FCC Recipebox example

Background

I started learning React after I finished my freecodecamp FCC. It seems like the obvious choice for multiple reasons. It’s the biggest frontend framework. It has the most jobs available. It is backed by facebook, so it won’t go away any time soon.

I soon realize to learn react, I must learn webpack, babel, es6, blah blah blah. I found out I’m not the only one that who this problem. Luckily, facebook came out with create-react-app, so I don’t have to deal with configuration. (I feature I’ll learn the configuration later)

I’m going to share with you the few must knows about react.

Must knows

Props

Props are information that are passed between components. It is how components communicate. Because of this we can split our webpage into many components, and have one main component(which we call container) to get all the data. Then we can passdown the data to the following props.

In the above example, there is a user component and we can pass props from the parents compoent to the User component(user, desc, and src). Then we can reuse the User component and the User component is completely independent. Note props can also be functions.

State

State is an object that manages the information and on this component. State can store information, the status of the component. For example if we want a component to show or hode such as modal.

1
2
3
4
5
6
7
8
9
10
11
12
13

// state is used to store state of component
this.state = {
  modal: false
}
toggle = () => {
    this.setState({
        modal: !modal,
    });
}
...
// modal = true，isOpen
<Modal isOpen={this.state.modal}>
</Modal>

1
2
3
4
5
6
7
8
9

// state can be used to store data.
state = {
    modal: false,
    album: AlbumJson,
    cart: [],
}
...
<Button color="primary" onClick={this.toggle}>Cart({this.state.cart.length})</Button>

Another debugging technique is that I usually type console.log(‘state’, this.state) between return and render to track the state for debugging purpose.

Component life cycle

component life cycle is useful when we want to execute a function when the function state has changed. For example, if want to perform an ajax call before component mounted, we can use the componentWillMount() life cycle and then we can store the data in the state.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import React, { Component } from 'react';

export default class Home extends Component {

  componentWillMount(){
    // execute api here
  }

  render() {
    return (
      <div id="pageHome">
        hi this is home page
      </div>
    );
  }
}

Links

• Medium React Maker
• Facebook React Documentation

Recently I been ask to implement i18n into our company’s web app. The library we use is Vue-i18n. I’ll share with you how to implement this library with your app.

Instruction

i18n setup

• Install the package

1

npm install vue-i18n --save

• Create lang folder to store your json file and Vue-i18n setup

1
2
3
4
5
6
7
8
9
10
11

// Folder Structure
src
│
└───lang
    │   lang.js
    │
    └───subfolder1
        │   en.json
        │   cn.json
        │   tw.json
        │   es.json

• Create a message and locale variable
• locale variable stores the current locale that you wish to display
• messages varaibles stores all the language package (en.json, cn.json)
• Store messages and locale in your VueI18n instance

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Vue.use(VueI18n)

const locale = 'cn'

const messages = {
    cn: cn,
    tw: tw,
    en: en,
    es: es,
}

const i18n = new VueI18n({
    /** 默认值 */
    locale,
    messages
})

export default i18n

Vuex Setup

• In our main.js (where we handle all our imports), we want to export our Vue instance as a variable

1
2
3
4
5
6
7

// main.js
  export const app = new Vue({
    el: '#app',
    store,
    i18n,
    render: h => h(App)
  })

• Now we can import our Vue instance as app variable and use it in our vuex to access our i18n to change locale

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// mutation.js
import {app} from '../main'
...
export const mutations = {
  [types.SET_LANG] (state, payload) {
    app.$i18n.locale = payload
  }
}

export const actions = {
  setLang({commit}, payload) {
    commit(types.SET_LANG, payload)
  }
}

• In our Vue component, we can map our vuex action.
• Finally, all we need to do is to connect our directive with :click directive

1

<button @click="setLang('cn')">cn</button>

1
2
3
4
5

methods: {
  setLang: function(lang){
    this.$store.dispatch('setLang', lang)
  }
}

Debug Technique

• Set vue instance and vuex store as window variable, so we can ccess your i18n in your chrome

1
2
3

//main.js
window['vue'] = app
window.store = store

Edit 2017.10.07
How to use lazy loading (or dynamic locale ) in vue i18n.
You want use lazy loading becuase you don’t want to load all the language pack in the initial load. It will make your bundle size bigger and slow down your app.

Here’s how you use it in your app.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

async setLangNew({commit}, payload){
  if (payload in app.$i18n.messages) {
    commit(types.SET_LANG, payload)
  } else {
    try {
      // you can use fetch or import which ever you want.
      // Just make sure your webpack support import syntax
      // const res = await axios.get(`./src/lang/${payload}.json`)
      const res = await import(`./src/lang/locale/${payload}.json`)
      app.$i18n.setLocaleMessage(payload, res.data)
      commit(types.SET_LANG, payload)
    }
    catch(e) {
      console.log(e)
    }
  }
}

Recommendations

If you are interested in learning Vue or Advanced Javascript, I strongly recommend these 2 courses.👊

🏷 Vue 2 The Complete Guide: http://bit.ly/udemyvue

🏷 Modern JavaScript From The Beginning: http://bit.ly/modernjavascript

👍USE THE BOTTOM LINK TO GET ADDIONIONAL DISCOUNT ON YOUR COURSES👍
http://bit.ly/udemy10tw
http://bit.ly/udemy10limited

Links

• Source Code
• Vue i18n Library

Introduction

Algorithem is a step by step process to how to solve a program. Algorithm is important because it can influence the speed and efficency of our program. As our program size grow or our users grow, we don’t want slow functions affect our user experience.

Here a sneak peak of some algorithm methods that I’ll go over in further blog series.

• Binary Search
• Fibonacci & Memoized Fibonacci
• Merge Sort & bubble sort
• Caesar Cipher
• Sieve of Eratosthenes

Big O

Lastly I want to talk about Big O notation (or Big O for short). Big O notation is used to classify algorithms according to how their running time or space requirements grow as the input size grows. (source, Wiki). Basically Big O will tell us how scalable a function is?

There are 4 types of Big O and here are some examples

Big O - O (1) - Constant Runtime

1
2
3
4
5
6
7
8
9

// Big O - O (1) - Constant Runtime
function log(array) {
  console.log(array[0])
  console.log(array[1])
}

log ([1,2,3,4])
log ([1,2,3,4,5,6,7,8])

The above example is a constant run time example or sometimes refer as O(1). This means as input size increases on X-axis, the time it takes to run never changes. (Refer to chart Above)

Big O - O (n) - Linear Runtime

1
2
3
4
5
6
7
8
9
10

// Big O - O (n) - Linear Runtime
function logAll(array) {
  for (var i = 0, i < array.length; i++) {
    console.log(array[i])
  }
}

logAll ([1,2,3,4])
logAll ([1,2,3,4,5,6,7,8])

The above example is a linear runtime example or sometimes refer as O(n). This means as input size increases on X-axis, the time will take to run increase linearly.(Refer to chart Above)

Big O - O (n^2) - Exponential Runtime

1
2
3
4
5
6
7
8
9
10
11
12
13

// Big O - O (n^2) - Exponential Runtime
function addAndLog(array) {
  for (var i = 0, i < array.length; i++) {
    for (var j = 0, j < array.length; j++){
      console.log(array[i] + array[j])
    }
  }
}

addAndLog (['A','B','C']) // 9 pairs output
addAndLog (['A','B','C', 'D']) // 16 pairs output
addAndLog (['A','B','C', 'D', 'E']) // 25 pairs output

The above example is a exponential runtime example or sometimes refer as O(n^2). This means as input size increases on X-axis, the time will take to run increase exponentially.(Refer to chart Above)

We want to stay away from these functions because they are slow and inefficent. They will slow down your application when user grows.

Big O - O (log n) - Logarithmic Runtime

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// Big O - O (log n) - Logarithmic Runtime
function binarySearch(array, key) {
  var low = 0;
  var high = array.lengh - 1;
  var mid;
  var element;

  while (low <= high) {
    mid = Math.floor((low + high)/ 2, 10)
    element = array[mid]
    if (element < key) {
      low = mid + 1;
    } else if (element > key) {
      high = mid - 1;
    } else {
      return mid;
    }
  }
  return -1
}

Binary search takes a list (array) and a key. The array must be sorted in some way (numerically or alphabetically). This method is fast and as the input size grow our execution time will only grow logarithmicly(refer to chart above).

An example of this is looking for a word in dictionary. If we want to look for the word, “House”, we flip to the middle of the dictionary and see how close we are to letter “H”, and we ignore the 2nd half of the dictionary. We keep repeating this process until we are at letter “H”.

A search through 4,000 elements will take 12 operations, and 8000 elements will take 13 operations.

Resources

• Wiki Algorithm
• Wiki Big O Notation
• Big O CheatSheet

Introduction

Bootstrap has been my favorite css framework because of it’s large amount of components and its well css structure. Bootstrap is currently the largest CSS framework which means it also has the most resources. Bootstrap has definately help me with my css workflow. I usually let bootstrap take care of the major layouts and RWD. After the layout is confirmed, I’ll dig in to each individual block and customize each block with my own css.

Recently Bootstrap 4 beta has been released. It was in alpha for A LONG TIME (~ 1 year). Since beta is released, I decided to use it with my current project. Here are some of my thoughts on this.

Big Upgrades

flexbox

The biggest upgrade in V4 is that it uses flexbox. Flexbox is one of newer features in css. It was released in 2016 and is quickly popularized. It’s purpose is to replace float for CSS layout. Flexbox offers an easier and powerful way of designing css layout. We are given more tools and flexability in bootstrap layouts especially in navigation, grid, and spacing.

We can customize that a specific margin to applied only in a certain width. For example, by applying .mt-4 .mt-sm-0, we can margin-top 4rem but when window width is larger than small we get margin-top zero. Before to accomplish this in bootstrap 3, we need to write custom media queries.

The downside of this major upgrade is that bootstrap 4 is not supported by ie8 or ie9. So if you still need to support those browsers, you can use bootstrap 3.

Others

• Other upgrades such as 2 more grid size xl and xs.
• Bootstrap uses sass instead of less. To customize bootstrap we can just edit the variable.scss
• We get more utilities in many components, grid, typography.
• Bootstrap also drop glyicons to reduce size.

Links

• Bootstrap v3-v4 migration

File Structure

The file structure that I take is to have a _assets, _exports, and design folder. The _assets folder is where I keep my dummy text, logo, images and etc. _exports is where I exports my design and images. Lastly the design folder is where I have my sketch file (usually only one).

Style Sheet

Style sheet is an artboard where I keep my color palettes and font. The style sheet I use is call One Day Frontend Design Framework. (Link below) However, I did not use the full feature of the stylesheet.
After settleing your stylesheet, set up your text styles and layer styles. This will save you time when you are in design phase.

WireFrame

I use some simple shapes to draw out my block wireframes basially to see what a basic section will look like and to have the elements in my design.

Design

Finally into design, the hardest part. After doing the preworks, you should have a rough idea of what the final design will look like. First I would put all the things I know together in place, like the text and images. Keep doing this for the other sections. Don’t worry about the little details. There’s no such thing as perfect design. We want to get the first draft out ASAP.

After first draft is out. I’ll look through each indivual section to see if there’s any thing I can improve. Remember every design has to align with your website’s purpose. Then I’ll ask random to see the design and get feedback.

Prototype

Lastly, this is optional but you can build a prototype with marvel or invision. Prototype provides a more realistic user experience for users.

Links

• One Day Frontend Design Framework

Semantic HTML is a feature in HTML. It exist back in HTML such as form, img, and tables. In HTML5, more semantic tags are added, for example header, footer, and nav. There are many benefits to for this. This added more structure to our html page. In the following, I’ll discuss the benefits of semantic HTML.

Benefits

1. SEO
   Better structure allows search engines to identify which block is more important.

2. Download Speed

3. Maintainence.
   Better structure means better maintainence.

4. Better for disability browsing

How to implement

1. Replace divs with section, header, nav, footer or others.

2. Use the above diagram to decide which html tag to use.

Links

• HTML5 Semantics

Image optimization is very important for your web app. It accounts for more than 50% of the loading time. 47% of users expect a webpage to load in under 2 seconds, and 40% will abandon a page that takes more than 3 seconds to load.

You can also optimize your image tag and image name for better SEO performance. Here’s a infograph of how loading time affects user experience.

Tips

1. Change name to a descriptive name rather than a generic name such as DCMIMAGE10.jpg
2. Use alt tag for better SEO
3. Use the right dimension (simple tip 2x the mobile display dimension to get retina result)

4. know which file type to use png vs jpg
   

5. Use compression tools such as http://optimizilla.com/ and ImageOptim link to remove unnesscessary meta tags and also compress image size for web without losing much quality.

PRO TIP: As a general rule of thumb, I like my product photos to be a maximum 80-150 KB, and for large homepage hero images to be a maximum of 250-350 KB

Links

• Resize for retina result
• Google Developer - Image Optimization

Centering your div blocks both horizontally and vertically is a tricky tasky. Today I’m going to show you four ways to do it. So let’s do eeetttt!

1. Transform Technique

Make the parent div position relative so the child position will based on parent’s position. Next to move it top and left 50% and transform back 50% in both x & y-axis.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Transform
.hero-image1 {
  background: #3498db;
  height: 100vh;
  position: relative;
}

.hero-text1 {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  color: white;
  transform: translate(-50%, -50%);
}

2. FlexBox

Flexbox is the easiest way to center a div. It’s a newer feature in css, the unforunately thing is some old browsers don’t support it. (sign…) Basically you set display to flex and both align-items and justify-content to center.

1
2
3
4
5
6
7
8
9
10
11
12
13

.hero-image2 {
  background: #34495e;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-text2 {
  text-align: center;
  color: white;
}

3. Table Cell

Table cell method is an old school way of doing this. This method was popular when web layout is organized by table, which is still popular with email templates.

Basically you set parent div with display table and set child display to table-cell. Also set the child with text-align center and vertical align middle.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

//Table Cell
.hero-image3 {
  background: #e74c3c;
  height: 100vh;
  width: 100%;
  display: table;
}

.hero-text3 {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  color: white;
}

4. Fixed width element

This technique will only work with fixed width element. This will also work with older browsers.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.parent {
  position: relative;
}

.child {
  width: 300px;
  height: 100px;
  padding: 20px;

  position: absolute;
  top: 50%;
  left: 50%;

  margin: -70px 0 0 -170px;
}

Links

• Codepen Demo
• CSS Tricks

Parallax is an effect where the background layer or image in this case, is moved at a different speed than the front layer while scrolling.

Parallax design is a popular technique in modern webdesign. There are two approaches to this effect: CSS and JS. Both are really easy. So here we go

CSS Approach

For your background image, you need to make the background-attachment property fixed. This will set whether the background image is fixed or scrolls with the rest of the page.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<style>
.parallax {
    /* The image used */
    background-image: url("img_parallax.jpg");

    /* Set a specific height */
    height: 500px;

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
</style>

<!-- Container element -->
<div class="parallax"></div>

Here’s a demo of how the site will work. My Github Demo

JS Approach

In your html section add data-type and data-speed attribute. The speed will adjust the speed of how the background move.

Markup

1
2
3
4
5
6
7

<section id="home" data-type="background" data-speed="10">
<article>I am absolute positioned</article>
</section>

<section id="about" data-type="background" data-speed="10">
<article>Simple Parallax Scroll</article>
</section>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

#home {
  background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
}

#home article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}

#about {
  background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
  height: 1000px;
  margin: 0 auto;
  width: 100%;
  max-width: 1920px;
  position: relative;
  -webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
  box-shadow: 0 0 50px rgba(0,0,0,0.8);
}

#about article {
  height: 458px;
  position: absolute;
  text-align: center;
  top: 150px;
  width: 100%;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(document).ready(function(){
    $('section[data-type="background"]').each(function(){
        var $bgobj = $(this); // assigning the object

        $(window).scroll(function() {
            var yPos = -($window.scrollTop() / $bgobj.data('speed'));

            // Put together our final background position
            var coords = '50% '+ yPos + 'px';

            // Move the background
            $bgobj.css({ backgroundPosition: coords });
        });
    });
});

The concept of this code is illusrated in this image.

Links

• My Github Repo
• Tutsplus Parallax Technique
• w3school background attachmend
• w3school parallax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

npm -v
npm init # create package.json & add -y is yes to all requirements
npm install # install all packages in package.json
npm install <package> # install in package but not written in package.json
npm install <package> --save-dev # install in modules only in develop dependencies
npm install <package>  --save # install in modules in dependencies
npm install <package>@<version> # install specific version of package

npm cache clean # clear npm cache

npm ls -g # list all modules installed globally
npm ls #  list all modules locally
npm list --depth 0 # list all npm modules with depth 0

npm show <package> # show versions, maintainers
npm outdated # show all outdated modules

npm prune #removes "extraneous" packages. Extraneous packages are packages that are not listed on the parent package's dependencies list.

Range Syntax

1. caret (^)

Allows changes that do not modify the left-most non-zero digit in the [major, minor, patch] tuple. In other words, this allows patch and minor updates for versions 1.0.0 and above, patch updates for versions 0.X >=0.1.0, and no updates for versions 0.0.X.

“express”: “^4.15.3” means it can upgrade to version 4.99.0. Basically anything before 5.0.0

Update a package

1. First find out your outdated packages by typing npm outdated

2. Then update the package or packages that you want manually as npm update –save package_name

Links

• npm ranges
• npm prune

This is a question that I been struggle for a long time. However, I final figure it out. There are two ways that I recommend doing this using dotenv package or setting it manually.

dotenv package

Here’s my example repo: dotenv repo

1. First install dotenv

1

npm install dotenv --save-dev

Create .env file

1

ABC_KEY = 1234qwer

1
2
3

// in server/index.js
require('dotenv').config()
console.log(process.env.ABC_KEY)

Remember in your .gitignore file to ignore .env file.

Set process.env variable in terminal

Second way is to directly set your variable in your terminal and access it in your node.

1
2
3
4

# type this in your terminal
export ABC_KEY=1234qwer # no space and no quotation
# for window replace export for set
unset ABC_KEY # unset variable

Now you can access the variables in your node app by using process.env.ABC_KEY

Links

• DevCoffee tutorial
• dotenv repo

Squah Multiple Commits

1. Let’s say we have multiple commits and we want to squash them. We use rebase to the first commit. The rebase screen will come up.

   1 2 3

   b1 # commit 1 b2 # commit 2 git rebase -i 49687a0a646954afdf3f4dae1f914ea793341ea2 (Commit 1 version number)

2. After rebase command we enter editor interface where we can edit the commits. Basically you need to choose one to squash and choose pick for the rest of the commits.

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

   pick 033beb4 b1 pick d426a8a b2 # Rebase 49687a0..d426a8a onto 49687a0 # # Commands: # p, pick = use commit # r, reword = use commit, but edit the commit message # e, edit = use commit, but stop for amending # s, squash = use commit, but meld into previous commit # f, fixup = like "squash", but discard this commit's log message # x, exec = run command (the rest of the line) using shell # # If you remove a line here THAT COMMIT WILL BE LOST. # However, if you remove everything, the rebase will be aborted. #

3. Next you need to enter a new commit message

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

   b # This is a combination of 2 commits. # The first commit's message is: # b1 # # This is the 2nd commit message: # # b2 # # Please enter the commit message for your changes. Lines starting # with '#' will be ignored, and an empty message aborts the commit. # Not currently on any branch. # Changes to be committed: # (use "git reset HEAD <file>..." to unstage) # # modified: a.txt #

4. You can check git log for update

Edit last Comment

1. You use the amend command. Ammend command go back to the previous commit and edit it.

2. Another way is revert, which creates a new commit (does not interfere previous commit) but reverts status to previous commit.

   1 2	git commit --amend -m "New commit message" git revert <version number>

Git Reset

Here are some commands when you want to return to previous commit or situation before merge.

1
2
3
4
5
6

# return to previous commit
git reset HEAD^ --hard
# return to previous commit or cancel merge when enter conflict
git reset --hard
# after merge return to before merge
git reset --hard ORIG_HEAD

Links

• Zerodie Github
• gogojimmy