Category Archives: JavaScript

Setting up a JS project

I’m sure the instructions for this change all the time, but at the moment this is how I set up my latest JS repo.

To create the package.json file that will contain all the meta data for your project:

yarn init

Add a linter so that you can get into the practise of writing good JS

yarn add eslint --dev

Add webpack, which will bundle all your javascript, libraries and what you have written, into a single JavaScript file.

yarn add webpack webpack-dev-server --dev

Install babel, so that you can write in whatever JS you want, and browsers will be able to read it. E.g. you can write in ES6 and Babel will translate it for you.

yarn add babel-loader babel-core babel-preset-es2015 --dev

or

npm install --save-dev babel-preset-es2015

Then set up your .babelrc file to include that preset:

{
  "presets": ["es2015"]
}

Set up your webpack.config.js – making sure to include Babel details in it.

module.exports = {
  entry: "./src/app.js",
  output: {
    filename: "./src/index.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/, 
        loader: 'babel-loader', 
        exclude: /node_modules/ 
      }
    ]
  }
}

Finally, you probably want to ignore the node_modules folder with a .gitignore file.

Set up your HTML and JS pages
Create an index.html page and an app.js. Note that the html page shouldn’t call your
app.js file, it should call whatever is the name of your output JS file in your webpack.config.js. In this case it is ./src/index.js.

Run locally
Run your app locally using hot reloading

webpack-dev-server ./src/app.js --hot --inline

You can use your linter by running

eslint ./src/app.js

Adding React

I wanted to make this repo a React App, so I added React and ReactDom

yarn add react react-dom

Then I added the Babel preset

npm install --save-dev babel-cli babel-preset-react

And updated my .babelrc

{
  "presets": ["es2015", "react"]
}

To get started with React I referenced a ‘root’ div in my HTML and then imported React into my App.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
MyElementsGoHere
,
document.getElementById('root')
);

And this is what that repo would look like at that point  

Leave a reply

Props vs State in React

I’ve recently started learning React. The Facebook React docs are fantastic for getting started, highly recommend.

Before I went completely through the docs I was getting very confused between Props and State in React, but as I went through the Docs I learnt some things to help distinguish them:

Props

  • Passed down from parent to child
  • Both class and function components can use props
  • Props are read only, they cannot be updated

State

  • State is set up when you create a component – i.e. in a constructor.
  • Only components that are built from classes can use state, components built from functions cannot.
  • Unlike props, state can be updated
  • Reserved for interactivity – i.e. state is updated by user in put

Is it a state or a prop?  (from React Docs)

  1. Is it passed in from a parent via props? If so, it probably isn’t state.
  2. Does it remain unchanged over time? If so, it probably isn’t state.
  3. Can you compute it based on any other state or props in your component? If so, it isn’t state.

Passing information up and down the inheritance tree

You pass information down via props.

You pass information up via callback (event handlers). Read these docs on how to lift state up, i.e., pass state up from child to parent, by using callbacks

A note on initialisers:

From the React Docs

The constructor is the right place to initialize state. If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

Side note about what I’m building in React:

The project I’ve decided to work on is an evolution of my High Tea app. This was one of the first Rails apps I ever built, back in 2013. I haven’t worked much on it since then, but have kept it going and done a few tweaks just because, unlike other little apps I made, this is one that I actually still use. I keep updating it with all the new High Teas I go to.

So, I’ve decided to create a React front end to it, and develop some API endpoints for my old app, so that I can practice some React.

Leave a reply

Javascript/jQuery Debugging Tips

These are just some debugging tips that I always forget how to do, so I am writing them down here!

Testing your selectors 

In the browser console you can use jQuery to check the selectors you are using come back with the right thing! E.g.

console.log($(‘.class_name’).find(‘a’).html());

(Find what’s in the ‘a’ tag within this class or id)

What’s Coming Back in an Ajax Call?

To view what you have been sent from the server
Go to the dev tools in your browser, click on network tab, click on the relevant ajax link, then choose preview.
What is this thing?
console.log(thing.constructor.name)
Get the selected element
If you select an element in the browser, in the console you can access it with

$0
If you then call

dir($0)

It will return every attribute/property of that element.

 

More Chrome Tips

For lots more tips and tricks, check this out.

Leave a reply

JavaScript in Practice

Last week we were working on some Adwords scripts. Adwords scripts are JavaScript code you can write to customise actions or reports within your Adwords account – kind of halfway between using automated reports and the full on Google Adwords API.

In the Google Developers documentation I found heaps of examples of scripts you can use, and even better – they break the script down and explain how it works!  So, if you want to see JavaScript working in the wild (and particularly if you work in online advertising) – this will be very interesting for you.

For example, take this one – changing your ad bidding depending on the weather. Google gives you a script you can upload yourself into Adwords (although you would need a Wunderground API key – but then, it’s free so no probs). You do need to change some things in the script though, to specify the changes you want to make to the bids depending on the weather.

Apart from the awesomeness of free, pre-made, Google-approved scripts, what I love about this is that it gives me a chance to read some JavaScript which is doing things that I can actually use in my every day job. What makes it even better, for a budding programmer, is that it is a great teaching aid. Google takes you through the script step by step, teaching you how it works. It not only says what each part does, it also explains why certain functions were used.

Leave a reply