I’m maintaining some translations for OSS libraries like React, SWR.

• https://ja.react.dev/
• https://swr.vercel.app/ja

There is a difference between the docs. The links with hash fragment in the Japanese React docs work, but the links in the Japanese SWR docs don’t work even if the English version works as expected. Why?

The reason is that their heading ids are also translated.

For example, SWR has a link like https://swr.vercel.app/docs/revalidation#disable-automatic-revalidations .

#disable-automatic-revalidations is a hash fragment that points to a specific heading on the page.

The heading title is “Disable Automatic Revalidations”. The heading id is converted from the heading title.

Disable Automatic Revalidations -> #disable-automatic-revalidations

The markup is the following.

<h2 class="...">
　Disable Automatic Revalidations
　<span class="..." id="disable-automatic-revalidations"></span>
  <a href="#disable-automatic-revalidations" class="subheading-anchor" aria-label="Permalink for this section"></a>
</h2>

That’s great! Let’s see the Japanese version.

The link is https://swr.vercel.app/ja/docs/revalidation#%E8%87%AA%E5%8B%95%E5%86%8D%E6%A4%9C%E8%A8%BC%E3%81%AE%E7%84%A1%E5%8A%B9%E5%8C%96, which is URL encoded and decoded text is “自動再検証の無効化”.

The markup is like this.

<h2 class=...">
  自動再検証の無効化
  <span class="..." id="自動再検証の無効化">
  </span><a href="#自動再検証の無効化" class="subheading-anchor" aria-label="Permalink for this section"></a>
</h2>

The heading ids are also translated because it’s based on the heading title. This don’t work because we don’t modify hash fragments for translated docs, which means we still the links like https://swr.vercel.app/ja/docs/revalidation#disable-automatic-revalidations that doesn’t match with any heading ids.

So we have to keep the heading ids original.

Nextra, a site generator framework that SWR uses, has a feature for it.

Markdown - Nextra

So I’ve made a PR to fix this.

fix: all broken links with hash fragment by adding heading ids by koba04 · Pull Request #489 · vercel/swr-site

This PR adds custom ids to all headings in the docs.

- ## Optimistic UI
+ ## Optimistic UI [#optimistic-ui]

You can see the script that I used to make the PR.

GitHub - koba04/convert-swr-site-heading-ids: This adds ids to all headings in the SWR site

React Docs has the same feature, which is a different syntax, as a remark plugin.

react.dev/remark-header-custom-ids.js at main · reactjs/react.dev

## Using React for an entire subroute of your existing website {/*using-react-for-an-entire-subroute-of-your-existing-website*/}

This is a common pitfall for translation projects, and it’s annoying for users. So I hope this helps some projects have translations.

Key in SWR

Do you know SWR accepts a non-string values as its key?
Many examples in the SWR website use URL strings as keys, but you can pass various types as the key, like an array or an object.

useSWR(`/api/user/{userId}`, fetcher)
// or
useSWR(["user", userId], fetcher)
// or
useSWR({ path: "/api/user", userId }, fetcher)

In this post, I’ll introduce a pattern combining non-string keys and Mutate Filter Function, which is added in v2.

Mutate Filter Function

Mutate Filter Function is a feature to mutate multiple keys based on a filter function, which is passed as the first argument of a global mutate function.
The filter function is applied to all cache keys, and all cache data that the filter function returns true are mutated.

You can see more details in the documentation.

https://swr.vercel.app/docs/mutation#mutate-multiple-items

