Transpiling

After cloning the REPL and initialising your Svelte3 project; one thing that you don't seem to get is transpiling.

When using VueCLI, for example, transpiling comes as standard.

I am running an experiment to see how to convert a Vue2 project over to Svelte3 for learning purposes, but I found that I couldn't get transpiling with Babel working easily.

Jump directly to the code

Issues

After following the tutorials/documentation for adding the rollup-plugin-babel, @babel/core, @babel/preset-env packages, and setting up everything as described; I simply found that it hadn't transpiled my bundle.js as I expected.

After some time messing around, and being new to svelte/rollup/babel, I figured out that it was in-fact transpiling some code, but not the svelte/imported module code.

Reason

By what I can tell, the reason I was not getting the expected results is because the documentation or tutorials for these Svelte/Rollup/Babel are not sufficiently up-to-date in order to get it working correctly. All the tools have recently gone through major updates. The main issues were surrounding the .babelrc and the rollup.config.js.

Resolution

I discovered a couple of steps needed to get transpiling down to ie9 working (or you may use a es2015preset instead).

1. Install the dependencies

yarn add --dev @babel/core @babel/preset-env rollup-plugin-babel  

2. Create a babel.config.js file in root

module.exports = function (api) {  
    api.cache(true);
    const presets = [[ "@babel/env", { "targets": "ie 9" } ]];
    return { presets }
}

This is based on the documentation as it appears by using the default .babelrc file, each imported module (including Svelte3) will have it's own Babel config. This is what prevents transpiling the Svelte code.

3. Add the Babel plugin to rollup.config.js

Firstly import babel;

import babel from 'rollup-plugin-babel';  

then add the babel() plugin after the svelte() plugin;

babel({  
    extensions: [ ".js", ".mjs", ".html", ".svelte" ]
})

A key part of this config, is the .mjs and .svelte values in the extensions property. Inside the Svelte3 package; a lot of the compiler is written in .mjs, and your project's Svelte code is likely written in .svelte components. Both of these are not handled by Babel by default.

Another key part is removing the exclude: 'node_modules/**' configuration. This is because we need to transpile the code that comes from the Svelte3 compiler.

Success

After these steps, your bundle.js or whatever you've called it should be completely transpiled down to the environment you've specified in the babel.config.js.

Just Code

If you just came here for the code reference; here it is;

Package.json

  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/preset-env": "^7.4.5",
    "npm-run-all": "^4.1.5",
    "rollup": "^1.10.1",
    "rollup-plugin-babel": "^4.3.2",
    "rollup-plugin-commonjs": "^9.3.4",
    "rollup-plugin-livereload": "^1.0.0",
    "rollup-plugin-node-resolve": "^5.0.0",
    "rollup-plugin-svelte": "^5.0.3",
    "rollup-plugin-terser": "^4.0.4",
    "sirv-cli": "^0.4.0",
    "svelte": "^3.0.0"
  }

rollup.config.js

import svelte from 'rollup-plugin-svelte';  
import resolve from 'rollup-plugin-node-resolve';  
import commonjs from 'rollup-plugin-commonjs';  
import babel from 'rollup-plugin-babel';  
import livereload from 'rollup-plugin-livereload';  
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {  
    input: 'src/main.js',
    output: {
        sourcemap: true,
        format: 'iife',
        name: 'app',
        file: 'public/bundle.js'
    },
    plugins: [
        svelte({
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file — better for performance
            css: css => {
                css.write('public/bundle.css');
            }
        }),

        babel({
            extensions: [ ".js", ".mjs", ".html", ".svelte" ]
        }),

        // If you have external dependencies installed from
        // npm, you'll most likely need these plugins. In
        // some cases you'll need additional configuration —
        // consult the documentation for details:
        // https://github.com/rollup/rollup-plugin-commonjs
        resolve(),
        commonjs(),

        // Watch the `public` directory and refresh the
        // browser on changes when not in production
        !production && livereload('public'),

        // If we're building for production (npm run build
        // instead of npm run dev), minify
        production && terser()

    ],
    watch: {
        clearScreen: false
    }
};

babel.config.js

module.exports = function (api) {

    api.cache(true);

    const presets = [
        [ "@babel/env", { "targets": "ie 9" } ]
    ];

    return {
        presets
    }

}

I'll show how I achieved it in jQuery, you can migrate the idea over to vanillaJS if needed, but please bear in mind this will only work in IE10+.

Saving

Let's start with saving a file.

Firstly we'll need a string of JSON to store. This is achieved simply by taking whatever text you have and parsing it as JSON which might be familiar to anyone who does AJAX transactions.

// object we want to save
var myObject = { name: "simon", surname: "goellner" };  
// convert to json string
var myJSON = JSON.stringify( myObject );  

So now we have our text to save, the idea is that we create a download link, and then trigger a click on it to force the download process.

