Forem: Alex Jover

Are you attending ViteConf 2024?

Alex Jover — Tue, 24 Sep 2024 16:01:27 +0000

It’s safe to say that ViteConf is the biggest online conference on the Web Development these days, gathering the main experts from all the frameworks and technologies in the industry. And it makes sense… which web project is not using Vite these days?

We’re really thrilled about ViteConf 24, happening 3rd & 4th October! As last year, we’re proud to be an official community partner. But that’s not all - our dear Alvaro Saburido is speaking at the conference! About what? Well… you wanted to know.

Before that - we just published in Youtube an interview with Matias (Patak), Vite core team member and the mastermind behind ViteConf, and Alvaro sharing a few sneak peeks on the conference. Make sure not to miss it!

Main talk - How the ViteConf Pyraminx 3D Puzzle Was Built

Alvaro, DX Engineer at Storyblok and author or the Tres.js ecosystem, will dive deep into the technical creation of a fully interactive 3D Pyraminx puzzle that you’ll see at ViteConf.

Would you believe that such immersive creation is built purely with Vue and TresJS? But that’s not all: it also leverages Web Containers, a tool that enables running full-stack JavaScript environments directly in the browser.

Spoiler alert: Alvaro will reveal the process behind turning this random crazy idea into a working, interactive 3D app. Expect to learn about:

How to integrate TresJS with Vue to streamline 3D development.
The magic behind Web Containers and how they allow JavaScript to run directly in the browser—yes, including server-side code!
The creative process behind that made the Pyraminx project an immersive reality.

Innovative, uh? The web is amazing and full of potential… really a talk not to miss! Check out all details about Alvaro’s talk.

One more thing… Did you know you can customize your ticket? Look at the fancy Storyblok custom ticket https://viteconf.org/24/ecosystem/storyblok

🚀 Fresh Storyblok SDK releases, plus new Canada and Australia regions 🌍

Alex Jover — Thu, 21 Dec 2023 13:54:34 +0000

Following up on the 2 new regions announcement, we're thrilled to unveil the latest updates to our SDK family, introducing cutting-edge features, supporting the latest frameworks versions, and expanding our horizons to better serve our incredible community.

✨ What Changed?

🌍 2 new regions: We added dedicated Australia 🦘 and Canada 🍁 regions, now available across all our SDKs. Having a Storyblok space hosted in your region is not an issue anymore! Check the new regions blog post to know all the details about it.

🚀 Astro 4 support: We’re surfing the Astro 4 wave, featuring the brand-new Toolbar—now access to docs is instant! We’re also dropping support for Astro 2 (still available on @storyblok/astro@3)

🌟 Svelte 4 and SvelteKit 2.0 support: Enjoy all the performance and UX improvements the Svelte team accomplished on SvelteKit 2.0.

🛠️ Breaking change alert - storyblok-js-client v6: We updated all SDKs to the latest js-client v6, including a bunch of bugfixes and improvements. Be aware that now the error messages have a different format, check out the details in the js-client v6 release.

🔄 Steps to Update to the Latest SDK versions

As simple as installing the latest version of the SDK of your choice on your project. As an example, for React SDK:

npm install @storyblok/react@latest

🌍 Expanding Horizons: Leveraging the New Regions

Integrating the newly introduced regions into your workflow is seamless! When initializing your SDK, simply add the region parameter within the apiOptions. To know all regions available, simply check out the SDK readme.

import { storyblokInit, apiPlugin } from "@storyblok/react";

storyblokInit({
  accessToken: "YOUR_ACCESS_TOKEN",
  use: [apiPlugin],
  apiOptions: {
    region: "ca", // or "eu" (default), "us", "cn", "ap"
  },
});

🛠️ Full List of New Frontend SDKs versions

JS SDK (@storyblok/js) - v3.0.0
Vue SDK - v8.0.0
Nuxt SDK - v6.0.0
React SDK - v3.0.0
Astro SDK - v4.0.0
Vue 2 SDK - v4.0.0
Nuxt 2 SDK - v3.0.0
Svelte SDK - v4.0.0
Gatsby SDK - v7.0.0

🧑‍💻 Ready to try it out?

We really value your feedback, so don’t hesitate to jump in and ask your question in Storyblok Discord, or open an issue in the related SDK Github repo.

Are you new here? Go to Storyblok QuickStart and get your project fully integrated with your favorite framework in just 1 command!

Happy coding! 🎉

Hybrid Rendering: the secret way to smoothly test Vue.js components

Alex Jover — Mon, 07 Mar 2022 07:00:00 +0000

Originally posted on VueDose.tips

In the article Deep vs Shallow Rendering in Vue.js Tests I showed you how deep and shallow rendering works to create Vue.js tests.

Each of them have their own use case and it could depend in your way of testing and architecting as well.

But… why not having the best of both worlds? Let’s get into Hybrid Rendering.

The Hybrid Rendering consists on stubbing only part of the child components on a test.

For instance, taking back the example from the tip, let's add another component called FoodList to the App component:

<template>
  <div>
    <h3>User List</h3>
    <UserList :users="['Rob Wesley']" />
    <FoodList :foods="['Tomatoes', 'Carrots']" />
  </div>
</template>

<script setup>
  import UserList from "./UserList";
  import FoodList from "./FoodList";
</script>

Assuming FoodList has a similar implementation to UserList, and we're using deep rendering, this test:

import { mount } from "@vue/test-utils";
import App from "@/App";

describe("App.vue", () => {
  it("Deep renders the App component", () => {
    const wrapper = mount(App);
    expect(wrapper.html()).toMatchSnapshot();
  });
});

will result in the following snapshot:

<div>
  <h3>User List</h3>
  <ul>
    <li>
      Rob Wesley
    </li>
  </ul>
  <ul>
    <li>
      Tomatoes
    </li>
    <li>
      Carrots
    </li>
  </ul>
</div>

Now, let's say that for whatsoever reason you want only to deep render UserList, but not FoodList.

In that case, you can use the stubs option of the mount method in order to indicate which components must be stubbed:

import { mount } from "@vue/test-utils";
import App from "@/App";

describe("App.vue", () => {
  it("Hybrid renders the app component", () => {
    const wrapper = mount(App, { stubs: ["FoodList"] });
    expect(wrapper.html()).toMatchSnapshot();
  });
});

Notice I'm stubbing FoodList. That's the way to apply hybrid rendering in a test, or partial shallow/deep rendering if you're more comfortable with that name.

The generated snapshot in this case will be like:

<div>
  <h3>User List</h3>
  <ul>
    <li>
      Rob Wesley
    </li>
  </ul>
  <foodlist-stub foods="Tomatoes,Carrots"></foodlist-stub>
</div>

Keep in mind that this won't work with shallowMount, since it already stubs all child components. So make sure to use mount.

Do you have any case in mind where this technique can be useful in your projects? Let me know on Twitter!

That's it for today's tip!

Stay cool 🦄

1 year organising Alicante Frontend

Alex Jover — Tue, 21 Nov 2017 09:46:07 +0000

Originally published at alexjoverm.github.io on November 21, 2017

Here are my insights about organising Alicante Frontend’s meetup after a year.

One year ago, Aaron, Alvaro and I started this amazing ride together. It’s been a year of meeting lots of people and having lots of fun. Satisfaction, success and happiness are the words that come to my mind when I think of Alicante Frontend.

At the beginning, we were not sure about this success. Unlike bigger cities, Alicante didn’t have much community, apparently. Similar meetups from cities around had a stable 20-30 RSVP average. Still, we decided to make it happen even expecting less than 20 people attending.

Nowadays, it’s a pretty cool community that had a great variety of events, surpassing 100+ RSVP and having international events. We’ve had all kind of fun stuff, such as raffles and food&drinks networking. You can find us on the following channels:

What’s Alicante Frontend made of?

First of all, we needed a regular place to host the events. We were lucky to find ULab, a co-working center that made everything easy for us from the beginning. Not only allowing us to use the space, but also helping us preparing and promoting them.

In ULab, speakers come and share whatever they’d like to. They’re core of the events, and very, very difficult to find. That’s why we like to compensate them for their effort. Lately we’ve been consistently having speakers every month, which is great.

Usually, we get to the events a bit sooner so we start preparing it. We try to make some fun so the speakers relax and feel more comfortable.

Then, an organizer gives a sync-up intro so we share some news, announcements, decisions or whatever that we have to for that month. We’d like to be as transparent as possible in order to keep the community informed.

We had talks about JavaScript, functional (reactive) programming, building projects, Web performance, Web analytics, and even a workshop of Clojure. Special thanks to Flavio Corpa, Ciro Ivan, Kikobeats, Joaquin, Jose Manuel Perez and Laura Bonmati for their talks and keeping this community alive.

In Alicante Frontend, we care about involving companies. We believe there is a need of improving the culture and mindset of local companies, and what’s better than doing that starting from their people? We mentor each other on technologies, workflows and best practices. It’s a win-to-win: companies get more visibility and qualified employees while employees feel more satisfied and productive by learning stuff and meeting people in the community. We hope this increases the visibility for foreign companies to come to Alicante, which means more and better job opportunities.

Thanks to the companies that help us, we can do all kind of cool stuff that requires a minimum amount of costs: having stickers, presents for the speakers, meetup’s costs…

Last but not least, Alicante Frontend is its people. We all come to teach, to learn, to share, and more importantly to have fun. That’s community, doesn’t matter how many you are, what matters is to enjoy meeting new people, talking about how your work is, what have you been doing lately and share experiences in general. We all are a great family.

Part of that happens in the networking , right after the event. Here we surely have fun.

The future

We’d like to keep up the hype and continue growing and improving this lovely community. Taking a retrospective view and matching our values, we have plenty of cool ideas we want to try out next year:

Have more fun! Hands-on events : knowing how difficult is to find speakers around here, and how fun people consider “practical” events, we’ll probably organise more workshop/hackaton-like events. Ideas: Code in the Dark, Open Hacking (featuring Open Source), Katas…
Bring speakers : we’d like to bring somehow known speakers from outside Alicante, having a sponsor covering the costs. We already have one confirmed for next year, so stay tuned! :)
Conference : Alicante is a very convenient place for a conference, in terms of connections, weather and standard of living. That’s proven by the success of React Alicante. However, this is not something we can rush to do: organising a conference requires an extremely amount of time, energy and dedication, and we don’t have that much (we have lives aside from work and Alicante Frontend), so we need to make sure we can commit to it, and if we do, to enjoy it. For that reason, we cannot make sure this will happen this year. Would you like to be part of this? We’ll need help for sure, so don’t hesitate in contacting us.