For example, you can mutate all keys starting with /api/user like this.
(If you are not familiar with the mutate function, check the documentation.

// You must use the `mutate` function instead of the bound `mutate`
const { mutate } = useSWRConfig()
// or import { mutate } from "swr"

// You shouldn't rely on the assumption that the key is a string
// because this function is applied to all cache keys.
mutate(key => typeof key === "string" && key.startsWith("/api/user");

In some cases, cache data have a relation with each other. For example, cache data for /api/users and /api/user/1 share the same data even though they are stored in the cache separately.

// useSWR("/api/users, fetchAllUsers);
// cache: /api/users
[
 { id: 1, name: "John", score: 10 }, // 👀
 { id: 2, name: "Anna", score: 20 },
 { id: 3, name: "Tim", score: 30 }
]

// useSWR("/api/user/1", fetchUser);
// cache: /api/user/1
{ id: 1, name: "John", score: 10 } // 👀

In this case, we should update the both cache data when the user score has been updated.

mutate("/api/user/1", updateUser);
// PUT /api/user/1 { score: 15 }

// cache: /api/user/1
{ id: 1, name: "John", score: 15 }

// You should also update `/api/users`
mutate("/api/users", updatedUsers, { revalidate: false });

// cache: /api/users
[
 { id: 1, name: "John", score: 15 },
 { id: 2, name: "Anna", score: 20 },
 { id: 3, name: "Tim", score: 30 }
]

If you didn’t update the cache data for /api/users, we would see stale data (score: 10).

In this example, we must recognize that api/user/1 and /api/users share the same data.
If the application gets scaled, this would be hard to maintain.

In order to manage the relation easily, let’s combine with Mutate Filter Function and non-string keys.

Tagged Key

As I mentioned before, the key of SWR accepts an object as its key, so you can introduce a concept like tags with the key. The tag is just a concept, not a feature.

In this post, I define the following shape of the key as an example.

type Key = {
 tags: string[],
 path: string
};

This is just an example, so I define the shape very simply. But you can define any shape of key for your application.

Let’s use the shape of the key, so useSWR calls would look like this.

const userId = 1;
useSWR(
  {
    tags: ["#user"],
    path: "/api/users"
  },
  ({ path }) => fetcher(path)
);
useSWR(
  {
    tags: ["#user", `#userId:${userId}`],
    path: `/api/users/${userId}`
  },
  ({ path }) => fetcher(path)
);

That might be a bit more complex than using an URL string as its key, but it’s still straightforward.

Next, let’s define functions to take advantage of the tag.

The following is a function to revalidate all users’ data.

const revalidateUsers = () =>
  mutate(key =>
    typeof key === "object" &&
     Array.isArray(key.tags) &&
     key.tags.includes("#user")
)

This mutates all cache data having #user as a tag value. Of course, you should check the shape of the key before using the tag.

The following is a function to revalidate a specific user.

const revalidateUsers = userId =>
  mutate(key =>
    typeof key === "object" &&
     Array.isArray(key.tags) &&
     key.tags.includes("#user") &&
     key.tags.includes(`#userId:${userId}`)
)

This mutates all cache data having #user and a specific user id as tag values.

When you want to clear cache data rather than revalidating it, you can do it like this.

const clearUsersData = () =>
  mutate(
    key =>
      typeof key === "object" &&
      Array.isArray(key.tags) &&
      key.tags.includes("#user"),
    undefined,
    {
      revalidate: false
    }
)

This clears all cache data having #user as a tag value.

You still have to manage the relation between each cache data, but the tag makes it more explicit.

Limitation

useSWRInfinite and useSWRSubscription store cache data that are not listed Mutate Filter Function.

ref. https://github.com/vercel/swr/issues/2497

Note: You can update the useSWRInfinite cache with the global mutate function with the unstable way.

https://swr.vercel.app/docs/pagination#global-mutate-with-useswrinfinite

Conclusion

If your application is getting complex and you have to manage many cache data related to each other, organizing cache keys like this might help you.

• NewuseSWRMutation hook
• Mutate multiple items feature
• New preload API
• New isLoading state
• New keepPreviousData option
• Improve Optimistic Updates support
• Improve React 18 support
• SWRDevTools

You can check these updates in the blog post. These features improve user experiences of your application and developer experiences of your team.

Announcing SWR 2.0 - SWR

In this post, I’ll focus on some of the updates.

Mutate Multiple Items

I’d say this was the biggest missing feature for SWR v1.

The global mutate API now accepts a filter function as its first argument.

Mutation & Revalidation - SWR

This gives us flexibility for mutation scenarios. Let’s take a look at examples.

Revalidate all cache data for the same API endpoint with different query params

For example, you have an API /api/users/?sort={id, name, etc}that returns users data, which accepts a sort key. When you have updated a user, you would want to revalidate all cache data for /api/users/ regardless of the sort key. The Mutate Multiple Items makes this possible.

import { mutate } from "swr";

const handleUpdateUser = async (user) => {
    await updateUser(user);
    // revalidate all cache data its key is start with /api/users
    mutate(key => typeof key === "string" && key.startWith("/api/users/"));
    // If you don't want to relivadate all keys and just want to invalidate the cache data,
    mutate(
      key => typeof key === "string" && key.startWith("/api/users/"),
      undefined,
      { revalidate: false }
    )
}

Revalidate the specific cache data of which keys are tagged arrays

SWR allows us to use an array as the key, which means you can add a tag into each key.

// ['user', 1]
// ['user', 2]
// ['item', 1]

We can update all cache data that have the same tag by the Mutate Multiple Items.

// Revalidate all cache data of which tag is "user"
mutate(key => Array.isArray(key) && key[0] === "user");

The filter function is applied to all cache keys, so you have to check the type of each cache key.

The Mutate Multiple Items gives us more flexible key management.

Clear all cache data

The Mutate Multiple Items can also use to clear all cache data.

const clearCache = () => mutate(
  () => true,
  undefined,
  { revalidate: false }
)

// ...clear cache on logout
clearCache()

You might wonder why we shouldn’t clear the cache data directly by accessing the cache object. Updating cache data directly might cause inconsistency in some scenarios like concurrent features or race conditions. So you should avoid it and use mutate instead.

Documentation

I think documentation is crucial for libraries. Developers can’t find a feature or might use it the wrong way when it’s not well documented. In the v2 release, We’ve reorganized some documentation, like the Mutation page. I’ve also added a new “Understanding SWR” page so that developers can understand how SWR behaves.

This is from my past experience. When I started trying SWR, I was very confused about how to combine return values, which are data, isValidating, and error. SWR v2 introduces more patterns with isLoading and the keepPreviousData option. I think developers get more confused with them. In order to help understand this, I’ve added the new page based on the diagrams Shu created.

Bundle Size and Optimization

As you can see, SWR v2 has many features, but the bundle size is smaller than v1! The reason is that we’ve updated the build target version from ES5 to ES2018, which drastically reduced the bundle size. It also brings performance improvements with SSR.

swr ❘ Bundlephobia

Middleware abstraction

This is about internal implementation, so you don’t have to care about that. But I wanted to pick up that because I was impressed the power of abstraction. SWR introduced Middleware in the v1 release, which enables us to extend SWR in user land. But this is also beneficial for SWR itself.

Announcing SWR 1.0 - SWR

For example, useSWRMutation, preload are implemented as a middleware, so we separate these implementation from core implementation of SWR, which keeps core implementation small. I think it’s important for us to keep adding new features to SWR. useSWRInfinite and useSWRImmutable are also implemented as middleware. you can check it on the GitHub.

https://github.com/vercel/swr

SWRDevTools

DevTools is a long standing issue for SWR, so I started implementing it because it seems to be fun 😁 I’m honored that SWRDevTools is a part of features of v2 release.

https://swr-devtools.vercel.app/

This is the my first browser extension, so I’ve learned a lot of thing like this.

• How to develop and debug a extension
• How to inject a script into a web page
• How to add a panel to the developer tools
• How to communicate between a webpage, a content script, a background script, and a devtool panel
• How to implement a browser extension that works on Chrome (MV3) and Firefox (MV2)

SWR v2 has a native support of SWRDevTools, so you don’t have to do any setup in your application. SWRDevTools has also support SWR v1. When you want to use SWRDevTools for SWR v1, you have to wrap your application into the SWRDevTools component.

I’ve also build a demo on the webpage so that developers can try SWRDevTools without installing the extension. This is also implemented by using SWRDevTools. This brings additional complexity into it, but that makes sense.

I hope SWRDevTools helps your development.

Thank you!

You can check other great features on the blog post and documentation!

I’ve learned a lot of things through working on the v2 release. All of the core member of SWR are great. Thank you for working with me!

SWR is a React Hooks for data fetching. It manages cached data and revalidates the cache automatically. This is great, but I see developers who are confused by the SWR’s revalidating behaviors. SWR explains the behavior in the documentation though.

• Automatic Revalidation - SWR
• API Options - SWR

This post explains the behavior. You can see each behavior on the CodeSandbox projects that I’ve created.

## Default behavior

The default option of SWR ( useSWR(key, fetcher) without options) behaves as the following.

• Revalidate when a page has mounted
• Revalidate when a page gets re-focus
• Revalidate when a page gets back to online
• Revalidate when a request has failed

Example: https://codesandbox.io/s/angry-star-ybk38

I’ve often seen confusion why SWR makes so many requests even if the cache data has been stored. This is because of the behavior. But you can customize the behavior by passing options. So let’s see options to handle the revalidating behaviors.

## revalidateOnFocus

default: true

revalidateOnFocus is an option whether SWR revalidates data when a page gets focused or not. This is useful when you want to display the latest data when users get back to a page. But sometimes this leads to unintentional requests. If you want to make requests minimum, you should disable the option.

Automatic Revalidation - SWR

## revalidateOnReconnect option

default: true

revalidateOnReconnect is a similar option with revalidateOnFocus. But it revalidates data when a page gets back online.

Automatic Revalidation - SWR

## revalidateIfStale option

default: true

SWR has the revalidateIfStale option and the default value is true. The option indicates whether SWR revalidates data on rendering or not when the cache has stale data. SWR doesn’t revalidate data on rendering when the key has not been changed, so it only affects the behavior on rendering when mounting or the key has been changed. This also doesn’t affect the behaviors of revalidateOnFocus and relivadateOnReconnet.

Example: https://codesandbox.io/s/sparkling-paper-gx9n8

## revalidateOnMount option

default: undefined

revalidateOnMount is an option that only affects the behavior on mounting. If revalidateOnMount is true, its fetcher function is always called on mounting even if data is stored in the cache. If revalidateOnMount is false, its fetcher function is never called on mounting. The default value is undefined, not false, which means the default value doesn’t affect its behavior.

Example: https://codesandbox.io/s/distracted-pasteur-nko4t

⚠️ SWR v1.2.1 doesn’t revalidate data with revalidateOnMount: false even if key has been changed on subsequent updates. I’ve fixed the bug, so it will be fixed in the next release.

• refactor: revalidateIfStale has an effect on updates, not only mounting by koba04 · Pull Request #1837 · vercel/swr
• test: add a test for the behavior of revalidateOnMount when the key has been changed by koba04 · Pull Request #1847 · vercel/swr

## dedupingInterval

default: 2000

depupingInterval is an interval to dedupe requests with the same key. The default value is 2000, which means that revalidations for the same key don’t happen in 2s. This is useful when you want to avoid making many requests for the same URL in a short period.

Example: https://codesandbox.io/s/cool-tdd-fe8ob

## useSWRImmutable

useSWRImmutable is a React Hooks equivalent with the following option. useSWRImmutable doesn’t revalidate data until calling the mutate function explicitly. This is useful for the data that doesn’t change after loading. I feel that the behavior is what some developers assume as the default behavior of SWR.

useSWR(key, fetcher, {
  revalidateIfStale: false,
  revalidateOnFocus: false,
  revalidateOnReconnect: false
})

Automatic Revalidation - SWR

You can use useSWRImmutable by importing from swr/immutable.

Example: https://codesandbox.io/s/wizardly-khorana-iip2r

Automatic Revalidation - SWR

## Retry on an error

SWR tries to retry a request that is failed by default. You can change the behavior with shouldRetryOnError, errorRetryInterval, and onErrorRetry.

Note: SWR uses Exponential Backoff Algorithm to prevent making too many requests when an error occurred.

Error Handling - SWR

## Conclusion

SWR provides us with various ways to handle revalidating behaviors through options, so you can customize the behaviors with its options. If you want to apply a specific option to all useSWR hooks, you can use SWRConfig as a global configuration.

Global Configuration - SWR

SWR adopts the approach to optimize rendering and you can see it in the following document.

Performance - SWR

The following is the implementation.

return {
    mutate: boundMutate,
    get data() {
      stateDependencies.data = true
      return data
    },
    get error() {
      stateDependencies.error = true
      return error
    },
    get isValidating() {
      stateDependencies.isValidating = true
      return isValidating
    }
} as SWRResponse<Data, Error>

swr/use-swr.ts at ba110c317c4888e577d7143c9c8686cfcea6e218 · vercel/swr

The returned object is what useSWR returns and stateDependencies is an object to track the usage. The properties of the returned object are implemented as getter functions, so it’s marked as “used” when we access these properties.

// the data is marked as "used"
const { data } = useSWR("/api/foo");

This is cool!

But you should be careful when debugging. If you add console.log to debug the values, you might encounter an unexpected behavior.

const { data, error, isValidating } = useSWR("/api/foo");
console.log({ data, error, isValidating });
// Now it renders everytime these values are changed not only data.

In the above case, this increases rendering count because this marked all values as “used”.

SWR uses getter functions, but it can be applied to libraries that use Proxy for the same purpose. So we should be careful about debugging when we deal with libraries that use getter functions or Proxy for optimization.

I’ve encountered this when I worked on swr-devtools. Currently, this devtool inspects the cache data by defining a getter function to the cache store. But SWR introduced the middleware feature at v1.0.0 so I wanted to try using the middleware to inspect the cache data. But it caused this problem and I had to reconsider the approach.

feat: use the middleware instead of injecting a cache by koba04 · Pull Request #39 · koba04/swr-devtools

I’ve also tried to add useDebugValue, which is a built-in hook of React, because it is useful for debugging.

Hooks API Reference - React

But this also caused the same problem and I’ve suspended it.

feat: record SWR data with useDebugValue by koba04 · Pull Request #37 · koba04/swr-devtools

I know developing devtools is not common, but “console debug” is a common way to find a problem. If you encountered a problem like “This only happens on debugging”, I recommend you suspect getter functions or Proxy.

Do Not Put Non-Serializable Values in State or Actions

Avoid putting non-serializable values such as Promises, Symbols, Maps/Sets, functions, or class instances into the Redux store state or dispatched actions. This ensures that capabilities such as debugging via the Redux DevTools will work as expected. It also ensures that the UI will update as expected.

Style Guide | Redux

Yeah, I think it makes sense so that it enables us to store data in a WebStorage or send the store data to a server. Time-travel debugging is also a great feature even though I have never use the feature in production applications 😅

But, it imposes us on a constraint that we must use data structures that are possible to be serialized as JSON, which means we can only use “String”, “Number”, “Boolean”, “Array”, and “Object”. For me, the constraint makes our implementation difficult and complex.

I wrote an entry to describe a pattern to use Map/Set for data stored in a Redux store before.

Redux Store patterns (using ES2015 Map)

This makes some operations for a list easy because of the APIs that Map/Set has. For example, you can use “Map#get()” and “Map#has()”, instead of “Array#find”, to get an element from a list, which is very straightforward.

Actually, I don’t like the APIs of Map/Set because those are based on mutability and are lack of APIs. The Iterator Helpers proposal would solve the problem of the lack of APIs, so I’m looking forward to seeing that it reaches stage 4.

GitHub - tc39/proposal-iterator-helpers: Methods for working with iterators in ECMAScript

In addition to Map/Set, I’m also looking forward to the proposal of Records/Tuples (Stage2).

GitHub - tc39/proposal-record-tuple: ECMAScript proposal for the Record and Tuple value types. | Stage 2: it will change!

The data structures are based on immutability, so they are very suitable for React applications and Redux applications. Records/Tulples can be serialized with JSON.stringify, but can not be deserialized with JSON.parse even though the proposal has a proposal of JSON.parseImmutable to deserialize Objects and Arrays as Records and Tulples respectively. Does the style guide allows us to use Records/Tulples for data stored in a Redux store? Records/Tulples would become serializable and deseriablizable data structures if an application treats all data as immutable. I think it makes sense to add using Records/Tulples for all data in a Redux application to the style guide because immutability is important to make applications predictable.

I think the recommendation is a trade-off. As the style guide mentioned, we might have a problem with using non-serializable data structures, but if we can accept the risk, we can get the full power of data structures that JavaScript has. The data store often has complex operations and domain logic, so I think it’s important to pick the most suitable data structure in each case. I’ve seen code that uses Object and Array instead of a proper data structure like Map/Set. However, JavaScript has been evolving, so it’s important to take advantage of the power of evolution.

Studying Computer Science in UoPeople

As I mentioned in the post (https://medium.com/@koba04/studying-at-uopeople-d9abdc9a009f), I have been studying Computer Science in UoPeople. This year, I have taken the following courses.

• English Composition 1 (ENGL 0101)
• Online Education Strategies (UNIV 1001)
• Programming Fundamentals (CS 1101)
• Programming 1 (CS 1102)
• [In Progress] Programming 2 (CS 1103)

The courses’ contents are not hard for me because I’m already familiar with those topics, but it takes a lot of time because I have to read resources and write many documents in English (about 1000words/week). Especially, peer reviews are time-consuming. My motivation for this is to study Computer Science systematically and not expand my career, which is like a hobby project for me. So I realized that keeping the motivation is hard. I have to use much of my free time for this, which means that I have to give up something like OSS contributions. UoPeople has five terms in a year, and the period of each term is two months and has two weeks of a break between each term, which means that I have to study most of the period.

https://www.uopeople.edu/become-student/academic-calendar/

I have to spend many times than what I expect before, so I’m considering how to reduce the time for UoPeople without dropping out. But I’m also looking forward to studying further courses because those courses treat more advanced topics than what I have studied.

Studying English with a personal trainer

I had taken lessons in online English conversations to study English for years. But I doubted that it might not be effective for me. To understand how I should study English, I have used a service to study English with a personal trainer. The period was three months, and I had to study English for two hours every day. I have learned some methods I have never tried before like dictations and shadowing. My English skill didn’t gain so much during the period, but I have learned how to study English, so I think I can improve my English skill in the future, so it was good for me even though the cost was expensive. BTW, it was very hard for me to study English while studying in UoPeople...

Lessons Learned

Micromanagement is bad. I’m using a task management app, Things, to put anything that I want to do, which includes studying English and reading an article, and so on. I have so many things I want to do, so the list for every day becomes a lot. Each task doesn’t need much time though. I did the tasks every day, but it means that I only did subtle tasks every day. As a result, I didn’t do anything that has a huge impact because I couldn’t spend much time for something that isn’t listed on the task list. For example, I no longer dig into React internals before, and I don’t understand the concept of the latest React internals like Lanes. I guess this could be a bad influence on my career. So I’m considering to reduce the time for my daily tasks.

2021

I have no specific plan for the year, but I want to focus on a specific thing rather than shallowly working on various things. I want to be a good web developer, so I’ll focus on something related to the web. In addition, I’m still enjoying programming with Rust, so I’d continue to study it.

Many companies have adopted WFH because of the pandemic. I guess many parts of the companies would resume working in their office after the pandemic like before, but I hope that many companies continue WFH permanently. I think it’s definitely important to meet coworkers in person, but it doesn’t have to do every day; once a month is enough for me. I’m looking forward to being able to work with engineers regardless of the living place.

The courses I’ve taken were “Online Education Strategies- Univ 1001” and “Programming Fundamentals (Python) — CS 1101”.

• https://www.uopeople.edu/prepare-for-university/online-education-strategies-univ-1001-learning-materials/
• https://www.uopeople.edu/prepare-for-university/programming-fundamentals-java-cs-1101-learning-materials/

Univ1001 was a bit hard because it requires to write many essays and reviews, but some topics like time management and note-taking were helpful for studying in a college. I always fought against minimum word count requirements :)

CS1101 was easy for me even though I have never used Python for my jobs. It is a fundamental concept of programming, so which programming language is being used was not a concern for me.

From the next term, I’m going to take only one course each term, which means that it takes eight years to graduate a college. It is definitely long, but it makes sense for me because I have many things I want to do other than graduating a college.

The course I’m going to take in the next term is an advanced course of CS1101, of which programming language is Java. So I’ll focus on studying English during the term because I believe it is the most effective way for my career. The lesson I’ll take impose on me to studying at least two hours every day, and it might make my next term harder than the second term, but it is exciting for me.

https://www.uopeople.edu/

I major Computer Science(CS), but before studying CS at UoPeople, I have to pass an English course to prove my English proficiency :) So, I had been studying at the course from April to June.

I’ve been working as a web developer for about 15 years and am now working as a front-end developer for a company and a front-end advisor for another company. Both jobs are very exciting, and I enjoy my jobs at the companies even though it’s a bit busy.

In personal, I have two children, so I spend my weekends with my family. So I don’t have enough time to study for a university. However, I decided to study at the university. Why? Here is the story.

The Motivation

I’ve been studying web application development on my own, which is so much fun, but there are many topics I have to study, and it is very hard to cover all of them. To study fundamental topics for system development, I’ve studied and passed some tests that IPA (Information-technology Promotion Agency) provides. The things I’ve learned through studying for the tests are not connected to my jobs directly, but the knowledge sometimes helps me when I tried to study new topics.

But the study covered only a few CS topics, so I felt that I want to study more CS topics. But I cannot stop working to study them at a university because I have family and have to provide for them. So I looked for universities to provide a CS course as an online degree to study CS while working for companies as the same as before, and then I found a few universities in Japan. But, I didn’t choose the universities. Why?

In addition to CS, English is an important topic for me because it is arguably a requirement in software industries. If I want to communicate with developers who maintain OSS libraries or want to send a patch to OSS libraries, I have to communicate with developers in English. To improve my English skills, I try to use English in my life as possible as I can. In the perspective, I think learning CS in English would make sense, so I looked for universities that provide CS as an online degree. As a result, I’ve found UoPeople through watching a TED talk.

This is what I want! UoPeople provides an online course for a CS degree with very cheap cost.

> a bachelor degree can be completed in 4 years for $4,060

What is Tuition-Free? | University of the People

Getting a CS degree is not a purpose for me, but it will motivate me through the long term for the study. Nowadays, there are many great resources to learn CS for free. For example, CS 253 Web Security is a great class to study how the web works from the perspective of security, and Khan Academy has a CS course to learn algorithms, cryptography, and so on.

• https://web.stanford.edu/class/cs253/
• https://www.khanacademy.org/computing/computer-science

But I want to learn CS with a curriculum and thought that a university is the best place to achieve it. Anyway, learning computer science is so much fun :) This is my main motivation.