// create a link DOM fragment
var $link = $("<a />");  
// encode any special characters in the JSON
var text = encodeURIComponent( myJSON );

// <a download="filename.txt" href='data:application/octet-stream,...'></a>
$link
  .attr( "download", "filename.txt" )
  .attr( "href", "data:application/octet-stream," + text )
  .appendTo( "body" )
  .get(0)
  .click()

That's it, super simple. How you generate the contents, and what they will be depends wholly on your project and content. The filename and extension are completely up to you and can/should be generated.

Loading

Loading is a little more complicated, but it's still a fairly simple endeavour.

The main idea is that we provide a <input /> field to load the file, use the FileReader() api to read the file contents and store it to a variable.

html

<!-- the html element we listen to -->  
<input id="fileField" type="file" />  

javascript

With the field created in HTML, we need only now to reference it and listen to a change event.

Firstly we set up references to the file <input /> field, and the FileReader API.

// get the file field
var $field = $("#fileField");  
// create a new FileReader object
var reader = new FileReader();  

Now we create a load event listener to do our work. The file contents are eventually passed to this onload event; accessible through the event.target.result property.

// when the file has finished reading,
// store it's contents to a variable (async)
reader.onload = function( ev ) {

   var contents = JSON.parse( decodeURIComponent( ev.target.result ) );
   // execute follow-up work here...

};

Then we set up a change event listener on the file input. Once the field changes we read the contents of the file selected and store them to a variable called contents.

// when it changes (ie: user selects a file)
$field.on("change", function() {

    // get the file item from the input field
    var file = this.files[0];
    // read the file as text
    reader.readAsText( file );
    // and then then load event will trigger ...

});

I hope this is helpful, please reference MDN for any advanced information, the FileReader() API is super useful and powerful!

Let's use the command line (and NPM scripts) to build lodash; but with only the methods needed by our application.

We're going to be using lodash-cli installed and accessed via npm. Using Lodash's include=... utility from the lodash custom builds page, we will build the library with only the methods used in our source files by searching through our application for references to Lodash.

Firstly, we need to set up a package.json in our app. Once we've done this, we can install the npm modules we need:

npm install lodash-cli --save-dev  

After lodash is installed, we can go ahead and start building our script. In the scripts: {} section of our package.json we need to define a new script -- let's call this "lojack".

package.json

If you only want the code, it's right here. Just swap out the folder paths accordingly.

{
  "name": "myapp",
  // ...
  "scripts": {
    "lojack": "lodash -o ./dist/lodash.js include=$( grep -roh \"_\\.[[:alpha:]]*\" ./src/js --include=*.js | sort | uniq | cut -b 3- | tr \"\n\" \",\" )"
  }
  // ...
}

Our script can now be run from the command line, or during the build process with:

npm run lojack  

Let's break it down

Now, that script might look like a mess if you're not Neo from The Matrix, or a seasoned command-line guru... so let's dissect it.

grep

Starting at the bottom, the most fundamental part of this script is grep, we will be using this to search through all the javascript files in the /src/ folder and returning any _.method type methods;

grep -roh "_\\.[[:alpha:]]*" ./src --include=*.js  

This will recursively (-r) search the ./src folder for .js files (--include=*.js). Only returning the matched characters (-o) without the filename/line (-h).

# we should then have a result like:
_.filter  
_.each  
_.filter  
_.map  
_.escape  
_.has  
_.has  
_.map  

This is great, but it's not usable yet.

sort

We don't really need to sort the result, but I like to. This method pretty much speaks for itself. We just pipe the result of grep in to sort.

# the result is now:
_.each  
_.escape  
_.filter  
_.filter  
_.has  
_.has  
_.map  
_.map  

uniq

Next we will remove all duplication of methods. lodash-cli could get confused if we supply it with multiple filters and such. So we pipe the result of sort in to uniq.

# result now looks like:
_.each  
_.escape  
_.filter  
_.has  
_.map  

cut

The next step is to pipe the output from uniq in to cut, this will allow us to remove the _. prefix which is not needed.

cut -b 3-  

The option -b 3- basically says: "Take the third byte of each line until the end of that line".

# which will give us:
each  
escape  
filter  
has  
map  

tr

Finally, we need to change those \n (new lines) in to , (commas). We use translate utility to do this;

tr "\n" ","  

Which just says: "turn any new lines in to commas".

# which will give us:
each,escape,filter,has,map  

Finally!

Now we have a result that is usable with the include= option, we just need to wrap it all up in a $() which will evaluate the commands to a string.

$( grep -roh "_\\.[[:alpha:]]*" ./src/js --include=*.js | sort | uniq | cut -b 3- | tr "\n" "," )

And then pass it to the lodash builder.

