My name is Harada and I work as a Monosus Accessibility Advocate, Web Developer, Manager, and more! Recently, I've been thinking, "Huh? Maybe I'm a designer!?" and I think I'll have even more titles to add to my collection!
Last year, I purchased some Modern Web Development materials with a focus on Web Components as part of my research budget.
For the past few years, every morning I receive a few interesting articles from the writing site Medium to my email address, and in January of last year I read an article called " Using Global Styles in Shadow DOM ". Among them, I learned about the existence of a learning material called "Web Component Engineering - by Rob Eisenberg" created by the author, Rob Eisenberg, and was so intrigued by the depth of the content that I decided I had to try it, so I bought it.
The teaching materials themselves were quite voluminous and quite expensive, but I'm really grateful to my company for allowing me to purchase them within the framework of the inquiry-based budget!
To give a brief overview of the contents, try translating the catchy slogan on the teaching materials introduction page into Japanese in your browser.
What if you could learn how to leverage the power and performance of the web platform without a framework?
Rob Eisenberg explores UI engineering through the application of a wide range of modern web standards. With web components as its foundation, the course covers dozens of topics that professional UI engineers and designers use on a daily basis. Topics range from DOM APIs and web components to modern CSS, accessibility, forms, design systems, applications, tooling, and more. Regardless of your experience level, this course is the web platform resource you've been looking for.
As background for choosing this learning material, let me explain how important the tagline "Even without a framework" is.
In recent years, using frameworks and third-party libraries has become the default choice for web development. The current situation is that "which framework or library is used in the project" has become an extremely important aspect for engineers' development experience and career development.
Developing using frameworks is quite fun, and knowledge can be easily found on the Internet, so when viewed from the development perspective alone, it is a highly refined method.
On the other hand, if you select a framework, library, or platform without giving careful thought to the type of product you are creating or what it will become, you may run into major problems with operation and modification after launch.
For example, development of the selected framework or library itself may come to a halt, resulting in huge costs in transitioning to alternative means. Failure to incorporate frequent updates will deviate from the governance of the company that owns the product, resulting in increased maintenance costs that are not related to the service. The operations team may not have enough knowledge of the technology stack and be unable to use it effectively. And so on.
I think this problem is due to the current situation where "engineers" are the only ones thinking about "developing" at the development stage. Rather than being the fault of the engineers, I personally think that the main cause is that the "imagination of the people involved in the product" has limitations when it comes to what may happen in the future, such as the operation phase.
Also, frameworks are becoming more and more diverse, and it is important to remember that there are too many things that can be done to treat a black box (the functionality provided by a framework) as a black box. If the same engineer is involved, but the difference in the framework or library selected causes a large fluctuation in accessibility and performance, the engineer himself may end up black-boxing his own capabilities.
Like many others, I have made similar mistakes several times. Not everyone is exploring or imagining how to do business on a modern front-end framework, let alone the web platform. Therefore, I often end up disappointing people by saying "it's not what I thought it would be" when I create something that I've taken into consideration, or I spend a lot of time fixing it.
I think this is because people are confusing simple with easy, or falling for the easy option.
If that's the case, then one solution may be to aim for simplicity rather than ease. This material is packed with that idea.
Low-dependency web development that uses web components and conforms to web standards means you can say goodbye to the time and effort required for refactoring to move to a more feature-rich framework, or to legacy technologies that are made use of due to framework or library upgrades. A low-dependency development environment also reduces the time and effort required to select technologies when starting a new project. And best of all, a low-dependency environment allows you to flexibly introduce the most suitable framework later.
It's true that there are more parts where you have to get your hands dirty and do the design yourself than with a framework. Still, the ability to grasp the areas that developers normally think about, such as what is needed in the first place, how generalizable it should be, and how to incorporate the accessibility provided by the browser into the product, is a necessary skill now, especially in a world where coding using generative AI has become commonplace, and is essential for a developer's career path.
As someone who likes low dependency, this material, which allows me to gain high-level knowledge of web components and related modern web development, was a godsend and a must-buy.
How to proceed with the teaching materials and difficult points
The teaching materials consist mainly of videos of about 5 to 20 minutes each and demo code, but they are quite voluminous and the content is all in English, so as a non-native English speaker, I had to rely on Wisper and ChatGPT to understand the course content one by one.
The biggest problem for me, who is quite busy, is finding the time to work through this curriculum. Even if I used a task management tool to set up tasks for how much to do each day, I would end up thinking, "It's okay today," or "Today is important, so it can't be helped," and my habit of working through the material would fade, and there were times when I didn't make any progress for more than a month.
I think the reason I was still able to make progress was because I had declared it an inquiry-based budget along with my motivation to study, and I made good use of the mental pressure of not not doing it. Another tip that helped me turn my mid-slowness into a habit was the importance of "slowing down the pace." Do it every day, even if it was just one class. Even if you start to feel good, hold on and keep up the pace. I also entered the URL of the course into my task management tool, so I made sure to set a relatively specific state of "I'm going to do this today." By the way, I had heard somewhere that motivation continues to decline when you wake up and it's difficult to recover it by sleeping, so I basically studied in the morning.
How to utilize it
Even if we say that a web component conforms to web standards, it is quite difficult to build the components required for an entire application or site. Furthermore, if the components you create do not have the functionality and versatility to anticipate how they will be expanded in the future, it will lead to a situation where similar components are proliferated in the future.
This teaching material includes:
- Standardizing CSS across web components
- Basic Form element attribute value invocation and propagation
- Easily define the original attribute values you set within the component
It provides some very useful features, such as the above, which will likely help in developing highly advanced and extensible web components in practice.
Currently, we are working with volunteers in the company to create new coding guidelines for our production company. As part of this, we are considering whether we can provide versatile web components as a basic kit.
It is our responsibility to provide output of a certain level of quality in every project, and that quality needs to improve over time to keep up with the times. If we make improving quality our theme, we will end up focusing on how to achieve it easily, and in the end we will end up with a development environment that is highly dependent. If that's the case, I think it's necessary for me to take the initiative in developing low-dependency functions and providing them to the company (or outside?).
Through these long days of learning, I realized that I really love creating development infrastructure and thinking about the ideal development environment. From around the second half of 2024, I have been thinking and working more in the areas of design and experience, but in the back of my mind, I am thinking, "What is the markup to deliver the components created from this design to the browser as intended, and what is the low-dependency environment that can develop accessibility and styling at high speed..." The technological progress around web production is remarkable. It seems that third-party libraries and front-end frameworks are the most noticeable, but more and more can be done with browsers and web standards. If you want to be a really cool developer, let's think together about whether you can implement it with web standards first!
HARADA REI
Thinking...