The University of the People

UoPeople is an online university, so the classes, including exams, are entirely online, which means we can learn anywhere and anytime. To get a grade, we have to study and hand in assignments for about nine weeks. According to their website, we have to study at least15–17 hours per week on each course, which means that if you study only on weekdays, you have to study at least 3 hours every weekday.

> A student should expect to spend at least 15–17 hours per week on each course. This includes readings, research work, writing, project work, etc.

How many hours per week should students expect to devote to their coursework? | University of the People

In the last term, I took only one course in the term, so I’ll share with you about my experiences in the class, which is ENGL0101.

English Course ENGL0101

If you have not earned a diploma from an accredited English institution or don’t meet the qualification of some tests like TOEFL, you have to take an English class before studying at UoPeople.

English Proficiency | University of the People

I have a score of TOEIC, but it is not on the list even though Eiken(英検) is included in the list. I considered taking a test of Duolingo because it doesn’t require so much time for a test like TOEFL. But I didn’t take the test and decided to take the English course because I’d like to study English not only CS, so it was a good opportunity for me.

You can see the curriculum for the class at the following.

English Composition 1 - ENGL 0101: Learning Materials | University of the People

I cannot share the details of the class. In this class, I’ve read stories, reviewed them, discussed with classmates, assessed peer’s assignment, and taken a self-quiz each week. Especially, I was struggled to read literature because what I read regularly is about technology, which many of my vocabularies are from the technology area. Moreover, literature is usually vaguer than articles about technologies, so I had to take much time to understand the story of literature.

Through this class, I realized that my vocabularies are less than other classmates, so I feel that I have to read books from various categories written in English.

But the hardest part of taking the class is to keep studying for nine weeks. I planed to study at weekends (Fri 〜 Sun) because I might not be able to use weekdays for the study. So I studied for about five hours at weekends during the term. But it was very tough because I have to play with children at weekends. So my study time was after having been playing with them. In addition to that, keeping studying nine weeks was very difficult because it is a very long term and some weekends had no time for the study because I was very busy, or tired. Actually, the last few weeks of the term were very hard to keep my motivation.

Final Exam with Proctor

The class has a final exam that requires a proctor. We can choose an online proctor or offline proctor. I don’t have any people who can be the proctor, so I chose an online proctor. We can get a proctor at the service, ProctorU.
- https://www.proctoru.com/

Of course, this was the first time I do a test online with a proctor, which was a very strange experience. To take the final exam, we must secure a room that anyone cannot enter and has a clean desk. Before taking the test, I connected to a proctor and had to prove that my environment fulfills the test’s requirement. To do it, I had to follow the proctor’s instructions, which are hiding an external display, putting away my mobile phone, and showing my entire room to the proctor using a web camera on my laptop.

Of course, these instructions were in English, so I had to communicate with the proctor in English. Speaking in English is not necessary at UoPeople because most of the activities are reading and writing. But a final exam with a proctor is a rare case that we have to speak and listen in English.