Any other ideas? Please tell us!

We hope you get an overview of what Alicante Frontend is and what our values are. We wish this community to keep up growing and improving, bringing more people and companies together. We’re excited and doing our best to improve the Web community in Alicante! So if you haven’t come and visit us, what are you waiting for?

My tips to be a happier developer

Alex Jover — Mon, 13 Nov 2017 13:58:35 +0000

Here are some tips that I’m practising to be a happier developer.

Are you often in a frustrated mood? Do you think sometimes that you don’t meet the deadlines? Are you worried about not performing well, or getting negative feedback, or that is too big for you? Do you sometimes suffer anxiety or stress?

I’ve been suffering an anxiety/panic disorder for almost a year. I’m not gonna get into the details, is not a happy story and is somewhat complex, but the point is I’ve learned a lot on the way. I’m writing this article, both to remind myself and to tell you what have I learnt and found out during this time.

Keep in mind that these are my points, it may work or not for you. Do you have any other you wanna share? :)

1. Focus on success rather than failure

Programming is an activity that it’s about constantly having a problem and solving it. That makes it a very risky activity. How many times did you get stuck at some point? And trying to find the reason of a bug? Probably you get to sleep and other day you solve it quickly, right?

We usually have deadlines, which makes us to come up with a delivery plan. In addition, we expect the software we build to work flawlessly, and the the users of the system we’re building to like it.

As you can see, there are many things that can go wrong (and will). So, what can we do about all that?

Well, we can’t do anything to prevent this to happen. But instead, we can:

Don’t blame yourself (or others): Remember you do everything the best you can , so just don’t punish yourself when you get stuck, don’t meet a deadline or whatever goes wrong. Probably the reason was in a bad planning, or short time.
Instead, congratulate yourself for whatever tiny thing you did or tried. What I usually do is to by the end of the day, I write 4 or 5 things I did in a post-it and stick it somewhere around.
When something goes wrong, think on what you tried to do instead of the failure itself. Then, you could do a retrospective on yourself or with your team, to see how to do this better for the next time.

2. Build empathy within your team

Development is a team sport. One alone just cannot do much, plus it can get boring. So try to be as much comfortable as you can with the team you’re working on. Any social skill you can apply here will be good. Here some are my tips:

Learn to take/give feedback : Nothing can be more annoying than someone putting down your work. So don’t be like that and give constructive feedback. One way is to apply the Sandwich model (good, bad, good) when you must say something unpleasant to someone. It’d be good for you if you can ignore non constructive feedback, or do the sandwich mentally yourself afterwards :)
Practise team building activities : It can go from doing sport, going for lunch… anything
Thank someone everyday : This is a positive thinking technique that could apply to anything in your live. Send a message/email/whatever to a colleague thanking him/her, even for very small things, such as “Hey John! Thanks a lot for helping me finding that bug before!”

3. Manage your time and priorities

Nowadays life goes fast, so fast that we go faster with it. And we end up in a routine where we try to do too many things that we can manage to do. That makes us being really over-demanding on ourselves, leading to frustration and anxiety because of not completing the tasks, or doing it under much pressure for quite some time.

You wanna prepare a talk, attend a meetup, keep your Open Source work, write on your blog, stay healthy practising sport, meet with friends, spend time with your family, run some side-project… and you work full time as well. Be careful, being too ambitious can turn against you.

What can we do to about it?

Slow down and push the break : Minimize your task queue. Keep in mind it is better to do 2 things well done, than 4 badly/quickly done.
Enjoy what you do : When you slow down, you have more time to pay attention to what you’re doing, making it be more enjoyable. That’s what mindfulness stands for.
Apply a time management technique : Personally I (kind of) use Pomodoro. The point is to enforce breaks to move and distract yourself in order to don’t spend hours on a task continuously.

4. Keep up your motivation

I’m not a fan of Steve Jobs, but he said it very well:

“Stay hungry, stay foolish”

There is nothing more wonderful that being motivated on what you’re doing. It makes you love your work and spread that to the people of your circle.

Keeping yourself up to date and involved in the community of your technologies is a must for keeping up your motivation. You’ll grow, which makes you feel productive. You’ll socialize and meet new people. You’ll find people you admire and people who admire you, and that is really beautiful.

You could feel like the following tips are against the point Manage your time and priorities, but they are beneficial as long as you make sure you don’t overdo , and set a limit for these:

Do Open Source! : Now is easier than ever, since an open source guide has been created by github itself and lots of experienced OSS devs. I’ve started doing it and got many good feedback from my projects users! Not to mention the feeling when you’re doing something other people find useful
Go to Meetups and conferences : You’ll meet lots of people physically, which opens you a lot of doors and keeps you connected to more communities and its ecosystem. If you’re brave enough to speak in one, you’ll get a great feeling afterwards, so go and try and see what it feels like ;).
Build side projects : It can be anything, such as building dummy apps, organizing events, sharing knowledge, creating libraries, etc. Some things I did is to create this blog, become an Egghead instructor, create Alicante Frontend meetup group with some friends, contributing to Open Source…

Conclusion

There are really a lot of ways to be happier and better as a developer, and they come mostly from the psychology side instead of from being a successful developer. Here I told you some of my tips, I’m looking forward to hear yours!

If you like it, please go and share it! You can follow me on this blog or on twitter as @alexjoverm. Any questions? Shoot!

