{"componentChunkName":"component---src-templates-post-post-jsx","path":"/The-overwhelming-world-of-Japanese-web-design","result":{"data":{"markdownRemark":{"html":"

Inmost parts of the world, modern websites are simple. The array of links, banners and icons that were common in web design in the early 2000s have been replaced with concise, relevant content that helps users achieve goals.

\n

But in Japan, most major websites have changed little since the early 2000s, and still use designs overloaded with information and links.

\n

Yahoo used to be Japan’s most popular search engine, and is still popular as a home page for desktop internet browsers. As you can see, the design has changed very little in the last decade.

\n

Another classic is Rakuten, the country’s largest online shopping mall. Merchants on Rakuten have free reign to design their product pages, resulting in a dizzying array of bright images, banners and popups on pages that require about 30 scrolls to reach the bottom.

\n

Rakuten has been around since 1997 and the paper catalogue style of their pages make it popular with older users, however the simplicity of Amazon is proving to be more popular with users in their 20s and 30s.

\n

Why are so many websites still like this?

\n
\n

The majority of these sites have been around for decades, and people are used to their current design. They tend to have older users who are more sensitive to change and use desktop computers instead of smartphones or tablets.

\n
\n

This makes it difficult for big companies to make changes and adopt more modern and user friendly designs.

\n

Japan’s most popular messaging app, LINE, made a small change to simplify their home tab recently, which resulted in a wave of one star reviews requesting that the design be changed back.

\n

Additionally, the importance of good UI/UX design is only just beginning to be recognized, meaning that the majority of older web companies tend to have few product designers, focusing more on content and features than presentation.

\n

This style of information overload is reflected in bricks and mortar stores.

\n

Stepping in to an electronics store in Japan is overwhelming — the brightly lit stores have advertising on every surface (including the floor) and product displays often have speakers playing a jingle or advertisement. Staff wear microphones connected to speakers on their belt and are encouraged to constantly advertise their wares.

\n

I spent two years working in one of these stores and often walked around the store yelling into my microphone “iPads! We’ve got iPads! You can touch and then buy them!”, just a few meters away from the calculator man yelling “Calculators! Get your calculators here!”

\n

While this would likely repel customers in Western countries, in Japan the goal is to create a bustling atmosphere that makes it seem like the store is popular and busy — encouraging customers to come in and buy. This is also what the websites are aiming for.

\n

Changes on the horizon

\n

Recent years have seen a number of new mobile first companies appear that are appealing to younger audiences with simpler, smartphone friendly designs.

\n

Mercari, an online auction service, has a simple and user friendly interface that saw it quickly become the most popular auction app in Japan, overtaking Yahoo Auctions, which spent decades at the top.

\n

\n \n \n

\n

Success stories like this are proving the importance of good UX, and slowly encouraging more Japanese companies to hire UI/UX designers.

\n

Older Japanese web companies will need to take the plunge and adapt more modern designs in order to appeal to younger users, or risk losing out to new, more agile competitors.

\n

Source: https://medium.com/@maxwellforrest/the-overwhelming-world-of-japanese-web-design-2d41ad447297

","timeToRead":3,"frontmatter":{"title":"The overwhelming world of Japanese web design","date":"25 Feb 2021","tags":["ux"],"path":"The-overwhelming-world-of-Japanese-web-design","excerpt":"Inmost parts of the world, modern websites are simple. The array of links, banners and icons that were common in web design in the early 2000s have been replaced with concise, relevant content that helps users achieve goals.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='209'%20viewBox='0%200%20400%20209'%20preserveAspectRatio='none'%3e%3cpath%20d='M122%204h75v9h-74a1862%201862%200%20006%201h80V3H48l74%201M7%205c-2%201-1%205%200%205h4l2%202h6l4-1%201-1h1l3%201%204-1%201-2h1c0%202%202%203%202%201%200-3-2-3-7-3-7%200-7%200-7%202h-1l-2-2-2-1H7m243%2016v16l1%2014h78V20h-39l-40%201M71%2030l1%208c2%200%203%203%202%204h4c1%202%200%202-3%202l-4%201%2021%201%2020-1-6-1c-5%200-6%200-4-1h4c3%200%203%200%203-2-1-2%200-3%201-3%202%200%202-1%202-8v-8H71v8m190%201l-2%202c-2%200-4%203-4%207l1%203%202%201h17c3-1%203-2%203-8v-7h-8c-7%200-8%200-9%202M117%2044v3h19v-7h-19v4M22%2056l-4%203H8l-1-1c-1-3-3-2-3%202%200%203%202%205%202%203h10l10%202%201-5-1-5-4%201m374%200l-4%201-2%201h-5l-6%201h-1l-1-2c-1-1-1%201-1%204%200%202%200%204%201%203%200-2%200-2%2011-1l9%202v-6l-1-3M4%2076a907%20907%200%20003%2095l3%202c2%200%203%202%202%203H9l-2%202-2%202c0%202%201%202%206%202%2010%200%2018-3%2013-4v-2c2-1%203-9%202-10h-1l-1%202h-2v-3l2-2c2-2%202-2%201-3v-1c2-1%202-5%202-42s0-41-2-40H15C4%2075%205%2075%204%2076m372%2020v21h6l6-2-2-1c-3%201-4%200-1-2l1-2%202-1%201-1c-2-2-4-1-5%202l-2%202%201-4c2-3%202-3%205-2%203%200%205%202%203%203-1%201-1%203%201%205%201%201%201%201-1%201l-2%201%204%201h4V78l-8-1-10-2h-3v21m-307%208v16h126V87H69v17m133-9v8h16l16%201%202%208%203%208h92l-1-9V87H202v8m-83-5c-8%204-9%2014-3%2022l13%201c3-1%204-2%205-5%202-4%204-12%202-10-1%201-1%201-1-1%202-5-8-10-16-7m26%201c-5%204-7%209-4%2016l4%204c6%204%2010%204%2016%200%203-4%204-4%204-9%200-6-1-6-4-10-5-4-12-4-16-1m29-1c-10%205-10%2019%200%2025%205%202%2011%201%2015-3%2011-10%200-28-15-22m138%205l1%205%207%201h8V90h-16v5m-192%207l1%207%201-1h1c1%201%204%200%204-1h1c1%202%202%200%202-6l-1-4-4-1h-5v6m88%207c-3%202%201%207%204%205h8c0-2%203-2%205%200h3c0-2%201-2%201-1l1%201%201-3c0-2%200-3-2-3-1%200-2%201-2%203l-1%202-1-2c0-2-1-3-3-3s-3%200-3%202c0%201%200%202-2%201v-1l1-2-3%201h-7M69%20134v12h126v-25H69v13m133-8v16h47v-16h-47m-120%202H72v4l-1%206%202-1c2-2%202-2%201%200l1%202%201-2c0-1%200-2%201-1l1%202c-1%202%201%201%202-1%201-1%201-1%201%201h2c1-2%201-6-1-7v-1l1-2h-1m144%2022l-1%202h-23v6h8c8%200%208%200%208-2-1-2%200-4%201-2h4c2%200%202%200%202%202v2l2-2%201-2v2c0%202%201%202%203%202%203%200%207-3%205-3l-1-3-1-4-1%202-1%202-1-1v-2l-1%201-1%201-1-1-1-2-1%202m17-1v2l-2%201-3%202h1c2-1%202-1%204%201h2c0-2%203-1%203%201%200%201-6%202-8%200h-1c-1%202%204%202%2045%202h47l-1-3v-3h-11l-11-1h-1l-1%201v-3c0-1-2-2-3%200h-4c0-2-5-1-5%201h-1c-1-1-8-3-8-1h-34c-2%200-2%200-1%201%202%200%203%202%200%202l-2-2c0-2-2-3-2%200l-1-1h-2m113%205v5l1%203h40v-9h-20l-21%201m0%2011v5l1%203h40v-9h-20l-21%201m-183%207c-4%204%200%208%207%208l4%201h-1l-2%201c0%201-1%202-3%201l-2%201-2%202-2-2-2-1-1%201c1%201%200%202-2%202l-2-2-2-1c-2%200-3%200-3%202%201%202%2031%203%2034%200v-2l-1-2c0-3-2-3-4-1l-2%203v-3c1-1%200-2-1-2l-1-2c0-4-9-7-12-4m29%207v8h6c3%200%205-1%205-2-1-2%203-3%205-1l1%203%203-3c2-2%205-2%205%201%200%202%203%202%2054%202h50v-16H202v8m-118-1l-1%205-3%202-2%202h14c7%200%2013%200%2011-1l-2-2h-1c0%202-8%202-8%200l1-1c1%201%202-1%202-7v-4H84v6m18-5c-2%201-1%202%200%201%203-1%203%202%201%204-3%202-3%204%201%204l3-1-2-1v-2c1-1%202-1%203%201%201%203%205%204%206%201l2%201c3%202%205%201%206-3%200-5-3-7-6-4l-2%201-1-2c-2-1-5%200-5%201h-2c-3-2-3-2-4-1m21%205c-1%201%200%203%201%202%203%200%206%202%206%204-1%202-5%202-5%200s-2-1-2%201h-1l-1-2-1%202c1%201%202%202%2013%202%207%200%2011%200%2010-1l-2-2-3-1c-2%200-2%200%200%201%201%201%201%201-2%202h-5c0-1%201-5%203-5h5l1-2v-1c1-1-2-1-7-1l-10%201m113%204v3h44v-6h-44v3M18%20196l-2%201c0-1-5%202-7%205-2%202-2%203-1%203s2%201%201%202l3%201%2010-2c-3%200-1-3%202-3%201%200%202-2%202-5l-2-1-2-1c0-2-2-3-4%200m371-1v2h-1c-1-1-1-1-3%201l-3%202-2%201c-3%204-1%207%204%207s12-2%209-2c-2%200-2%200-1-2%201-1%202-2%203-1%202%200%201-2-1-5l-1-3h-4m-207%201l-8%201h4v5c0%204-1%205-2%205l-1-1-1-5-1%201v1l-1-1-1-1-1%201h-1c-2-3-3-2-2%201l-1%203h-1l-1-2-1%201a547%20547%200%2001-54%200l18%201v-7h-21l-21%201-1%202c0%203-1%203-2%202l-2%201c0%202-1%202-5%202h-6l63%201h63v-13l-13%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.9083969465648856,"src":"/static/aae81ff90c10485a6b6e6a0b68bfee6a/6d019/rakuten.png","srcSet":"/static/aae81ff90c10485a6b6e6a0b68bfee6a/e1953/rakuten.png 250w,\n/static/aae81ff90c10485a6b6e6a0b68bfee6a/46604/rakuten.png 500w,\n/static/aae81ff90c10485a6b6e6a0b68bfee6a/6d019/rakuten.png 691w","sizes":"(max-width: 691px) 100vw, 691px"}}}}},"allMarkdownRemark":{"edges":[{"node":{"frontmatter":{"path":"how-to-build-your-own-compiler","title":"How to build your own compiler ? ( The Worlds smallest compiler )","tags":["javascript"],"excerpt":"Compilers are there everywhere in our day to day use. Most developers tend to ignore it because they feel only the nerdiest of the geeks can code it. Let's build the worlds smallest compiler to understand how compilers work.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='258'%20viewBox='0%200%20400%20258'%20preserveAspectRatio='none'%3e%3cpath%20d='M290%2012l-10%2012H51v199h34l34%201-11%2013-14%2017-3%204h309v-52h-6l-7-1%207-1h6V0H300l-10%2012M181%2069c-10%202-18%206-26%2012l-6%204%2015%2015%2015%2015%204-2c2-2%206-3%208-3l3-1V67h-3l-10%202m18%2019l1%2021%203%201%207%203%204%202%2015-15%2015-14-3-3c-9-8-24-14-36-16h-6v21m-57%206c-7%209-13%2024-14%2035v5h41l1-3c0-2%201-6%203-8l2-4-15-15-14-15-4%205m90%2010l-15%2015%202%203c2%203%203%203-9%206-10%203-10%203-8%206l2%203%208-4c10-4%2011-4%2011-1%200%202%201%202%2022%202h21v-3c0-5-4-19-7-25-3-7-11-17-12-17l-15%2015m-106%2038l1%207v3h8l7%201%202%205%203%206-5%204-4%206c0%202%2019%2021%2020%2021s4-2%206-5l5-4%206%202%206%203v7l1%207h30v-15l6-2%206-2%205%204c2%203%205%205%206%205s20-19%2020-21l-4-6-5-5%202-5%202-6h8c9-1%209-2%209-8v-5l-22-1h-22l-1%206c-8%2025-45%2024-51-1l-1-5h-44v4'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5463917525773196,"src":"/static/493231422a84266271f5b40a73e7bac7/2a4de/compiler.png","srcSet":"/static/493231422a84266271f5b40a73e7bac7/6d161/compiler.png 150w,\n/static/493231422a84266271f5b40a73e7bac7/630fb/compiler.png 300w,\n/static/493231422a84266271f5b40a73e7bac7/2a4de/compiler.png 600w,\n/static/493231422a84266271f5b40a73e7bac7/db955/compiler.png 900w,\n/static/493231422a84266271f5b40a73e7bac7/f3583/compiler.png 1200w,\n/static/493231422a84266271f5b40a73e7bac7/f534f/compiler.png 1240w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"promises-in-javascript","title":"Working with promises in Javascript","tags":["javascript","typescript","nodejs","reactjs"],"excerpt":"Let's talk about promises in javascript. What exactly is a promise in javascript and how to handle promises. This article will talk about the different methods to resolve promises.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='244'%20viewBox='0%200%20400%20244'%20preserveAspectRatio='none'%3e%3cpath%20d='M187%2010c-17%204-29%2017-33%2034l-1%205h-8c-9%200-10%201-12%2010-2%2011-2%2011-8%2011-16-1-27%2018-29%2050%200%2012%200%2012%202%2014l5%203%202%201-13%2043c-13%2040-15%2048-12%2051%202%202%20235%202%20237-1%203-2%202-8-6-33l-8-25%205-1c8%200%2010-1%2011-3%204-5%203-7-1-13-12-14-16-26-17-50-1-20-2-24-12-33l-5-5h-21c-18%200-20%200-20-2a46%2046%200%2000-56-56m-46%2051c-1%206-4%2015-6%2016l-9%201c-6%200-7%200-10%203-7%207-12%2022-12%2040v9h16l-2%207-9%2034-7%2026%202%207c2%208%202%209%208%207l5-1h-6c-3%200-4%200-3-1%203%200%203%200%202-3l-1-3a215%20215%200%200136%201l-4%203c-2%201-1%202%2022%202l24%201h-50a251%20251%200%200070%200c7%200%207%200%2012-2h19l34%203h20l1-7%202-7-4-16-4-16%2014-1%2013-1-3-4a89%2089%200%2001-18-57c0-12-2-19-9-24l-4-3h-32l-32%201%203%206%203%209%201%203-7-1c-9%200-15%202-16%206l-1%203-14-1-15-1c-1%200%202-11%204-14%203-4%206-5%2010-2l4%202%201-2c3-4%204-13%204-21v-6l-26-1h-26v5m85%2046c1%208%202%2012%204%2010l1%201c1%201%206%200%206-1h3l1-1v1h6l1-1h3l3-1%201-2c2%202%203-3%201-6-1-3-1-3-2-2h-2c-2-2-2-2%203-2%203%200%201-1-5-1l-12%201h-1l1-1-6-2-2%202-2%202c-2-1-1-4%201-4%201-1%201-1-1-1l-2-1v9m-85%2058l-3%2011h-8c-2-2-8%200-9%202-1%204%2015%206%2022%203%204-3%205-4%206-14%203-13%203-12-2-12h-5l-1%2010m20-8c-7%204-3%2010%208%2013l7%203c2%204-8%206-13%202-3-2-11%200-8%203%203%204%2018%206%2024%203%2010-5%208-11-4-15-8-2-9-4-8-6h13l3-2-3-1c-4-3-15-3-19%200m48%2031c-3%201-9%206-9%208l3-1c5-5%2010-5%2025-4l14%202-8-3c-10-3-20-3-25-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.6483516483516483,"src":"/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png","srcSet":"/static/c2e2602606aecbaead43ebcb31d5fc22/6d161/javascript.png 150w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/630fb/javascript.png 300w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/2a4de/javascript.png 600w,\n/static/c2e2602606aecbaead43ebcb31d5fc22/5e6f2/javascript.png 789w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"why-i-migrated-my-website-from-wordpress-to-gatsby","title":"Why I migrated my website from wordpress to gatsby? (gatsby vs wordpress)","tags":["javascript","gatsby","typescript"],"excerpt":"While building a CMS for blogging, worpdress is the most commonly used platform. Gatsby has also topped the list recently. This article talk which one to go for and why I shifted from wordpress to gatsby. Is gatsby better than wordpress is the question I would be answering.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m170-45c-4%203-5%208-5%2020l1%209-6%202c-11%205-19%2013-18%2019%202%206%209%2012%2019%2016l5%201v12c-1%2013%201%2017%207%2020h8c4-1%2017-9%2019-11l7%204c13%2010%2025%2010%2028-1v-20c-1-3-1-3%207-7%2021-10%2021-22%200-32l-8-3%201-5c4-26-9-35-29-19l-6%204-4-3c-10-9-20-11-26-6m4%203c-3%202-4%2010-4%2017%201%207%201%207%2010%206%206-1%207-2%2010-5l4-5c3-3%203-3-2-7-8-6-15-8-18-6m43%201c-5%202-12%208-12%209l5%207c4%205%204%205%2011%206l8%201%201-10c0-14-3-17-13-13M64%2074c-11%204-21%2013-26%2024-5%2010-5%2025%200%2036%2015%2029%2054%2032%2073%205%2016-23%205-56-23-64-6-2-18-2-24-1m248%201c-11%202-25%2012-30%2022-20%2043%2034%2082%2067%2049%2029-29%204-78-37-71m-6%206c-6%203-9%205-14%2010-4%204-4%205%204%204l6%201-2%202c-4%200-4-1%203%2019%208%2024%207%2023%2012%2010%203-11%203-12%202-16-2-9-5-13-8-13l-2-1c1-2%2023-2%2024-1l-1%202h-3c-2%201-1%205%205%2021l7%2019%206-25c0-2-1-6-4-10-3-8-3-10%201-14l2-2-3-2c-9-6-25-8-35-4M66%2084c-6%202-12%206-15%2010l-7%2013c0%201%2036%2039%2039%2040s13-4%2018-10c4-4%208-12%208-18l1-3H89l-1%202v3h7l8%201c0%205-12%2019-17%2019l-35-35c0-2%203-8%207-11%2011-9%2026-9%2036%200%205%204%205%204%207%202s2-2-2-5c-8-9-23-12-33-8m128%2014c-5%200-4%200-11%2011l-4%207%203%205%205%2010%203%204h21l3-5%205-9%202-5-3-6c-7-13-7-13-24-12m159%206l-13%2042c-3%207%209-5%2013-13%204-7%205-23%202-29l-2-4v4m-191%200c-18%208-18%2016-2%2024%207%203%208%203%2010-5l3-7-3-7-2-7-6%202m68%205l-2%208%202%206c2%207%203%207%205%206%208-1%2018-9%2018-13%200-2-7-9-12-11-9-4-8-4-11%204m54-4l-1%2011c0%2012%202%2018%2011%2027%208%208%2010%208%207-1a2802%202802%200%2001-16-40l-1%203m-88%201c-10%205-7%2021%205%2021%205%200%2010-6%2010-11%200-4-4-10-7-10h-8M43%20121c2%209%209%2019%2018%2024%203%202%2013%204%2013%203l-29-30c-2-1-2-1-2%203m277-1a644%20644%200%2001-10%2031c0%203%2017%204%2021%201%201%200%200-4-4-14l-7-18m-149%2018c-1%203-1%2018%201%2021%203%205%2012%203%2021-4l3-4-5-6c-5-5-5-6-10-6l-7-2-3%201m50%200c-6%202-8%202-10%205l-5%206-2%202%205%204c9%207%2017%209%2020%204%202-4%201-22-1-22l-7%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg","srcSet":"/static/245aecc3e8c42b31f1e4796cebebd2ce/aabdf/gatsby-wordpress.jpg 150w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/9dc27/gatsby-wordpress.jpg 300w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/4fe8c/gatsby-wordpress.jpg 600w,\n/static/245aecc3e8c42b31f1e4796cebebd2ce/f9913/gatsby-wordpress.jpg 750w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"hello-world-rolwins-first-blog","title":"Hello World - Rolwin's first blog 😇","tags":["javascript","html","css"],"excerpt":"Blogging and writing about tech stacks is always been my thing. I like to experiment with different technologies and write my views on them. Web technologies has always been my passion. Check my blog for codebits on various web technologies.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='297'%20viewBox='0%200%20400%20297'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%2029v29h3a6118%206118%200%2001171-25l10-1v-7l-3-16-1-9h-14c-12%200-14%200-14%202h-1c0-2-3-2-52-2a873%20873%200%2000-63%201L17%200H0v29M270%208l1%207-2-1h-4c-2%200-5-5-3-6l-1-2h-4c1%203%200%203-2%201-2-1-2-1-1%201l-1%203-1-2-1-1c-1-1-5%201-5%202s-2%201-6-1l-1%202v2l1%202c0%202%200%202-1%201h-2c-2%201-2%201-3-1l-3-2h-3l-6%201-3%201-2%201-2%201c-3%201-3%202-3%204%200%203%200%203-1%202s-1-1-3%201l-3%204-9%203A5943%205943%200%20010%2061a2002%202002%200%200190-10c-2%203-4-4%208%2053%2011%2054%2012%2058%2013%2058a1581%201581%200%200076-13l-2%205-4%2010-2%2010-3%2016v11h7c8%200%2018%203%2019%205%201%201-2%2012-4%2013l-1%203-2%205c-2%202-3%204-3%208%200%206-1%207-3%207h-8l-7-1h-7l2-7c3-8%203-13%200-13l-6%202a4911%204911%200%2000-42%2011c-3%200-3%200-3%203%200%206%201%2011%203%2011l1%202c-1%201%200%203%202%205%203%203%203%205%200%207l-2%204c0%202-1%203-2%203-3%201-4%201-4-5a266%20266%200%2000-4-24l-1-4-6%201-5-1%203-1v-1l-15%203-77%2013-10%202-1%2013%201%2014a671%20671%200%200041-10v-2c1-2%204%200%204%202s0%202%204%201l5-2%2014-2%2035-5c4%200%204%200%204%202s0%202%201%201a256%20256%200%20008%2030l11-8c5-4%2034-13%2036-11%201%201-1%203-7%206l-14%2010-6%206h103l104-1c2-1%205-8%204-8l2-1%204-3%201-2%201-2h2c2%200%202%200%201-1l7-2h10l-2%208-3%209-1%203h30v-41c0%205%200%205-4%206-6%202-12%202-16%201h-6l-10%202a942%20942%200%2000-59%208c-4%200-5%202-1%202%201%200%202%200%201%202l-1%201h-2l-11%202-12%202c-14%202-24-1-26-9-2-4-2-4-12-3-4%201-4%203%200%203l3%201v3h-1l-4-2-6-2c-9-1-15-5-8-5%204%200%2012-3%2012-5l2-2c2-2%201-2-3-4h-9l-9%201c-8%200-9%200-12-2l-5-2c-2%200-5-3-5-5l5-3c1%201%2013-1%2015-2%202-2%203-2%208-1l12%202c3%200%207%202%2015%206%2015%2010%2015%2010%2025%2010%2019-1%2052-8%2065-14%2026-11%2030-14%2024-17l-3-4-2-4-2-3-2-4c-1-1-1-2%204-6%206-5%2018-11%2024-12%206%200%206%200%2014%2021%202%203%202%202%202-19v-22l-5%201c-6%200-6%200-10-8l-2-2c0%203-7%206-9%204l-2-1%201%202v2c-2%200-3-2-3-4l2-1c6-3%208-5%207-7l1-1c2%201%203-2%202-5l-2-4v-5l-2-9c0-7-3-17-3-13%200%202%200%202-1%200l-1-4v-2l1%202c1%201%201%201%201-1l-2-3-1-3c1-2%200-3-1-3h-1c0-3-7-10-13-12-9-4-21-6-40-6-18%200-24%201-24%203l4%203%204%203%202%203%203%203c0%203-6%209-7%209h-2l1%201c1%200-3%205-8%208-4%203-5%203-1-1%202-2%202-3%201-4v-2c-2-1-2-1-2%202v1l-1-17c1-2%200-4-3-6l-3-3-3%202-3%203v3l-2%206c-1%202-1%202-1%200s-1-3-3-1l-4%201-3%201v-5c1-7%203-14%207-21l3-5%201%202%202%206c0%205%202%205%204%201v-7l-2-7c-1-3-1-4-3-3l-1-1%203-1%201-1%202%201c1%202%202%202%205%202%205-1%205-4%202-6-4-2-2-6%202-4%202%201%202%201%202-1-1-3-4-4-7-1-3%204-4%203-1-1l4-3c3%200%203-1%202-11l-1-10-1-1v-2l-1-1-1-3c0-2%200-2-2-2-1%201-2%200-2-1l-2-3c-1-2%200-2%208-3l10-2h-11l-8%202-2%201-1-2c0-1%203-2%2011-3l12-3c1-2%203-3%203-1%200%203%2014%200%2019-4l9-3%205-1%203-1c1-1%202%200%202%201h2l2%201-20%206%203-2%203-2-4%201c-3%201-4%201-3%203%202%201%201%201-11%203-10%202-12%202-11%204a100%20100%200%200029-6l17-4a1030%201030%200%200123-8l-10%201h-24l-31-1h-33v8m122-3a700%20700%200%20013%2047v6l1%208%201%2012%202%2012%201%207V86l-1-18a1960%201960%200%2001-7-63M73%2039a1730%201730%200%2001-22%205c1%202%2034-3%2034-5%201-2%200-2-12%200m84%2015l-3%201-2%201-1%201-1%201-1%203c-3%202%202%204%207%203%206-1%207-3%201-2-4%200-4%200-3-1l5-2%202-1%209-2%2010-2c0-1-7-1-15%201-4%201-5%200-5-1h-3m-52%205l3%201h4l-4%201c-4%201-5%202-2%202l3%201%202%201v1c-2%201-2%201%200%201h3l-3%201-1%201%201%202%201%201v8c-1%201%200%201%201%201%202%200%202%200%201%201l-1%201v2c-1%201-1%201%201%201v2c2%200%202%203-1%206s-3%204%203%204c2%200%202%200%201%201s-1%203%201%204l-1%201h-2l2%201v4l1%201v1c-1%201-1%201%201%201h2l-2%201c-2%200-2%201-1%201v2l1%201v1c-1%201-1%201%201%201s2%200%201%201c-2%200-2%201-1%203v9l1%202%201%201v1c-1%201-1%201%201%201l1%201c-2%201-2%204%200%204v1c-2%201-2%201%200%201s2%200%201%201l-3%202-2%201c0-2-1-2-2-2-1%201-2%204%200%206a685%20685%200%200075-16l-12%202a342%20342%200%2001-26%205h-2l-9%201-8%201-3%201-2%201v-1l1-2%201-2c2%200%202%200%200-1-3%200-4-2-1-3%203%200%202-2-1-1l-2-1%201-2%201-1-1-1c-3%200-2-3%200-3%201-1%201-1-1-1l-2-1-1-1-2-2c-1-3%200-3%202-3s4-2%201-2v-3l1-2%202-2h-2l-2-1%202-2%202-1-4-1-4-1%201-1%201-1-2-1-2-1%202-2%201-1v-1l1-1-3-1h-3c0-1%206-2%208-1%202%200%202-2%201-3s3-1%208-1l2-2-1-1-1-1-1-1c-1-1%200-1%202-1%203%200%204-2%201-2l2-1%203-1h-4c-3%200-3%200-1-1s0-1-4-1h-5l2-1h-3c-2%200-2%200-1-1l-5-1h-3l1-1c0-1%203-2%2010-3l9-2-5-1h-4v-2l1-2%203-1%204-1-4-1h-3c3%200%202-2%200-2-6%202-14%202-14%201l-3-1c-1%200-2%200-1-1l-3-1-4%201m69%205l-5%201-5%201h-6c-10%202-9%202-9%206l1%205h4v-3h4l1%202c1%201%2025-3%2025-4h-2l-3-1%202-1c1%201%205-2%204-3l1-2c1-1-11-2-12-1m32%2012l2%207c2%203%202%205%201%207l-1%205%201-1c1-3%203-4%203-2%200%201%208%204%2013%204l9-2c6-4%2018-8%2023-8%206-1%207%201%202%206-3%203-4%206-2%206%203%200%2013-19%2011-22-1-2-13-3-16-1l-6%202-3%201c-1%202-11%201-11%200h-1l-3%202v2c0%204-2%206-6%204l-4-1-2-1h-1l-2-2-2-2-1-1-2-3c-2-2-2-2-2%200m-26%203h-1c-1-1-13%200-25%203-2%200-2%200-1-1s1-1-2-1l-3%201%201%201c2-1%202%200%203%204%200%205%200%205%203%205s4-1%202-3c-3-3-2-3%201-3%202%200%202%201%202%203s1%202%203%202l19-4c1-1%200-1-1-1-2%200-2%200-1-1l1-2c-1-1%202-4%203-3l-1%202v1l1%201%201%203%201-1h2l4-1c0-1-1-2-3-2s-2-1-2-3c0-3-6-3-7%200m11%2010l-18%203c-22%203-21%203-19%206%201%201%2013-1%2015-3l13-3c6%200%2014-2%2014-3l-1-1-4%201m16%2011c-1%205-1%205-11%207a481%20481%200%2000-23%202l24-5a314%20314%200%2000-42%208l2%201-2%201%201%201c2%201%202%201%201%203l-1%201%202%201c1%201%2013-1%2013-2h-7c-3%201-4%200-1-2%201-2%207-3%2031-7%2013-2%2014-2%2014-9%200-5-1-5-1%200m-25%2021c-27%204-27%204-26%206s30-3%2036-5l10-3%208-2-28%204m3%207l-16%201c-11%201-13%202-7%204%204%201%206%204%203%204l-1%201c1%201%2012-1%2012-3l3-1c2%200%202-1%202-2l2-2v2l2%201%202-2%202-2c1-1%202%200%202%201h-1l-2%201h7l1-2c0-3%200-3-11-1m80%2060l-4%202-4-2c-6-3-9-1-9%206%200%204%200%205-2%206-6%202-7%209-3%2011%202%200%202%201%201%202-2%206%200%209%207%207h7c6%204%2012%201%2010-5%200-2%200-3%204-7%205-5%205-7%200-9-3-2-3-3-3-6%201-4-1-4-1%200-1%204-4%204-5%201%200-3%203-6%206-6%201%201%202-2%200-2l-4%202m-9%2013c-3%205-2%2011%202%2011s6-4%206-9c-1-5-6-6-8-2'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.3513513513513513,"src":"/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/4fe8c/rolwin.jpg","srcSet":"/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/aabdf/rolwin.jpg 150w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/9dc27/rolwin.jpg 300w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/4fe8c/rolwin.jpg 600w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/9842e/rolwin.jpg 900w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/47498/rolwin.jpg 1200w,\n/static/27dc3a779cdfe1f4f30ec2caf3c3fe88/b4640/rolwin.jpg 2034w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"center-align-things-with-css","title":"Center aligning content with CSS and flex-box","tags":["html","css","reactjs"],"excerpt":"Many a time I noticed that people find it very difficult to align content to the center either vertically or horizontally using CSS. So let's see few ways in how you can align content with css.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='267'%20viewBox='0%200%20400%20267'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20134v133h401V0H0v134m41-69v12h154V52H41v13m167-1v12h72V52h-72v12m81%202l1%2015h72V52h-73v14m-81%2023v7h72V81h-72v8M42%2084l-1%2026v25h73V84l-36-1-36%201m81%201v83h72V83h-36c-33%200-36%200-36%202m166%2011v10h73V86h-73v10m-81%2018v13h72v-26h-72v13m82%205v7h71v-15h-71v8m-82%2031v18h153v-36H208v18m-167%203l1%2015h71v-29H41v14m42%2032c-5%202-6%205-6%209%200%206%202%208%2012%2010%204%201%204%203%201%204-2%201-3%201-5-1-3-2-9-2-9%201l4%205c7%207%2019%202%2019-7%200-5-2-8-9-9-4%200-7-2-6-4s6-1%207%201c1%201%207%202%207%200%201-1-1-6-3-7-4-3-9-3-12-2m31%200a9%209%200%20002%2018c7%202%209%204%203%205l-4-1-4-1c-5-1-5%203-2%207%204%204%2015%204%2019%200%205-7%202-14-7-16-5%200-5-1-5-3s5-3%206-1c1%203%207%203%207%200%200-5-7-10-11-9l-4%201m197%201l-5%201-2%204c-4%205-4%2013-1%2018%206%2010%2021%209%2026-1%206-14-5-27-18-22m-265%202c-11%209-6%2027%209%2027%206%201%2010-2%2012-7%202-4%202-5-2-5-3%200-4%201-5%203-4%205-13%200-12-7s7-9%2011-4l6%202c4%200%204-1%202-5-3-7-15-10-21-4m109%2012l1%2015h3l4%201v-10h9v-8h-4c-5%200-5%200-5-3s0-3%205-3%205%200%205-3c1-4%201-4-9-4h-9v15m28%200v16h18v-8h-10v-22l-4-1h-4v15m27%200v16h18v-8h-5c-5%200-5%200-5-3%200-2%200-2%204-2l5%201v-8h-4c-4%200-5%200-5-2s1-2%203-2c7%200%207%200%207-3v-4h-18v15m26-15l4%208%204%206-2%204-5%208c-2%204-2%205%203%205%203-1%204-1%206-5%202-5%204-4%206%201l2%203c9%202%209%200%204-8l-5-8%204-6c5-8%205-8%200-8-3%200-4%200-6%204l-2%203-2-3c-2-4-3-4-7-4h-4m34%2015l1%2015h9c8%200%209-1%2011-3%202-3%203-8%201-11-1-1-2-2-1-4%202-4%201-6-2-9s-3-3-11-3h-8v15m67-14l4%207%204%206-5%207c-5%208-5%2010-2%209h4l4-4c3-5%203-5%206%200%202%204%203%204%207%204s4%200-1-8-5-7%200-15c4-7%204-7-1-7-3%200-4%200-5%204l-3%203-2-3c-2-4-2-4-6-4l-4%201m-26%209c-5%207%203%2017%209%2011%202-2%203-9%201-11-2-3-8-3-10%200'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.5,"src":"/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg","srcSet":"/static/1c65e8062d6b8d416bbfb2c1b729e891/aabdf/flexbox-css.jpg 150w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9dc27/flexbox-css.jpg 300w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/4fe8c/flexbox-css.jpg 600w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/9842e/flexbox-css.jpg 900w,\n/static/1c65e8062d6b8d416bbfb2c1b729e891/8e2a4/flexbox-css.jpg 1140w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"react17-new-features","title":"What's new in React 17 ( No new features )","tags":["html","css","reactjs"],"excerpt":"In this article let's discuss the new upgrades made to React v17.0 that were released on October 20, 2020. React 17 has no new developer features added to it rather it has features added for backward compatibility.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='225'%20viewBox='0%200%20400%20225'%20preserveAspectRatio='none'%3e%3cpath%20d='M0%20113v112h401V0H0v113m185-44c-3%201-4%208-3%2013v5l-5%202c-12%205-11%2014%201%2019l4%202v5c-2%2012%205%2016%2016%209l4-3%205%204c11%207%2016%203%2015-11v-4l5-3c11-5%2011-12%201-18l-6-2v-7c0-12-5-15-16-8l-4%203-4-2c-6-5-10-6-13-4m0%204v12h5c4%200%205-1%208-5l2-3-5-3c-5-3-8-4-10-1m26%200c-7%203-7%204-4%208%202%203%203%204%207%204%205%201%205%201%206-4%201-9-3-12-9-8m-18%2019c-4%205-4%206%200%2012l2%205h13l3-5c4-5%204-6%200-12l-3-5h-12l-3%205m-15%200c-9%204-9%209%201%2013l4%202%201-4c2-4%202-4%201-9-1-4-3-5-7-2m41%202c-2%204-2%205%200%209s2%204%205%203l6-4c4-3%203-7-3-10s-6-3-8%202m-21%200l-2%204%202%204%204%202%204-2%202-4-2-4-4-2-4%202m-13%2018v11c2%203%209%202%2013-3%202-1%202-2-1-5-4-4-11-6-12-3m29-1c-3%200-5%201-7%204l-3%204%202%202c5%204%2011%205%2013%202s1-13-1-13l-4%201m-50%2032c-2%202-3%204-3%208-1%205%200%208%202%205l2-1c2%202%208%203%2010%201h15c1%201%203%201%203-2l3-1%203%201c-1%204%202%204%204%201l1-3c-1-2%201-1%202%201%203%204%2011%205%2012%202%200-2%200-2-2-2-4%200-7-1-7-3s7-5%2011-5c5%200%205%200%203%204v6c1%203%204%203%204%200-1-1%200-4%201-6%202-4%202-5%205-5l4-2c0-2-6-2-13-1h-7c-1-2-9%202-11%205-2%204-4%203-4-1l-2-4c-2-1-7%203-9%208l-3%204h-5l-4-1%202-1%204-1c3-1%201-4-2-4-2%200-1-1%202-1%207-2%206-6-1-4-6%200-7%201-8%205l-1%206v3l-4-2-4-1%203-2c3-1%204-4%201-8-2-3-3-3-7%201m86-2v2l3%202h4c1%201-1%203-3%203s-4%203-2%204l1%203c0%203%202%203%204-1l3-3c3-1%204-4%202-4l-1-1c1-3-4-6-7-6l-4%201m58%203c-5%203-6%2010-2%2017%203%206%203%206%209%205%209-3%2013-8%2011-16-2-7-12-11-18-6m-227%200c-7%203-9%2013-4%2018%209%207%2022%200%2019-11-2-6-9-10-15-7m-28%2030c-2%203-1%205%202%205l3-1h1c1%202%202%202%204%201h6c3%200%205-2%205-4s0-2-1-1c-1%202-2%202-2%201-1-1-1-1-2%201-2%201-2%201-1-1l-1-2-2%203-2%202c-2%200-2%200-1-1l2-2c1-3-3-3-4%200-1%202-1%202-1%200%200-4-2-4-2-1l-1%203v-3c0-3-2-3-3%200m32%202c-1%203%200%204%204%203h5l1-3%201-1%201%202c0%203%200%203%202%200l1-3%201%202c0%203%203%204%205%202h1c1%201%208%202%2010%201v-1c-2%200-2%200-1-1l3-1c2%200%203%202%201%202l-1%201h2l2-3v-1l1-1-5-1c-5%200-6%201-6%203l-2%202v-5l-3%201h-1c0-1-1-1-2%201-2%202-2%202-2%200-1-2-7-3-8-1h-1c0-2-2-1-3%202l-3%202c-2%200-2%200%200-1l1-1v-1c1-2%201-2-1-2s-3%201-3%203'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.7857142857142858,"src":"/static/9daa87fd6b59f56f1454a4e46c5a351f/2a4de/react17.png","srcSet":"/static/9daa87fd6b59f56f1454a4e46c5a351f/6d161/react17.png 150w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/630fb/react17.png 300w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/2a4de/react17.png 600w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/db955/react17.png 900w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/f3583/react17.png 1200w,\n/static/9daa87fd6b59f56f1454a4e46c5a351f/5707d/react17.png 1600w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"code-splitting-in-react","title":"Code splitting in react with React.lazy() and Suspense","tags":["html","css","reactjs"],"excerpt":"Suppose the bundle size of your project is very huge and you don't want to load everything at once during the initial render you can use code splitting along with React to improve the performance and load time of your application.","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='219'%20viewBox='0%200%20400%20219'%20preserveAspectRatio='none'%3e%3cpath%20d='M221%2013A234468%20234468%200%200086%2058c6%2015-8%2035-25%2035-9%200-21-7-24-16l-3-4-17%205-16%206-1%2067v68h401v-26l-1-110V0H260l-39%2013m61%2040v14h28V39h-28v14m1%200v13h26V40h-26v13M155%2083c-2%201-9%2011-9%2013s-2%201-2-2c-2-10-15-15-15-5%200%204%204%208%2010%2010%2015%206%2037-9%2024-15-3-2-5-2-8-1m-1%205l-4%207-3%204%203-1c6-1%2012-4%2013-6%202-6-5-8-9-4m-29%2023v8h18v-5l1-9v-3h-19v9m22%2020v8h19v-17h-19v9'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.829268292682927,"src":"/static/9fe51c6e6dab4ae76d9944746bfff13e/2a4de/codesplitting.png","srcSet":"/static/9fe51c6e6dab4ae76d9944746bfff13e/6d161/codesplitting.png 150w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/630fb/codesplitting.png 300w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/2a4de/codesplitting.png 600w,\n/static/9fe51c6e6dab4ae76d9944746bfff13e/db955/codesplitting.png 900w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}},{"node":{"frontmatter":{"path":"infinite-scroll-along-with-ssr-technical","title":"Infinite scroll along with SSR technical","tags":["vuejs"],"excerpt":"We have a long article list that are created every day like medium & we also care about the UX","cover":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='352'%20viewBox='0%200%20400%20352'%20preserveAspectRatio='none'%3e%3cpath%20d='M291%2042c-26%205-39%2010-48%2018-5%205-5%205-5%203%200-5-3-12-4-13l-4%203c-3%204-4%204-4%200-1-4-4-4-7%200-2%202-2%203-2%2012%200%208-1%209-2%209-3%200-3%203-1%206l2%202-6%203c-8%203-8%205%200%206l5%201-1%204-4%207c-7%207-5%2015%204%2015h5l-3%204c-3%204-5%2012-4%2014%200%201-1%204-4%207-5%205-12%2020-15%2029l-3%2036c0%204%201%205%203%206s3%202%203%204c0%205%205%2018%209%2024%205%207%206%2019%206%2038l-4%2028c-1%202-1%202%202%202%202%200%202%200%202%202l-1%203-3%201c-2%200-2%200-4%203v10l21-1h19l-3-6-2-5%204%205%202%205h10c10%200%2014-1%2011-3l-2-2c0-2-8-8-12-9l-8%201c-5%201-5%201-4-4%200-3%200-3%204-3%204%201%206%200%206-3l2-7c6-13%208-37%204-51-3-13-3-12%202-16%206-4%208-7%208-13s2-6%206-1c3%202%205%203%208%203%206%200%2015-3%2019-7%201-2%203-3%205-3l7-2%208-4c8-4%2012-12%208-18-1-2-1-2%203-10%204-6%205-9%204-10-1%200-27-2-29-1l-1%201-2%203c-1%202-1%202-3%200s-2-2-5-1c-4%202-4%202-7%201l-3-4%201-2c2-3-1-5-4-3-2%201-4%201-7-1-3-1-3-1-8%201l-4%202%201-3%201-4%2010-1c18-2%2033-9%2039-19%202-6-2-15-9-18-4-1-4-2-1-4%208-4%208-15%201-19l-2-2c3%200%202-2%200-3l-2-4v-3h11c13%200%2016-1%2012-5-3-3-10-6-12-6s-1-1%202-2c5-3%206-5%203-6-3%200-3%200%201-2%209-4%206-8-5-8h-7l6-3c16-8%204-13-19-7m1%202l-21%206a826%20826%200%200125-4l4-1-5%204c-4%203-4%204-3%206s4%203%204%200l16-11c3-1%202-2-2-3l-18%203M120%2064c-16%204-32%2015-40%2027-9%2013-9%2028%200%2023%203-2%205%200%202%204-2%202-2%204-2%208%200%206%200%207-4%2014l-4%208-4%203-6%204-2%202%204%2010%206%2013%203%204-2%201c-3%202-4%2010-2%2015%202%203%202%203%208%203%205%200%206%200%209%203l3%204%206-2%208-2c2%200-2%2025-7%2037-2%205-1%207%202%205h8c7%200%207%200%207%202-2%206-3%2022-3%2031l1%2010h-3c-3%201-4%203-2%203l1%201%203%209c4%2010%204%209-5%208-11-1-16%203-17%2015v5h8a816%20816%200%200070-5%20472%20472%200%2000-3-34v-6h-7v-17l2-21%201-4%2013-3c17-4%2019-5%2017-6l-2-7-6-34c-1-2-1-3%201-6%202-5%203-22%202-31l-1-7c6%200%206-6%200-7-4-1-4-3%201-6%206-4%2014-12%2016-15%202-4%200-6-4-3-3%203-7%203-5%200s1-4-3-4c-5%201-6%200-10-15-5-22-14-34-25-37-7-3-24-2-33%200m118%2016a1343%201343%200%2001-5%2025l-1%208c-4%202-9-1-8-4%202-6-6-9-11-5-7%206-5%2011%204%2011%208-1%209%201%205%205s-7%209-7%2013c0%202%200%202%203%200%209-6%2022%202%2022%2012%200%204%205%205%2025%204%2014%200%2016%200%2023-2%2014-5%2021-11%2021-18s-17-19-18-13c-1%201%200%202%202%202%203%201%202%203-2%202h-14c0-2%201-2%207-4%204%200%203-1-4-2-4-1-4-1-4-5l1-3%203-5c2-5%209-11%2013-11l2-1-5-1-3-1%205-1c4%200%204-1%204-3v-2l-14%201-28-1-16-1m8%207c-4%201-5%204-1%203l7-1h6l-4%201c-8%203-14%2013-13%2020%201%205%204%207%2010%208l6%201-4%201-8%201h-3c0%203%206%203%2012%202%205-2%2011-6%2011-8l2-3c4-5%205-16%202-19l-5-3-3-2c1-2-9-2-15-1m-112%205a308%20308%200%2000-35%2015c-6%201-13%204-13%205h2c5-3%2012%201%2014%207%202%203%203%205%204%204v5c0%205%200%205%202%205%204-1%203%202-1%203-2%202-4%202-5%201h-2c-1%201%200%202%202%205l3%204%204-3c4-3%2013-6%2019-7%203%200%204%200%205%202%202%203%201%205-4%209-3%201-5%203-4%204l-2%202c-4%205%2011%200%2024-7l9-5%201-7%202-12c0-5%200-6%203-7%208-1%208-14%200-14-3%200-7%204-7%208%200%208-7%2025-10%2025-2%200-4-6-3-8v-3l-1-4v-4l-3%204c-3%204-7%207-13%209l-4%201h5l7-1%203%201c0%202-4%203-11%203-5%200-6%200-9-3-4-4-7-10-7-14%200-12%2018-21%2026-14%204%204%204%204%204-2%200-9%200-9-5-7m123%200v5c-1%206-4%2011-9%2013-6%202-1%206%207%205%208-2%2013-7%2013-16%200-3%200-4-3-5-2-2-8-3-8-2m32%203c-6%204-9%2013-5%2015%202%201%2013%202%2015%201%201-1%201-1-1-3-3-3-4-9-3-12%201-4-2-4-6-1m-169%209c-8%204-10%2010-6%2017%202%204%202%204%206%204%205%200%2012-3%2014-6%202-2%202-2%200-2-5%200-9-4-10-10%200-6%200-6-4-3m-31%2013c2%206%202%209%201%2012-2%204-2%204%201%204%204%200%2010-4%2011-7%200-2-3-10-6-10l-4-1c-3%200-3%200-3%202m177%209c-11%204-16%2015-6%2014%204-1%204-1%204%202%200%205%205%207%207%202%201-2%202-3%203-2l3-1c1-1%202-2%203-1l2-1%204-1c10%200%208-8-2-9l-4-2c-2-1-11-2-14-1m-40%209l3%204%203%202v18c1%2019%201%2019%203%2018%202%200%202-1%201-4v-16c0-14-1-18-5-21-4-2-5-2-5-1m-66%207a189%20189%200%2001-45%2020l1%202c2%203%202%203%206%201%2010-4%2021%201%2026%2011%202%205%206%207%209%206%204-1%205-5%204-13%200-7%200-7-3-7h-3v-7c0-4%201-6%202-7l1%201c0%203%201%202%206-1l5-2h-4c-3%200-3%200-3-2%200-3%200-3-2-2m-70%203a236%20236%200%2001-22%2010l-5%202%202%204%206%2013c4%207%204%208%207%207s5%200%205%203c-1%201%200%202%201%202l2%202v12c-1%201%200%202%201%203%203%203%204%203%2023-3%2015-5%2015-5%2012-9l-1-3-3%203-5%202c-2%200-4-3-4-4%201-1%200-1-1-1l-1-3-1-4c-4%200-1-6%205-11l4-2-8-12c-9-14-10-14-17-11m88%208l-1%202-4%202-5%202c-2%200-2%200-2%203%202%208%202%2010%201%2013l-2%205c0%202-5%205-10%205s-6-1-11-9c-6-10-17-12-30-4-5%203-5%205%200%203%205-3%206-1%201%203-4%204-4%207%200%203%205-4%205-1%202%203-5%206-4%206%201%202%205-6%207-5%2015%203%209%2010%2013%2012%2023%2011%208-1%2017-5%2021-10s6-26%203-34l-2-3m87%209c-3%202-8%2013-11%2023-2%208-6%2013-10%2013-3%200-9-9-9-14%200-3-1-3-7%201-7%203-7%205-4%2015%205%2013%2021%2018%2031%209%206-5%2010-16%207-19-2-2-3-8-1-8l1-2c0-3%202-3%203%200s1%204-1%204-1%203%201%204c7%201%2010-3%207-11l-2-5c2%200%205%206%206%2010%201%203%203%203%203%200l-2-7c-4-8-3-9%202-2%203%206%208%207%2013%205%205-1%206-4%205-7h-4c-4%202-7%201-14-6-7-5-10-6-14-3m35%2015c-7%2010-14%2024-14%2026l6%201h9c3%201%203%201%204-3l1-7c0-6%206-11%2013-11%202%200%203-1%206-7%205-8%204-9-3-9l-11-1h-5l-6%2011m-18%206c0%201-3%204-6%204-4%201-4%203-1%207%204%206%208%206%2011%200l4-7c4-5%204-5-2-5l-6%201m-208%204c-3%203-4%207-2%2011%201%202%206%203%206%201l1-2c2-1%205-7%205-8l-4%202c-5%204-7%202-3-4%203-4%201-4-3%200m50-2l3%206c3%205%203%206-10%2010l-10%204-1%2010c-1%208-4%2022-7%2028%200%202%200%202%2021%202%2025-1%2036-3%2062-9%202%200%202%200%202-6l-5-31-1-5-3%202c-5%204-9%206-16%207-12%202-20-1-29-11l-6-7m193%201l-6%203c-1%202-1%202%203%202l5-1c3-1%202%202-2%204-3%201-3%202-1%202%204%200%204%202-1%204-2%200-3%201-2%202%204%201%2012-8%2012-12-1-4-3-5-8-4m-50%206l2%209%203%209c0%207%2013%207%2022%201l2-2h-3l-7-1c-4%200-4%200-4-4%201-3%200-3-2-3s-10-7-10-9l-1-1-2%201m-54%2019l-9%201h-5v5c1%207%205%2018%209%2024%207%209%209%2033%204%2056l-1%2010%2016-2%206-31c1-16-3-33-8-34-2-1-2-1-1-3l5-1c6%200%2019-4%2024-7%206-3%209-7%209-13%200-5-1-5-8-1-7%203-15%203-22%200l-5-4h-14m34%2025l-9%203c-4%200-7%202-7%202h1l1%201%201%207c4%209%203%2031%200%2044l-3%2011h7l7%201%202-5c6-13%209-38%205-57-1-8-2-9-5-7m-111%2011l-9%201c-1%202-3%2019-3%2029%200%2011%200%2011%202%2012s3%201%204%2010l1%2012v4l4-2c2-2%204-2%208-2%204%201%204%201%204-1l-2-6c-1-6-3-10-4-11s-1-2%201-3c2-2%202-3%202-15s1-22%203-27l-1-2-10%201m13%204l-2%2021v16h3l4-1v-21l1-20h-3c-1%200-2%201-3%205m-30-2c-2%200-3%201-3%202-2%203-3%2020-3%2029v10h3c4%200%205-1%205-6-1-5%200-21%202-30l1-6-5%201'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.1363636363636365,"src":"/static/a4e758a29b6597159113aa5f594d3e15/2a4de/cover.png","srcSet":"/static/a4e758a29b6597159113aa5f594d3e15/6d161/cover.png 150w,\n/static/a4e758a29b6597159113aa5f594d3e15/630fb/cover.png 300w,\n/static/a4e758a29b6597159113aa5f594d3e15/2a4de/cover.png 600w,\n/static/a4e758a29b6597159113aa5f594d3e15/c95b5/cover.png 717w","sizes":"(max-width: 600px) 100vw, 600px"}}}}}}]}},"pageContext":{"postPath":"The-overwhelming-world-of-Japanese-web-design","translations":[{"hreflang":"en","path":"/The-overwhelming-world-of-Japanese-web-design"}]}},"staticQueryHashes":["4097791827"]}