18 Jun 2017
This weekend I decided to re-visit web development by looking at Gulp and React. A friend and me did this project where we wanted to create small and shiny utility web apps with React. Most of the tools out there are not the easiest to use and visually not that appealing to put it mildly. So, we created an isomorphic/universal Express/React setup and created half a dozen of tools or so, ranging from a weather, white noise and country code lookup tool.
We hosted the solution on DigitalOcean. The site has run for a couple of years now, but occasionally crashes. Now, it’s been down now for a couple of months. Motivated by this, I’ve started to investigate the possibility of simplifying the tooling, separating the backend and frontend and migrating that site over to GitHub pages.
New Project Using Gulp with ES2015
- Create a new project by
- Install gulp v4:
npm install gulpjs/gulp.git#4.0
- Install Babel:
npm install --save-dev babel-register babel-preset-es2015
- Create a
.babelrc file, and add:
"presets": [ "es2015" ]
- Place your gulp tasks in a file named
gulpfile.babel.js, to avoid some potential issues.
You’ll now be able to define tasks using ES2015! For instance, you can use
import. In addition you can define tasks using named functions. A lot of details can be found in Gulp’s v4 branch README file.
Trying to convert gulp tasks from various ES5 samples can be challenging. They’ve changed the task execution system in Gulp v4. Previously you had to specify the order of execution by adding dependencies to the task’s method signature. For example in task,
gulp.task('build', ['clean', 'concat']), the task clean and concat have to finish before the build task can start. In Gulp v4, you instead specify the order of execution by using
gulp.series. This article explains how to specify dependencies for a Gulp v4 task well.
17 Jun 2017
Command-line interface shortcuts can be real timesavers. I use the Atom text editor frequently for projects, or changing text files. It’s fast and versatile. If you’re using Git from your command-line interface, this tip can save you some time opening Atom to the correct project directory.
Basically, if you usually navigate around your file system using command-line, having a way to open Atom to your working directory would be great. This will save you time, since you avoid having to deal with navigating in the pesky GUI file dialog.
cd into the folder you want opened in Atom, and write:
That’s all. Atom will start and have every file and subdirectory available in the left-hand-side Project view. Furthermore, you can also open a file in Atom with the same method, by replacing the dot with a path to a file. For instance
15 Jun 2017
My current Unity game is a 4 player couch game. It’s a turn based ball game, where each player tries to knock another player’s ball into a hole. Whose turn it is to control the ball is of course decided by a virtual match of rock paper scissor. The input device each player will use is therefore a game controller. Unfortunately, I only have Steam controllers, which turned out to be a bit harder to use with the Unity Editor, because the Steam controller works best within the Steam application. It is, however, possible to make them work as gamepads inside the Unity Editor.
The trick is to add Unity as a non-Steam game to your Steam library.
Use Steam Controller in Unity Editor Recipe
1. Add Unity to your Steam library
- Open Steam
- Find Games in the Menu bar.
Add a Non-Steam Game to My Library...
- A browser will appear. Here you can either scroll to find Unity in the list of programs, or browse to find Unity. On Windows, Unity is often located at
2. Configure the Steam Controller
- After you’ve added Unity to your Steam library, open
- Make sure your Steam controller is on, and connected to Steam.
- Find Unity in the library, and open it.
- Then, open
- Change the controller configuration to
Gamepad. The configuration can be found in
3. Open Unity from Steam
- Then you’re done. You are now able to use your Steam Controller as a regular joystick input device inside the Unity Editor. Just remember to open Unity from your Steam library.
14 Jun 2017
Thought I might share some practical software development tips and tricks once in a while. This can be things I’ve recently discovered and found neat, or things I use daily at work.
Today’s timesaver I actually discovered not too long ago. Something I’ve managed to miss. In Git, if you do
git add -A, Git will stage all the changes you’ve made. However, if you then want to see the changes you’ve made, you can’t simply do
git diff afterwards. This only works for unstaged files. To look at the staged diff you can do: