Code Stuff.

What is webpack dev server?

Webpack dev server is a live reloading server for webpack.

What is webpack dev middleware?

It’s a simple wrapper middleware for webpack. It serves the files emitted from webpack over a connect server.

It has a few advantages over bundling it as files:

• No files are written to disk, it handles the files in memory
• If files changed in watch mode, the middleware no longer serves the old bundle, but delays requests until the compiling has finished. You don’t have to wait before refreshing the page after a file modification.

What is webpack hot middleware?

Webpack hot reloading using only webpack-dev-middleware. This allows you to add hot reloading into an existing server without webpack-dev-server.

Using webpack-dev-server as a middleware

Web pack provides an express middleware that you can plug into your app to serve up your fronted assets via web pack-dev-server rather than express.static or express/serve-static.
To do this you’ll need to install webpack-dev-middleware and webpack-hot-middleware

1

npm i webpack-dev-middleware webpack-hot-middleware

First off you need to make a webpack.dev.config file. In your config, add webpack/hot/dev-server and webpack-hot-middleware/client to your entry point as well as your js or coffee script frontend entry point.

1
2
3
4
5

entry:    [
    'webpack/hot/dev-server'
    'webpack-hot-middleware/client'
    "#{__dirname}/../client/index.coffee"
]

Make your output path ‘/‘ because remember, you’re building your app into memory now rather than a build folder.

1
2
3
4
5

output: { 
    path: '/'
    publicPath: 'http://localhost:3000/scripts/'
    filename: 'bundle.js'
}

Add in whatever loaders and plugins you need and target ‘web’ … you can see my config here

BuzzFeed Says:

iPhone users are clicking their new WhatsApp button more than Twitter’s. This was enough for us to build a WhatsApp sharing button generator, so you can easily create your own.

They have a built a button generator, for you to generate a button for your site and you can just drop a script tag into your site and link with it.

WhatsApp-Sharing.com

What if you want more control over your button?

Selenium test

Should do something when an outer div, with an inner div placed in the middle in front, is clicked.

How to usually do this?

1
2
3

driver.findElement(webdriver.By.className('outer')).then(function(element) {
     element.click();
}

Uncaught UnknownError: unknown error: Element is not clickable at point (170, 90).
Other element would receive the click: <div class="midde"></div>

I recently discovered a cool feature in JSFiddle which changed the way I use it.

Until now, I’ve been hopping on to JSFiddle to test out little bits of code and logging out to the console.

If you’re like me, you’ll be familiar with having Chrome Dev Tools open to view your console logs.

I decided to write down a list of every day commands that I use in the the Bash command line in Linux. This is by no means a definitive list and it will grow as I remember or come across commands that make my life easier

A few days ago this link (http://www.connoratherton.com/walkway) popped up on Reddit’s /r/javascript.

I liked how it looked so I set about having a go. Turns out Connor Atherton’s library has made this super easy so I thought I’d document the steps to make your own.

First of all you want to pick an image you want to turn into a SVG line drawing.

Open it in Gimp/Pixelmator/Photoshop

DRY

Aimed at reducing the repetition of code.

“Every piece of knowledge must have a single, unambiguous, authoritative representation within a system” – The Pragmatic Programmer

The singleton pattern is a design pattern that restricts the instantiation of a class to one object. This is useful when exactly one object is needed to coordinate actions across the system. The concept is sometimes generalized to systems that operate more efficiently when only one object exists, or that restrict the instantiation to a certain number of objects. The term comes from the mathematical concept of a singleton.

When trying to maintain context, like in a setTimeout, I’ve seen lots code that resembles

var self = this;

self is then used inside the timeout to execute the code within the scope of the parent function.

Self is a reserved word in the browser which is equal to Window in most browsers and therefore should not be overwritten as it could cause confusion for someone thinking self is referring to the window object reference.

https://developer.mozilla.org/en-US/docs/Web/API/Window.self

I was asked recently by a friend of mine to come up with a list of interview questions that you can get asked during a Javascript interview. I looked by to my last interview and came up with a few topics for him to brush up on. I thought I’d write them down so others might make use of them. If you were asked anything I’ve not included, let me know in the comments section.