https://blog.sodawa.com/tags/javascript/Recent content in Javascript on Personal Blog of Maximilian EhlersHugo -- gohugo.ioen-usSun, 10 Nov 2019 16:07:00 +0000https://blog.sodawa.com/blog/vuex-relationships/Sun, 10 Nov 2019 16:07:00 +0000https://blog.sodawa.com/blog/vuex-relationships/Keeping a consistent state in your Frontend application is not the easiest thing we have to deal with these days, but fortunately we have libraries such as Vuex to help us out. Using a redux style store is almost a prerequisite these days and many projects choose to do so, but there are still problems that we encounter. In this post Id like to write about a pretty common one that you might have encountered when using this architecture, and the solution I have come up with to fix it.https://blog.sodawa.com/blog/gridlib/Mon, 14 Oct 2019 16:07:00 +0000https://blog.sodawa.com/blog/gridlib/CSS Grid is a great addition to the Web, but doing the layouting in CSS is cumbersome, so I wanted to build an easy to use tool that helps in doing this. I knew of tools such as this one but went with the approach of creating the grid by drawing the lines on a canvas and then converting them into rectangles. So I built a Canvas to draw lines on, a few Algorithms to turn those lines into points and those points into rectangles.https://blog.sodawa.com/blog/css-modules-the-correct-code-split/Sun, 30 Sep 2018 09:26:27 +0000https://blog.sodawa.com/blog/css-modules-the-correct-code-split/There is a lot of talk going on in the JavaScript Frontend Community about using CSSinJS. One example for this are styled-components. A use of them is explained over at https://www.toptal.com/javascript/styled-components-library . In this Article I want to name an alternative and talk about some benefits. What are CSS modules? According to the css-modules github repo: A CSS Module is a CSS file in which all class names and animation names are scoped locally by default.https://blog.sodawa.com/blog/gotede-quickly-create-a-ghost-theme-development-environment/Tue, 11 Sep 2018 15:30:25 +0000https://blog.sodawa.com/blog/gotede-quickly-create-a-ghost-theme-development-environment/When setting up a new theme for this blog, I ran into the issue of quickly setting up a development environment on my local machine to test out ideas. So I went on to duckduckgo.com and quickly found this blog article. Taking it as an inspiration I wrote a small script to publish on npm to make it easier for future themes and other people as well. You can find it at https://github.https://blog.sodawa.com/blog/intro-to-webpack-4/Thu, 05 Jul 2018 17:15:28 +0000https://blog.sodawa.com/blog/intro-to-webpack-4/Alot of Webpack introdutions focus on how to set up your first webpack configuration. What I want to do in this article is taking a step back and look at what webpack is actually doing before going into the setup and all its complications. The problem In the frontend we have a variety of targets that we want our applications to run in, and they are all browsers. Some old, some new.https://blog.sodawa.com/blog/better-boundaries-in-js/Fri, 29 Jun 2018 17:36:00 +0000https://blog.sodawa.com/blog/better-boundaries-in-js/JavaScript code structuring is quite difficult. A lot of frameworks and projects have come up with ways that work for them. In this post I want to show a new technique that I have used on a side project. In essence you define one Object for each domain, that clearly encapsulates everything that belongs to its domain. The implementation details are not written in that file though, as it would probably get huge.https://blog.sodawa.com/blog/multi-tenant-react-js-starter/Fri, 07 Jul 2017 18:53:00 +0000https://blog.sodawa.com/blog/multi-tenant-react-js-starter/Let me start this article with the requirements that it is going to adress, so you know if you want to continue. You have multiple tenants (websites) the clients should share components between each other to increase development speed of new tenants SSR has to be supported build configs are the same, but can be extended Since these are quite a few things and a lot of good stuff is already open source I am only going to focus on what needs to be added onto the great react-starter-kit.