The hype surrounding Svelte right now is inescapable. Every blog post comment section, the article comment section on Dev.to or Twitter thread/hot take seems to solicit a response about Svelte.

If you are not familiar, Svelte is a Javascript library which leverages a compiler to turn your Svelte code into plain old Javascript and HTML. You write your applications inside of .svelte files and they get compiled to something that has no runtime.

This puts Svelte into a similar league alongside Elm, Imba and a few others, not directly in line with React or Vue. However, being compared to React or Vue seems to be unavoidable in 2019 and will continue to be the case into 2020 and beyond.

In many ways, Svelte is an indirect competitor to the likes of React and Vue, both options which like to tout their small bundle and application sizes. On that front, they can’t compete with Svelte.

Where Svelte differs from other options like React and Vue is that it does not have a virtual DOM, no runtime or anything else non-standard after it is built. Syntactically, your applications end up looking like old-school AngularJS and Vue syntax and a little sprinkling of React’s JSX syntax thrown in:

<button on:click={handleClick}>

A lot of the examples you will see for Svelte highlighting its simplicity are not indicative of real-world applications. This rings true for many framework and library examples, showing as little code as possible. You don’t want to scare away users.

Where things start to look less HTML and Javascript-y is things like loops or conditional each statements. The following is an example of iterating over an array of users.

