DEV Community: Aibol Kussain

7 React Challenges

Aibol Kussain — Thu, 03 Nov 2022 22:49:43 +0000

Hello there!

I've been collecting different interesting challenges that could be implemented for practice in ReactJS. The list is big and is growing whenever I encounter an interesting piece of UI or functionality.

Initially, I planned to come up with a course with video materials, where I would show an end result and explain how to do it in ReactJS. However, I figured out it is not that simple to create a video course. So, I decided to come up with a list of curated challenges, which will cover important topics in ReactJS and guide with relevant hints(but not provide implementation itself). That turned out into 7 challenges and 18 pages PDF.

So, I am presenting you "7 React Challenges you can build Today" PDF. Feel free to grab it on my website and leave me feedback.

I might still come up with a full-blown course, which will present 20+ ReactJS challenges with the guidance on implementation, so stay tuned for further updates.

That's it from me. Thanks for your attention.

How to add dynamic canonical links in Remix application

Aibol Kussain — Thu, 07 Jul 2022 21:04:54 +0000

This article was originally written on my personal blog here.

I rewrote my blog using Remix.run several months ago, but I faced an issue with canonical links when I started improving the SEO of my blog. After some research about this, I came to a perfect solution that lets me have dynamic link elements that absorb route data. Let me show you how I got to it.

Make sure you add canonical URLs to all of your pages in Remix app. Credits: Table flatlay photo created by freepik

What is a canonical URL

If you already know what it is and why you need it, jump to the next section.

Simply put, a canonical URL is used by search engines to determine the origin of the content. Suppose your blog post is available through http://, https:// and/or www. URLs. In that case, it is highly recommended to put a canonical URL that follows some structure, so that search engines will mark other pages as duplicates and give all the credits to the original content.

Another popular reason to use canonical URLs is to syndicate your content. If you publish your post on your blog and third-party platforms(like medium.com, dev.to, etc.) Google will consider them as duplicate content. It might hurt the ranking of your website but using the canonical URLs you can turn this on its head and get back again all the SEO credits to your website by setting up canonical URLs in third-party platforms. This blog post is not meant to explain everything about canonical URLs, so if you still have questions I highly recommend reading about it here.

Even if I duplicated this post to Dev.to, I still get all the “SEO credits” to my website because of the canonical URL. Check out the canonical URL link the source of this page.

The problem with the links in Remix.run

Most likely, you have a template route like blog.$slug.tsx in your Remix application. I thought I could add canonical URLs using a links function, just like this(assuming I return canonicalUrl in the route loader):

export const links: LinksFunction = ({ data }) => {

  return [{
    rel: 'canonical', href: data.canonicalUrl,
  }];
}

But TypeScript immediately turned me down and didn't accept having an object with data in parameters. It turns out LinksFunction does not have access to data returned by loader and we can't put there any dynamic content.

Solution: use DynamicLinks

So after some research on the internet about adding dynamic link elements to a page in Remix, I came to a solution using DynamicLinks. So, DynamicLinks is not something that comes from the Remix.run documentation it is rather a utility that can be built using Remix.run capabilities.

Big thanks to Sergio who implemented it in remix-utils Open-Source library.

How does DynamicLinks utility works

Let me show you the code and walk you through what is happening:

export function DynamicLinks() {
  let links: LinkDescriptor[] = useMatches().flatMap((match) => {
    let fn = match.handle?.dynamicLinks;
    if (typeof fn !== 'function') return [];
    return fn({ data: match.data });
  });

  return (
    <React.Fragment>
      {links.map((link) => (
        <link {...link} key={link.integrity || JSON.stringify(link)} />
      ))}
    </React.Fragment>
  );
}

First of all, we get the all matched routes using the useMatches utility hook
We look for our pre-defined dynamicLinks function in exported handle constant of each matched route and call it giving the route data as a parameter(if the function is defined by the route)
After we collect links from all the matched routes, we simply render them

We can put this component at the root of the Remix app and it will work for all the routes that define dynamicLinks function in exported handle variable.

How to use DynamicLinks in Remix app

The usage of the utility is very simple. I define dynamicLinks function in my blog.$slug.tsx module and export it within handle Remix-defined constant:

const dynamicLinks: DynamicLinksFunction<LoaderData> = ({ data }) => {
  return [
    {
      rel: 'canonical', href: data.canonicalUrl,
    },
  ];
}

export const handle = {
  dynamicLinks,
};

Note that this code assumes that I return canonicalUrl from my loader function.

