https://blog.sodawa.com/tags/frontend/Recent content in Frontend on Personal Blog of Maximilian EhlersHugo -- gohugo.ioen-usThu, 02 Apr 2020 22:15:04 +0200https://blog.sodawa.com/blog/rust-in-vue-apps/Thu, 02 Apr 2020 22:15:04 +0200https://blog.sodawa.com/blog/rust-in-vue-apps/Using rust with vue Recently I have been building wirt, a web app to help with easily configuring and managing Wireguard networks. One of the main features is the automatic generation of private and public keys right in the browser. This is needed for privacy and security reasons. After all, who would want to trust anyone with their private keys? Especially some website on the internet that fetches them from an API.https://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/lighthouse-for-performance-and-sustainability/Sat, 20 Apr 2019 12:11:28 +0000https://blog.sodawa.com/blog/lighthouse-for-performance-and-sustainability/Update Since first writing this post I have built a small tool that helps in running a full analysis on a given website. It is available at https://github.com/b-m-f/fafu. ============================================= Large parts of the web are broken. Most of this is not directly noticeable, since our machines have become so extremely fast, but I am convinced that we have a lot of room for improvement. Take for example any old (2010ish) device you have lying around and try to browse the web with it for a day.https://blog.sodawa.com/blog/upgrading-my-blog-theme-with-vanilla/Fri, 07 Dec 2018 18:16:00 +0000https://blog.sodawa.com/blog/upgrading-my-blog-theme-with-vanilla/Recently I have spent more and more time thinking about the usability of my website and the cleanliness of its code. This has brought me to another iteration in its design process. Of course also related to my employment at Canonical I have decided to give our Vanilla Framework a try. The first thing I had to update is my gulp task to include node_modules during the build. // CSS gulp.https://blog.sodawa.com/blog/ghost-theme-part-6-colours/Wed, 21 Nov 2018 11:41:00 +0000https://blog.sodawa.com/blog/ghost-theme-part-6-colours/Time for the final part in this series to finish up all the basics. The colours! The first thing that comes into my mind here is the fact that this is a blog with a lot of content for reading. So my goal is to make it easy on the eyes and provide a few colourful accentuations here and there. Again there are great resources on the internet. One of these, that is already pretty common in the programming scene is the solarized theme.https://blog.sodawa.com/blog/ghost-theme-part-5-typography/Wed, 14 Nov 2018 11:40:00 +0000https://blog.sodawa.com/blog/ghost-theme-part-5-typography/The layouting is pretty much done, bar the margins and paddings of the elements. In order to get those figured out nicely I want to introduce the Typography first. It will surely help to see how much space we will left to play with after both Fonts and their sizes are finished. Since this topic is huge and complicated I like to use a tool to assist with the choice.https://blog.sodawa.com/blog/ghost-theme-part-4/Wed, 07 Nov 2018 11:29:00 +0000https://blog.sodawa.com/blog/ghost-theme-part-4/Please Note that this theme is not in use anymore. See this post for more info. On mobile Layouts < 360px width the Sidebar still overflows vertically. Lets fix it and implement the features decided on in Part 3. First a small screenshot of the problem: As you can see the Sidebar flows into the other content. To fix this lets remove some margins and change the nav to list its items horizontally.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/ghost-theme-part-3-mobile-layout/Sat, 22 Sep 2018 17:59:53 +0000https://blog.sodawa.com/blog/ghost-theme-part-3-mobile-layout/Please Note that this theme is not in use anymore. See this post for more info. Here is the third part of this series where we will dive into creating the proper layout for the posts on the front page and figure out a way to display our layout on mobilephones. Just in case lets bring up the inital sketch again But before we can jump in and take care of the posts we have a small problem.https://blog.sodawa.com/blog/ghost-theme-part-2-styling/Thu, 20 Sep 2018 12:19:25 +0000https://blog.sodawa.com/blog/ghost-theme-part-2-styling/Please Note that this theme is not in use anymore. See this post for more info. In this post I want to start with the styling. the first thing here is to consult the sketches again. Since we split out the sidebar into the default layout, we should create a Grid for this first. The technology I am going to use here is CSS-Grid. The only to be aware of is the browser support.https://blog.sodawa.com/blog/creating-a-new-ghost-theme/Thu, 13 Sep 2018 13:30:49 +0000https://blog.sodawa.com/blog/creating-a-new-ghost-theme/Please Note that this theme is not in use anymore. See this post for more info. I want to make my blog more unique and fitting to my style both in code and in looks. Writing my own theme seems like the right thing to do, given that I am currently looking for a job and having both more free time and wanting to look good to possible employers. So I want to accompany this with a few blog posts on how I am going about this.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/introductory-frontend-perfomance-case-on-amazon-com/Fri, 16 Feb 2018 18:45:00 +0000https://blog.sodawa.com/blog/introductory-frontend-perfomance-case-on-amazon-com/The first question you should ask yourself when thinking about Performance optimizations is the following: Is my service unique enough to focus more on features and only do rudimentary performance optimizations, or do I rely on being the best in the business to attract costumers? If you need to be the best because of generic features you should invest in the performance part, and here it is all about perceived performance.https://blog.sodawa.com/blog/react-frontend-perfomance-monitoring/Fri, 16 Feb 2018 17:14:00 +0000https://blog.sodawa.com/blog/react-frontend-perfomance-monitoring/Frontend performance monitoring from scratch The first question you should ask yourself when thinking about Performance optimizations is the following: Is my service unique enough to focus more on features and only do rudimentary performance optimizations, or do I rely on being the best in the business to attract costumers? If you need to be the best because of generic features you should invest in the performance part, and here it is all about perceived performance.https://blog.sodawa.com/blog/ab-testing-bundles-with-webpack/Tue, 03 Oct 2017 16:43:00 +0000https://blog.sodawa.com/blog/ab-testing-bundles-with-webpack/In this post I want to show you a quick way to get some basic AB testing functionality in place via a webpack loader. All code can be found at my github repo. The basic page Lets say we have the following page running in production: Unfortunately the picture that was here has been lost into the void The App component looks like this import React from 'react'; import Button from '.https://blog.sodawa.com/blog/frontend-microservices/Fri, 19 May 2017 18:52:00 +0000https://blog.sodawa.com/blog/frontend-microservices/Frontend Microservices With this article I want to show you the basic idea behind Microservices on the Frontend, or at least how I understood it. The first thing to do is set up a small skeleton website that I will divide visually into 3 parts that each have some content. For this I am using the new CSS Grid functionality. Here is a Screenshot (and the files if you want to follow along):https://blog.sodawa.com/blog/building-a-desktop-app-with-electron-and-vue-js/Wed, 09 Nov 2016 18:49:00 +0000https://blog.sodawa.com/blog/building-a-desktop-app-with-electron-and-vue-js/Building a Desktop App with Electron and Vue.js Recently my girlfriend asked me if I knew a good app for taking Notes of Sources when researching something for university. I did not know any from the top of my head so I thought I should just build one myself. Since she would like to have a Desktop application I remembered this [Changlog episode] podcast and decided to give Electron a go.