Next, I had to allow the proctor to operate on my laptop. After I allowed this, the proctor closed applications and browser tabs that not required for the exam, which was a weird experience that my laptop is controlled remotely.

After I finished the ready to take exam, I can start the exam. I took the test on an external site, which seemed to be a system of Oxford. The system was very poor. For example, it seemed not to allow us to go back to previous questions to answer them again. I didn’t know the system, so I wasted about 30 minutes because I cannot back to previous questions. I usually finish answering all questions as soon as possible and then re-answer questions carefully…

The worst experience was at the time I’ve just finished the exam. I followed the instruction on the page and clicked the “close the window” button, but after that, the page suddenly showed a login page without any feedbacks for the final exam; there is no message to tell whether the submission was successful or not. So I asked the proctor, and the proctor said that you had finished the exam. It almost took a week to be able to see the result of the final exam, so I spent days while worrying about that.
Fortunately, I have succeeded in submitting the final exam and passed the course!

But according to the UoPeople staff, it is only for the final exam for English class, the other tests are taken on the UoPeople website, which is called Moodle. So be careful when you take the final exam for the English course.

The Next

This is just a start-line of studying CS, and the next term is starting the next weekend; I will take two courses, which are a CS course and a general course, so I would have to study much more than the previous term, but I’m very excited!