Write the first Vue.js Component Unit Test in Jest

Alex Jover — Mon, 21 Aug 2017 06:25:40 +0000

Wait, a book on Testing Vue with Jest? Yeah, this article is just the first chapter 😉

vue-test-utils, the official VueJS testing library and based on avoriaz, is just around the corner. @EddYerburgh is indeed doing a very good job creating it. It provides all necessary tooling for making easy to write unit test in a VueJS application.

Jest, on the other side, is the testing framework developed at Facebook, which makes testing a breeze, with awesome features such as:

Almost no config by default
Very cool interactive mode
Run tests in parallel
Spies, stubs and mocks out of the box
Built in code coverage
Snapshot testing
Module mocking utilities

Probably you’ve already written test without this tools, and just by using karma + mocha + chai + sinon + …, but you’ll see how much easier it can be 😉.

Set up a vue-test sample project

Let’s start by creating a new project using vue-cli answering NO to all yes/no questions:

npm install -g vue-cli
vue init webpack vue-test
cd vue-test

Then we’ll need to install some dependencies:

# Install dependencies 
npm i -D jest jest-vue-preprocessor babel-jest

jest-vue-preprocessor is needed for making jest understand .vue files, and babel-jest for the integration with Babel.

As per vue-test-utils, it ~~hasn’t been released yet, but for now you can add it to your package.json from the source~~ :

Update (2017/10/10): it can be installed already from npm, since beta.1 has been published.

npm i -D vue-test-utils

Let’s add the following Jest configuration in the package.json:

...
"jest": {
  "moduleNameMapper": {
    "^vue$": "vue/dist/vue.common.js"
  },
  "moduleFileExtensions": [
    "js",
    "vue"
  ],
  "transform": {
    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
    ".*\\.(vue)$": "<rootDir>/node_modules/jest-vue-preprocessor"
  }
}

Testing a Component

I’ll be using Single File Components here, and I haven’t checked if it works by splitting them in their own html, css or js files, so let’s assume you’re doing that as well.

First create a MessageList.vue component under src/components:

<template>
    <ul>
        <li v-for="message in messages"> {{ message }} </li>
    </ul>
</template>

<script>
    export default { 
        name: 'list', 
        props: ['messages']
    }
</script>

And update App.vue to use it, as follows:

<template>
    <div id="app">
        <MessageList messages="messages" />
    </div>
</template>

<script>
import MessageList from './components/MessageList'
export default {
    name: 'app', 
    data: () => ({
        messages: ['Hey John', 'Howdy Paco'] 
    }), 
    components: { MessageList }
}
</script>

We have already a couple of components that we can test. Let’s create a test folder under the project root, and a App.test.js:

import Vue from 'vue'
import App from '../src/App'

describe('App.test.js', () => {
  let cmp, vm

  beforeEach(() => {
    cmp = Vue.extend(App) // Create a copy of the original component
    vm = new cmp({
      data: { // Replace data value with this fake data
        messages: ['Cat']
      }
    }).$mount() // Instances and mounts the component
  })

  it('equals messages to ["Cat"]', () => {
    expect(vm.messages).toEqual(['Cat'])
  })
})

Right now, if we run npm test (or npm t as a shorthand version), the test should run and pass. Since we’re modifying the tests, let’s better run it in watch mode :

npm t -- --watch

The problem with nested components

This test is too simple. Let’s check that the output is the expected as well. For that we can use the amazing Snapshots feature of Jest, that will generate a snapshot of the output and check it against in the upcoming runs. Add after the previous it in App.test.js:

it('has the expected html structure', () => {
  expect(vm.$el).toMatchSnapshot()
})

That will create a test/ __snapshots__ /App.test.js.snap file. Let’s open it and inspect it:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App.test.js has the expected html structure 1`] = `
<div
  id="app"
>
  <ul>
    <li>
      Cat
    </li>
  </ul>
</div>
`;

In case you haven’t noticed, there is a big problem here: the MessageList component has been rendered as well. Unit tests must be tested as an independent unit , meaning that in App.test.js we wanna test App component and don’t care at all about anything else.

This can be the reason of several problems. Imagine for example, that the children components (MessageList in this case) perform side effect operations on the created hook, such as calling fetch, a Vuex action or state changes? That’s something we definitely don’t want.

Luckily, Shallow Rendering solves this nicely.

What is Shallow Rendering?

Shallow Rendering is a technique that assures your component is rendering without children. This is useful for:

Testing only the component you want to test (that’s what Unit Test stands for)
Avoid side effects that children components can have, such as making HTTP calls, calling store actions…

Testing a Component with vue-test-utils

vue-test-utils provide us with Shallow Rendering among other features. We could rewrite the previous test as follows:

import { shallow } from 'vue-test-utils'
import App from '../src/App'

describe('App.test.js', () => {
  let cmp

  beforeEach(() => {
    cmp = shallow(App, { // Create a shallow instance of the component
      data: {
        messages: ['Cat']
      }
    })
  })

  it('equals messages to ["Cat"]', () => {
    // Within cmp.vm, we can access all Vue instance methods
    expect(cmp.vm.messages).toEqual(['Cat'])
  })

  it('has the expected html structure', () => {
    expect(cmp.element).toMatchSnapshot()
  })
})

And now, if you’re still running Jest in watching mode, you’ll see the test still pass, but the Snapshot doesn’t match. Press u to regenerate it. Open and inspect it again:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`App.test.js has the expected html structure 1`] = `
<div
  id="app"
