2020 was the special year for everyone. I have worked from home since February and have changed so many things, which are almost everything. In this year, I didn’t go to meetups and drinks even online. I just worked and spent with my family. Of course It’s not fun, but it’s a good opportunity to start new things. I tried two new things in this year.

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…

My second term in UoPeople was so hard and frustrating because I’ve taken two courses. In UoPeople, A student is expected to study 15–17 hours per week on each course, so I had to study 30 hours per week for two courses. The courses I’ve taken are basic courses, so I haven’t spent 30 hours per week, but I would have spent 20 hours per week. This amount of study was a burden and frustrating me because I didn’t do anything I want, which is reading books and programming. It also affected our performance of my work.

The courses I’ve…


I’ve been studying at University of the People(UoPeople) from Japan since April 2020.

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…


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. …


Do you know how to apply CSP(Content-Security-Policy) into the scope of a worker script?

The answer is to add a CSP header to response for a worker script.

What is the use-case of applying CSP to a worker script? Is it impossible to access DOM objects from a worker script? So we don’t have to care about XSS in a worker, do we? Yes, you are right, but I have a use-case for that; I’d like to limit network accesses from a worker script.

So I tried to prove whether the approach is valid or not because I think CSP…


I’ve done a presentation at JSConf JP 2019! This is the first JSConf in Japan so I’m happy to have a talk there! Thank you, @jsconfjp!!

My presentation is “Make it declarative with React”.

https://jsconf.jp/2019/talk/toru-kobayashi

The agenda is here.

  • Benefits of Declarative Programming for UI
  • Custom renderer of React
  • Live Demo!

You can find my slide and demos in this repository!

My presentation wasn’t useful for your React applications. But I hope that you enjoyed!

My presentation is built by hiroppy/fusuma. You can write your presentation with MDX. Its presentation mode is also great! Thank you @about_hiroppy!

In…


How do you structure Redux Store when your app has relationships between each other?

Let’s consider a Todo app that has states not only todos but also users and memos. The relationship will be like the following.

interface User {
id: number;
name: string;
todos: Todo[];
}
interface Todo {
id: number;
body: string;
memos: Memo[];
}
interface Memo {
id: number;
body: string;
}

This is a nested structure like User -> Todo -> Memo. How do you store the data into Redux Store?

Nested Structure

If you structure your store as well as the above interface, your code will be…


At this weekend, we’ve discussed where frontend forwards at #nextwebconf.

For a few years, we’ve got many great libraries, new ECMAScript features, browser APIs and tools. These provide us great productivities and experiences, which is DX. Especially, I love the combination of React + TypeScript + VSCode + Prettier. That's amazing❤️ ​I couldn’t imagine the experiences when 5 years ago 😄

On the other hand, we’ve often overlooked perspective of UX. As a result, so much JavaScript code we deliver cause performance problems. You can see the impact with “The Cost of JavaScript in 2018” by Addy Osmani

https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

In…


New Context API

React introduced a new Context API, which is to replace a legacy Context API.

The API is using a render props pattern so you can use the API flexible.

const LangContext = React.createContext(null);const App = () => (
<LangContext.Provider value="en">
<LangContext.Consumer>
{lang =>
<Message text="hello" lang={lang} />
}
</LangContext.Consumer>
</LangContext.Provider>
);

With new Context API, you can create a global store like Redux.

const store = {
state = {
foo: 1,
bar: 1,
},
update(cb) {
this.state = cb(this.state);
}
};
const {Provider, Consumer} = React.createContext(store.state);const Foo = () => ( <Consumer> {({foo, update}) => ( <div>…


If you do SSR for your React Application using React v15, you need to use renderToString to generate a markup to use it on browser. In addition to that, If you’d like to generate entirely HTML of a page with React, you need to use renderToStaticMarkup and combine them like the following.

This is an example of SSR using React v15.

React v15

  • App.js
  • Html.js
  • server.js
  • browser.js

To do that, you need to generate HTML, added a checksum and some attributes, from App Component and embed it in Html Component by dangerouslySetInnerHTML.

In server.js, you need to generate…

Toru Kobayashi

Web Application Developer #web #javascript #reactjs

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store