I guess most developers don’t use IE11 as their developer environment. But we often have to support IE11 as an environment for our applications. These days, we write application code using TypeScript, ES2020, or JSX and compile them to ES5 JavaScript, so we don’t have to care about what ECMAScript features our support browsers support, because these are responsibilities of compilers like TypeScript and Babel.

But I still see that our application displays a blank page only on IE11. Why? The reason is that we don’t usually compile source code in node_modules. We merely bundle the source code. It means that your application doesn’t work on IE11 if any dependencies published their code written as >ES2015.

Fortunately, many npm packages publish code compiled to ES5. But there is no rule to have to compile to ES5 to publish an npm package. Node already supports >ES2015 features, so it doesn’t make sense to compile to ES5 if a package author intended to use the package in Node.js. Even a package for browsers, it might make sense to compile to ES2015, not ES5, because browsers except IE11 already support ES2015 features. In addition to that, it is tough to confirm what ES version each dependency package is using. To confirm this, we have to understand the compiler settings of the package.

In addition to that, it’s tough to build code for various targets properly. For example, `polished` accidentally published a version that includes code compiled to ES2015 and pointed it out at the `module` field in `package.json.` Fortunately, they have fixed quickly, but it seems to be a bit hard to find it.

https://github.com/styled-components/polished/issues/504

