Category Archives: RSS Feed

Animating More Elements Along SVG Paths with JavaScript (Part 2)

By Luis Manuel

Elastic Slider

In a previous tutorial we introduced a new library that allows us to animate elements along a SVG path called PathSlider. In addition, we put into practice the use of this library and developed a simple slider, with a minimum of effort. In this tutorial we will see two more examples that illustrate the potentialities of our library and the SVG paths in general.

For example, we have developed another slider using a closed SVG path as in the previous tutorial, but with some extra elastic effects:

We also wanted to do something a little more original, and we created a full screen and responsive slider of images, using this time an open SVG path, generated automatically with Javascript:

Images Slider

As you can see, the first of these sliders is very similar to the one in the previous tutorial, we have only added some elastic effects to give it a special touch. So in this tutorial we will focus on developing the slider of images. However, the code of this first slider can also be found in the Github repository.

So, let’s start developing this interesting images slider!

HTML Structure

The HTML code for our images slider will be even simpler than the one used for the other two sliders. Let’s see:

<!-- Path Slider Container -->
<div class="path-slider">
    <!-- Slider items -->
    <a href="#" class="path-slider__item path-slider__item--1"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--2"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--3"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--4"><div class="item__circle"></div></a>
    <a href="#" class="path-slider__item path-slider__item--5"><div class="item__circle"></div></a>

As you can see, this time we have not defined the SVG path in our HTML code. That is because we will generate it from the Javascript code, something that will allow us greater flexibility, adapting the SVG path to the dimensions of the screen.

Adding Styles

As this time our slider will be full screen, we must add some necessary styles:

// This slider will be full screen
// The `background-image` will be set using Javascript
.path-slider {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;

// We also need this extra element (generated with Javascript) to fade the images smoothly
.path-slider__background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;

And the images corresponding to each of the elements of the slider have been defined in this way:

// Defining images

.path-slider__item--1 .item__circle {
  background-image: url("../images/img1.jpg");

// ... More `background-image` definitions for each item

Please note that we have not emphasized the styles needed for the elements to be centered on the SVG path, and the other general styles used. If you have any doubts about it you can take a look at the previous tutorial, and of course you can also see the full code in the Github repository.

So let’s see how to bring our slider to life!

Get it working with Javascript

The first thing we will do is insert the SVG path element that we need to move the slider items through it:

// Creating SVG and path elements and insert to DOM

var svgNS = '';
var svgEl = document.createElementNS(svgNS, 'svg');

var pathEl = document.createElementNS(svgNS, 'path');
// The `getSinPath` function return the `path` in String format
pathEl.setAttribute('d', getSinPath());
pathEl.setAttribute('class', 'path-slider__path');


As you may have noticed, we have generated the path using the getSinPath function, which is responsible for returning the path in String format taking into account the dimensions of the screen and some other parameters. We have decoupled this function in a separate file for a better organization, and you can see its implementation, as well as a brief description of the available options, in the Github repository.

Now let’s see the code for getting the images of the slider items that we have defined in the CSS code, and also the code needed to smoothly switch the images every time we select an item:

// Changing `background-image`
// Firstly, saving the computed `background` of each item, as these are defined in CSS
// When item is selected, the `background` is set accordingly

var items = document.querySelectorAll('.path-slider__item');
var images = [];
for (var j = 0; j < items.length; j++) {

var imgAnimation;
var lastIndex;
var setImage = function (index) {
    if (imgAnimation) {
        imgAnimation.pause();['background-image'] = images[lastIndex];['opacity'] = 0;
    lastIndex = index;['background-image'] = images[index];
    imgAnimation = anime({
        targets: sliderContainerBackground,
        opacity: 1,
        easing: 'linear'

Then we need to add the extra element needed to fade the images smoothly, and also set the image for the initial current item (the first one):

var sliderContainer = document.querySelector('.path-slider');
var sliderContainerBackground = document.createElement('div');
sliderContainerBackground.setAttribute('class', 'path-slider__background');

And having all the above ready, we can initialize our slider with this simple piece of code:

// Initializing the slider

var options = {
    startLength: 'center',
    paddingSeparation: 100,
    easing: 'easeOutCubic',
    begin: function (params) {
        // Item get selected, then set the `background` accordingly
        if (params.selected) {

var slider = new PathSlider(pathEl, '.path-slider__item', options);

As we explained in the previous tutorial, by default the PathSlider library adds event listeners for click events, so we don’t have to worry about that. All we have to do is to switch the images properly, using the setImage function.

Finally, to get the path adapting to the dimensions of the screen, thus achieving a responsive behavior, we just have to regenerate the SVG path and update items position on resize event:

// Regenerate the SVG `path` and update items position on `resize` event (responsive behavior)

window.addEventListener('resize', function() {
    pathEl.setAttribute('d', getSinPath());

This way, our slider will looks great in every screen size 🙂


And we are done! We have put into practice once again the possibilities offered by the SVG paths to develop attractive and functional components.

Please go ahead and check the live demos

Play with the code on CodePen

We really hope you have enjoyed the tutorial and that it has been useful!


Creating Code Snippets in Visual Studio Code

By James Quick

Snippets 'for'

Click here to watch video on YouTube.

If you’ve been using Visual Studio Code for any amount of time, you are probably already familiar with snippets. If you’re not familiar with them, according to the Visual Studio Code docs, snippets are “templates that make it easier to enter repeating code patterns”. That’s kind of vague to me, so what does that really mean? It’s actually simple. Snippets are shortcuts to write the code that you’re tired of writing.

Snippets are shortcuts to write the code that you’re tired of writing

For example, how often in Javascript do we write console statements, for loops, etc. How often in HTML do we write the boilerplate code for an HTML5 document? In CSS, how often do we write the same code to define a style simply changing the selector. All of these things are incredibly repetitive and take away from our productivity. So, snippets give you a shortcut (think a handful of letters) to complete a section of code.

Understand that snippets are context aware, meaning if you are working in a Javascript file, Javascript snippets show up. If you’re working in HTMl, HTML snippets will show up. In this article, we are going to focus on creating snippets in Visual Studio Code for Javascript. We are going to take a look at existing snippets and then dive into how to create and customize them.

Existing Snippets in Visual Studio Code

Visual Studio Code has lots of snippets already built in. The simplest example comes in the form of Emmet. Emmet is a plugin baked into VS Code that provides TONS of snippets for HTML and CSS. If you haven’t already yet, go find a video on YouTube and check it out. It will seriously save you SO MUCH time!

Probably the most notable example of this is the snippet to create HTML5 boilerplate code. To get this boilerplate code, all you have to do it type “!” and then tab. That’s it!! That’s the beauty of snippets.

Visual Studio Code also has lots of other built in snippets.

If you’re curious to see what snippets you can find, open a Javascript file, type a letter, and see what pops up.

Note that snippets are the ones with black boxes to the left

Here’s what happens when I type “for”. Notice all of the lines with the black boxes to the left? Those are snippets!

Let’s Create our First Snippet

Visual Studio Code keeps its snippets in a json file associated with a given language. In this example, we will work with the “javascript.json” file, which, you guessed it, keeps our snippets for Javascript.

To find this file (on a Mac) go to your menu and click Code -> Preferences -> User Snippets.

Create code snippet

You will then be prompted to choose a language. Choose Javascript.

Choose Language

This is the file where we can add snippets. A snippet is basically just an object with different properties. Here are the ones we care about.

name – self-explanatory
prefix – what we want the user to type to trigger the snippet
body – the content of the snippet (single string or array of strings for multiline snippets)
description – self-explanatory

Let’s start with a snippet for a one-liner console.log() statement. Here’s what it looks like.

"Console log": {
    "prefix": "clog",
    "body": "console.log('$1');",
    "description": "Log output to console"

“Console log” is the key/identifier/name for our object and the prefix and description are straight forward. Let’s talk about the body. Notice that it’s just a one line string, and the thing that probably jumps out at you is the “$1”. This is called a tab stop.

Tabstops allow the user to tab between multiple locaitons in the snippet.

When a user activates the snippet, the cursor will automatically jump to the first tab stop. Now, save your javascript.json file, open up a test javascript file, type clog, and then tab. Your cursor should automatically jump inbetween the quotes as defined by the tab.

Testing clog snippet

Multiple Tabstops and Multiline Snippets

If there are more than one tabstops, the cursor will jump to the subsequent tabstob with every tab pressed. If you define the same tabstop multiple times, the text for each will be updated at the same time. This allows you to give a variable a name that is reused throughout the snippet. You can also define the final cursor position (where you want the user’s cursor when they finish) by using $0. Here’s a good example, creating a for loop through an array.

A couple things to note first…

  1. Instead of using $1 ($ and a number) we are using $ and a piece of text which acts as the placeholder text for you to replace.
  2. This is a multiline snippet. For multiline snippets, the body becomes an array with each line of the snippet becoming a string in that array.
  3. To format our code appropriately, we’ve added a “t” to lines that need to be indented.
"For ": {
    "prefix": "forarr",
    "body": [
        "for (let ${index} = 0; ${index} < ${array}.length; ${index}++) {",
        "tconst ${element} = ${array}[${index}];",
    "description": "For Loop"

Copy this into your snippets file then try it out!



Another useful feature is providing choices to the user. This means that instead of them having to type out something manually, they could choose from a list of relevant choices. Let’s take a look back at our ‘clog’ snippet from earlier. What if we wanted to give the user the flexibility to write a console.error() or console.warning() instead of just console.log(). This is a great opportunity for choices. Here’s what that would look like.

"Console Choice": {
    "prefix": "conc",
    "body": "console.${1|log,warning,error|}('$2');",
    "description": "Log output to console"

conc snippet

Activate Snippet from Keybinding

One of the coolest features of Visual Studio Code is the ability to customize it. One of the ways to do so is to override the default keybindings. Because of this, we could actually trigger one of our snippets from a keybinding instead of typging out the prefix to the snippet.

To edit your keybindings, go to the menu bar and click Code -> Preferences -> Keyboard Shortcuts.

Visual Studio Code keybindings

This gives you a semi interactive file to work with, but we can add overrides manually by clicking the keybindings.json link at the top of this file. Once you do, you’ll get a side by side view of the default keybindings.json file and the one where you can override bindings.

Visual Studio Code keybinding manual override

Similar to how we define snippets, keybinding overrides are as simple as adding an object to the json file with three key properties.

  • Key – the key combination
  • Command – what we want to happen
  • When – when should this keybinding work (when the user is editing text? working in the built in terminal? )

To trigger a snippet, we need one additional property called args. Args is an object itself with two properties, langId and name.

  • langId – the language identifier (think JAVASCRIPT.json)
  • name – the name of the snippet we want to trigger

So here’s what it look like to trigger a console log using the combination “cmd+c l”, which means pressing command and ‘c’ keys togethers followed by the ‘l’ key.

    "key": "cmd+c l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "langId": "javascript",
        "name": "Print to console"

Save the keybindings.json file and try it out!

Wrap Up

From here, you’ve got all the basics. Choose the language that you’re working with an edit its json file. Each snippet you want to add is a key value pair with the key being the name of the snippet and the value being the actual snippet itself. The snippet itself has three main properties: prefix, body, and description. TabStops give you complete control over tabbing through the snippet and replacing placeholder text with the real deal.

Take a look at the Visual Studio Code Extension Marketplace where you can find lots of predefined templates so tht you don’t have to write them all yourself.



Continuous Development Without Hitting Ctrl + R with webpack 4

By Chris Nwamba


A while ago, when building a lot of front end applications, once a change is made, the we browser needs to be reloaded every time. At that time, this didn’t seem like a problem at all. As the saying goes, necessity is the mother of inventions. How about we not having to manually reload our browser when we make changes to our applications? In comes webpcak!!!!.

webpack is a static module bundler that has come to stay in the development of our modern javascript applications. This only makes sense though because having to manually refresh the browser every time a single change is made to the application can get really tiring.

How Does webpack Work?

webpack take all the modules in your application ( HTML, CSS , JS, Fonts ) and continuously builds a dependency graph of your application then puts them into one or more bundles. Now the only little caveat is it’s configuration. Most people shy away from webpack because they have a conception that the configuring webpack for your application is too much of a herculean task that they’ll rather not use it. In comes webpack 4 – code name – with very little configuration needed to get you up to speed!

What we’ll build

In this article, we are going to build a simple weather forecasting application and use webpack during development to show how to easily and seamlessly include webpack 4 into your development process.


Before we get to building, we need to make sure we have the following dependencies met on our local machines :

  • Node installed on your machine,
  • Node Package Manager (NPM) installed on your machine

To confirm your installation, run the following command on your terminal :

node --version
npm --version

If you get version numbers as results then it means you’re well underway to getting started. If you don’t, head over real quick to their downloads page and then comeback to follow through.

Create your application

In your terminal, we first create a new folder,

mkdir weather-forecaster

Then run npm init

cd weather-forecaster
npm init

Now, the next thing we need to do is to add webpack to our project and to do this, we run the command :

npm install webpack webpack-cli -D

💡 : webpack is currently on version 4.1.1 at the time of this article and we will be talking about configurations with regards to this version

Package.json after installing webpack

Creating Necessary Files

Create a directory called src which will contain our necessary source files

mkdir src
cd src 
touch index.js 

In our index.js , we have the following:

alert("It's going to rain today! Take your umbrella");

Using webpack with Zero Configurations

In previous versions of webpack, we would need to create a webpack.config.js file to specify at least the :
entry point – Where the dependency graph should start from
output – where the resulting bundle should be stored and what name to give to it

With webpack 4, wait for it …. you can get started with ZERO CONFIGURATIONS!!!

webpack automatically assumes the **./src/index.js** for the entry point of our project and will automatically spit the result to **./dist/main.js** . Of course, this can be altered to fit our custom needs.

Specifying webpack Mode
In our package.json, we add the following :

      "scripts" : {
        // ...
        "dev": "webpack --mode development",
        "build": "webpack --mode production"

In the above, we are adding run scripts and specifying if we are running in production/development mode.

Now, when we run npm run dev , we get the result below :

Running NPM In development mode

The result is also stored in the ./dist/main.js.

NOTICE how we never set any configurations….

Using Result Bundle in Application

Now, we create an index.html file in the root directory of our application and have the following:

    <!DOCTYPE html>
    <html lang="en">
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Weather Forecaster</title>
        <h1>Taking webpack for a Spin ....</h1>
        <script src="./dist/main.js"></script>

In our index file above, we include the built bundle created by webpack ( see line 11 ). Now when we run it, we get the following :

webpack Bundle Works

Adding the webpack Dev Server
At this point, we need to run npm run dev every single time for webpack to re-bundle our assets. This is not the most ideal way to do things. In comes the webpack-dev-server . The webpack development sever will launch a browser window and refresh your window whenever a change to a file is made.

To install the development server, run the following command :

npm install webpack-dev-server --save-dev

The webpack development server is not intended for production mode

Once this is done, we need to edit our package.json again to have the following

      "scripts" : {
        // ...
        "dev": "webpack-dev-server --mode development --open",
        "build": "webpack --mode production"

Now, once this is done and we hit npm run dev , we get the following :

webpack Dev Server at work

Now that the webpack dev Server is running, any time a change is made to our scripts, our modules are re-bundled again and served on the browser page without us performing any actions

💡 : All this happened with ZERO CONFIGURATIONS!!!

Deeper Look into webpack Configurations

Now that we have gotten the basics of how webpack works, let’s take a deeper look at the webpack 4 configurations and how we’ll use them in our weather-forecaster application.

First, we need to create our webpack.config.js as this will hold all our webpack configurations.

touch webpack.config.js

If the scripts for your application is such that they need to be compiled into more than one bundle, then we need to specify our entry points but before we continue, we need to talk about two other webpack concepts :

  • Plugins
  • Loaders

Configuring Plugins
Earlier on, we manually created our index.html file ourselves. This is not the only way to get our index.html file. We can make use of the html-webpack-plugin . We will not look at how to dynamically generate a our index.html

  • Firstly, we need to delete the manually created index.html

  • Install the **html-webpack-plugin**

To install the webpack-plugin, we run the following command in our terminal :

npm install html-webpack-plugin
  • Create **index.html** template

In our src/ folder, we create an index.html template file which our final page will be built from.

    <!DOCTYPE html>
        <meta charset="UTF-8">
            <%= htmlWebpackPlugin.options.title %>
        <h1>Weather in your location is 19 degrees and its raining</h1>

Notice how the placeholders are specified in the template

  • Edit our **webpack.config.js** to include the plugin

Now, we need to then use the plugin. To do this, we tweak our webpack.config.js :

    var HtmlWebpackPlugin = require("html-webpack-plugin");
    module.exports = {
      plugins: [
        new HtmlWebpackPlugin({
          hash: true,
          title : 'Weather Forecaster',
          template : './src/index.html'

We specify where the template is and also enter what title we intend to give our page.

Configuring Loaders
By default, webpack only loads javascript files. To allow webpack load other resources like css, ts, scss , we are going to make use of Loaders. We will be using the css-loader that helps collect CSS from all raw referenced css files and the style-loader will then place the output obtained from the css-loader and put it inside the tags in the index.html file.

  • Installing the css-loader and style-loader

To install the loaders, we run the command

npm install css-loader style-loader--save-dev
  • Create .css file

In our src/ folder of the app, we create our app.css

touch app.css

Now, our app.css can look like this

    h1 {
      color: green;
      padding-left : 50px;
  • Using **css-loader** and **style-loader** in webpack config

Now, our webpack.config.js should look like this :

    module.exports = {
      module: {
        rules: [

What the above is saying is that files with name matching the regular expression should use the css-loader and then the style-loader on the result of the css-loader

webpack applies loaders from right-to-left , hence [‘style-loader’,’css-loader’]

  • Include the style as a dependency in our **index.js**

If we do not include the style as a dependency in our index.js , the app.css file will not be bundled by webpack because we haven’t included the file at all.

We include the file by updating our index.js to look like this :

import './app.css';

alert("It's going to rain today! Take your umbrella");

Running application

Earlier on, we specified some run scripts in our package.json folder. Now we just need to run the command depending on what we need to do.

In this case we are just testing out the application, so we run :

npm run dev

This starts our application for us with live reloads enabled.

Continuous Development with webpack 4


In this article, we looked at the basic steps involved in getting started with webpack 4 using zero configurations. We also looked at how to enable automatic and continuous live reloads using the webpack dev server. There’s still so much more that can be done w webpack but you’re well underway to suing it confidently in your applications. Here’s a link to the full github repository if you’re interested.


Using JSX with Vue and Why You Should Care

By Samuel Oloruntoba

Vue.js has an easy API and several options for defining HTML templates in our components.

We can use the tag option, define a template property on our root component instance, or use Single-File components.

The options above are awesome and work perfectly, but, there comes a time in the lifecycle of your application where they either feel clunky, over-engineered or very inflexible.

So, why would we want to JSX instead of any of the other template definitions?

  • JSX is easy to read.

    is subjectively better than this.$createElement('div', {}, [...])

  • Seriously, It’s just JavaScript.
  • Vue has support for JSX.
  • JSX makes custom Vue components easier to import and manage.

A quick intro

Let me give you an example of why JSX is good.

We want to build a component that can either be a normal single-line text input or a multiline input (textarea). Our template declaration might look like this.

   <textarea v-if="multiline" v-model="content" :name="name" :placeholder="placeholder" :aria-invalid="false">
   <input v-else v-model="content" :name="name" :placeholder="placeholder" :aria-invalid="false">

As you can see from the snippet above, we’ll quickly run into a few problems like duplicate code and many more. Imagine having to support a variety of properties on the input. This little snippet above will grow and be a nightmare to maintain.

To fix this, we need to go low-level with Vue. We need to get closer to Vue’s internal API to fix this mess.

The render() method

Every component we create in Vue has a render method. This is where Vue chooses to render the component. Even if we don’t define this method, Vue will do it for us.

This means that when we define HTML templates in Vue — Vue’s template compiler compiles it to a createElement function that takes a couple parameters and returns the result from the render function.

To fix the code in the previous section, we remove the template property or the template tag and define a render() method on the component. If the render method is defined on a component, Vue will ignore the template definition.

 export default {
     name: 'TextField',
     render (createElement) {
         const tag = this.multiline ? 'textarea' : 'input'

        return createElement(tag, {
             class: {
                 'text-input': true,
                 'is-disabled': false
             attrs: {
                 placeholder: this.placeholder,
                 'aria-invalid': false

The above code does a few things:

  1. The render method takes a createElement helper from Vue.
  2. We programmatically define our tag.
  3. Then we create the tag and pass its attributes, classes etc as an object. There are quite a few options we can pass to createElement.
  4. We return the newly created element for rendering.

Note: Every template we define for a Vue component will be converted into a render method that returns a createElement function. It’s because of this reason the render method will take precedence over a template definition.

Take this example:

   <p>Only you can stop forest fires</p>

The template compiler will convert the HTML above into:

 render (createElement) {
     return createElement(
           'Only you can stop forest fires'

Okay! now you might ask this question, “Isn’t this bad for readability?” The answer is yes. Once you define a component with many levels of elements nesting or has several sibling elements — we run into a new problem. We just sacrificed readability. Like they say, “we’ve moved from the frying pan to fire.”

Cue JSX. This is where we’ll have JSX bring back the readability we lost.

What is JSX

If you already know about JSX, feel free to skip to the next section where I’ll show you how to use JSX in Vue.

JSX is a term coined by Facebook’s engineering team.

JSX is an XML-like syntax extension to JavaScript without any defined semantics.

JSX is NOT intended to be implemented by engines or browsers. Instead, we’ll use transpilers like Babel to convert JSX to regular JavaScript.

 // this line below is an example of JSX
 const heading = <h1>Welcome to Scotch</h1>;

Basically, JSX lets us use an HTML-like syntax in JavaScript.

Unfortunately, this article assumes you already know JSX, so teaching JSX is beyond the scope of this article. I’ll still point you in the right direction. JSX is very easy to grok and can be done in a couple minutes.

Use these links to learn The basics of JSX, Learn JSX in-depth, finally, if you really want to know about the specification that is JSX, visit its official website.

Configure Vue to use JSX

If you use Vue-cli greater or equal to version 3.0 you are in luck as JSX is supported.

If you are using an older version of Vue-cli that doesn’t support JSX, you can add it by installing babel-preset-vue-app and add it to your .babelrc file.

To install:

 # Using npm
 npm install --save-dev babel-preset-vue-app

# Using yarn
 yarn add --dev babel-preset-vue-app

In you .babelrc file, all you have to do is:

     "presets": ["vue-app"]

There, we can now use JSX in our component’s render function.

Vue’s JSX syntax gotchas

There are few gotchas to using JSX in Vue.

First, you can no longer use the : and @ shortcuts for binding and listening to events. They are invalid JSX syntax and your code won’t compile.

To listen for events in JSX, we need the “on” prefix. For example, use onClick for click events.

 render (createElement) {
     return (
         <button onClick={this.handleClick}></button>

To modify events, use:

 render (createElement) {
     return (
         <button onClick:prevent={this.handleClick}></button>

To bind a variable, instead of : use:

 render (createElement) {
     return (
         <button content={this.generatedText}></button>

To set HTML string as the content of an element, instead of v-html use:

 render (createElement) {
     return (
         <button domPropsInnerHTML={htmlContent}></button>

We can also spread a large object.

 render (createElement) {
     return (
         <button {...this.largeProps}></button>

Using JSX in render

Going back to our initial “TextField” component. Now that we have JSX enabled in our Vue app, we can now do this.

 render (createElement) {
     const inputAttributes = {
         class: 'input-field has-outline', // class definition
         onClick: this.handleClick // event handler
         backdrop: false // custom prop
     const inputMarkup = this.multiline
         ? <textarea {...inputAttributes}></textarea>
         : <input {...inputAttributes}/>

    return inputMarkup

Importing Vue JSX Components

Another benefit to using JSX in Vue is that we no longer have to register every component we need. We just import and use.

import {Button} from '../components'

export default {
     render (createElement) {
         return <Button primary={true}>Edit</Button>

How to make JSX work with TypeScript

TypeScript is used as a mechanism that adds type-checking to JavaScript. You can read more.

To add JSX support to TypeScript all we need to do is modify our tsconfig.json.

To enable JSX in TypeScript, first save the file as a .tsx file and modify your tsconfig.json to include:

   "compilerOptions": {
     "jsx": "preserve",

Setting the jsx option to “preserve” means that TypeScript should not process the JSX. Doing this lets Babel take control of everything JSX and TypeScript stick to types as it does not yet support Vue JSX. You can learn more.

Then create a jsx.d.ts file in your project and add the TypeScript JSX declarations for Vue.

import Vue, {VNode} from 'vue'

declare global {
   namespace JSX {
     interface Element extends VNode {}
     interface ElementClass extends Vue {}
     interface ElementAttributesProperty {
       $props: {}
     interface IntrinsicElements {
 [elemName: string]: any

Make sure that TypeScript can load the declaration file. Or, you can add autoloading for it in tsconfig.json via:

   "compilerOptions": {
     "typesRoot": ["./node_modules/@types", "./types"]


That’s it for today. Enjoy having some or all of your Vue.js templates in JSX.

And, please no complaints about JSX breaking SOC (separation of concerns), I can’t take another one of those arguments. If you prefer using the createElement function with objects by all means enjoy!!

Let me know your thoughts and suggestions in the comments.



Code Challenge #6: Build A Pomodoro Timer

By William Imoh

Last week on the code challenge #5 we looked at building a movie player using a provided API. Here is the solution to the challenge built with Vue.js.

This week we’ll be building a Pomodoro timer. A Pomodoro timer is a time management tool which breaks down task completion time into intervals of about 25 minutes with a short break between each interval.

The Challenge

In this challenge, we are required to create a countdown timer which starts from 25 minutes all the way down to zero. This timer should have controls to pause, play and reset the time. The end product should look like this.

The goal is to be able to control the timer using the buttons provided for play, pause and reset. This challenge can be completed using any tool, framework or technology.


Feel free to use any tool to complete this challenge. However, here are the requirements of the challenge.

  1. The Play button starts the timer.
  2. The Pause button stops the timer.
  3. The Reset button returns the timer to its original state of 25 minutes.

Goals for this Challenge

  • Understand timing functions and implement them.
  • Manipulate DOM elements effectively.


Notice the text on top of the timer that changes with each button click? To make the Pomodoro timer more inspiring and fun, try to change the text on top of the timer at the click of specific buttons and also at various set times while the timer is running.


Check out the base code provided for the challenge containing HTML and CSS.

Fork this base codepen as your starting point


  • Post your solutions in the comment section of this post.
  • Post your solutions on twitter with the hashtag #scotchchallenge
  • Join the Slack group to interact with others and also post your solution on the Slack channel #code challenge.


The solution to this challenge will be released on Sunday. Happy Coding!