>
  <!--  -->
</div>
`;

You see? Now no children have been rendered and we tested the App component fully isolated from the component tree. Also, if you have any created or whatever hooks in the children components, they haven’t been called either 😉.

If you’re curious about how shallow render is implemented , check out the source code and you’ll see that basically is stubbing the components key, the render method and the lifecycle hooks.

In the same vein, you can implement the MessageList.test.js test as follows:

import { shallow } from 'vue-test-utils'
import MessageList from '../src/components/MessageList'

describe('MessageList.test.js', () => {
  let cmp

  beforeEach(() => {
    cmp = shallow(MessageList, {
      // Beaware that props is overriden using `propsData`
      propsData: {
        messages: ['Cat']
      }
    })
  })

  it('has received ["Cat"] as the message property', () => {
    expect(cmp.vm.messages).toEqual(['Cat'])
  })

  it('has the expected html structure', () => {
    expect(cmp.element).toMatchSnapshot()
  })
})

Find the full example on Github.

Originally published at alexjoverm.github.io on August 21, 2017

How I made a Progressive Web App out of my Blog

Alex Jover — Mon, 14 Aug 2017 15:50:15 +0000

Originally published at alexjoverm.github.io on August 7, 2017.

One day I wanted to learn about PWA (Progressive Web App), so I though: What's better than doing it with my own blog?

I think that's something developers do: when we wanna learn something, we go and get our hands dirty, right?

The first thing I wanted was to get metrics and insights on the blog at that point. For that I used Lighthouse in its Chrome extension version.

By default, the performance stats were quite good. I wasn't surprised: my blog runs on Hexo, a NodeJS static site generator which I'm in love with due to its blazing speed, easiness of deployment, and familiarity with NodeJS and its ecosystem.

For the PWA metrics, it was half-way, and I've never payed attention to that. Let's see what steps I did to make it 100% a Progressive Web App.

1. Create a Web App Manifest and Icons

The Web App Manifest is a JSON file designed to describe a Web Application. This is a excerpt of my manifest.json:

{
  "name": "Alex Jover Blog",
  "short_name": "AlexJ Blog",
  "theme_color": "#008aff",
  "background_color": "#ffffff",
  "display": "standalone",
  "icons": [
    {
      "src": "images/icons/icon-72x72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
  ...

I think the names are pretty descriptive by themselves. Make sure at least you add the name, short_name and icons fields.

Some other fields you may be interested in, are start_url and scope.

As per the icons, you need to generate them in several sizes. For that I've used this Web App Manifest generator, which also helps you creating the manifest.json file. I've downloaded the zip file from that web, unzipped it and moved the files to where they belong. Then updated the src property of the icons array as needed.

Finally, you must include it with a meta tag in the head of the HTML (you'll see my examples are in Jade/Pug, but I'll write it here in pure HTML):

<link rel="manifest" href="/manifest.json">

2. Add meta tags

You need to add some meta tags so all supported browsers would appropriately understand it as a Progressive Web App. The tags I added are:

<link rel="icon" href="/images/icons/icon-152x152.png">
<!-- theme-color defines the top bar color (blue in my case)-->
<meta name="theme-color" content="#008aff"/>

<!-- Add to home screen for Safari on iOS-->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="default"/>
<meta name="apple-mobile-web-app-title" content="Alex Jover Blog"/>
<link rel="apple-touch-icon" href="/images/icons/icon-152x152.png"/>

<!-- Add to home screen for Windows-->
<meta name="msapplication-TileImage" content="/images/icons/icon-152x152.png"/>
<meta name="msapplication-TileColor" content="#000000"/>

As you can see, some platforms have their own meta tags.

3. Create a Pre-cache Service Worker

Creating a Service Worker could be a very tedious job, they're very versatile and allow to do a lot of things.

For most cases, we wanna use them to cache all the static files, so our app can work offline. There are different strategies to do this, they all are explained very well in the Offline Cookbook, written by Jake Archibald at Google. Another resource worth checking is serviceworke.rs.

Still, it's quite some work to create and maintain a Service Worker for this purpose and every project. That's where sw-precache comes in handy, a tool that automatically creates a pre-cache Service Worker for a set of static assets using the cache-first strategy.

If you're using Webpack in your project, you're lucky to have a sw-precache plugin that you can plug in your conf to create a Service Worker for your bundled assets automatically.

In my case, I'm not using webpack, gulp or anything. Just a modified version of Beautiful Hexo theme with plain css, js and images.

But that's no problem. You can use sw-precache command line utility. For that, I created first a sw-config.js file, indicating the assets to cache and the prefix to strip out, since the service worker will be under the public folder as well:

module.exports = {
  staticFileGlobs: [
    'public/css/**.css',
    'public/**/**.html',
    'public/**/**.jpg',
    'public/**/**.png',
    'public/js/**.js'
  ],
  stripPrefix: 'public',
}

Then simply running sw-precache --config sw-config.js, it creates a service-worker.js file ready to use.

Note: keep in mind Service Workers run only in localhost or in a HTTPS url

4. Register the Service Worker

Once created a service-worker.js file, you need to register it in your app. For that, I used a battle tested service-worker-registration.js file located on the sw-precache repo.

Then I simply copied it to my repo where the js files of the theme are.

5. Glue all together

So far I've got needed for building an offline ready and installable Progressive Web App:

Having a manifest.json with icons
Adding meta tags
Create a Service Worker for pre-caching
Run in on HTTPS (I'm using Github Pages)

Then only thing is, every time I post or change anything from the theme, I must re-create the precache service worker file, which is a bit repetitive.

That's why I wrote a extremely simple script:

hexo generate -f # re-generates the static assets
sw-precache --config sw-config.js # creates the service worker
cp service-worker.js public # copies it to the static site folder
hexo deploy # deploys it to github pages

So as before I only needed to do hexo deploy -g, which generates the public folder and deploys it, now I had to add 2 steps in between for the service worker creation, and using this script it's very comfortable to do.

Checking out

Running again a Lighthouse audit, I saw that was all to get the 100 PWA metrics, plus some extra performance and accessibility improvements I made:

When I opened from my Android phone on Chrome, I saw the "Add to Home" banner, which made me very happy to see my Blog being installable such a native app:

And best of all, the blog is fully working offline, so go try out turning off your internet connection and see the magic of a working Progressive Web App :)

Conclusion

It's amazing to learn new stuff, specially such early technologies as Progressive Web Apps, but is even better to learn it by applying it to a real project of yourself!

Lazy loading in Vue using Webpack's code splitting

Alex Jover — Wed, 19 Jul 2017 09:19:37 +0000

When a Vue app gets large, lazy loading components, routes or Vuex modules using Webpack's code splitting will boost it by loading pieces of code only when needed.

We could apply lazy loading and code splitting in 3 different levels in a Vue app:

Components, also known as async components
Router
Vuex modules

But there is something they all have in common: they use dynamic import, which is understood by Webpack since version 2.

Lazy load in Vue components

This is well explained in the "Load components when needed with Vue async components" on Egghead.

It's as simple as using the import function when registering a component:

Vue.component('AsyncCmp', () => import('./AsyncCmp'))

And using local registration:

new Vue({
  // ...
  components: {
    'AsyncCmp': () => import('./AsyncCmp')
  }
})

By wrapping the import function into an arrow function, Vue will execute it only when it gets requested, loading the module in that moment.

If the component importing is using a named export, you can use object destructuring on the returned Promise. For example, for the UiAlert component from KeenUI:

...
components: {
  UiAlert: () => import('keen-ui').then(({ UiAlert }) => UiAlert)
}
...

Lazy load in Vue router

Vue router has built in support for lazy loading. It's as simple as importing your components with the import function. Say we wanna lazy load a Login component in the /login route:

// Instead of: import Login from './login'
const Login = () => import('./login')

new VueRouter({
  routes: [
    { path: '/login', component: Login }
  ]
})

Lazy load a Vuex module

Vuex has a registerModule method that allow us to dynamically create Vuex modules. If we take into account that import function returns a promise with the ES Module as the payload, we could use it to lazy load a module:

const store = new Vuex.Store()

...

// Assume there is a "login" module we wanna load
import('./store/login').then(loginModule => {
  store.registerModule('login', loginModule)
})

Conclusion

Lazy loading is made extremely simple with Vue and Webpack. Using what you've just read you can start splitting up your app in chunks from different sides and load them when needed, lightening the initial load of the app.

If you like it, please go and share it! You can follow me on this blog or on twitter as @alexjoverm. Any questions? Shoot!

Originally published at alexjoverm.github.io on July 7, 2017.

Integrate TypeScript in your Vue project

Alex Jover — Mon, 03 Jul 2017 08:37:09 +0000

You have a Vue project and you heard about all things TypeScript can help you with. You decide to start using TypeScript. Here you'll see how to do that in an approachable and pragmatic way.

In this article we'll assume you're using SFC (Single File Components), but it could work as well even if you're splitting them into multiple files. So... let's get started!

Integrating TypeScript

We're gonna start from Vue CLI Webpack's template, but it would work as well with the amazing PWA template. Don't choose to use ESLint when you're ask to:

vue init webpack my-app # or: vue init pwa my-app
cd my-app

We have to do 4 steps:

1. Create a `tsconfig.json` file

Let's start with something very simple, later we'll get back to the TypeScript configuration.

{
  "compilerOptions": {
    "lib": ["dom", "es5", "es2015"],
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "allowSyntheticDefaultImports": true
  }
}

The most important part is the allowSyntheticDefaultImports setting. Since Vue types doesn't use ES2015 default exports, this setting must be set to by-pass that. You can see more info in this VSCode docs page.

Setting "module": "es2015" would make the code tree-shakeable by producing ESM (EcmaScript Modules).

2. Add `ts-loader` and webpack tweaks

Install typescript an ts-loader with npm:

npm i -D typescript ts-loader

Then open build/webpack.base.conf.js, and place the following code at the beginning of module.rules, right before than vue-loader:

module: {
    rules: [
      {
        test: /\.ts$/,
        exclude: /node_modules|vue\/src/,
        loader: "ts-loader",
        options: {
          appendTsSuffixTo: [/\.vue$/]
        }
      },
    ...

In there, rename the entry to .ts and add it to the extensions:

...
entry: {
  app: './src/main.ts'
},
...
resolve: {
    extensions: ['.ts', '.js', '.vue', '.json'],
...

3. Add `es-module: true` to `build/vue-loader.conf.js`

That will tell vue-loader to use ES instead of CJS (CommonJS) modules, as describe in vue-loader docs:

module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.cssSourceMap,
    extract: isProduction
  }),
  esModule: true
}

4. Use TypeScript in files

So you must do 2 things here:

Rename .js to .ts extensions within the src folder
Use lang="ts" on the script tag of you Vue file. For example in App.vue:

<script lang="ts">
export default {
  name: 'app'
}
</script>

Troubleshooting

If your editor is yelling at the line import App from './App' in main.js file about not finding the App module, you can add a vue-shim.d.ts file to your project with the following content:

declare module "*.vue" {
  import Vue from 'vue'
  export default Vue
}

I'm using VSCode 1.13.1 and not seeing it, but I've seen it before.

TSLint, Prettier... Goddess!

I've recorded a 2 min video on Egghead where I explain how you can set up TSLint with Prettier without any conflicts. Go check it out!

Ok, I can use TypeScript... so now what's next?

At this point, TypeScript could already point you out to some errors you haven't noticed before by using built-in and third-party types and gives you a better dev experience by using type inference, as explained in TypeScript at Slack, an article telling how Slack moved their codebase to TypeScript.

Still, you must add your own types by using interfaces, types, enums, classes and whatever you need. That way you'll add more type coverage that TypeScript will use to apply static typing, assuring type safety.

Ideally, you'd use the TypeScript 2.3 strict compiler option in your tsconfig.json because it'll bring you the most type safety. Marius Schulz has a well explained article about this. By TypeScript 2.3, the strict option is a group of 4 options, but in future releases it could add more:

strictNullChecks
noImplicitAny
noImplicitThis
alwaysStrict

However, if you have a medium/large codebase, using strict option will make you spend really a huge effort and time solving all the type shortage.

For that case, a good way to integrate TypeScript is to start with the most flexible configuration, and as you add more type coverage to your codebase, start to enable individually the flags mentioned above, till you get to the point that you can apply the strict option, so you can approach it in a pragmatic way.

Conclusion

TypeScript brings you type safety to your codebase from the very start, but the more types you define, the more easy to detect bugs and errors and to make the code maintainable. Vue from version 2 is shipped with typings, so we can make use of them. They become more powerful when you use OOP (Object Oriented Programming) in Vue, but will see that in another post.

If you like it, please go and share it! You can follow me on this blog or on twitter as @alexjoverm. Any questions? Shoot!

Originally posted at alexjoverm.github.io on June 28, 2017

Use Prettier with TSLint and relax

Alex Jover — Tue, 13 Jun 2017 08:22:17 +0000

Wait, a video explaining "Use Prettier with TSLint"? Yes! Check it out on Egghead.io!

Prettier support for TypeScript just landed. Let's see how tslint-config-prettier helps to seamlessly combine it with TSLint.

Recently, @vjeux, one of the authors of Prettier, announced TypeScript support in the following tweet:

// Detect dark theme var iframe = document.getElementById('tweet-870670634908475392-528'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=870670634908475392&theme=dark" }

That's pretty amazing! I've just went and tried it out. I was so impressed by how magic the experience was that I've completely removed TSLint from TypeScript library starter.

The problem

Prettier and TSLint collide, since they both take care of formatting. For the following code, TSLint will give us the error [tslint] Multiple spaces found before '{'. (no-multi-spaces):

class DummyClass      {
  food = 'sandwitch'
}

But, when we run Prettier, the code is automatically formatted:

class DummyClass {
  food = 'sandwitch'
}

This makes the workflow pretty useless, since we're getting linting errors that Prettier will solve.

The solution

It's very simple:

Let Prettier take care of code formatting, and TSLint of the rest

That's why I've created tslint-config-prettier. It disables all TSLint formatting related rules, as well as for tslint-react and tslint-eslint-rules.

The installation is straightforward, once you setup TSLint and Prettier:

npm i -D tslint-config-prettier

Add it to the end of your tslint.json file:

{
  "extends": [
    "tslint:latest",
    "tslint-config-prettier"
  ]
}

Now we can use Prettier and TSLint without any problem!

I must thank @vjeux for pointing me out to this solution and @JBlack for the time to review tslint-config-prettier.

If you liked it, please go and share it! You can follow me on this blog or on twitter as @alexjoverm. Any questions? Shoot!

Originally published on Alex Jover blog

Use Prettier with TSLint and be happy

Alex Jover — Mon, 12 Jun 2017 14:36:23 +0000

Prettier support for TypeScript just landed. Let’s see how tslint-config-prettier helps to seamlessly combine it with TSLint.

Wait, a video explaining “Use Prettier with TSLint”? Yes! Check it out on Egghead.io!

Recently, @vjeux, one of the authors of Prettier, announced TypeScript support in the following tweet:

That’s pretty amazing! I’ve just went and tried it out. I was so impressed by how magic the experience was that I’ve completely removed TSLint from TypeScript library starter.

The problem

Prettier and TSLint collide, since they both take care of formatting. For the following code, TSLint will give us the error [tslint] Multiple spaces found before '{'. (no-multi-spaces):

class DummyClass { food = 'sandwitch'}

But, when we run Prettier, the code is automatically formatted:

class DummyClass { food = 'sandwitch'}

This makes the workflow pretty useless, since we’re getting linting errors that Prettier will solve.

The solution

It’s very simple:

Let Prettier take care of code formatting, and TSLint of the rest

That’s why I’ve created tslint-config-prettier. It disables all TSLint formatting related rules, as well as for tslint-react and tslint-eslint-rules.

The installation is straightforward, once you setup TSLint and Prettier:

npm i -D tslint-config-prettier

Add it to the end of your tslint.json file:

{ "extends": ["tslint:latest", "tslint-config-prettier"]}

Now we can use Prettier and TSLint without any problem!

I must thank @vjeux for pointing me out to this solution and @JBlack for the time to review tslint-config-prettier.

Write a library using TypeScript library starter

Alex Jover — Sat, 01 Apr 2017 12:33:55 +0000

Explained in a video lesson on Egghead

Have you ever written a library in JavaScript or TypeScript? Are you planning to do it? If so, you must try Typescript library starter, a starter kit that will make easy to get started while providing all features you know to write a library in Typescript.

Writing a library or project always requires some work:

Prepare configuration: package.json, tsconfig.json, CI, bundling, build, minification, types generation...
Testing tools: Unit test (with watch mode), coverage...
Release versions and changelog: This is a repetitive work that takes some time
API Docs generation

Typescript library starter solves all of that and more, plus:

Uses latest tools: RollupJS (with tree-shaking), Prettier, Jest, TSLint, Typedoc...
Multiple bundle generation, as described in 2ality
Focused on automation: with a set of scripts you as a user have all the work done
Allows automatic releases to Github and Npm by using and configuring Semantic Release
Is already configured to work on Travis, Coveralls, generate types, and more!

Let's see how easy is to use it.

Get started

Let's start by running:

git clone https://github.com/alexjoverm/typescript-library-starter.git
cd typescript-library-starter
npm install

A prompt will show up asking your library name:

When you do so, it will configure the project for you based on the library name and your git config. It re-inits the git directory, configures rollup, package.json and your entry files (both src and test).

See it yourself! Try running npm t, it will run a sample test. Or run npm run build, it will create a dist folder with the bundle, typings file and documentation.

See all the commands available on the repo Readme

Now start coding. You'll see when you make a commit, your code is automatically formatted! That's thanks to Prettier :)

Automatic releases and Travis CI

We need to do some previous steps. First, make sure you've created an account on:

npm
Travis
Coveralls

Also, make sure you've set the repository.url property on your package.json.

Now, run the following script:

node tools/semantic-release-prepare

The script will setup 2 githooks: commitmsg and prepush. They're convenient, since semantic release works by following conventional commit messages.

At this point, you just need to install semantic release. Answer NO to the "Generate travis.yml" question, because it is already prepared for you.

npm install -g semantic-release-cli
semantic-release setup

From now on, better use npm run commit. It will show you a prompt which is very convenient for creating a conventional commit. Note that running git commit -a without the proper commit message will fail.

You'll notice that when you run git push, the exactly same command that Travis CI runs is run locally on your machine, so you can see early if the build will fail.

Wrapping up

We haven't dived into any kind of configuration, but we were able to not only write a dummy library, but also make sure all quality steps (linting, testing, coverage) are asserted and that we can create bundles, builds, typings and all things needed for a TypeScript library.

Not only that, but also how to make maintainability easy by automating releases!

If you liked Typescript library starter, please give it a star. If you have any feedback, you can either open an issue or reach me at @alexjoverm

Forem: Alex Jover

Are you attending ViteConf 2024?

Main talk - How the ViteConf Pyraminx 3D Puzzle Was Built

🚀 Fresh Storyblok SDK releases, plus new Canada and Australia regions 🌍

✨ What Changed?

🔄 Steps to Update to the Latest SDK versions

🌍 Expanding Horizons: Leveraging the New Regions

🛠️ Full List of New Frontend SDKs versions

🧑‍💻 Ready to try it out?

Hybrid Rendering: the secret way to smoothly test Vue.js components

1 year organising Alicante Frontend

What’s Alicante Frontend made of?

The future

My tips to be a happier developer

1. Focus on success rather than failure

2. Build empathy within your team

3. Manage your time and priorities

4. Keep up your motivation

Conclusion

Write the first Vue.js Component Unit Test in Jest

Set up a vue-test sample project

Testing a Component

The problem with nested components

What is Shallow Rendering?

Testing a Component with vue-test-utils

How I made a Progressive Web App out of my Blog

1. Create a Web App Manifest and Icons

2. Add meta tags

3. Create a Pre-cache Service Worker

4. Register the Service Worker

5. Glue all together

Checking out

Conclusion

Lazy loading in Vue using Webpack's code splitting

Lazy load in Vue components

Lazy load in Vue router

Lazy load a Vuex module

Conclusion

Integrate TypeScript in your Vue project

Integrating TypeScript

1. Create a tsconfig.json file

2. Add ts-loader and webpack tweaks

3. Add es-module: true to build/vue-loader.conf.js

4. Use TypeScript in files

Troubleshooting

TSLint, Prettier... Goddess!

Ok, I can use TypeScript... so now what's next?

Conclusion

Use Prettier with TSLint and relax

The problem

The solution

Use Prettier with TSLint and be happy

The problem

The solution

Write a library using TypeScript library starter

Get started

Automatic releases and Travis CI

Wrapping up

1. Create a `tsconfig.json` file

2. Add `ts-loader` and webpack tweaks

3. Add `es-module: true` to `build/vue-loader.conf.js`