Of course, we could avoid this by compiling source code in `node_modules,` but it takes extra time. IIRC, there was a case to break code by compiling code that has already compiled, which is a double compiling. I have to dig into the case, but this time, I’ve taken another option.

To detect to include not ES5 compatible code in our builds, I’ve created `ecma-version-validator-webpack-plugin,` which is a webpack plugin to validate that build files are compatible with specific ES version or not. This plugin makes it possible to avoid shipping source code that is not ES5 compatible.

https://github.com/koba04/ecma-version-validator-webpack-plugin

const { ECMAVersionValidatorPlugin } = require("ecma-version-validator-webpack-plugin");

module.exports = {
    // ...
    plugins: [
      new ECMAVersionValidatorPlugin(/* options */)
    ],
}

This plugin emits an error if the out file includes >=ES2015 syntax in the file. You can change the target ECMAScript version by `ecmaVersion` option.
This plugin can only detect syntax errors, cannot detect the usage of built-in objects and methods newly added, so it cannot avoid runtime errors entirely, but it’s still useful. I recommend running a test using this plugin on CI like the following.

• https://circleci.com/gh/kufu/smarthr-ui/5960
• https://github.com/kufu/smarthr-ui/pull/779

The followings are tips to write a webpack plugin.

How to write a webpack plugin