And then I just need to render DynamicLinks the component in the root of the Remix application:

import { DynamicLinks } from "remix-utils";

export default function App() {

 return (
    <html lang="en">
      <head>
        {/** your head tags */}
        <DynamicLinks />
      </head>
      <body>
        {/** body tags */}
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

This results in having a dynamic canonical URL in all of my blog posts(both client and server-side). E.g.:

<link rel="canonical" href="https://aibolik.com/blog/how-to-add-dynamic-canonical-links-in-remix-application"/>

That’s it! I was upset at the beginning that LinksFunction does not support loader data(for sure, for some good reason), but I liked how Remix gives the flexibility to implement this kind of utility. There are more examples in the Remix.run documentation about the useMatches utility hook, like implementing breadcrumbs for all the nested components.

Thank you for reading this post. If you have any questions please leave comments or tweet tagging me(at aibolik_).

My thoughts on learning Web in 2021

Aibol Kussain — Mon, 27 Dec 2021 23:04:24 +0000

Note: this post is originally written in my personal blog.

Hello, people! You probably already saw or read one of those articles like “Web developer roadmap in 2021”, “How to become a web developer”, etc. So, I also wanted to share my perspective on this topic that might be useful to some people who are at the start of their exciting journey or open some discussion with others.

Learning Web in 2021 is not a straight line (Photo by Mark König on Unsplash)

HTML

I want to start with the most basic and the important, as well as, sometimes, overlooked part of the Web — HTML. Why overlooked? Thanks to some great JavaScript frameworks, like React, web developers frequently deal with “components” rather than HTML elements. However, it is important to understand semantic HTML and accessibility and many more topics. I have to admit that I kickstarted my Web Developer work with React and had to catch up with many important concepts of Web later on. Let’s go over some main of the topics here(in my opinion).

Semantic HTML and Accessibility

The simple idea is to build a site that works for all of your users. By saying “all of your users” I mean: people with disabilities, people with different internet bandwidth, color blindness issues, device issues, or someone who just doesn’t want to(or can’t) use a mouse/keyboard. Some pretty obvious things to start with are using semantic HTML elements, such as button, input, select, nav, and more. In addition to them, you should be familiar with aria-* and role attributes, which can add additional context for users with screen readers. And even before starting the development, you can talk with your designer to use contrasting colors and also introduce dark/alternative color schema, if it is worth it. (it is a bit outside of the HTML topic, but still worth mentioning).

When I was around 10, my mouse was broken on Pentium II Windows 98 PC. Guess what I had to use to be able to navigate through my computer?

Know your “head” tags

As the subtitle suggests, you should be familiar with what you put on your head tag. This and using the right semantic HTML elements can also affect the SEO of your website. Some meta tags can provide additional information about your website(like title, description, data for a Twitter card) and some tags can optimize your website. With the link tag, you can hint your browser to do some work before accessing some resources(prefetch, preconnect). Take some time to get familiar with them and feel free to take these low-hanging fruits for your website optimization.

Know how your elements look and interact

Other than knowing your “head” tags you should be quite familiar with your main “body” tags. Especially, what do they imply and how they interact. For example, consider these:

the default styling of elements(margins on paragraph, font size, and margins on h1-h6 tags, styling of anchors)
interactive elements(those are accessible with TAB, like an anchor, button, etc.) and how to make one yourself
other accessibility features, like outlined button
transition when clicking on the anchor

These are kinda basic, but you might also want to familiarize yourself with more HTML5 elements, and maybe some new elements like dialog those let you create modals out of the box.

I believe there are many topics that I left not mentioning here about HTML, but I wouldn’t be able to put everything in this article. So, if I missed something important, please feel free to leave a comment or mention it tagging me on Twitter(@aibolik_).

CSS

When it comes to CSS, today, we already have different tools to pre- and post-process our “style code” to make our lives easier. But the essential knowledge of CSS remains the key. These are the basic concepts related to laying out elements and styling of them: box-model, positioning, responsive styles, different laying out strategies(flex, grid), transform and transition of properties, and more. But if we go a bit further, it is worth exploring these topics too.

Logical properties

These might not be relevant to the project you are working on, but if your website supports multiple locales, which include right-to-left and/or vertical top-down layouts, you should be familiar with these properties. Shortly, these properties adapt to the layout of the page. You don’t explicitly set right/left/top/bottom spacing, you set start/end spacing and the browser will take care of setting the exact side for you.

Alternatively, if you are working on an open-source (popular) components library, chances are that your design would also be used in websites, where they need “rtl” support.

CSS variables

When I first heard about CSS variables, the support for them was not good. However, these days all modern browsers support this feature. At first, some might think it is similar to variables in other CSS post-processors(like LESS or SASS), however, they possess more power than you thought. You can easily rewrite them for some selector, media query, or even with JavaScript(because they are still CSS properties). They are quite useful when building (several) color schemas. But they are also useful for many different things, I saw people using them in very creative ways. It is worth checking out its capabilities.

Again here, CSS is another big topic in the Web world. There are also topics like typography and fonts, selector naming conventions, many different CSS frameworks, CSS-in-JS, and more. I can not cover all of them in this article, but case by case, some might be more relevant than others, and for some topics, it is enough to just have a basic understanding of the principles.

JavaScript

Yet another big topic and I believe the one that is more over-hyped than the other 2 pillars of the Web(thanks again to JS frameworks). Since it is a full-blown programming language it is essential to understand how it works. In addition to how JavaScript works, for Web Developer, it is essential to understand how it works in a browser context. Some points to mention:

interaction with DOM API
event handling
browser APIs(history, fetch, IntersectionObserver, storage APIs, and more)
and many many more topics

Even if popular JavaScript frameworks give a real boost in Web Development, the core JavaScript knowledge is still very important. Even if you start very well with some JavaScript framework, at some point you might end up not understanding how some things function. I was in that shoe, and when I was interviewed for one project where essential JavaScript knowledge was important, I failed that interview. Immediately after that interview, I decided to level up my core JavaScript knowledge and discovered the “You don’t know JS” book series. It was a really good time investment and I highly recommend it for people who feel they have gaps in their JavaScript knowledge.

This is a small portion of my thoughts regarding the Web topic. I hope to share more of my thoughts and learnings, so if you liked the content, feel free to follow me on Twitter, where I will share everything I write.

Stay tuned and thanks for reading!

Creating Toast API with React Hooks

Aibol Kussain — Sun, 12 Jan 2020 21:36:18 +0000

You can also read this post on my blog by this link.

In this blog post we will be gradually creating fully working Toast API and we will use advantages of React Hooks to create nicer hooks-supported interface. Full working example is available here.

Example of shown toast notification

Toast component

Let’s start by creating simple Toast component. It should be simple nice looking box that renders some content. For simplicity of this application, let that content be just a text.

I will use styled-components in this example for styling.

const Wrapper = styled.div`
  margin-right: 16px;
  margin-top: 16px;
  width: 200px;

  position: relative;
  padding: 16px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  background: white;
  box-shadow: 0px 4px 10px 0px #d7d7d7;
  color: #494e5c;
`;

const Toast = ({ children }) => (
  <Wrapper>{children}</Wrapper>
);

Now we have basic Toast, you can test it out by rendering <Toast> Example</Toast> in your root component(App.js).

ToastContainer component

Usually, there can be several toasts at the same time and they are positioned at some corner of the page. Therefore, it makes sense to create ToastContainer component, that will be responsible for toasts positioning and rendering them in a sequence.

For simplicity, let’s assume that toast notifications will always be rendered at top right corner. If you want it to be more customisable, ToastContainer is a right place for this.

Additionally, in order to not mess with z-index, it is better to render components like toasts somewhere up in a DOM tree. In our example we will render them directly inside body of the page. We can easily accomplish this using React DOM’s portal API.

const Wrapper = styled.div`
  position: absolute;
  /* Top right corner */
  right: 0;
  top: 0;
`;

const ToastContainer = ({ toasts }) => {
  return createPortal(
    <Wrapper>
      {toasts.map(item => (
        <Toast key={item.id} id={item.id}>{toast.content}</Toast>
      )}
    </Wrapper>,
    document.body
  );
}

Inside of wrapper we render array of toasts. We assume that toasts is an array of objects with id and content keys. id is a unique ID of each toast notification that we will use later to dismiss it, and content is just a text.

ToastProvider

We built Toast and ToastContainer components, but we will not expose them directly. Instead, we will expose them through ToastProvider component, that will be responsible for rendering and managing all toasts. If we were building some library or package, ToastProvider would be the one exported and exposed to its consumers(of course along with hooks).

Since it should hold all toasts, let’s use React’s useState hook to save and manage toasts array.

const ToastProvider = ({ children }) => {
  const [toasts, setToasts] = useState([]);

  // ...
}

ToastProvider will also use React's context API to pass helper functions down the tree: addToast and removeToast.

`addToast` function

This function should add toast object into toasts array in ToastProvider. So it's usage will look like this: addToast('You friend John liked your photo'). As you can see, it should take a string as an argument, that will end up being content. Assigning of ID will be responsibility of the function, therefore we need some way of tracking unique IDs. For simplicity, we can have global variable id that will be incremented on each function call. Let's see how the function would look:

let id = 0;
const ToastProvider = ({ children }) => {
  // ...

  const addToast = useCallback(content => {
    setToasts(toasts => [
      ...toasts,
      { id: id++, content }
    ]);
  }, [setToasts]);

  // ...
}

Note the usage of functional update of setToasts. We need to use that, since new toasts array is computed using previous state.

I used useCallback, as a small optimisation. We don't need to recreate this function on every render, therefore we use useCallback hook. Read more about it in React's hooks documentation.

`removeToast` function

Contrary to addToast, this function should remove toast object from toasts array in ToastProvider component given the ID of a toast. Guess where this function should be called from... from anywhere where ID is known! Remember we added id prop to Toast component? We will use that id to call removeToast. Let's see this function's code:

const ToastProvider = ({ children }) => {
  // ...

  const addToast = useCallback(content => {
    setToasts(toasts => [
      ...toasts,
      { id: id++, content }
    ]);
  }, [setToasts]);

  const removeToast = useCallback(id => {
    setToasts(toasts => toasts.filter(t => t.id !== id));
  }, [setToasts]);

  // ...
}

Very simple function — we just filter out the dismissed toast by its ID.

We are almost done with ToastProvider component. Let's put everything together and see how it would look:

const ToastContext = React.createContext(null);

let id = 1;

const ToastProvider = ({ children }) => {
  const [toasts, setToasts] = useState([]);

  const addToast = useCallback(content => {
    setToasts(toasts => [
      ...toasts,
      { id: id++, content }
    ]);
  }, [setToasts]);

  const removeToast = useCallback(id => {
    setToasts(toasts => toasts.filter(t => t.id !== id));
  }, [setToasts]);

  return (
    <ToastContext.Provider value={{ addToast, removeToast }}>
      <ToastContainer toasts={toasts} />
      {children}
    </ToastContext.Provider>
  );
}

Nothing new in this code: we just added ToastContext, so that addToast and removeToast can be used anywhere down the React tree. Then we render ToastContainer, that will be rendered always inside body of page, thanks to Portals. And children, since ToastProvider is rendered at the top level of React tree(along with other providers, e.g. Redux's Provider, ThemeProvider, etc.).

`useToast` hook

Finally we reached to creating our own hook, that will be exported along with ToastProvider. This hook is actually very simple and consists of only 2 lines of code. It's purpose is to make addToast and removeToast available with just a function/hook call. Without this hook, you'd use addToast and removeToast by importing ToastContext and usage of React.useContext:

import { ToastContext } from './path/to/ToastProvider';

const Example = () => {
  const { addToast } = React.useContext(ToastContext);
  // ...

Let’s implement this simple hook:

export function useToast() {
  const toastHelpers = React.useContext(ToastContext);
  return toastHelpers;
}

We don’t need to import ToastContext because this hook resides along with it in ToastProvider component. And now we can simply call it like this:

const { addToast } = useToast();

Dismissing toasts with timeout

We can add toasts with addToast and now they need to be automatically dismissed. I think the right place for this is a Toast component, since it is aware of its own lifecycle and aware of ID sent to it as props.

We need to fire a setTimeout with a call to removeToast after delay. The best way we can do this is using useEffect hook.

Side note about useEffect: it will run passed callback function whenever one of dependencies changes.

So, we will use removeToast and id in dependencies list for this effect, since everything used inside the function should be passed as a dependency. We assume(and know) that id and removeToast function won't change, that means the effect will only be called upon first render. Let's see how it looks in code:

const Toast = ({ children, id }) => {
  const { removeToast } = useToast();

  useEffect(() => {
    const timer = setTimeout(() => {
      removeToast(id);
    }, 3000); // delay

    return () => {
      clearTimeout(timer);
    };
  }, [id, removeToast]);

  // ...render toast content as before...
}

Note the clean up function in useEffect: we need to clean up timer, so that it won't cause errors in case of unexpected removal of component.

That’s it! Now it works as expected. Feel free to play with the demo in CodeSandbox.

If you want to go further and practice more you can try enhancing it by adding some more customisation. For example by configuring delay, render position, styling and more. Most likely ToastProvider is the best place for that, since it is exposed to consumer and renders all other components.

If you liked the post check out my upcoming course 30-day-React. There you can practice more alike examples in a video format. It is still in progress, therefore I will give away the course for free when it is released to first 100 people who signs up now.

Git Commit Message

Aibol Kussain — Thu, 20 Dec 2018 07:31:34 +0000

I managed to write this post long time ago, but just now I found some time to write it. I want to cover the thing that every active developer faces everyday probably multiple times from 1 to 10, 20, 30 times a day. So I will talk about Git commit messages.

There are probably many articles covering this topic, anyway I don’t want to force my vision how this should be handled, but instead share some practices I acquired from seeing problem in this area, looking for some solutions and applying them in practice.

Main source of knowledge was article of one company practicing writing commit messages as in AngularJS library. Here is their Git commit message conventions. I will add some more points to it as well as summarizing their message.

Identifying problem

Worst commit messages

If you search for worst commit messages you can find many examples. I hope you don’t, but just take a look here. These changes don’t make sense what has been done.

Example of commit messages from Angular project

But there are some better messages, those make sense what has been done. However, sometimes there is no context in them — where the change was applied. Of course you can take a look at what has changed, but isn’t it faster just to read one line, rather than inspecting bunch of changed lines?

So, there is a definitely a problem. I will share some my suggestions how it should be handled, and then some resources where from I adopted some practices and modified some.

Adopted practices

Use editor, not CLI

This one is probably obvious at the same time a little bit time consuming, but it is really easier to write in some editor, rather than writing everything in one line in CLI after git commit -m "...".

Set it to your favorite editor, but keep in mind that some visually rich editors(like VSCode) might have useful plugins those will hint on some best practices.

To change default editor configuration for your git, write this command:

git config --global core.editor "code --wait"

This will set VSCode as a default editor for commit messages.

Note: you should have VSCode configured to run from CLI.

As a bonus, in VSCode you will also see staged files as a comment in COMMIT_MSG, those will be ignored in original commit. Additionally there is a built-in plugin, that will show when your commit message length is getting too long.

Structure your first line

Probably you have already seen some structures for commit messages. I propose you to take a look at AngularJS Git Commit Message Conventions. Here are key takeaways about subject line:

your commit message should consist of 3 parts

<type>(<scope>): <subject>

<type> - the type of the made changes. Should be one of:
- feat - some feature development
- fix - bug fix
- docs - changes in documentation
- style - formatting changes
- refactor - changes those do not fix a bug or implement a feature. Simple refactoring
- test - changes to tests or addition of new ones
- chore - any other changes, not affecting code
<scope> - here you define the scope of changes. For example: featureA, buildConfig, or any other scope you can think of.
<subject> - there are different methodologies to write the subject, but the main rules are as follows:
- use imperative, present tense. “fix” not “fixed”, “add” not “added”. By the way, Git also uses this convention for its own pre-formateed messages(“Merge pull request…”).
- don’t capitalize first letter
- do not add dot(.) at the end of subject

At first it might be harder to maintain this style, but you will get used to. If you are having troubles remembering all of these you can use library that does it for you. Take a look at commitizen.

Sometimes, you might want more type of changes. In this case feel free to add up more, just be sure to coordinate it with the team and document it somewhere.

Add message body and footer when necessary

In some cases you probably want to leave more clues in your commit message. For this purpose use message body. It typically goes after subject line and is divided from it by one empty line. It should also follow the rule of using imperative tense in verbs.

Footer is mostly ignored, but in some cases it can be useful to add up some meta information. You can use it to mention breaking changes_and list the issues it closes in your issue tracker. For examples: _Closes #132, #123.

Here are examples from AngularJS project:

feat($browser): onUrlChange event (popstate/hashchange/polling)

Added new event to $browser:
- forward popstate event if available
- forward hashchange event if popstate not available
- do polling when neither popstate nor hashchange available

Breaks $browser.onHashChange, which was removed (use onUrlChange instead)

fix($compile): couple of unit tests for IE9

Older IEs serialize html uppercased, but IE9 does not...
Would be better to expect case insensitive, unfortunately jasmine does
not allow to user regexps for throw expectations.

Closes #392
Breaks foo.bar api, foo.baz should be used instea

Conclusion

These are mostly recommendations — not a strict policy. You would probably want to adjust these practices to your own needs. Finally, it is your project, your repository, your code — setup your own guidelines and stick to them. If this article was helpful I reached my goal. Thanks for reading!

Resources

Whom to follow to stay up to date in JS and FrontEnd world

Aibol Kussain — Wed, 17 Oct 2018 20:53:22 +0000

Hi, DEV folks. In this post I want to share whom I follow and admire in tech world to stay up to date with all tendencies and other cool stuffs they share. Since I am mostly JavaScript/FrontEnd developer, this list will contain people mostly from this part of IT.

So here is a list:

Dan Abramov(@dan_abramov) - I don't think that I really need to introduce Dan Abramov, but anyway. He is a main creator of Redux and co-author of create-react-app, part of team working on ReactJS and just a nice guy ;). He also has stunning courses on egghead.io
Feross(@feross) - great person whom I started following right after watching his talk about linting, where he introduced standardJS, and yeah, he is a creator of that tool. He is also creator of many other cool projects, he is more like tech entrepreneur, but he also has huge experience working on giant companies. I like people who create. By the way, he also has great blog(I've read much stuff after his talk).
Ali Spittel(@ASpittel) - Ali is a developer, teacher and blogger. I just like what she writes and shares. She also an active blogger and has newsletters, where she shares some great articles across the web. She is also creator - take a look at https://learncodefrom.us/
Michael Jackson(@mjackson) - not that one :). Co-Author of popular react-router and owner of ReactTraining. Great guy in tech world, especially he focuses(as I understood) on React. Being co-creator of react-router his guides are really well written. He also provides great trainings and workshops at ReactTraining. Also, he really cares about future of web. Just read this thread.

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

Kyle Simpson(@getify) - when we talk about JavaScript it is unfair to not include Kyle Simpson, also knows as GETIFY. My foundation of JavaScript strengthened after reading his You Don't Know JS book series. I highly recommend to all new(not only beginners) JS devs. You better go to his twitter account, learn about him and read 2 books mentioned in his profile.
Todd Motto(@toddmotto) - if I liked Angular and worked with it much, probably Todd Motto would be a number one person whom I should know, and his blog would be "go-to" resource for(almost) any Angular related question. He writes great stuff on in, also he is Google Developer Expert and creator Ultimate Angular course series.
Chris Coyier(@chriscoyier) - co-founder of CodePen.io and CSS-tricks. He knows more CSS tricks than anyone else. He is also very active on his blog/website. Definitely should follow.
Wes Bos(@wesbos) - Wes Bos, I call this man a "serial instructor", he has dozens of JavaScript related courses and ton of other useful materials. Just head to his website at wesbos.com. By the way, recently he launched AdvancedReact and GraphQL course - that I mentioned in my newsletters. This course already has many positive feedbacks. Maybe you should also take a look at it.
RisingStack(@RisingStack) - I know I was going to talk about people. But this company is really great. I did not investigate much what they are doing, but they are super useful for dev community, since they share really useful articles from real experience. You definitely have to take a look at their tech blog and follow them to stay up to date.

This list is just a small portion of whole thing. Actually there are more people whom I follow and admire what they do. Feel free to share your "hereos" in comments.

Thanks for having me, Bye!

P.S.: if you want to stay up date with what I share, follow me on Twitter(@aibolik) and subscribe to my newsletters.

Launching my own newsletter

Aibol Kussain — Wed, 03 Oct 2018 20:27:55 +0000

Hi, there, Dev.to community!

It's been a while since I did not post anything here. I want to announce that I am starting my own newsletters "JSinDEV", that will serve selected content around the web about JavaScript, FrontEnd and related stuff that will be useful to read.

If you haven't subscribed yet, feel free to subscribe at my website - there is a form at the bottom.

P.S. Hey, I recently launched my website/blog, so if you want to follow along my path and see what I do, follow my twitter to be on track of what I am doing.

Thanks,

Have a nice day

Create your own virtual DOM to understand it (Part 2)

Aibol Kussain — Sun, 29 Jul 2018 15:53:32 +0000

This article is the continuation of first part(so you better read first part too :), where we learnt how to create virtual nodes with JSX-like function hyperscript and render them. In this part we will implement “ diffing” algorithm of virtual DOM, that is the main advantage of it.

Originally, I was inspired by the talk of stefan judis _at Web Rebels 2018, so feel free to take a look at it here.

Okay, we have a simple function component that renders dynamic component. Let’s make it a bit complex by introducing its own state and converting it into class with render method. Also we can separate out new People component, that will responsible for rendering only list of emojis. Here how it will look like after:

People component that renders list of emojis given in its properties

Nothing special with this component: it just renders list of items that is given in its props. Note : we introduced render method here — it actually creates virtual DOM that we use to render real DOM. And here is how our App component will change:

App component turned into class component

Two things to mention here:

We set its state in its constructor and create timer, that updates its state every 1 second(1000ms)
We call setState method to update its state.

You can find what does setState method in React’s documentation. We will implement almost the same functionality here — update its state object and make our component to re-render. Of course React’s implementation is not that trivial, it makes bunch of optimizations on top of it, but come on, we are just building it :)

Since the setState is the method that every function will call, it makes sense to create an abstract class that implements it. When you write class MyApp extends React.Component in React you are inheriting the Component class and can use its methods. Okay, let’s scratch our simple Base Component class:

Base Component implementation

Basically, we just initiate our component with props and state fields and implement setState method that basically rewrites our state and calls renderComponent with itself in its parameters. I’ll explain it now, but first of all let’s make changes to our components:

Changes to our components

Okay, now we have our App and People components updated I’ll try to explain what renderComponent should do.

It grabs the old base(current DOM before change that is saved in component.base)
Renders virtual DOM — that we can get from component.render method and saves it into component.base.
Replaces the old child with the new one

Here it is:

renderComponent function implementation

I’ve added parent parameter, to that we could use parent.appendChild when we render the root component first time.

One little change to make it perfect is to change a little bit renderNode function. Remember how it looked before:

renderNode before

It only handles DOM elements, but actually we have something like this in our App component’s render_ method **:_**

return h('div', { class: 'app' },
 h('h1', null, 'Simple vDOM'),
 h(People)
 )

As you can see nodeName can take not only string values, but also another component/function to render, in our case this is People component. We need to make sure we handle them properly — basically we need to initiate the component, render it and do this with all of its children. Here is our updated renderNode implementation:

updated renderNode function

That’s it about rendering! Now our app works perfectly: any state change will cause app to re-render — as a result every child element/component will be updated. To leverage from this approach let’s move update operation in our application from App component to People component (remove constructor from App and write it inside People) :

constructor of People component

And update render method of People from this: return h('ul', null, ...props.list.map(item => h('li', null, item))) to this return h('ul', null, ...state.list.map(item => h('li', null, item)))

Now only People component will be re-rendered when its state updates. Compare these GIFs:

Application re-render before

Application re-render after

As you can see only the list updates, while the headline(Simple vDOM) does not re-render. Now we made our components Autonomous.

Note 1 : I’ve changes a bit styles: displayed items in flex row, so that adding new items will not cause reflow.

Note 2: To see which parts of the website re-render you can enable Paint flashing in Chrome Dev Tools -> More(… icon)-> More tools -> Rendering)

Diffing algorithm

Well, it looks more like React-ish but re-rendering whole app when we just add a new item to the list is awful. Now it’s time to introduce “ Diffing” algorithm that will make our application more powerful.

In our case, we can just naively check if there are any new items in new virtual Node, and if there are any, we will just append it. So let’s start implementing it step by step. First of all, if there is no DOM provided, we just want render our virtual node and append it to the parent:

Render our app and append it to the parent, if there is no DOM to compare

This is applicable for the first run — _where there is no DOM rendered yet, and the only place where we give _parent in its parameters. So we can use it for initial rendering, here how we will do it:

Rendering app first time

Okay, now we rendered our app, the People component will update its state after 1 second(remember the timer we set?). That will cause our renderComponent to be called, so it will also be changed:

updated renderComponent

Firstly, we create the virtual DOM with component.render method, then we just compare it with its current DOM state(that we saved in component.base field), and save the result of diff in it again. So our diff function should check if there are any new child, and in case it is true, we just append it. Here how it could look like:

Simple diffing that checks for new children

That’s it, we made it! Now take a look how it looks in our 3rd iteration:

Re-rendering with diffing algorithm

As you can see the whole application and list do not re-render. Only the new child is added to list.

This is just a simple example with simple “diffing” algorithm, but hopefully it will make sense for those who are new to these concept . It can not be compared to what React does. Here is just a few things what is there in React’s diffingalgorithm:

Comparing the types
Comparing the attributes(props)
Comparing the children

And of course there are tons of optimization under the hood, that makes React so powerful and beautiful UI library.

If you liked this and previous posts feel free to like(❤) and "unicorn" it, that will motivate me to do stuff like this more. Thanks for reading!

UPDATE 24.11.2019: If you want to learn React by doing many exercises, feel free to sign up to my upcoming course 30-day-React.

Resources:

Create your own virtual DOM to understand it (Part 1)

Aibol Kussain — Thu, 26 Jul 2018 17:40:51 +0000

In this article I want to recap my experience creating own “virtual DOM”. Sounds too ambitiously? Probably, but it is not that complicated as you might think. As the title states, it will make sense when you create your own, rather than reading thousands of articles about it.

Originally, I was inspired by the talk of Stefan Judis at Web Rebels 2018, so feel free to take a look at it here.

This concept of Virtual DOM got popular back in 2013 when React was released. Because of this concept ReactJS is one of super fast libraries for building UI. I’ll try to explain it in few sentences, then we will get to writing own one.

Virtual DOM is the representation of DOM as an object. When changes to state of application are made, new Virtual DOM is compared(applying diffing algorithms) with DOM and only changes are reflected, not causing full re-rendering of DOM.

Ok, here is a plan how we will create our virtual DOM.

Create hyperscript function to render DOM — it is kinda JSX
Create simple app with hyperscript
Make our App dynamic and learn to render virtual DOM
Implement diffing algorithm to see the power of virtual DOM

HyperScript implementation

If you ever worked with ReactJS you probably know what is JSX. It can be another topic for discussion, but shortly it transforms “HTML-like” syntax into JavaScript function calls, in React it is transferred as React.createElement. So, in this step our aim is to recreate this awesome function.

Generally, it is the building block that creates virtual DOM. However, in this step I want to emphasize how we can build simple DOM with it and in further steps we will develop it to make virtual DOM.

The inputs for this function are: type of node, properties(a.k.a. attributes), children. So here is a simple implementation of this function:

Implementation of hyperscript function, that constructs DOM given nodeName, attrs and children

Firstly, It simply creates DOM element with nodeName. Secondly, sets its attributes, and last step to append child nodes with the check for text nodes.

Note: actually, we could go further and render children recursively, but I left this for later for simplicity reason.

Here is how it can be used(from now on we will use h instead of hyperscript ):

Simple function that renders h1 element

Result of calling App() function

Creating application with Hyperscript

Okay, we now can create simple application with the help of Hyperscript. Let’s create a bit more complex application than it was in previous step. Here is our newer App function.

“Complex Application” with hyperscript

When the App is executed it creates a div, with two children: one rendering H1 heading, and the second one unordered list. Note that we pass props to our function and render props.list into unordered list. Let’s add some more rendering magic:

Render the app with the state

Generally, we just want to render the output of App function(that is valid DOM) into the body of document giving the state that contains emojis list.

Result of our work

It wasn’t that hard. Is it? Let’s add some dynamic content, and add random emoji every 1 second this way we can see how our app renders.

DOM is fully re-rendering every 1 second

Implement vDOM rendering

Okay, now we have dynamic app done with hyperscript let’s move on to actual virtual DOM and its implementation. First of all we need to change our hyperscript function. Now it should not create real DOM, but instead it rather should create virtual DOM. So, given nodeName, attributes and children we just a create an object with corresponding keys. Thanks to ES6 we can do this in one line:

hyperscript function that returns virtual DOM

We have a virtual DOM and if we execute the App function with same emojis list we get something like this(logged in console):

Virtual DOM of our application

Pretty similar to DOM. Now let’s create a function that renders virtual DOM into real DOM. As you might have guessed it should take virtual Node as a parameter. Here it is:

This function renders real DOM(DOM Node) given virtual DOM(Node)

Let me explain what it does step by step:

Using destructuring we retrieve nodeName, attributes and children of virtual Node
If vnode is text(we can check it by vnode.split) then we return text Node
Otherwise we create an element with nodeName and set its attributes from attributes object
Do the same thing for children if any

Now, remember our render function that rendered our App? We just need to change a little bit to make it work:

This article became a bit longer than I thought, so I decided to break into two parts.

So, let’s recap this. We created a hyperscript — virtual DOM factory , renderNode — that turns virtual DOM into DOM element and a function component App that creates whole page. The result is now the same as we did it before without virtual DOM, but now we have more control. In the next article we will explore what makes React(and virtual DOM) so fast.

You can look up all steps in my GitHub repository. You can find these steps in branches.

In the next article we will implement simple diffing algorithm , that will make our app faster and you’ll be able to see it action.

UPDATE: Hey there, if you liked it go and take a look at the 2nd part of this article!

UPDATE 24.11.2019: If you want to learn React by doing many exercises, feel free to sign up to my upcoming course 30-day-react.