<ul>
    {#each users as user}
    <li>{user.id}: {user.name}</li>
    {/each}
</ul>

If you have ever worked with Handlebars templating in Javascript before, then this syntax will take you back to the mid-2000s right away. This is one example of a few other uses which also resemble Handlebars in Svelte.

Syntax aside, it is by no means a large criticism of Svelte. Every framework and library deals with looping over collections differently, except maybe for React and JSX which the community mostly uses a map to loop over items in collections.

In React’s JSX you will find the following approach is the most widely used:

    <ul>
      {users.map((user, index) => {
        return <li key={index}>{user.name}</li>
      })}
    </ul>

I actually would have loved to see Svelte adopt Aurelia’s approach to syntax instead of going down the path of Vue-like syntax and throwing in that Handlebars syntax.

In Svelte binding the value of a text input looks like this:

<input bind:value={name} placeholder="enter your name">

And in Aurelia, binding a text input value looks like this:

<input value.bind="name" placeholder="enter your name">

I realise my Aurelia bias is starting to show here, but in my opinion, I think the Aurelia approach looks a heck of a lot nicer and more JS syntax-like than the Vue bind:value approach. Not having to type a colon is a huge plus and it just looks neater.

Anyway, moving on. We are nitpicking here.

It is Fast.

There is no denying that Svelte is fast. The lack of runtime is the contributing factor here. The closer you are to the bare metal of the browser, the faster things will be.

The truth is, all frameworks and libraries are fast. When it comes to speed and performance, the contributing factor is rarely the framework or library itself, it is the user code.

Start pulling in various Node packages like Moment, adding in features such as validation and routing, and ultimately your bundle size is going to grow significantly. The end result might be the framework or library itself (even those with a runtime) accounts for 10% of your overall application size.

This is why I always tell people to be wary of benchmarks. Sure, benchmarks might look impressive, but they are not indicative of real-world conditions where things like latency, bundle size, what libraries you are using, and how you write your code are really the determining factors.

I think considerations to how a framework or library lets you author components and write code, what its features are, and what it allows you to easily and not easily do are more important than its speed.

To put things into context, there are still many AngularJS 1.x applications out there in production, which are still working fine. I also know of many Durandal, Knockout and Backbone applications still being used which are also working fine.

The generated code I have seen from Svelte applications is surprisingly readable as well. Usually compiled code is not easy to read (for humans) at all, so I was really surprised.

Svelte Exposes The True Complexity of React

For years, React has hidden behind the claim that it is the V in MVC, that it is a simple and a humble view component library. Anyone who has ever worked with React on an actual application will tell you that you never just need the view part.

I cannot recall a time where I have ever built a web application that didn’t have at least:

• Routing (the ability to define routes to different screens)
• The need to work with data from an API
• Form validation (not always, but more often than not)

If you want to add these features into a React app, you have to glue them all together. Because React utilises a Virtual DOM, the ability to just drop in and use any library that touches the DOM is not possible.

The problem with React itself (without turning this into a post bashing React), is that it is too heavily invested into itself. It is also responsible for perpetuating FUD in the front-end ecosystem on quite a few fronts.

React popularising Virtual DOM (and later on, Vue) would result in a lot of FUD around the DOM. When people tell you that the DOM is slow, they’re responding as a result of being programmed by the React community which drunk the “DOM is slow Koolaid” a few years ago.

Svelte has proven that the DOM is not slow. Although to be fair, Aurelia has eschewed the Virtual DOM (in favour of reactive binding) since it launched in 2015 and managed to keep step with other frameworks and libraries for years (upcoming Aurelia 2, even more so).

Now that React has introduced the concept of hooks into their library, it is yet another thing for developers to learn. Solutions like Svelte which do not require you to learn abstractions and ways of authoring applications definitely feel lighter and saner in the face of React.

Cognitively React requires a few React-specific ways of working which just adds to the learning curve. The React of 2019 is not the React of 2014, that is for sure. Authoring applications using Javascript and HTML is kind of refreshing.

Lack of ability to functionally compose views

This is one of those downsides of Svelte that some developers will struggle to look past. It requires you to use script tags and HTML to build your Svelte components. This means you are forced to use its templating syntax like #if, having to use #each for looping.

For developers who have had a taste of “pure components” where all components are written in Javascript, this is going to be a hard pill to swallow.

No TypeScript Support (Yet)

Right now, there is no official support for TypeScript in Svelte. If you are not a TypeScript user or perhaps you work with Vue 2 which admittedly is not much better at supporting TypeScript, then this will not be a dealbreaker for you at all.

If you are like many other developers who realise the future is TypeScript and have switched over, the lack of TS support is going to be a dealbreaker for you. Some developers have gotten it to work sort of using hacks, but not ideal support by any means.

Conclusion

I think what Svelte has brought to the table is going to kickstart some innovation and competition in the front-end space. While React has been trudging along for quite a few years now and Vue picking up popularity as well, it’s nice to see some new thinking that doesn’t revolve around a Virtual DOM or leaky abstraction.

Rest assured, you best believe that other frameworks and libraries are not going to sit idle while Svelte comes in and pulls the table cloth right off the dinner table.

The AOT compiler coming in Aurelia 2, for example, is going to optimise your Aurelia applications to a high degree stripping away runtime and unneeded code. Angular has been focusing their efforts on improved AOT compilation with the Ivy compiler and renderer and other options are also focusing their efforts on the compilation as well.

Even after playing around with Svelete just briefly, the lack of resulting code and marketing spin was refreshing to see after years of other players in the industry seemingly perpetuating immense amounts of hype.

Having said that, the safety and stability that I get using a featured framework (in my case, Aurelia) still feels too hard to beat.

I think Svelte is definitely going to get more popular and for non-complex UI’s it would be a great choice over React or Vue, but I still have hope that one day that Web Components becomes the norm and we see light abstractions on-top of WC that just compile to Web Components behind the scenes.

I would love to see how Svelte scales in a large-scale web application. Not specifically in performance (because I think it would remain fast), but rather code organisation, maintainability, testability and how easy it is to bring new team members up to scratch with an existing codebase.

Massive kudos to Rich Harris and everyone else who has worked on Svelte. I can definitely see the hype around Svelte is more than warranted and in the end, competition is healthy. We need fresh thinking and solutions to help drive standards and the ecosystem forward as a whole.

Wallaby.js is one of the most amazing additions you can make to your testing workflow. I have been a happily paid user for a couple of years now and if you are looking to up your testing game, I highly recommend it.

Chances are if you are reading this post, you already use Wallaby and you are looking to get it working in your Aurelia applications with Jest and TypeScript. It’s a combination that is not all too uncommon these days, TypeScript is the future.

The Wallaby.js configuration itself requires very little code to work out-of-the-box with Aurelia and Jest.

module.exports = function (wallaby) {

  return {
    files: [
      '!**/*.css',
      'src/**/*.ts',
      'src/**/*.html',
      'test/unit/helpers.ts',
      'test/unit/mock-data/**/*.ts',
      'test/unit/stubs/**/*.ts',
      'aurelia_project/environments/**/*.ts',
      'test/jest.setup.ts',
      'tsconfig.json'
    ],

    tests: [
      'test/unit/**/*.spec.ts'
    ],

    compilers: {
      '**/*.ts': wallaby.compilers.typeScript({ module: 'commonjs' })
    },

    env: {
      runner: 'node', 
      type: 'node'
    },

    testFramework: 'jest',

    debug: true
  };
};

The above configuration assumes your files live in src and in my case, inside of my test/unit directory I have a helpers.ts file which has some functions making testing easier, a mock-data directory for mock data to import, a stubs directory for stubbing out certain mocks as well as my main Jest configuration file jest.setup.ts.

Do not copy the above file line-for-line. Make sure it reflects your project and the files inside of it.

In the compilers section we have to tell Wallaby to compile our TypeScript to commonjs format. In my case, I was originally targeting esnext as my module format and Wallaby does not work with modern JS syntax just yet. the rest is fairly explanatory.

Here is what Wallaby looks like running in an application I am currently working on.

A little over a year ago I took a new job and because the office is close to an hour and a half away, I wanted to work remotely for most of the week. Commuting upwards of three hours a day five times a week would have destroyed me.

So, while I don’t work 100% of the week remotely, I work two days in the office and three days at home. Everyone has their own experiences working remotely, and I thought it would be interesting to share my perspective and experience.

Oh, and for context, I have a four-year-old son and a six-month-old daughter. My son goes to daycare three days per week, and there is some overlap with the days I work from home, my wife is a stay at home mother and also currently studying as well.

You need a dedicated space

You need a consistent working space. Working from home if you love what you do, it’s not hard to be disciplined, if anything, it is difficult to stop working once you start (more on that later). I often hear people remark when I tell them I work from home they would find it hard not to watch Netflix or slack off.

Working remotely while more relaxed, you should still act like you’re in an office. Get yourself set up with an office or corner of a quiet room, buy a comfortable chair and a sturdy desk.

Noise cancelling earphones are a must

If you work from home and you cannot guarantee that you will only ever be there alone in business hours, get yourself some noise-cancelling earphones. For me, it’s a crying baby and an energetic four-year-old running around the house, the TV going or music.

It’s not fair to expect everyone else to change their routine or how they go about their day for the sake of making it work office like for me at home. Also, if you live near a busy street, you’ll have outside noise like cars and motorbikes.

At present, I have to deal with a loud street sweeper making hourly trips up and down my street. This is because of some development work happening at the end of the road.

It can be harder to stop working

Some people have laughed when I tell them that working from home makes it harder for me to stop. With no commute to and from the office, I find I start earlier and finish later quite often because being in the comfort of your own home can be deceiving.

For me, this is really the only downside. Fortunately, my wife is great at making sure I finish at 5 pm a lot of the time, mainly because I help with the night time routine and I can help free her hands up to do other things not related to the kids.

Slack makes the distance more comfortable to manage, mostly

For some, the lack of office co-workers is a dealbreaker for them. And admittedly, at times not having a co-worker to bounce an idea off of or head out to lunch with can be a bit of a drag at times.

For those times, when I need to speak to someone, they’re only a Slack message or video call away. Because I live in Australia, and we have embarrassingly slow internet (my connection is decent compared to the average), sometimes there are technical difficulties getting on a video call because our main office can’t get a proper connection in the area yet (despite the fact it ironically is one of the first places in Australia to have 5G rolled out).

I highly recommend if you’re working remotely to install the Visual Studio Code LiveShare extension, it allows remote coding sessions (including the ability to share a terminal), so you can do remote pair programming and troubleshooting as well.

You save a lot of money

By cutting my commute time 80%, we are refuelling our car a lot less (once every 1.5 weeks). What felt like twice-yearly car services, has now become just the one annual service. We are putting fewer kilometres on the odometer, which is a considerable saving. Special shout out to the environment, I’m reducing my carbon footprint in the process.

And then you have the saved money on coffee and food. When I used to work in an office, I would eat out more often than I care to admit. This is usually how you bond and socialise with your colleagues, over a nice takeout lunch. My wife is the queen of food preparation, so we always have a good selection of lunches to pull out of the freezer for lunch.

Then you have the big wallet drainer, the big “C” coffee. I am not sure how much a cup of coffee costs where you are, but where I live it’s on average AUD $5, which is about USD $3.40. It adds up really quick when you can drink upwards of four coffees per day (especially during meetings).

At home, we invested in a coffee machine, and if you work remote and love coffee, I highly recommend splurging on a coffee machine and some quality beans of your choosing. The cost per cup is so low, the only dangerous thing you need to watch out for is drinking too much coffee.

The savings don’t stop there. Because I work from home, at tax time, I am allowed to claim some costs as work-related expenses. I can claim part of my internet bill, cost of buying stationery and other things your accountant can help you out with. Getting some money back from the government is always a good thing.

So, while I am probably spending more on AC during the summer months, using my electricity and water, it still works out cheaper than a commute to an office and eating out. Winning.

Increased productivity

Working from home makes you so much more productive if you can trust yourself to be disciplined and not sit on YouTube all day long. Working in a traditional office is full of interruptions, detrimental to productivity. There is nothing worse than getting in the zone and having someone tap you on the shoulder, or meetings that run overtime.

When someone wants to ask a question, they have to Slack me, and if I am set to busy aka do not disturb, I won’t even see the message until I check. I get to reply on my own terms.

You get sick less

If you have worked in open space offices (or any office), you will be familiar with office plagues. There is always that one or more persons who come into work sick (like it’s a badge of honour) and spread their sickness around like Germaclaus (an ill version of Santa that spreads sickness).

I have only been sick once this past year and like I said in the opening of this post, I have a son who goes to kindergarten three days per week. The fact I get sick less with a child in kindy than I do working in an office, it says a lot.

Last, but, not least…

I get to work in my pyjamas. On those three days, I am at home, I get into the shower and then put on some comfortable pants and a shirt. There is nothing like working in whatever you want to wear.

When I am in the office, I have to put on an ironed collared shirt and chino pants with a belt, but at home, I am one step away from being ready for bed.

I recently encountered an error in GitKraken after a bad merge occurred when trying to merge in some changes from the main development branch, whilst I had quite a few local changes that GitKraken usually automatically stashes for me.

My problem was I was using Bash Ubuntu on Windows, which has a nasty habit of locking files. The merge and stashing seemed to fail because in the changes I was attempting to merge in, some files were deleted.
I tried closing and reopening GitKraken, but it was clear that GitKraken wasn’t going to let me open up that repo again.

The fix

I realise this is a bit of a nuclear fix, but you’ll need to open up PowerShell to fix this. For me, it was simply a matter of navigating to the project directory and running: git reset --hard however, if you need changes, your repo will be interactable just fine on the command line.

As far as I could see with everything I tried, GitKraken won’t ever fix itself, the command line is the only solution. The above, once I ran it and opened up GitKraken it worked just fine again as nothing had happened.

I generally avoid promoting things on my blog, but this month I am a part of the Infostack Ultimate Programmer Super Stack, my Aurelia book is a part of this fantastic bundle.

For $47.95 you get my Aurelia For Real World Web Applications book, as well as a few other programming books and courses. A whole wide variety of topics are covered, and if you’re like me, you lap these kinds of bundles up because you’re always hungry to learn something new.

The Ultimate Programmer Super Stack is a hand-curated collection of 25+ premium courses, bestselling ebooks, and bonus resources that will help new programmers as well as experienced ones.

One of my favourite additions to this bundle is the book Build APIs You Won’t Hate by Phil Sturgeon, which is a book I highly recommend every developer reads before they attempt to build an API. Because let’s be honest, API’s are complicated things to build and design right.

This is a time-limited bundle, so don’t sit on the fence for too long.

Grab the bundle here.

Recently I read a Medium article titled, Something is wrong on the internet in which the author delves into the weird and worrying world of directly targeted children’s content, usually using popular TV and movie characters from primarily Disney franchises.

As a father of a two and a half year old, this article resonated with me greatly.

My wife and I actually kept our child away from iPad’s and technology until he was 23 months old (so basically two). It wasn’t until we took a long trip to the UK to see relatives (22 hours, not including stop over waiting time) that we decided we needed to take something to keep him preoccupied.

Keeping an active toddler confined within a small aluminium tube for hours upon hours is no small feat. Evident by the fact when we told people we were travelling the responses we got were:

Oh, you’re brave.

Good luck

Let us know how that goes for you

We harmlessly borrowed an iPad from a family member, and because we have a Youtube Red subscription we saved some videos for offline viewing. Harmless shows he liked to watch such as Pepper Pig and Paw Patrol (legit episodes).

It just took this little trip for him to be amazed and impressed by the iPad, so as we travelled throughout the UK for three and a half weeks, he would watch the iPad. We would load it up with new content for him.

When we got back from the trip, he continued to watch the iPad. At one point we forgot to turn the internet off and he was trawling his way through kids content. It started out innocent enough, until the targeted kids content showed up.

After a while you see the same pattern, the same songs (the creepy daddy finger and Yes Johnny songs) and even the same recurring Youtube channels putting out junk recycled content. I disagree with the author this is abuse, that seems a little far-fetched. The content I witnessed was just heavily infringing on copyrights of studios like Disney.

We fortunately never encountered the worrying Peppa Pig rip-off videos of drinking bleach and whatnot, that is worrying.

So, how did we address the problem?

We control what our son sees on his iPad, simple. We dilligently make sure the Internet is not turned on and we just set some Youtube videos to offline.

What was weird content featuring Spiderman (what’s the obsession these content channels have with Spiderman?) and The Joker is now sane and educational content, our son is learning new things.

Seriously, don’t let your kids just browse Youtube for themselves. Control the narrative, getting yourself a Youtube Red subscription to save videos for offline use is one of the best things you can possibly do to protect your children.

Safe for kids Youtube content

Here are a few channels on Youtube which we allow our son to watch. Quality content you can be rest assured your children will probably love and no Spiderman, Joker or kids opening up chocolate.

In a sea of copyright infringing content is some seriously well-produced content that sadly doesn’t always get the same kind of visibility and search result preference that these monetised childbait videos do.

Blippi

Quite possibly one of the best Youtube channels for kids around. A guy by the name of Blippi puts out highly produced educational videos, he’s a quirky and funny character who travels around and has content ranging from garbage trucks to police cars and everything in between.

Our son’s iPad has a lot of these Blippi videos on it and people we’ve shown Blippi to, love him.

Yo Gabba Gabba

My wife and I are grown adults and even like this show. It’s highly educational, the characters are quirky and funny, best of all it’s a very music oriented TV show that gets your kids dancing and singing. One of the best characters on this show is DJ Lance Rock. Another thing that sets this show apart is they have routine cameos from members of punk, rock and indie bands appear on the show like Paramore.

The Wiggles

The Wiggles are an Australian kids group that have been going since the early nineties (I grew up watching them). All of their content is music based, with classic songs your kids will love like Fruit Salad and Hot Potato guaranteed to get them up and dancing, singing along.

Seasame Street

I grew up watching Sesame Street and its been going for 40 years now, because it’s great content. Your kids are guaranteed to love highly annoying Elmo and cookie loving Cookie Monster. You can’t go wrong with Sesame Street.

Conclusion

If you don’t have a Youtube Red subscription or your country has yet to support offline downloads, the public broadcaster in your respective country will have a lot of free kids content. The BBC in the UK has BBC Kids, Australia’s ABC has ABC Kids and presumably other countries are the same.

Netflix is also another avenue to consider, they have some of the best kids content around and best of all: it’s obviously curated a lot better than Youtube’s content is.

At the end of the day, as a parent you have to take responsibility, Youtube is not the parent, you are. And the content in question on Youtube only exists because you let your children watch it. It’s time to step up.

The hardest part about blogging is thinking of what you should say. For me, this blog has become focused heavily on Aurelia and Javascript, blogging about other things occasionally. I tend to stick within the front-end development niche.

When it comes to blog post ideas, believe it or not: Stack Overflow has been a very influential part of my writing. I’ve written blog posts that were inspired by problems with cool solutions or niche features in a framework not many are aware of.

Case in point, a question I recently answered on Stack Overflow had a solution that many who use the framework might not have thought of, as it delved into some constructs that aren’t immediately obvious to some.

After answering, I was inspired to write a blog post about this because it seemed as though it would be useful enough for others wanting to do the same. Having also worked with Vue.js recently which has a similar check, I figured a blog post was needed.

And herein lies the beauty of all this: Stack Overflow can help inspire you to write about something you might not have thought of.

I am not saying that you should copy/paste other peoples answers because not only is that plagiarism, Google will penalise you for it. But it provides a barometer on the common pain points and problems that developers face, things that matter.

It doesn’t just stop there. I take inspiration from chatter on the Aurelia Gitter chat to write up useful blog posts on Aurelia, based on what people are getting stuck on or want to know. I have also been known to lurk Github issues for blog post inspiration. Heck, even Twitter can be a source of inspiration.

Instead of thinking of what your target audience might want to read, seek out what people want to know and write the content for them.

Remember to write it down

Cliche, but if you have an idea write it down somewhere (even if it is just a potential blog post title). I use Dropbox to store all my post ideas (written in Markdown) and when I get inspiration I create a new Markdown file.

Take a look at my Aurelia Dropbox folder, there are posts in other folders (not pictured) but you can see I have a tonne of ideas and some of these are partially written, some are just titles with no content at all. I might not finish any of these, but it gives you insight into the process.

Kind of a strange post from what I usually post, but the last few months I have been addicted to entering online competitions.

The fact I have won a few great prizes in just a few months probably helps. I won a runner up prize which was an LG television and then I won a Weber Baby Q Titanium barbecue. I also scored a free double pass to see the movie Office Christmas Party complete with free drink and popcorn. The movie wasn’t that great, but it was a night out for me and my wife.

Oh, and I won a copy of Mafia III on PC as well. I haven’t played it yet but thought that was cool.

Then I won a Sony 4K action camera, a GoPro type device that can shoot stabilised 4k video. Just when I thought I’d peaked in terms of competition wins, as I was typing this post up I won something again: A Samsung Gear S3 Frontier smart watch. This is my first competition win for 2017. Then literally shortly after, I won a Kenwood Stand Mixer.

Every win motivates me to keep on entering competitions and I have found the best competitions are the “25 words or less competitions” where I pull out all the stops to win. I like writing and blogging, so the word competitions are naturally higher odds for me.

To summarise what I’ve won since October 2016:

• Sony 4K action camera
• Samsung Gear S3 Frontier smart watch
• Weber Baby Q Titanium barbecue
• LG TV
• Mafia III PC

There is a downside to entering competitions and that is spam. I do get more spam email and I get spam phone calls as a result. Although, it is easy enough to unsubscribe from the emails and the phone calls are usually from unlisted private numbers (which I block on my phone anyway).

Ads have never sat well with me. For a while I have had them on this blog, because it gets a lot of traffic. However, inspired by Troy Hunt, I have decided to remove the Google ads and instead start a Patreon page where anyone can pay a monthly amount to “sponsor” me.

By no means are you under obligation to sponsor me. I realise the economy isn’t so kind to everyone, but for those who see the value in my content and would like to see more created on a regular basis, this is your chance.

I have added in some incentives for sponsoring me, including an I Like Kill Nerds mug (if you contribute $50 or more per month) which I’ll ship for free.

Tiers also include discounts on books and materials I create now and in the future as well as personalised Google Hangout calls, private chat room, stickers and more.

If you have ideas for more rewards, I’d love to hear them. But enjoy an ad free experience and faster site regardless. Also if you are a fan of Instagram buy Instagram video views and it will make the experience a lot more satisfying.

The funding page can be found here.

Update: Site is operational and working again.

The last couple of months this blog has grown tremendously. Even though I have caching and other performance tweaks in place, the server my site runs on is surprisingly barebones.

The traffic to this blog is around 100k visitors per month, the single core CPU just wasn’t cutting it anymore and a dreaded memory leak with caching that seemingly wouldn’t go away no matter how many times I tried to fix it.

I am migrating to a quad core server with more memory, bandwidth and disk space. This should mean a faster site that doesn’t go down every day, it took a few years to outgrow the older server, but it’s time to move on up.

If you notice the site going down, be aware I am moving it and you might experience issues the next week or so.