webpack provides many hooks for plugins.

https://webpack.js.org/api/compiler-hooks/

`ecma-version-validator-webpack-plugin` have to take emitted files, so this plugin uses `emit` hook to validate build contents. This implementation is very simple, which validates assets and push errors if an error occurred.

apply(compiler: Compiler) {                             
  compiler.hooks.emit.tap(this.name, (compilation) => {
    try {
      validate(compilation.assets, {
        ecmaVersion: this.ecmaVersion,
        test: this.test,
      });
    } catch (e) {
      compilation.errors.push(e);
    }
  });
}

koba04/ecma-version-validator-webpack-plugin

See more details to see how to create a webpack plugin.

https://webpack.js.org/contribute/writing-a-plugin/

How to test a webpack plugin

This plugin has some tests. Most of the tests are separated from `webpack` so we can write tests as regular unit testing. To write unit testing using a webpack compiler is also straightforward. See the example in the following.

First, I’ve created a webpack compiler using Node.js API of webpack.

Second, I’ve used `memfs` as the outputFileSystem because I don’t want to output an actual bundle file by this test; memfs is a simple in-memory filesystem.

import path from "path";
import webpack from "webpack";
import { fs } from "memfs";

// This will be able to remove at webpack v5
// @ts-ignore https://github.com/webpack/webpack/pull/9251
fs.join = path.join;

it("should emit an error if an input file is not valid", (done) => {
  const compiler = webpack({
    mode: "development",
    entry: path.resolve(__dirname, "fixtures", "es2015.js"),
    devtool: "nosources-source-map",
    plugins: [new ECMAVersionValidatorPlugin()],
  });
  // @ts-ignore https://github.com/webpack/webpack/pull/9251
  compiler.outputFileSystem = fs;
  compiler.run((err, stats) => {
    expect(err).toBeNull();
    expect(stats.compilation.errors.length).toBe(1);
    done();
  });
});

koba04/ecma-version-validator-webpack-plugin

The interface of outputFileSystem of webpack v4 expects to have a join() method, which is not implemented on `memfs`. So we have to add path.join() method into an instance of `memfs`. This is fixed at webpack v5.

Note: I have an issue `memfs` throws an unexpected error. I don’t dig into the issue yet, so I’ll work on it later.

https://github.com/kufu/smarthr-ui/pull/779#discussion_r425298223

Acknowledgement

After I’ve published the webpack plugin, gfx taught me that he also built a webpack that is the same purpose before😇.

https://github.com/bitjourney/check-es-version-webpack-plugin

I’ve learned the way to write unit tests with webpack compiler by the repository. Thank you!