lodash -o ./dist/lodash.js include=$( grep -roh "_\\.[[:alpha:]]*" ./src/js --include=*.js | sort | uniq | cut -b 3- | tr "\n" "," )  

Now we should have two files in the ./dist/ folder which have the names: lodash.js and lodash.min.js which contain only the methods we need for our application!

Huzzah.

This command can now be run directly from the command line. All we do is tell npm to run it as shown at the top of this post. We also need to escape quote marks for .json syntax.

Note: this tutorial is based on unix systems, if you want to achieve it with windows, I suggest installing something like babun for a unix-like environment.

However, after installing it myself I had some trouble finding help on how to define the language, but eventually stumbled across it with a simple attribute:

:prismjs( language="css" ) 

    .my-class { color: red; }

It seems super simple, and it is... but it's really not documented anywhere, and caused me some headache.

If you've ever written an FAQ or long-body-format web page, you'll undoubtedly have used anchor tags for deep-linking.

Generally we use href="much-link.htm" every day for hyperlinks to other pages, but we'll also link to headings or sections of our own body when it is called for; href="#wow".

There's a small aesthetic issue when using href="#so-anchor" though, and that's to do with the way browsers handle it; they move the top of the element exactly to the top of the viewport — as demonstrated below.

You wouldn't put your header against the top of the page normally, so why do it when deep-linking?

It's also exacerbated or just unusable if we have any kind of fixed-header. So the general way people try to get around this aesthetic issue is by using javascript to smooth-scroll the element in to view and then scroll up a little bit more with a calculation.

I propose a method without any javascript, see below;

How?

We'll use pseudo-elements and pseudo-classes to apply a "padding" above the currently targetted anchor.

Firstly let's make use of the :target pseudo-class which allows us to style any element which has the same href="#" as the hash in the url. It's available from IE9 as shown on caniuse

.anchor:target {}

We then use this to append a pseudo-element to the anchor which will give us a set amount of space above the anchor:

.anchor:target:before {
    /* first we need to give it layout */
    content: "";
    display: block;

    /* then dimensions */
    height: 1em;
    margin-top: -1em;
    width: 0;
}

Now the 1em value is up to you, I find it works nice as it's always proprtional to the heading size. We also use width: 0; so that the browser doesn't draw a nasty outline around the pseudo-element when we're focussed on it. Finally margin-top: -1em; is used to remove the extra whitespace created above the heading.

such attract.

Why not go one step further and inspect the code for this blog's headings — you'll see the :target being used to paint a fancy icon and change the colour of headings. Try it out by clicking here.

Writing beautiful code is easier when it looks damn sweet!

I was at a local meetup/gathering in Hong Kong where developers and designers give short, awesome talks; @mrmrs_ was showcasing some css statistics and all through the talk I gazed at the pretty colours in his Terminal. I tried to recreate the style in for SumblimeText.

Gooey

Gooey has a lot of greens and blues, with purple accents.

Gooey Pastel

Gooey Pastel is a more subdued version of Gooey, with magenta highlights.

Download

You can get both the Sublime Text themes from ColorSublime, and you can see the source code for both at Github

For Atom you can get it from the Atom package manager site.

Loading Spinners. We've all seen them; across the web and in our favourite apps. Popping up just as you were about to buy that thing that you like, or sign in to that app which you love.

Today I'm going to show you something a little different!

Recently there was a detailed case-study on cssanimation.rocks about the loading animation from bufferapp.com. It's a great article and I highly recommend reading it!

The loader is pure #awesome — not your usual spinning circle of doom — and it's done with svg!

I challenge you!

After reading the article from cssanimation.rocks, my UX Designer colleage (@fearghal_) challenged me to do the same for our company; Lane Crawford.

Lane Crawford is a luxury fashion retail brand; it's supposed to symbolise elegance and prestige. So I wanted to create something which was refined, subtle and elegant. It should be asking you eloquently:

“Please wait one moment...”

instead of:

“oh crap, something's happening!!”

the result

I came up with this “rolling breath” animation; it incorporates the logo, and it doesn't scream at you. — I experimented with a couple of speeds and colours as you'll see below.

technicals

I am not familiar with svg at all; I have never used it except for exporting from Illustrator. It looks very powerful and there's some amazing examples on Codepen.

What I gather through my time reading articles is that svg appears to be well supported from IE10+, but it seems to have quite a few browser-quirks and difficulties associated with it when used as an image. However the power and flexibility of svg, especially in-line cannot be denied! — I had a lot of learning to do!

how

So the requirements and general premise are as follows:

• Have an svg logo
• Make sure the existing svg code is suitable/compatible
• Separate each character as a path
• Apply a css animation to each character
• Control animation with a wrapper class

logo

Luckily Lane Crawford already had an svg version of their logo; which is used in the header of the site. Unfortunately, though, it was exported from software and the code was messy. So it needed some care before I could use it.

house-keeping

Firstly I opened up the .svg file which was originally being included as a background-image (read the css tricks article on why this is no good — it's to do with styling).

After taking a quick look, the file seemed a little strange (thanks, Adobe Illustrator) with the w character being the first path (?), and the <svg ...> tag being a mess.

I begin by cleaning up the <svg ... > tag so it's usable, this means adding a proper id and giving it a usable class attribute, as well as sorting out the viewbox and background.

before

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"  
     width="270px" height="65px" viewBox="460.275 388.445 270 65" enable-background="new 460.275 388.445 270 65"
     xml:space="preserve">

after

<svg  
    version="1.1" 
    id="lanecrawford-logo" 
    class="logo lane-crawford-logo__svg"  
    viewBox="0 -4 236 64"
    xml:space="preserve"
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" >

In all honesty, as I mentioned before, I am a complete noob at svg, so I cannot tell you what all those attributes mean. I do know, however, (after reading the mozdev svg attribute reference) that certain things were unecessary (x="0px", y="0px"). I also played around with the viewbox values after reading this article from vanseo design.

#icanteven handle the values of 460.275 388.445 — they make no sense — they were refactored to be integers which maintain the aspect-ratio of the logo; 0 0 236 64.

character separation

Technically the characters were already separated, however I wanted them to be in the correct order (for sanity, code navigation, #reasons), and each character required a css class so I could target it for animation.

<path class="l"  d="M20.188..." />  
<path class="a"  d="M36.573..." />  
<path class="n"  d="M56.617..." />  
<path class="e"  d="M77.443..." />  
<path class="c"  d="M114.986..." />  
<path class="r"  d="M126.600..." />  
<path class="a2" d="M136.202..." />  
<path class="w"  d="M161.558..." />  
<path class="f"  d="M190.896..." />  
<path class="o"  d="M193.951..." />  
<path class="r2" d="M215.781..." />  
<path class="d"  d="M225.384..." />  

The letters a and r occur twice, so they get a 2 suffix. I used class instead of id as this means I can have multiple copies of this logo on the page if needed.

styling & animation

firstly, since we are animating the paths up, we need the parent svg to allow the paths to overflow. And since we removed the fill="#2b2b2b" attribute from each <path> tag earlier, we must apply a fill to the paths — we will also animate the fill later.

.logo {
    overflow: visible;

    .path {
        fill: #2b2b2b;
    }
}

Then we must set up our animation:

@-webkit-keyframes breathe {
    15% { fill: #d0b17b; }
    21% { transform: translateY(-3px); }
}

I knew that I wanted a golden-sheen to go from left-to-right across the logo, I also wanted the letters to jump up fast, and then slowly fall back down, like a "sigh" or a "breath". So I have the golden colour appear at 15%, and due to the defaults at 0% and 100% being our #2b2b2b from earlier, it will appear fast and fade out slowly. The same goes for the translation at 21%.

The value of -3px is interesting, though; I played with a % value, but it was moving each letter a different distance according to its width. However, because svg scales; the -3px actually changes depending on the size of the svg image. It “feels” right.

Now to applying the animation with scss:

$lanecrawford: "l","a","n","e","c","r","a2","w","f","o","r2","d";

Using the power of scss I created a list containing all the class-names of the <path>s in the svg. This meant that I could run an @each loop on the letters and calculate the animation-delays with math!

I apply the breathe animation to the .logo whenever it has the class .loading:

.logo.loading path {
    animation: breathe 2.6s ease infinite;
}

I now use the @each loop to give each letter an animation-delay so it plays on each time slightly later than the previous; making it appear to move from left-to-right:

@each $letter in $lanecrawford {
    $i: index($lanecrawford, $letter);
    $t: 0.03s * $i;

    &.loading path.#{$letter} {
        animation-delay: $t;
    }
}

If the @each loop syntax seems confusing, then I highly suggest reading the sass way's explanation on the subject.

controlling

In the codepen demo I simply use some jQuery to apply the animation with a checkbox-toggle. However in the real world you'd apply it during ajax calls and page-transitions. -- jQuery cannot apply css classes to svg, so it's applied with the native .classList.add() method.

$( document )
    .ajaxStart(function() {
        $(".logo")[0].classList.add("loading");
    })
    .ajaxStop(function() {
        $(".logo")[0].classList.remove("loading");
    });

No matter when/why you apply the animation, it is triggered simply by applying the class of .loading to the svg element. #simples.

to conclude

1. This is a super-neat way of indicating to the user that something is happening, keeping things on brand, and not looking like a half-broken jQuery plugin is ‘acting up’.

2. I'm not sure we will ever use this at Lane Crawford, but it was a nice experiment, and I am going to push for it.

3. In modern browsers it performs a lot better than an animated .gif.

4. With a little javascript effort it's fairly easy to substitute it for an animated .gif in IE8 or lower.