Konstantin Tieber2024-02-10T00:00:00Zhttps://www.xkons.de//Konstantin Tieberhello@xkons.deA guide for workshops where teens discover the fun of programming2024-02-10T00:00:00Zhttps://www.xkons.de/posts/programming-workshops-for-teens/
<p>In this article, I want to share my experience of teaching programming to teenagers, explain some of the methods that I learned along the way, and the tools I use. I'd like to preface this by saying that I don't see hosting these internships or workshops as "teaching", but as a means to inspire. Workshops and school internships are so short, that even when my students are actively using functions, variables and parameters, there is rarely a real sense of understanding of the abstract concepts. And there doesn't have to be one. It's all about having fun with code.</p>
<h2 id="my-path-as-an-educator-for-young-people" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#my-path-as-an-educator-for-young-people">My path as an educator for young people</a></h2>
<p>This section of the article is for those of you who want to understand where my learnings come from. If you're just looking for a quick reference of the methods and tools I apply to host introductory programming workshops, you may <strong>skip to the <a href="https://www.xkons.de/posts/programming-workshops-for-teens/#methods-i-learned-to-apply">next heading</a></strong>.</p>
<p>Ever since I started my professional career in software in 2015 I was eager to share my passion for the craft with those who have yet to choose their career path.</p>
<p>I started with being a course instructor during the Germany-wide <a href="https://www.girls-day.de/ueber-den-girls-day/was-ist-der-girls-day2/english" target="_blank" rel="noopener noreferrer">"Girls'Day"</a> events at my employer, where I still participate today. On this day, girls get to skip school to spend a day at a company of a domain where there are statistically more male professionals than female ones. They need to apply to one of the many offerings in German cities through the official website. Every company I've worked for so far has participated each year.</p>
<p>At the webfactory GmbH, I worked with school interns for the first time. In German schools, students must do a mandatory two-week "school internship" at a company of their interest, given that the company is offering to do it, between 9th and 11th grade.</p>
<p>I wrote about my <a href="https://www.xkons.de/posts/two-week-software-development-internship-guide/">two-week school internship curriculum for software development</a> on this blog already.</p>
<p>In 2020 I hosted my first one hour workshop at the <a href="https://futurecamp.digital/" target="_blank" rel="noopener noreferrer">Futurecamp Digital</a> in Bonn together with a colleague where eight teenagers (age 12-13) got to write their first JavaScript code as they modified a simplified clone of the once so popular "Doodle Jump" platformer game.</p>
<p>This platformer game called "Noodlejump" is what I've been using for my workshops for teenagers aged 12 to 16 ever since: <a href="https://github.com/xkons/lerne-programmieren-mit-noodlejump">Link to Noodlejump on GitHub</a></p>
<p>In March 2021 I built a special "Max und Moritz" version of the game for a talk I was giving for second- and third-graders at the "Max und Moritz" primary school in Bonn. Since Wilhelm Busch's works are in the public domain, I also get to share it online: <a href="https://www.xkons.de/maxundmoritz/" target="_blank">xkons.de/maxundmoritz/</a>. After I gave this talk remotely, the teachers at the school helped the students write their first algorithms using visual programming by completing the <a href="https://hourofcode.com/" target="_blank" rel="noopener noreferrer">hour of code</a> on iPads. This was the only time I've tried to inspire students aged 8-9 so far.</p>
<p>I still keep the letter they sent me on display in my hallway.</p>
<img src="https://www.xkons.de/posts/programming-workshops-for-teens/max-und-moritz-letter.jpg" lazy="" height="300" style="margin: 0 auto; margin-bottom: 42px;" alt="The letter I received from the students of the Max und Moritz primary school after giving a talk on programming there. It reads: Dear Konstantin, thank you for telling us about your job. Now we know what a software developer does. We had fun. Now we can make games and apps ourselves. Kind regards, the meerkats" />
<p>The school student who did an internship with me in 2020 ended up applying for an apprenticeship position as a software developer at LeanIX in 2021. Since we had no one in our company teaching apprentices in software development, I was asked whether I'd be up for it. This is how I became a certified instructor for apprentices in software development in Germany. The topic of apprenticeships in programming deserves an article of its own. I want to focus on the workshop topic in this one. Just know that the regular duration of an apprenticeship here is three years.</p>
<p>After another JavaScript workshop using Noodlejump at the Futurecamp Digital in Bonn in November 2021, I didn't manage to host another one for two years.</p>
<p>Finally, in October 2023, I teamed up with the wonderful team at the <a href="https://www.bonn.de/microsite/medienzentrum/index.php" target="_blank" rel="noopener noreferrer">Medienzentrum Bonn</a> for a half-day workshop with a group of 9 teenagers aged 12.<br />
This workshop was split into two chapters: In the first one, the participants learn basic programming concepts like functions, if statements and loops through the <a href="https://hourofcode.com/" target="_blank" rel="noopener noreferrer">hour of code</a>, and in the second and largest chapter they use JavaScript to customize and improve the Noodlejump game.<br />
The kids had fun. Great success.</p>
<p>Around the same time as I started planning the workshop with the Medienzentrum, I was talking to a friend, who had just switched from the profession of a software researcher to high school teacher, about whether he would like to team up for such a workshop at his school. The school principal supported the idea and in January 2024, the two of us used the same format I designed for the Medienzentrum for a group of 19 students from 8th and 9th grade (age 14).<br />
This was an amazing experience. Even though this was the largest group of participants so far, they were also the most behaved 😅. Kudos to the Otto-Kühne school in Bad Godesberg.</p>
<p>Thanks to LeanIX offering one "social day" per year to support employees doing volunteer work, I practically got paid to do this one.</p>
<p>Seeing the excitement of young people making computers do things through code they created for the first time is priceless.</p>
<h2 id="methods-i-learned-to-apply" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#methods-i-learned-to-apply">Methods I learned to apply</a></h2>
<h3 id="combine-programming-with-topics-your-students-care-about" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#combine-programming-with-topics-your-students-care-about">Combine programming with topics your students care about</a></h3>
<p>One important lesson for me was that for most teenagers, code itself is boring. There are some who are naturally drawn to the art of code itself, but that's the exception. So in order to get them interested in learning how to code, I need to understand what topics they care about and find a coding project that relates to them.</p>
<p>The <a href="https://hourofcode.com/" target="_blank" rel="noopener noreferrer">hour of code</a> does this really well by combining visual programming with huge pop culture themes like Minecraft, Disney's Frozen, or Star Wars.</p>
<p>Another example is the pong clone one of my interns wrote. He played Tennis competitively, so his game ended up using the pong playing style to create a game that resembles tennis a lot more. You can play it here: <a href="https://sidneyk1.github.io/pong/" target="_blank" rel="noopener noreferrer">sidneyk1.github.io/pong</a></p>
<p>You might remember playing a lot more video games as a teenager. So it shouldn't come as a surprise that building games is a great way to get young people interested in programming.</p>
<h3 id="learning-by-doing-without-understanding-but-with-fun" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#learning-by-doing-without-understanding-but-with-fun">Learning by doing without understanding but with fun</a></h3>
<p>"Learning by doing" is a well-established method of acquiring any skill. I learned to never expect teenagers to understand any abstract programming concepts like variables, functions, and control flow in my workshops. I just need to give them enough context to be able to use them. Otherwise, they get bored.</p>
<p>This learning style is often referred to as "discovery learning".</p>
<h3 id="high-performers-can-be-your-teaching-assistants" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#high-performers-can-be-your-teaching-assistants">High performers can be your teaching assistants</a></h3>
<p>When working with a group of teenagers, there will be some who are faster than others. They will quickly demand a new task to work on. What worked well for me was to ask them to help the students sitting next to them. They don't get bored and I got myself some teaching assistants.</p>
<h3 id="start-simple-and-gradually-up-the-complexity" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#start-simple-and-gradually-up-the-complexity">Start simple and gradually up the complexity</a></h3>
<p>This might seem obvious, but I still want to mention it here. The first challenge in my Noodlejump workshop is to "replace the avatar sprite of the player". Students must scan the code for the place where this image might be loaded. The code contains a lot more code comments than enterprise software would to aid in such tasks. Once found, all they need to do is replace the URL to the image which is provided as the second parameter to a function.</p>
<p>The next task involves adding your first new class property to the game to render the score (again, it's not described as such to the students, they don't care about concepts like classes or state). Without prior experience, no one can figure this out on their own. So here the required code is presented to the students, but they still get the time to scan the code for the relevant place to put it and type it out. They should still get a sense of exploration as they progress.</p>
<p>For tasks like "increasing the speed of the game by modifying the gravity and velocity parameters" I just let them copy-paste the code that gets it done. This is another important skill anyone writing software should learn early on.</p>
<h3 id="teenagers-might-take-a-bit-more-time-to-speak-up-when-you-ask-them-a-question" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#teenagers-might-take-a-bit-more-time-to-speak-up-when-you-ask-them-a-question">Teenagers might take a bit more time to speak up when you ask them a question</a></h3>
<p>I learned this from my friend Robin, a teacher, with whom I did the last workshop. Since I'm used to working with professionals every day, I forget to wait a bit longer when asking the students "if they have any questions" or any questions really.<br />
Ten seconds is not enough.</p>
<p>Remember to ask questions where there are many possible answers. Questions that have a small set of "correct" answers result in the students having to be much more confident about theirs before they speak up in a group setting.</p>
<h3 id="start-with-a-game-and-get-moving" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#start-with-a-game-and-get-moving">Start with a game and get moving</a></h3>
<p>I start each workshop with a little game to lighten the mood and move around. The game I use also helps me to remember the names of the students.</p>
<p>Here's how it goes: everyone stands in a circle. I start by pointing at any person. That person needs to tell me their name. I remember the name and the person it belongs to. This person needs to point at the next person and so on. Every person can only be pointed at once. Once everyone has a person they pointed at, the game setup is complete.<br />
Now we do one "fast round" of pointing at your person and saying their name out loud. If this works well (it usually works on the first try), add this additional rule: when pointing and saying the name of your person, you need to swap places with them in the circle. You cannot point at the next person until the swapping is complete.</p>
<p>If you still want to go another round, you could switch from names to word associations.</p>
<h3 id="learn-in-the-browser" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#learn-in-the-browser">Learn in the browser</a></h3>
<p>Especially when hosting workshops at schools it's always tricky to install any software on the computers there. For this reason, all the tools used in my workshops run in the browser.</p>
<h2 id="tools-for-teaching" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#tools-for-teaching">Tools for teaching</a></h2>
<h3 id="hour-of-code" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#hour-of-code">Hour of Code</a></h3>
<p>The <a href="https://hourofcode.com/" target="_blank" rel="noopener noreferrer">hour of code</a> is a learning platform with predefined projects where you get to do visual programming with well-known pop culture topics like Minecraft, Disney's Frozen, or Star Wars.</p>
<p>I believe this is the best introduction to programming for anyone who has no prior experience. I also prefer it over the Scratch platform, since the pop culture themes of the hour of code help to immediately get kids interested.</p>
<p>You end up using functions, function parameters, if statements, and loops without knowing anything about these concepts before.</p>
<img src="https://www.xkons.de/posts/programming-workshops-for-teens/hour-of-code-studio-screenshot.png" style="margin-bottom: 20px;" lazy="" alt="Screenshot of the hour of code website showing the Flappy Bird project" />
<p>Over the years, many different projects of varying quality have been added to the site.<br />
For my workshops, I stick to these four:</p>
<ul>
<li><a href="https://code.org/minecraft">Minecraft</a></li>
<li><a href="https://studio.code.org/s/flappy/reset">Flappy Bird</a></li>
<li><a href="http://studio.code.org/s/frozen/reset">Disney's Frozen</a></li>
<li><a href="https://code.org/api/hour/begin/starwarsblocks">Star Wars</a></li>
</ul>
<p>These projects also include videos in English. They are helpful when the students are working unsupervised. In an in-person workshop setting, I instruct the students to skip them.</p>
<p>The instructions are available in many languages.</p>
<p>For all of these projects, the last chapter ends with a "playground level" where you get to use all the command blocks you've learned until now to just go crazy. This helps to keep students busy a little longer while others are not done yet.</p>
<p>Some of the students will still be way faster than others. I ask those to start another one of the four I linked above.</p>
<h3 id="stack-blitz" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#stack-blitz">StackBlitz</a></h3>
<p>As mentioned above, I optimize for tools that run in the browser. Since I want to convey the "text-editor" style of programming early on, a fully featured IDE in the browser is a must.</p>
<p>Luckily, <a href="https://stackblitz.com/" target="_blank" rel="noopener noreferrer">Stackblitz</a> has solved this problem for me. They run Visual Studio Code and the node environment locally in your browser. It's awesome.</p>
<p>It's super easy to open any open-source GitHub repository in StackBlitz. Simply append the organization and repository name to the following URL like so: <code>https://stackblitz.com/github/<organization>/<repo-name></code>.<br />
Example from my workshop:<br />
<a href="https://stackblitz.com/github/xkons/lerne-programmieren-mit-noodlejump" target="_blank" rel="noopener noreferrer">stackblitz.com/github/xkons/lerne-programmieren-mit-noodlejump</a></p>
<p>Another great feature is that every student works on their own copy of the repo in StackBlitz. It's automatically forked when you start editing, but you can also manually click the "Fork" button in the top left. At the end of the workshop, I make sure that all students write down or take a picture of their forked stackblitz URL so that they can share it with friends and family and keep working on it at home.</p>
<img src="https://www.xkons.de/posts/programming-workshops-for-teens/stackblitz-noodle-jump-screenshot.png" lazy="" alt="Screenshot of the Noodlejump game in the StackBlitz IDE in the chrome browser" />
<p>Common pitfalls when using StackBlitz:</p>
<ul>
<li>Compile trigger: By default, StackBlitz will recompile your app as you type. This works well for static pages built with HTML and CSS. But for a project where we use JavaScript to render a game inside a canvas, it's annoying. The first thing I ask my students to do after they open StackBlitz is to go to the settings and change the compile trigger to "Save".</li>
<li>No file upload: Your file tree consists only of the files that exist in your GitHub repository. You can't upload any. For uploading custom sprites to the game, I use websites like <a href="http://imgur.com/">imgur.com</a> and reference the URL of the uploaded image inside the game.</li>
<li>Browser support: At least for Noodlejump, some of the sprites of the game don't render properly in StackBlitz on Firefox. Students must use it in Chrome.</li>
<li>Google Translate: Make sure students don't activate google translate. This will result in all kinds of JavaScript keywords and variables being translated. The UI elements of StackBlitz are all in english, but the code of Noodlejump is written in German, with the exception of English keywords.</li>
</ul>
<p>If you'd like to learn more about the history of StackBlitz, I recommend listening to <a href="https://www.youtube.com/watch?v=w4l89214zN4" target="_blank" rel="noopener noreferrer">the devtools.fm podcast episode with StackBlitz CEO Eric Simons</a>.</p>
<h3 id="phaser" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#phaser">Phaser</a></h3>
<p>Phaser is a free and open-source 2D game engine to build games that run in the browser. The <a href="https://github.com/phaserjs/phaser" target="_blank" rel="noopener noreferrer">Noodlejump</a> game for my workshop is built using Phaser version 2. Version 3 has been available for quite some time now.</p>
<p>While Noodlejump is quite simple, you can build some much more advanced games with it too. <a href="https://medium.com/rs-school/prince-of-persia-on-phaser-3-e3c810943985" target="_blank" rel="noopener noreferrer">Here's a really cool article</a> by Zakaterina Railian on how she ported the Prince of Persia game that was originally published for the Apple II to Phaser 3.</p>
<p>The Phaser documentation is great, which is really helpful for more in-depth workshops where I teach the important skill of "reading code documentation".</p>
<p>When explaining Phaser to the students I simply tell them that it's this pile of code that many developers have worked on that saves us time by not having to implement things like collision detection or game physics ourselves.</p>
<p><a href="https://github.com/phaserjs/phaser" target="_blank" rel="noopener noreferrer">Link to Phaser on GitHub</a></p>
<h3 id="a-rubber-duck" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#a-rubber-duck">A rubber duck</a></h3>
<p>In the morning on the day of my most recent workshop, I spontaneously packed a rubber duck I got at a software conference some years ago. My idea was to use it as a funny anecdote between the hour of code and noodlejump chapters to explain the concept of "rubber duck debugging". It ended up being a useful tool to make explanations of game physics more fun. I dropped the rubber duck on the ground as I was explaining the concept of collision detection.</p>
<h2 id="call-to-action" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/programming-workshops-for-teens/#call-to-action">Call to action</a></h2>
<p>If the idea of working with children seems something you'd be up for, I can only recommend pursuing some volunteering work to teach programming. It's really rewarding and high in demand.</p>
<p>You also don't need to do this on your own. There are local initiatives in many cities you can join, like the <a href="https://futurecamp.digital/" target="_blank" rel="noopener noreferrer">Futurecamp Digital</a> in Bonn. Recently I learned about the <a href="https://hacker-school.de/" target="_blank" rel="noopener noreferrer">Hacker School</a>, a company organising programming courses given by volunteers as well as working students in German schools.</p>
<p>Reach out if you have any questions or want to work with me to host a workshop at your school 🤓.</p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CA%20guide%20for%20workshops%20where%20teens%20discover%20the%20fun%20of%20programming%E2%80%9D">Reply via email</a></p>
Web Component-based Micro Frontends with Angular: from zero to production2022-06-22T00:00:00Zhttps://www.xkons.de/posts/ng-micro-frontends/
<p>In 1 hour and 42 minutes you can learn how to implement the same web component-based micro frontend architecture that we've been using to ship micro frontends in production for nearly two years at LeanIX:</p>
<p><lite-youtube videoid="ee17YczpCpU" videotitle="Web Component-based Micro Frontends with Angular"></lite-youtube></p>
<p>This is the largest video project on a technical topic that I've produced so far and it was a lot of fun.</p>
<p>Together with <a href="https://traveling-coderman.net/" target="_blank">Fabian Böller</a>, the main author of the implementation for micro frontends using web components with Angular elements at LeanIX, we share:</p>
<ul>
<li>Migrating a sub-route of an Angular application from a lazy loaded route to a micro frontend in a web component.</li>
<li>Deploying and integrating the shell application and the micro frontend on Netlify.</li>
<li>Building a new top level route inside the micro frontend.</li>
<li>And many more things to know about shipping micro frontends with Angular in production.</li>
</ul>
<p>By adopting micro frontends at LeanIX, we enabled a very high level of autonomy to our cross-functional teams, as they can ship their frontend and backend independently from those of other teams. No more blocked release pipelines due to failing tests in the frontend monolith.<br />
This is also known as vertical team ownership. You can read more about it on <a href="https://micro-frontends.org/" target="_blank">micro-frontends.org</a>.</p>
<p>During the recording we made commits for each major step of the micro frontend migration. You can find the source code and the exact commits from the Video on GitHub: <a href="https://github.com/fboeller/microfrontends-with-angular/commits/recording">microfrontends-with-angular project on GitHub</a></p>
<p>Thanks to <a href="https://twitter.com/ManfredSteyer" target="_blank">Manfred Steyer</a> for building and mainting the <a href="https://github.com/manfredsteyer/ngx-build-plus" target="_blank">ngx-build-plus</a> npm package.<br />
It makes it easy to combine the build output of an Angular application into a single JavaScript file, which is essential for including them as web-components.</p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CWeb%20Component-based%20Micro%20Frontends%20with%20Angular:%20from%20zero%20to%20production%E2%80%9D">Reply via email</a></p>
Building accessible web applications: What, Why, Who and How2022-01-31T00:00:00Zhttps://www.xkons.de/posts/web-accessibility-introduction/
<h2 id="preface" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#preface">Preface</a></h2>
<p>I originally published this blog post on the <a target="_blank" rel="noreferrer" href="https://engineering.leanix.net/blog/web-accessibility/">LeanIX Engineering Blog</a>.</p>
<p>I extracted this article from a talk I'm giving to LeanIX employees (<a href="https://www.xkons.de/talks/wearedevs-web-accessibility/">and at conferences</a>; includes recording). Big thanks to <a target="_blank" rel="noreferrer" href="https://twitter.com/polarbirke">@polarbirke</a> for sparking my interest in web accessibility several years ago and also giving me tips on my talk.</p>
<p><strong>Disclaimer:</strong> I'm by no means an accessibility expert. I would rather call myself an accessibility nerd. As I prepared my accessibility talk at LeanIX I kept falling deeper into the accessibility rabbit hole and there are still so many things I don't know.</p>
<p>In this post I'm trying to answer the "What, Why, Who, and How" of web accessibility and provide you with the tools to build more accessible web services.</p>
<h2 id="what-is-web-accessibility" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#what-is-web-accessibility">What is web accessibility?</a></h2>
<p>Short and crisp:</p>
<blockquote>
<p>Web accessibility is about enabling all humans to use web services, regardless of their physical or situational disability.</p>
</blockquote>
<p>or as Tim Berners-Lee said:</p>
<blockquote>
<p>The power of the Web is in its universality.<br />
Access by everyone regardless of disability is an essential aspect.</p>
</blockquote>
<p>Source: <a target="_blank" rel="noreferrer" href="https://www.w3.org/standards/webdesign/accessibility">W3C Accessibility</a></p>
<h2 id="why-should-you-care" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#why-should-you-care">Why should you care?</a></h2>
<p>First and foremost learning about and building accessible web services makes the web more open to everyone. Secondly, because those "everyone" also includes your paying customers.</p>
<h3 id="the-people-aka-our-customers" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#the-people-aka-our-customers">The people (aka our customers)</a></h3>
<p>I used to think of web accessibility mattering only to people with permanent disabilities, but there are plenty of examples where anyone is going to miss accessibility support in web services due to temporary or situational disabilities such as a broken arm as well. Not being able to navigate all features of LeanIX using my left hand and a keyboard is very frustrating in this case.</p>
<p>This graphic from <a target="_blank" rel="noreferrer" href="https://www.microsoft.com/design/inclusive/">Microsoft Inclusive Design</a> presents a small excerpt of people who rely on developers who are mindful of accessibility so that they can use their web services:</p>
<p><img src="https://www.xkons.de/posts/web-accessibility-introduction/microsoft-disability-categories.webp" alt="Showcase by Microsoft Inclusive Design of different kinds of disabilities that put you in a position to rely on web accessibility" /></p>
<p>On the other hand there's ...</p>
<h3 id="the-law" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#the-law">The law</a></h3>
<p>Here's a list of the laws that I've known the longest/found to be the most influential:</p>
<ul>
<li>
<p><a target="_blank" rel="noreferrer" href="https://www.gesetze-im-internet.de/bitv_2_0/BJNR184300011.html">Barrierefreie-Informationstechnik-Verordnung - BITV 2.0</a> public agencies need to conform with this</p>
</li>
<li>
<p><a target="_blank" rel="noreferrer" href="https://www.essentialaccessibility.com/compliance-overview/americans-with-disabilities-act-ada-compliance">Americans with Disabilities Act</a></p>
</li>
<li>
<p><a target="_blank" rel="noreferrer" href="https://eur-lex.europa.eu/legal-content/EN/TXT/?uri=CELEX%3A32019L0882">European Accessibility Act</a></p>
</li>
<li>
<p><a target="_blank" rel="noreferrer" href="http://www.gesetze-im-internet.de/bgg/BJNR146800002.html">BGG - Gesetz zur Gleichstellung von Menschen mit Behinderungen</a></p>
</li>
</ul>
<p>Overview: <a target="_blank" rel="noreferrer" href="https://www.w3.org/WAI/policies/">Web Accessibility Laws and Policies | W3C</a></p>
<p>By the BITV 2.0 law, for example, any web services that are operated by a public agency in Germany need to be accessible by anyone regardless of their disability.</p>
<p>There've also been several successful court cases in the US about websites of US service providers were not accessible to disabled people, which violates the ADA linked above.</p>
<h2 id="who-meet-the-wcag-by-the-w3-c" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#who-meet-the-wcag-by-the-w3-c">Who: Meet the WCAG by the W3C</a></h2>
<p>The World Wide Web Consortium (W3C) is the main international standards organization for the World Wide Web founded in 1994 and led by Tim Berners-Lee.</p>
<p>They publish and maintain the Web Content Accessibility Guidelines as part of the Web Accessibility Initiative. If you want to know about web accessibility, I think they should be your first destination online. You can start with their <a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/" target="_blank" rel="noreferrer">introduction to web accessibility</a> page.</p>
<h3 id="wcag-pour-principles" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#wcag-pour-principles">WCAG POUR principles</a></h3>
<p>The Web Content Accessibility Guidelines (WCAG) are categorized in the following four principles (<a href="https://www.w3.org/WAI/WCAG21/Understanding/intro#understanding-the-four-principles-of-accessibility" target="_blank" rel="noreferrer">source</a>):</p>
<p>Web content must be...</p>
<ol>
<li>
<p><strong>Perceivable</strong> - Information and user interface components must be presentable to users in ways they can perceive.</p>
<p>This means that users must be able to perceive the information being presented, it can't be invisible to all of their senses.</p>
</li>
<li>
<p><strong>Operable</strong> - User interface components and navigation must be operable.</p>
<p>This means that users must be able to operate the interface. The interface cannot require interaction that a user cannot perform.</p>
</li>
<li>
<p><strong>Understandable</strong> - Information and the operation of the user interface must be understandable.</p>
<p>This means that users must be able to understand the information as well as the operation of the user interface. The content or operation cannot be beyond their understanding.</p>
</li>
<li>
<p><strong>Robust</strong> - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.</p>
<p>This means that users must be able to access the content as technologies advance. As technologies and user agents evolve, the content should remain accessible.</p>
</li>
</ol>
<h3 id="disability-perspectives" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#disability-perspectives">Disability perspectives</a></h3>
<p>Disability emerges where there is a mismatch between individual capacities and environmental demands<a href="https://www.xkons.de/posts/web-accessibility-introduction/#disability-paper-footnote" id="disability-paper-ref" role="doc-noteref" aria-label="Jump to footnote with source"></a>.</p>
<p>The non-profit organization WebAIM distinguishes the following four categories for permanent disability:</p>
<ul>
<li>
<p>Visual</p>
<p>Blindness, low vision, color-blindness</p>
</li>
<li>
<p>Auditory</p>
<p>Deafness and hard-of-hearing</p>
</li>
<li>
<p>Motor</p>
<p>Inability to use a mouse, slow response time, limited fine motor control</p>
</li>
<li>
<p>Cognitive</p>
<p>Learning disabilities, distractibility, inability to remember or focus on large amounts of information</p>
</li>
</ul>
<p>Source: <a target="_blank" rel="noreferrer" href="https://webaim.org/intro/">WebAIM: Introduction to Web Accessibility</a></p>
<p>However as I mentioned before there are many situations where anyone may become reliant on accessible web services, such as a broken arm or wrist or a visually impaired person who just misplaced their glasses.</p>
<p>This video by the W3C is a must-see for me as a non disabled person: <a target="_blank" rel="noreferrer" href="https://www.youtube.com/watch?v=3f31oufqFSM">Web Accessibility Perspectives - Compilation of 10 Topics/Videos</a></p>
<p>Now that you've read about the Web Content Accessibility guidelines and different kinds of disabilities, let's jump into how to use them to build more accessible web services.</p>
<h2 id="how" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#how">How?</a></h2>
<p>If you're just starting with paying attention to accessibility in the user interfaces of your services/products, I would suggest starting with one simple rule to adhere to:</p>
<blockquote>
<p>If an action can be done with a mouse, it needs to be doable with a keyboard as well.</p>
</blockquote>
<p>A more comprehensive approach that conforms with most laws would be to strive for WCAG conformance level AA.</p>
<p>How do you know what level you're at? <strong>Checklists and Audits.</strong></p>
<h3 id="checklists" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#checklists">Checklists</a></h3>
<p>Here's my personal "layman web accessibility checklist":</p>
<ul>
<li>
<p>Every form input needs to have a label that can be associated with this input. Placeholders are no replacement for labels!</p>
</li>
<li>
<p>Text should have a minimum contrast ratio of 4.5:1 with its background, strive for at least 7:1. The highest achievable contrast is 21:1 e.g. black on white.</p>
</li>
<li>
<p>Provide alternative text for images that convey information.</p>
</li>
<li>
<p>Order your heading tags consistently (e.g. don't follow a h2 with an h4 without an h3 in between).</p>
</li>
<li>
<p>For keyboard users, the element that currently holds the focus should always be identifiable as such.</p>
</li>
<li>
<p>Buttons that visibly only contain icons need to have an alternative text.</p>
</li>
</ul>
<p>And here you can find actual professional accessibility checklists:</p>
<ul>
<li>
<p><a href="https://www.a11yproject.com/checklist/" target="_blank" rel="noreferrer">A11Y Project checklist</a>: a well designed and easy to consume checklist</p>
</li>
<li>
<p><a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank" rel="noreferrer">WCAG Quickref</a>: a complete list of all rules that allows to filter for different compliance levels relatively easy</p>
</li>
</ul>
<h3 id="audits" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#audits">Audits</a></h3>
<p>One important tool to bring attention to accessibility flaws in your services is to pay experts to audit them. I won't recommend any in this post, but there's several highly professional accessibility auditors who are passionate about what they do.</p>
<h3 id="use-semantic-elements-aka-a-div-is-not-a-button" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#use-semantic-elements-aka-a-div-is-not-a-button">Use semantic elements aka "A div is not a button"</a></h3>
<p>Using semantic elements is a way to get accessibility out of the box at a low cost.</p>
<p>A few examples:</p>
<p>If something is a list, make it a <ul> or <ol>.</p>
<p>If something is a button, make it a <button> (no <a>, <div>, <span> or whatever tag).</p>
<p>If something is a link, make it an <a> tag (no <code>window.href=some-url</code>).</p>
<p>The following HTML code compares the minimal required code to get a <code>div</code> element to implement the ARIA <code>button</code> role in an Angular component template next to the markup of the native <code>button</code> element.</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- div button using angular template features ---></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">tabindex</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>0<span class="token punctuation">"</span></span><br /> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onAction()<span class="token punctuation">"</span></span><br /> <span class="token attr-name">(keydown.enter)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onAction()<span class="token punctuation">"</span></span><br /> <span class="token attr-name">(keydown.space)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onAction()<span class="token punctuation">"</span></span><br /> <span class="token attr-name">[style.cursor]</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">'</span>pointer<span class="token punctuation">'</span><span class="token punctuation">"</span></span><br /> <span class="token attr-name">role</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>button<span class="token punctuation">"</span></span><br /><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span><br /><br /><span class="token comment"><!-- versus ---></span><br /><br /><span class="token comment"><!-- native button ---></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">(click)</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>onAction()<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Click me<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
<p>Cool resources on this:</p>
<ul>
<li><a href="https://www.buttoncheatsheet.com/" target="_blank" rel="noreferrer">thebuttoncheatsheet.com</a> by <a href="https://twitter.com/mmatuzo" target="_blank" rel="noreferrer">@mmatuzo</a></li>
<li><a href="https://www.scottohara.me/blog/2022/01/20/divisive.html" target="_blank" rel="noreferrer">Div divisiveness</a> by <a href="https://twitter.com/scottohara" target="_blank" rel="noreferrer">@scottohara</a></li>
</ul>
<h3 id="aria-what" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#aria-what">ARIA what?</a></h3>
<p>Aria is especially - but not exclusively - important for supporting screen readers.</p>
<p>It stands for "Accessible Rich Internet Applications suite of web standards". The Mozilla Developer Network lists some <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA" target="_blank" rel="noreferrer">great resources on learning more about ARIA</a>.</p>
<p>While you can put <code>tabindex="0"</code> and event listeners for <code>click</code> and <code>enter</code> events on a <span> element, this will not enable screen readers to treat this element like a button. To enable this you need to assign your <span> element the ARIA attribute called <code>role</code> with the value <code>button</code>.</p>
<p>Three things to keep in mind:</p>
<ol>
<li>
<p>Semantic elements > ARIA attributes (<code>button</code> > <code>role="button"</code>).</p>
</li>
<li>
<p>No ARIA is better than bad ARIA.</p>
</li>
<li>
<p>A role is a promise. If you give something an aria role, you should properly implement all input methods that are specified for it.</p>
</li>
</ol>
<h3 id="on-screen-readers" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#on-screen-readers">On screen readers</a></h3>
<p>A screen reader is a form of assistive technology that renders text and image content as speech or braille output. Since I'm not visually impaired, I've only ever used them for testing. I test with Apple VoiceOver since my developer machine uses Mac OS. You can enable it any time by pressing <code>cmd + f5</code>. It's worth it to look into the <a href="https://webaim.org/articles/voiceover/" target="_blank" rel="noreferrer">controls of screen readers</a> before enabling them.</p>
<p>I highly recommend watching this screen reader demonstration video that was recently uploaded on the TetraLogical YouTube channel: <a href="https://www.youtube.com/watch?v=KuVKQQMtRRI&list=PLTqm2yVMMUKVxQ6eYth4_vvbM3IcrSPlk&index=1" target="_blank" rel="noreferrer">Browsing with a desktop screen reader</a>.</p>
<p>One of the directors at TetraLogical is Léonie Watson and she gave a very good talk at the Front-Trends conference in 2015: <a href="https://www.xkons.de/posts/web-accessibility-introduction/youtube.com/watch?v=qdB8SRhqvFc" id="watson-talk" target="_blank" rel="noreferrer">ARIA, Accessibility APIs and coding like you give a damn!</a></p>
<h4 id="improve-how-screen-readers-read-your-content" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#improve-how-screen-readers-read-your-content">Improve how screen readers read your content</a></h4>
<p>Describe interactable elements that do not contain any text that explains what it's doing using the <code>aria-label</code> attribute. Also from my research, I'm fairly certain that for targeting screen readers, <code>aria-label</code> is more widely supported than <code>title</code> attributes.</p>
<p>The following HTML code shows examples for using the <code>aria-label</code> and <code>aria-hidden</code> attributes including the text that Apple VoiceOver announces when selecting them.</p>
<pre class="language-html"><code class="language-html"><span class="token comment"><!-- Reads "button times" --></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token entity named-entity" title="×">&times;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br /><br /><span class="token comment"><!-- Reads "button close" --></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name">aria-label</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>close<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token entity named-entity" title="×">&times;</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br /><br /><span class="token comment"><!-- Reads "button identical to menu" --></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span>≡ menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span><br /><br /><span class="token comment"><!-- Reads "button menu" --></span><br /><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">aria-hidden</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>true<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>≡<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> menu<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span></code></pre>
<p>To learn more about the <code>aria-label</code> attribute I recommend reading <a target="_blank" rel="noreferrer" href="https://dev.opera.com/articles/ux-accessibility-aria-label/">this article on the Opera engineering blog</a>.</p>
<h3 id="testing-tools" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#testing-tools">Testing tools</a></h3>
<p>When building accessible web applications, you need to be able to test that your efforts are achieving the desired results.</p>
<p>These are the tools I use for this:</p>
<ul>
<li>
<p>computer keyboard</p>
</li>
<li>
<p>browser plugins</p>
<ul>
<li>
<p><a target="_blank" rel="noreferrer" href="https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd">axe DevTools</a> (Free version is already very good, Pro license costs 40$ a month per user)</p>
</li>
<li>
<p><a target="_blank" rel="noreferrer" href="https://accessibilityinsights.io/docs/en/web/overview/">Accessibility Insights for Web</a> by Microsoft</p>
</li>
</ul>
</li>
<li>
<p>Apple VoiceOver</p>
</li>
</ul>
<p>Here's a comprehensive list of testing software by the W3C: <a target="_blank" rel="noreferrer" href="https://www.w3.org/WAI/ER/tools/">Web Accessibility Evaluation Tools List</a></p>
<p>I also recommend taking the time to watch this <a target="_blank" rel="noreferrer" title="Quick accessibility tests" href="https://www.youtube.com/playlist?list=PLTqm2yVMMUKWTr9XWdW5hJ9tk512Ow0SE">great TetraLogical YouTube playlist</a> where they demonstrate common accessibility test cases.</p>
<h2 id="summary" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#summary">Summary</a></h2>
<p>The accessibility rabbit hole goes deep and there's so much information on the web about it that takes a lot of time to consume. I hope that with this article I reduced the "fear" of this rabbit hole and maybe even sparked some interest.</p>
<p>And while I know that this might be much to ask next to keeping up with the latest JavaScript frameworks, if there are just three things you'll take away from this article, let it be these:</p>
<ul>
<li>
<p>web accessibility is cool and helps to make the web more open to anyone</p>
</li>
<li>
<p>user interfaces should be designed and built in a way where any user interaction that can be done with a mouse can also be done with a keyboard</p>
</li>
<li>
<p>using semantic HTML elements result in less code and better accessibility out of the box</p>
</li>
</ul>
<p>To conclude I'd like to quote a line from Léonie Watson's talk I <a href="https://www.xkons.de/posts/web-accessibility-introduction/#watson-talk">linked above</a>:</p>
<blockquote>
<p>Perfect is the enemy of good.</p>
</blockquote>
<p>Don't strive for perfection when building accessible web services. Every little piece can make a difference to your users.</p>
<h2 id="resources" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/web-accessibility-introduction/#resources">Resources</a></h2>
<p><a href="https://www.sciencedirect.com/science/article/pii/S1875067215000863#sect0030" id="disability-paper-footnote" target="_blank" rel="noreferrer">(Dis)ability and the experience of accessibility in the urban environment</a> <a role="doc-backlink" href="https://www.xkons.de/posts/web-accessibility-introduction/#disability-paper-ref" aria-label="Jump to text">↩</a></p>
<p>I've done a lot of reading to compose this article. In order to not take over your whole viewport with a wall of links, I'm including them in a disclosure widget.</p>
<details>
<summary>Click to show more links to resources regarding accessibility</summary>
<ul>
<li>
<p><a href="https://developers.google.com/web/fundamentals/accessibility">Accessibility Web Fundamentals Google Developers</a></p>
</li>
<li>
<p><a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/">Introduction to Web Accessibility | Web Accessibility Initiative (WAI) | W3C</a></p>
</li>
<li>
<p><a href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines (WCAG) 2.1</a></p>
</li>
<li>
<p><a href="https://www.microsoft.com/design/inclusive/">Microsoft Inclusive Design</a></p>
</li>
<li>
<p><a href="https://webaim.org/">WebAIM</a></p>
</li>
<li>
<p><a href="https://www.a11yproject.com/">The A11Y Project</a></p>
</li>
<li>
<p><a href="https://gist.github.com/ericwbailey/573045f05b7492f62b32254cc7b07f4d">Accessibility at Scale resources - A talk by Eric Bailey</a></p>
</li>
<li>
<p><a href="https://inclusivedesignprinciples.org/">Inclusive Design Principles</a></p>
</li>
<li>
<p><a href="https://www.uxpin.com/studio/blog/web-accessibility-guide/">Web Accessibility Guide for 2020 | UXPin</a></p>
</li>
<li>
<p><a href="https://www.w3.org/WAI/tips/designing/">Designing for Web Accessibility – Tips for Getting Started | Web Accessibility Initiative (WAI) | W3C</a></p>
</li>
<li>
<p><a href="https://frontend.turing.edu/lessons/module-2/intro-to-accessibility.html">Intro to Accessibility - Front-End Engineering Curriculum - Turing School of Software and Design</a></p>
</li>
<li>
<p><a href="https://frontend.turing.edu/lessons/module-3/accessibility-deep-dive.html">Accessibility Deep Dive - Front-End Engineering Curriculum - Turing School of Software and Design</a></p>
</li>
</ul>
<p class="mt-300 mb-300"><strong>For testing Apple VoiceOver support:</strong></p>
<ul>
<li>
<p><a href="https://webaim.org/articles/voiceover/">WebAIM: Using VoiceOver to Evaluate Web Accessibility</a></p>
</li>
<li>
<p><a href="https://bbc.github.io/accessibility-news-and-you/accessibility-and-testing-with-voiceover-os.html">Accessibility and Testing with VoiceOver OS (Mac)</a></p>
</li>
</ul>
<p class="mt-300 mb-300"><strong>Good resources on ARIA</strong></p>
<ul>
<li>
<p><a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA Authoring Practices 1.2</a> this page includes guides on how to properly implement a long list of UI patterns according to ARIA.</p>
</li>
<li>
<p><a href="https://webaim.org/techniques/aria/">WebAIM: Introduction to ARIA - Accessible Rich Internet Applications</a></p>
</li>
<li>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA">ARIA - Accessibility | MDN</a></p>
</li>
</ul>
</details><p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CBuilding%20accessible%20web%20applications:%20What,%20Why,%20Who%20and%20How%E2%80%9D">Reply via email</a></p>
One way to speed up CI checks in your nx monorepo2021-12-06T00:00:00Zhttps://www.xkons.de/posts/smarter-nx-affected-checks/
<p>I originally published this blog post with my colleague Patrick Surrey on the <a target="_blank" rel="noreferrer" href="https://engineering.leanix.net/blog/smarter-nx-affected-checks/">LeanIX Engineering Blog</a>.</p>
<p>Each frontend in our nx monorepo has its own workflow for running CI checks and deployment. The default <code>nx affected</code> behaviour does not enable us to only get the list of projects that are affected and used by a specific application.</p>
<p>So we wrote a GitHub Action that does just this: <a href="https://github.com/leanix/nx-affected-depenencies-action">leanix/nx-affected-dependencies-action</a>.</p>
<p><a href="https://github.com/leanix/nx-affected-depenencies-action">Go to the action repository</a></p>
<p><a href="https://github.com/marketplace/actions/nx-affected-depencencies-action">Go to the action on the GitHub Marketplace</a></p>
<p>Our main motivation for this action was to speed up the releases of our frontend applications and to save time and money on continuous integration checks.</p>
<p><strong>The solution:</strong> By combining the <a href="https://nx.dev/l/a/cli/affected">nx affected</a> and <a href="https://nx.dev/l/a/cli/dep-graph">nx dep-graph --focus=theNameOfTheAppToDeploy</a> commands we can create an intersection of these two lists to only get the affected projects that are actually a dependency of <code>theNameOfTheAppToDeploy</code>.</p>
<p><img src="https://www.xkons.de/posts/smarter-nx-affected-checks/nx-affected-comparison.png" alt="Different lists of projects produced by three individual nx commands" /></p>
<h2 id="how-to-use-it" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/smarter-nx-affected-checks/#how-to-use-it">How to use it</a></h2>
<p>This is just one way to use the <code>leanix/nx-affected-dependencies-action</code> in your workflows. It resembles the use case of merging a feature branch into your <code>main</code> branch and comparing the changes of the latest commit on <code>main</code> (<code class="language-text" style="white-space: nowrap;">${{ github.sha }}~1</code>) with the merge commit of your feature branch <code class="language-text" style="white-space: nowrap;">(${{ github.sha }}</code>). <br />For a more detailed overview, including a <code>gitflow</code> parameter, please see the project <a href="https://github.com/leanix/nx-affected-depenencies-action/blob/main/README.md">README</a>.</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Evaluate affected<br /> <span class="token key atrule">uses</span><span class="token punctuation">:</span> leanix/nx<span class="token punctuation">-</span>affected<span class="token punctuation">-</span>dependencies<span class="token punctuation">-</span>action@v0.2.1<br /> <span class="token key atrule">id</span><span class="token punctuation">:</span> affected<br /> <span class="token key atrule">with</span><span class="token punctuation">:</span><br /> <span class="token key atrule">project</span><span class="token punctuation">:</span> pathfinder<br /> <span class="token key atrule">base</span><span class="token punctuation">:</span> $~1<br /> <span class="token key atrule">head</span><span class="token punctuation">:</span> $<br /><br /><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Run Unit Tests (Affected)<br /> <span class="token key atrule">if</span><span class="token punctuation">:</span> steps.affected.outputs.isAffected == 'true'<br /> <span class="token key atrule">env</span><span class="token punctuation">:</span><br /> <span class="token key atrule">affectedDeps</span><span class="token punctuation">:</span> $<br /> <span class="token key atrule">run</span><span class="token punctuation">:</span> npx nx run<span class="token punctuation">-</span>many <span class="token punctuation">-</span><span class="token punctuation">-</span>target=test <span class="token punctuation">-</span><span class="token punctuation">-</span>projects=$affectedDeps <span class="token punctuation">-</span><span class="token punctuation">-</span>runner ci</code></pre>
<p>The <a href="https://nx.dev/l/a/cli/run-many">nx run-many</a> command will run the given <code>target</code> task on the provided <code>projects</code>, which in this case come from the <code>affectedDeps</code> output of the <code>leanix/nx-affected-dependencies-action</code>.</p>
<h2 id="background" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/smarter-nx-affected-checks/#background">Background</a></h2>
<p>As of the time of writing we are shipping 13 individual angular applications in our nx monorepo. Our CI tool of choice is GitHub Actions.<br />
All our microfrontends will be deployed after a feature branch is merged and CI checks are green.</p>
<p>The most time consuming application in our monorepo is our "shell application". Among "normal shell application things" like the navigation bar it has the largest chunk of code of any application, since it was there long before we started adopting microfrontends.</p>
<h3 id="how-we-used-to-do-it" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/smarter-nx-affected-checks/#how-we-used-to-do-it">How we used to do it</a></h3>
<p>This is a simplified version of the <code>Test</code> step in the workflow of a microfrontend when a feature branch is merged:</p>
<pre class="language-yaml"><code class="language-yaml"><span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Test<br /> <span class="token key atrule">run</span><span class="token punctuation">:</span> npx nx affected<span class="token punctuation">:</span>test <span class="token punctuation">-</span><span class="token punctuation">-</span>base=$~1 <span class="token punctuation">-</span><span class="token punctuation">-</span>head=$ <span class="token punctuation">-</span><span class="token punctuation">-</span>runner ci</code></pre>
<p>As you can see we used the <a href="https://nx.dev/l/a/cli/affected">nx affected</a> command to lint and test the projects affected by the merged changes before deploying the new version of a frontend. However this resulted in each frontend application workflow unnecessarily linting and testing projects that are not used by them, but other applications.</p>
<p>Take a change in our shared component library for example: almost all of our applications will be affected by this. Now our small <code>todos</code> microfrontend will redundantly lint and test the large "shell application" and code of other microfrontends, as these are also inside the list of projects returned by <code>nx affected</code>.</p>
<p>Our nx cache does save us a significant amount of time spent on GitHub Actions, but the <code>nx affected</code> situation definitely wasn't desirable.</p>
<h2 id="results" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/smarter-nx-affected-checks/#results">Results</a></h2>
<p>Here is a comparison of the amount of projects to check and their duration for our microfrontends when our shared component library was changed.</p>
<p><strong>Todos microfrontend:</strong><br />
<code>nx affected</code>: 62 projects in ~12 minutes<br />
<code>nx-affected-dependencies-action</code>: 13 projects in ~3 minutes</p>
<p><strong>Indicators microfrontend:</strong><br />
<code>nx affected</code>: 62 projects in ~12 minutes<br />
<code>nx-affected-dependencies-action</code>: 6 projects in ~1 minute</p>
<p>This means the <code>Todos</code> release is now completed <strong>9 minutes faster</strong> and <code>Indicators</code> <strong>11 minutes faster</strong> than before.</p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9COne%20way%20to%20speed%20up%20CI%20checks%20in%20your%20nx%20monorepo%E2%80%9D">Reply via email</a></p>
How to structure a two week internship for software development2020-01-17T00:00:00Zhttps://www.xkons.de/posts/two-week-software-development-internship-guide/
<p>I came up with this plan of a two week software development internship for 16 year old school student Sidney, who I volunteered to teach the ways of a software developer. Since a lot of coworkers and parents asked me how I structured it, I summarize it here.</p>
<p>You can find the project that Sidney built in these two weeks here:</p>
<ul>
<li>Source code: <a href="https://github.com/SidneyK1/pong">https://github.com/SidneyK1/pong</a></li>
<li>Game: <a href="https://sidneyk1.github.io/pong/">https://sidneyk1.github.io/pong/</a></li>
</ul>
<p>It's his own take on the game Pong, but with a stronger tennis theme, since he plays tennis competitively.<br />
You can control the paddles via keyboard or touch input and choose between singleplayer mode against an "AI" or multiplayer against your friends. There's even a special item which increases the ball speed for a short amount of time.</p>
<p>I'm quite proud of what he achieved in this short amount of time without having any prior programming experience.</p>
<h2 id="day-1-to-day-4" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/two-week-software-development-internship-guide/#day-1-to-day-4">Day 1 to Day 4</a></h2>
<p>Get to know the intern (age, hobbies, potential job interests).</p>
<p>Explain how you ended up working as a software developer and remember to answer questions at any time.</p>
<p>Explain why coding is "cool".</p>
<blockquote>
<p>Let's say an alien came, and you're like, "Okay, what's the importance of code?".<br />
I'd say, "Well, you know, we live on this sort of physical earth, and about 50 years ago, a small group of people started building another planet. But it wasn't physical, a virtual planet.<br />
Look around the street. You see all the people walking down the street with their head bent down and staring at their phone? They're actually in that other world. That's what code is. It's the building blocks of that other world.</p>
</blockquote>
<p>— Quote from the episode "Coding" on the "Explained" series on Netflix</p>
<blockquote>
<p>Today, coders shape literally billions of people's lives.<br />
How they work, shop, eat, date, and chill.<br />
What are you doing right now? You're watching me in a Netflix web browser.<br />
So Netflix itself is code, and it's being run in a web browser that is code,<br />
which is being run on a computer that was designed using code.<br />
It's turtles all the way down, right? Great code is like being the architect of a museum that millions of people think of and go and walk around and use every day.<br />
I think there's nothing like writing code, because it feels like pure creation.<br />
You have an idea for how something should work, and then you try to sit down in front of a computer and make that a reality.</p>
</blockquote>
<p>— Another one, same episode</p>
<p>Use your own words too of course ;-)</p>
<p>Get to know the basic concepts of programming by letting the intern do the hour of code <a href="https://hourofcode.com/">https://hourofcode.com/</a></p>
<ul>
<li>Some of them are available in english and german and the most popular ones even feature videos with programmers explaining each challenge.</li>
<li>Direct link to the different hour of code projects. Finishing one is enough, they are very similar. <a href="https://hourofcode.com/de/learn">https://hourofcode.com/de/learn</a></li>
</ul>
<p>Figure out together if learning programming by developing games or by developing websites is preferred. This mostly depends if the personal project should be a website or a game and should affect which codeacademy courses the intern should do.</p>
<p>If during the internship you happen to have some meetings that the intern can join, take them along.</p>
<ul>
<li>Make sure to tell them about the "concept of two legs": Once they feel that they really can't follow the meeting anymore, they can leave silently any time to continue learning by themselves.</li>
</ul>
<p>Create an account at <a href="https://codeacademy.com/">https://codeacademy.com</a>, no trial needed, and let the intern do the following courses (order matters!):</p>
<ol>
<li><a href="https://www.codecademy.com/learn/welcome-to-codecademy">https://www.codecademy.com/learn/welcome-to-codecademy</a></li>
<li><a href="https://www.codecademy.com/learn/learn-html">https://www.codecademy.com/learn/learn-html</a> (not all parts available in free account, optional if the main project will be a game built with Phaser)</li>
<li><a href="https://www.codecademy.com/learn/learn-how-to-code">https://www.codecademy.com/learn/learn-how-to-code</a></li>
<li><a href="https://www.codecademy.com/learn/learn-phaser">https://www.codecademy.com/learn/learn-phaser</a> (It's not necessary to finish this one completely, as it's quite long. Consider stopping around <a href="https://www.codecademy.com/courses/learn-phaser/lessons/learn-phaser-animations-and-tweens/exercises/sprite-sheets?action=resume_content_item">here</a>)</li>
</ol>
<p>Finally decide on what the final project should be, start making notes, draw some UI stuff, write texts...</p>
<p>This project should be related to some passion of the intern, so that they actually care about it. If their hobbies include photography for example, it might be fun to build a personal portfolio website, like <a href="https://github.com/DerMeier/portfolio-website">Lukas Meier did</a> during his internship.</p>
<h2 id="day-5-10-building-the-project" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/two-week-software-development-internship-guide/#day-5-10-building-the-project">Day 5 - 10 Building the project</a></h2>
<p>Setup their computer for building some software, while trying to explain most of the stuff that's happening in a simple manner.</p>
<ul>
<li>Install VSCode, node and git</li>
<li>Create a directory for their project, including an <code>index.html</code>, <code>index.js</code> and <code>assets</code> directory.</li>
<li>Explain git <a href="https://rogerdudler.github.io/git-guide/index.html">https://rogerdudler.github.io/git-guide/index.html</a></li>
<li>Initialize a git repository in their project directory and make the initial commit.</li>
<li>Let the intern create their own GitHub Account.
<ul>
<li>Create a new repository with an appropriate name for the project.</li>
<li>Add the https repository url as remote origin in the local repository.</li>
<li>Push your local master branch.</li>
<li>Enable GitHub Pages hosting in the repository settings.</li>
</ul>
</li>
<li>Create a <code>.gitignore</code> file with the following contents:<pre><code>dist
node_modules
package-lock.json
</code></pre>
</li>
<li>Create a <code>package.json</code> file with the following contents (Please update the name and homepage value):<pre class="language-json"><code class="language-json"><span class="token punctuation">{</span><br /> <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"<INSERT PROJECT NAME>"</span><span class="token punctuation">,</span><br /> <span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"0.0.1"</span><span class="token punctuation">,</span><br /> <span class="token property">"homepage"</span><span class="token operator">:</span> <span class="token string">"http://<GITHUB-USERNAME>.github.io/<REPOSITORY-NAME>"</span><span class="token punctuation">,</span><br /> <span class="token property">"scripts"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"build"</span><span class="token operator">:</span> <span class="token string">"webpack --mode production"</span><span class="token punctuation">,</span><br /> <span class="token property">"start"</span><span class="token operator">:</span> <span class="token string">"webpack --mode development && webpack-dev-server"</span><span class="token punctuation">,</span><br /> <span class="token property">"clean"</span><span class="token operator">:</span> <span class="token string">"rm -rf dist node_modules package-lock.json"</span><span class="token punctuation">,</span><br /> <span class="token property">"predeploy"</span><span class="token operator">:</span> <span class="token string">"npm run build"</span><span class="token punctuation">,</span><br /> <span class="token property">"deploy"</span><span class="token operator">:</span> <span class="token string">"gh-pages -d dist"</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token property">"copy-webpack-plugin"</span><span class="token operator">:</span> <span class="token string">"^5.1.1"</span><span class="token punctuation">,</span><br /> <span class="token property">"gh-pages"</span><span class="token operator">:</span> <span class="token string">"^2.2.0"</span><span class="token punctuation">,</span><br /> <span class="token property">"html-webpack-plugin"</span><span class="token operator">:</span> <span class="token string">"^3.2.0"</span><span class="token punctuation">,</span><br /> <span class="token property">"webpack"</span><span class="token operator">:</span> <span class="token string">"^4.40.2"</span><span class="token punctuation">,</span><br /> <span class="token property">"webpack-cli"</span><span class="token operator">:</span> <span class="token string">"^3.3.9"</span><span class="token punctuation">,</span><br /> <span class="token property">"webpack-dev-server"</span><span class="token operator">:</span> <span class="token string">"^3.8.1"</span><br /> <span class="token punctuation">}</span><br /><span class="token punctuation">}</span></code></pre>
</li>
<li>Create a <code>webpack.config.js</code> file with the following contents:<pre class="language-javascript"><code class="language-javascript"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">const</span> HtmlWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'html-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><span class="token keyword">const</span> CopyWebpackPlugin <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'copy-webpack-plugin'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><br /><br />module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./index.js'</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span><br /> <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'index.js'</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><br /> <span class="token punctuation">}</span><span class="token punctuation">,</span><br /> <span class="token literal-property property">plugins</span><span class="token operator">:</span> <span class="token punctuation">[</span><br /> <span class="token keyword">new</span> <span class="token class-name">HtmlWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">{</span><br /> <span class="token literal-property property">template</span><span class="token operator">:</span> <span class="token string">'index.html'</span><br /> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">,</span><br /> <span class="token keyword">new</span> <span class="token class-name">CopyWebpackPlugin</span><span class="token punctuation">(</span><span class="token punctuation">[</span><br /> <span class="token punctuation">{</span><span class="token literal-property property">from</span><span class="token operator">:</span><span class="token string">'assets'</span><span class="token punctuation">,</span> <span class="token literal-property property">to</span><span class="token operator">:</span><span class="token string">'assets'</span><span class="token punctuation">}</span> <br /> <span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <br /> <span class="token punctuation">]</span><br /><span class="token punctuation">}</span><span class="token punctuation">;</span></code></pre>
</li>
<li>Run <code>npm install</code></li>
<li>Run <code>npm run deploy</code></li>
<li>Change the branch in the GitHub Pages settings to the newly created <code>gh-pages</code> one.</li>
<li>Run <code>npm run start</code> to start the local development server</li>
</ul>
<p>Look for online tutorials (blogs or YouTube) that might fit the project requirements of your intern. This way they can start building their project independently and come to you for questions.</p>
<p>If for example your intern wants to create their own Pong game, let them first follow a YouTube tutorial like <a href="https://www.youtube.com/watch?v=4dHlbXigtss&list=PL9iYZZWgVwse7tvjCHtlM_MZmUb31lSOl">this</a>. Once they're done, help them restructure the code as needed, so that they can start implementing their own ideas.</p>
<p>Teach them some simple principles and practices for writing good code like DRY (Don't repeat yourself). Keep the Single Responsibility Principle on function level, you don't necessarily want to get too deep into OOP in the scope of two weeks, this will already improve the code quality a lot.</p>
<p>Here's another cool Phaser project that I built with a coworker to teach kids/teenagers programming:<br />
<a href="https://github.com/BastiTee/noodlejump-stackblitz/">https://github.com/BastiTee/noodlejump-stackblitz/</a></p>
<p>Have fun :-)</p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CHow%20to%20structure%20a%20two%20week%20internship%20for%20software%20development%E2%80%9D">Reply via email</a></p>
My first month as Software Engineer at LeanIX2019-02-12T00:00:00Zhttps://www.xkons.de/posts/first-month-at-leanix/
<p>Finding the next destination on my path as software developer was not an easy task, as there are many interesting projects and companies on the hunt for job candidates. After attending the EA Connect days to ask developers about how they feel about their work and talk with clients about how they use the product, I finally decided to sign the contract with LeanIX. In this post I would like to share my experiences from the first month of starting out.</p>
<h2 id="week-1" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/first-month-at-leanix/#week-1">Week 1</a></h2>
<p>On the first day, Thursday January 2nd, my "LeanIX Buddy" Laura showed me around the office and introduced me to the different teams. I joined the "Re:invent" team, which is responsible for frontend development. My new colleagues made me feel very welcome and the overall setting in the office was quite cheerful. Afterwards I met with Arjun, our Security Engineer, who helped me set up some accounts and educated me about the security policies within the company. Then it was time to set up my Macbook according to well structured onboarding checklists. It felt good to contribute this early by creating pull requests for missing or outdated information in these checklists.</p>
<p>On the second day I was given my first story to work on, it was about fixing a relatively old bug that occurred when recovering a Fact Sheet. This involved looking around and understanding some RxJS actions and reducers, which are responsible for managing the state of our Angular application. I haven’t worked on projects this large with reactive programming and it was exciting to discover how the software engineers at LeanIX are applying this paradigm. The best part was, that I was able to fix the bug on the same day, which I didn’t expect at all. I went home with a feeling of pride and surprise.</p>
<h2 id="week-2" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/first-month-at-leanix/#week-2">Week 2</a></h2>
<p>The next Monday I was assigned to help my colleague Angel on a new story, so we spent the morning doing pair programming. After lunch I was busy attending so called "Ramp-Up Meetings", where one colleague presents a specific branch or concept within the company. I’ve had these kind of meetings every week since then, while the frequency decreased after two weeks. They helped me to understand what the different branches within the company are responsible for and getting an idea about who is who.</p>
<p>Once the meetings were done I was reminded that I should add unit tests for a reducer to complete my bugfix from Friday. All tests were green when I joined my team for lunch on Tuesday and by Wednesday Morning I had released my code with the help of my colleagues, who showed me what the process in JIRA looks like and how to start the relevant Jenkins jobs. There is no continuous delivery yet, but comprehensive continuous integration, which greatly supports development as well as deployment. I was happy to see that the latter required minimal manual steps to complete and that nothing is merged without the review of a developer, who was not involved in the implementation.</p>
<p>After lunch, Sebastian presented some learnings from his recent endeavour into bootstrapping a python project, where all developers from the company attended. Anyone can host these "Lunch & Learn" events and I think it’s a great way to share knowledge.</p>
<p>The rest of the day, my team, as well as our friends from Customer Success, were busy bughunting in our Angular application, which we had just updated from Angular 4 to Angular 7 on one of our testing servers. There were no major issues, just small design fixes that surfaced because of a new way of treating whitespace in Angular templates. The Angular 7 branch was merged and released on Thursday morning without any incidents. I’m happy that the developers can take the time to modernise like this, which minimises the risk of being held back by outdated tooling. Yay for Angular 7.2 and TypeScript 3.2.1!</p>
<p>But we didn’t stop there. I was assigned two new stories in our sprint, which will improve the development process in the frontend even further: "Enable fullTemplateCheck in the Angular Compiler" and "Increase severity of some tslint rules to error". These stories involved touching a lot of different parts of code in the frontend, which makes them perfect for someone who is just starting out. They kept me busy for several days, as there a bunch of errors to fix with these stricter compiler rules.</p>
<h2 id="week-3" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/first-month-at-leanix/#week-3">Week 3</a></h2>
<p>On Wednesday, January 16th, we kicked off the development of a new feature, enabling users to edit Fact Sheet subscriptions in table inline editing, which required all team members to work together. Angel and Umut presented the general architecture of the table inline editing component and outlined the parts we needed to touch to implement this feature.</p>
<p>We decided that it would be a good idea to start the implementation in a mob programming session on Thursday, to make sure that everyone understands the core dependencies of the feature.</p>
<p>I’ve never experienced this style of collaborative programming before, but it worked quite well for us. After two hours we split up into two teams that would implement separate parts based on what we had achieved until then, because at that point there were too many thoughts floating around and we started to lose focus.</p>
<p>There was a special event that evening, as DHL, one of our clients, had invited us to an exclusive tour of the Post Tower, the most prominent building of the Bonn skyline. The picture above was taken right after the tour.</p>
<p>Then came the third Friday of the month, which means it’s "Thank god it’s Friday"-Friday, where everyone who likes can bring food and we have lunch together in the office. The food was very diverse, plenty and most of all tasty. I really appreciate this tradition, coming from a company where we cooked in the office every day.</p>
<p>I was responsible for implementing the logic for transforming the user input of Fact Sheet subscriptions in table inline editing into objects, which we could save to our backend. As the input is quite complex, there was a lot stuff to think of. What better way to keep track of every necessary behaviour than unit tests? That’s right! Me and Ali implemented this logic using test driven development, which always helps me a ton.</p>
<h2 id="week-4" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/first-month-at-leanix/#week-4">Week 4</a></h2>
<p>Once we thought that we had a presentable implementation, the whole team reviewed the code together, to make sure that we actually meet all the complex requirements. Turns out we didn’t, but after adding the missing tests, it didn’t take too long until we had the final product.</p>
<p>The next sprint started on Thursday, January 24th, and I was assigned the story on handling Fact Sheet revision clashes in table inline editing, meaning that you get notified upon saving if someone else has edited the Fact Sheet in the meantime and you can choose between discarding your changes or overwriting the remote ones after comparing them. As of Friday, February 1st, this feature is fully implemented, including unit tests and end-to-end tests, reviewed and merged. A lot of pair programming with Patrick was involved for this one and I feel that we are generally very productive.</p>
<p>I’d imagine that the details of the stories I worked on this past month might be boring to some readers but I didn’t want to leave them out, as I never would’ve expected that I was going to successfully introduce such big changes in such a short time in a project I’ve never worked on before.</p>
<h3 id="things-i-didn-t-get-to-mention" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/first-month-at-leanix/#things-i-didn-t-get-to-mention">Things I didn’t get to mention:</a></h3>
<ul>
<li>The Scrum process works really well in our team and it helps me be productive and focus, as I only work on one story at a time, which are also carefully split up into "easily digestible" chunks.</li>
<li>Our product team is doing a great job of coordinating stories with dependencies between teams and enabling the developers to really focus on developing and not product management.</li>
<li>I really like the diversity in our office, where there are people from so many different places in the world and I get to practice my Spanish with native speakers.</li>
<li>The chairs are comfortable and height-adjustable tables are also nice. Overall I feel like everyone gets the hardware required for working in an efficient and healthy manner.</li>
</ul>
<p>Thanks to all of my colleagues for making me feel welcome, for my teammates who always take the time to answer my questions or take on stories together with me. I really enjoy my newly gained productivity and look forward to the new things I’m going to learn at LeanIX.</p>
<p>This post was originally published at <a href="https://blog.leanix.net/insights/developer_at_leanix">https://blog.leanix.net/insights/developer&#95at&#95leanix</a></p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CMy%20first%20month%20as%20Software%20Engineer%20at%20LeanIX%E2%80%9D">Reply via email</a></p>
Für zukünftige Azubis: meine Projektpräsentation als Fachinformatiker bei der IHK Abschlussprüfung2018-07-05T00:00:00Zhttps://www.xkons.de/posts/ihk-projektpraesentation-fachinformatiker-anwendungsentwicklung/
<p>Am 3. Juli 2018 habe ich meine Ausbildung zum Fachinformatiker abgeschlossen und damit nun zukünftige Azubis auch etwas von meiner erfolgreichen Präsentation haben werden, stelle ich hier meine Slides und mein Skript zur Verfügung.</p>
<p>Es ist übrigens immer gut, wenn ihr Köder in eurer Präsentation auslegt, auf welche die Prüfer dann im Fachgespräch eingehen. Ich war besonders überrascht, als mich einer der IHK-Prüfer sogar über Containervirtualisierung mit Docker befragt hat, was mein Vorurteil, dass in der IHK-Prüfung nur ältere Technologien thematisiert werden, widerlegt hat. So konnte ich mein breites Wissen aus dem Bonner Microservices Meetup aus dem Ärmel ziehen.</p>
<p>Wenn ihr noch weitere Fragen zur Abschlussprüfung für den Beruf Fachinformatiker Anwendungsentwicklung habt, dann schreibt mir einfach eine Mail oder tweetet an mich und ich werde meine Antworten gerne hier im Blog ergänzen.</p>
<p>Hier gibts meine Slides und mein Skript zum Download:</p>
<ul>
<li><a href="https://www.xkons.de/baton_preasentation.pdf">Slides</a></li>
<li><a href="https://www.xkons.de/baton_projektpraesentation_skript.pdf">Skript</a></li>
</ul>
<p>Der <a href="https://github.com/webfactory/baton">Quellcode</a> für mein Abschlussprojekt ist außerdem open source :-)</p>
<p>Dieser Beitrag wurde ursprünlich hier veröffentlicht: <a href="https://www.webfactory.de/blog/ihk-projektpraesentation-fachinformatiker-anwendungsentwicklung">https://www.webfactory.de/blog/ihk-projektpraesentation-fachinformatiker-anwendungsentwicklung</a></p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CF%C3%BCr%20zuk%C3%BCnftige%20Azubis:%20meine%20Projektpr%C3%A4sentation%20als%20Fachinformatiker%20bei%20der%20IHK%20Abschlusspr%C3%BCfung%E2%80%9D">Reply via email</a></p>
enterJS Darmstadt 2018 - Eine Zusammenfassung ausgewählter Talks2018-06-26T00:00:00Zhttps://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/
<p>Dieses Jahr war ich zum zweiten Mal in Folge auf der enterJS-Konferenz in Darmstadt und fasse in diesem Beitrag einige der Talks zusammen, die ich besucht habe. Meine persönlichen Gedanken beschränke ich dabei lediglich auf kurze Kommentare, um in späteren Beiträgen genauer darauf einzugehen.</p>
<h2 id="uebersicht" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#uebersicht">Übersicht</a></h2>
<ul>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#microfrontends">Micro Frontends: JavaScript Integration Patterns</a></li>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#no-backend-pwa">No-Backend Peer to Peer Progressive Web Apps</a></li>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#accessibility">Common Ways We Break Accessibility and How to Avoid Them</a></li>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#preact">We need to talk about Preact</a></li>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#tensorflowjs">TensorFlow.js</a></li>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#reactnative">Cross-Plattform-Entwicklung mit React und React Native – Möglichkeiten und Stolpersteine</a></li>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#hoc">Unleash the Power of Higher-Order Components</a></li>
<li><a href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#d3js">Einführung in D3.js – Mächtige Datenvisualisierung im Browser</a></li>
</ul>
<h2 id="microfrontends">Micro Frontends: JavaScript Integration Patterns</h2>
<p>von Nils Hartmann und Oliver Zeigermann</p>
<p>Nils und Oliver sind Serien-Speaker auf der enterJS. Sie beginnen den Talk mit der Behauptung, dass es genau drei Arten von Anwendungen gibt, die die bestmögliche Benutzererfahrung bieten:</p>
<p>Single-Page-Applications (SPA), mobile Apps und Desktop Apps. Auf die Frage, ob jemand aus dem Publikum nicht zustimmen würde, bleibt der Saal still.</p>
<p>Sie stellen drei Methoden/Architekturen für die Verbindung von Komponenten/Modulen im Frontend vor:</p>
<ol>
<li>HTML-Links</li>
<li>Majestic Modular Monoliths</li>
<li>Micro Components</li>
</ol>
<p><strong>Zu 1. HTML-Links</strong></p>
<p>Die Benutzer navigieren über echte HTML-Links zwischen Seiten. Dabei ist jede Seite eine eigene SPA und sie teilen untereinander keinen State.</p>
<p>Diese Architektur ist besonders für Entwickler sehr bequem, da die Module der einzelnen Teams komplett unabhängig voneinander sind. Leider ist das auch der Katalysator für eine inkonsistente und schlechte Benutzererfahrung.</p>
<p>Als Beispiel für diese Architektur nannten Hartmann und Zeigermann Outlook Web. Hier ist der Mail Client in React implementiert und auf der linken Seite befindet sich eine Navigation, um beispielsweise von Mails zum Kalender zu wechseln. Klickt man auf den Kalender, so öffnet sich eine komplett andere Webanwendung, welche auch kein React einsetzen muss. Die Navigation, um zurück zu der React-basierten Mail Anwendung zu kommen, ist dort weiterhin vorhanden, allerdings ein bisschen anders positioniert, was für ein inkonsistente Benutzeroberfläche sorgt.</p>
<p><strong>Zu 2. Majestic Modular Monoliths</strong></p>
<p>Bei einem Majestic Modular Monolith befinden sich mehrere Module auf einer Seite.</p>
<p>Bei der Entwicklung wird empfohlen, dass es pro Modul nur ein Team geben darf. Die Module können entweder in einem großen Repository, vorzugsweise getrennt durch die Ordnerstruktur, oder auch in individuellen npm Paketen verteilt werden.</p>
<p>Für Module, die nicht in die offen zugängliche npm-Registry veröffentlicht werden sollen, gibt es inhouse Lösungen wie nexus. Ein statischer Build setzt schließlich alle Module zu einer Anwendung zusammen.</p>
<p>Um für schnellere erste Interaktion zu sorgen, soll Lazy-Loading verwendet werden.</p>
<p>Der Nachteil an dieser Architektur ist, dass die Entwickler-Teams ihr Frontend-Framework nicht flexibel wählen können, wie beispielsweise bei HTML-Links.</p>
<p>Der Vorteil daran ist, dass generische Präsentationskomponenten, wie Buttons oder Listen, über die Teams hinweg geteilt werden können, um konsistentes Design zu erzielen. Auf diese Weise wird die beste Benutzererfahrung in SPAs erreicht.</p>
<p>Majestic Modular Monoliths brauchen fast immer zentrales State-Management mit Tools wie Redux.</p>
<p>Diese Architektur könnte sich beispielsweise für Google Docs eignen. Wenn sich der Cursor im Text des Dokuments in einer gefetteten Zeichenkette befindet, so muss sich auch die „Werkzeugleistenkomponente“ aktualisieren und den Button für fette Schrift grau hinterlegen.</p>
<p><strong>Zu 3. Micro Components</strong></p>
<p>Im Gegensatz zu MMMs werden die einzelnen Module erst zur Laufzeit miteinander verbunden.</p>
<p>Die Kommunikation zwischen Modulen findet über einen EventBus (Vorschlag: PostalJS) oder geteilten State statt.</p>
<p>Man gewinnt wieder die Freiheit bezüglich der Wahl der Frontend-Frameworks, allerdings neigen diese SPAs aus genau diesem Grund dazu, recht groß zu werden, da mehrere Frameworks eingebunden gleichzeitig verwendet werden, weshalb sie eher für Desktop Apps oder Intranets verwendet werden sollten.</p>
<p>Die aktuell einzige Möglichkeit, um unterschiedliche Micro Components komplett ohne Interferenzen zu integrieren, sind iframes. Alternativen sind div-Tags mit script-Tags und web components, welche aber nicht ganz frei von Nebeneffekten sind.</p>
<p>Ein Beispiel für eine Micro Frontend Architektur ist Spotify.<br />
Kommentar</p>
<p>Bisher bin ich bei meinen React Apps, in welchen oft viele Komponenten denselben zentralen State manipulieren, auch gut mit EventHandlern über Props zurechtgekommen und habe Redux lediglich zu Testzwecken ausprobiert. Nils und Oliver haben offensichtlich schon viele Begegnungen mit komplexen Frontends gehabt und für mich war dieser Talk sehr spannend.</p>
<h2 id="no-backend-pwa">No-Backend Peer to Peer Progressive Web Apps</h2>
<p>von Felix Waterstraat und Sven Vowé (spreewunder GmbH)</p>
<p><strong>Use-Cases</strong></p>
<ul>
<li>offline-first Apps</li>
<li>Apps, die zu vertrauliche Daten verarbeiten, um sie über einen Cloud Service kommunizieren zu lassen</li>
</ul>
<p><strong>Architektur</strong></p>
<ul>
<li>Datenbank lokal im Browser mit PouchDB oder Minimongo, welche als Wrapper für IndexedDB und localStorage agieren.</li>
<li>Datenbanksicherungen im Backend bei vorhandener Internetverbindung</li>
<li>Peer to Peer Synchronisierung mit WebRTC</li>
<li>RTCDataChannel zum teilen von Anwendungsdaten unter verschiedenen Browser-Instanzen</li>
</ul>
<p>Das spreewunder Team kapselt diese Architektur in einem <a href="https://spreewunder.com/#cloudless">Framework</a>, welches sie „Cloudless“ getauft haben. Es scheint allerdings nicht quelloffen zu sein.</p>
<p><strong>Beispiel EKG-Messung</strong></p>
<p>Das Team der spreewunder GmbH hat einen EKG-Rekorder, nach einem gescheiterten Versuch mit Web USB, über Web Bluetooth an eine No-Backend PWA angebunden und empfängt davon ca. 40000 Datenpunkte pro Sekunde, was mit einer HTTP-Schnittstelle, im Vergleich zu jungen Web-APIs, noch viel größere Herausforderungen mitgebracht hätte. Kleinere Schwierigkeiten mit der Datendurchsatzrate konnten dabei durch das Deaktivieren des Bluetooth Low Energy Modus (BLE) und Verwendung von Bluetooth 5 gelöst werden.</p>
<p>Mit Hilfe von Vega, einem Wrapper für D3.js, werden die Live-Daten in einem Diagramm visualisiert.</p>
<p><strong>Kommentar</strong></p>
<p>Dieser Vortrag hat mich definitiv beeindruckt und auch inspiriert, mich noch tiefer mit PWAs auseinanderzusetzen. Besonders die „persistente“ Speicherung in IndexedDB werde ich auf die Probe stellen, nachdem ich letztes Jahr schon meine <a href="https://www.xkons.de/calendar/">alte Kalender Web-App</a> mit der localForage-Library offline-fähig gemacht habe.</p>
<p>Ich finde es schade, dass Cloudless nicht quelloffen ist, da ich durch die Code-Beispiele zur Erstellung und Verwaltung von WebRTC-Verbindungen sehr neugierig geworden bin.</p>
<h2 id="accessibility">Common Ways We Break Accessibility and How to Avoid Them</h2>
<p>von Laura Carvajal @lc512k</p>
<p>Die erste Frage, die wir uns bei Accessbility stellen sollten ist, ob unsere Seite auch ohne eine Maus bedienbar ist.</p>
<ul>
<li>
<p>Gibt es focus styles?</p>
<ul>
<li>niemals outline: none</li>
<li>in CSS4 kommt focus-visible für tab-spezifische Focus-Styles</li>
</ul>
</li>
<li>
<p>Sind alle Elemente durch „Tabben“ erreichbar und in einer sinnvollen Reihenfolge?</p>
<ul>
<li><a> Tags ohne href-Attribut werden nicht angesteuert, benötigen tabindex=0</li>
</ul>
</li>
<li>
<p>Gibt es Inhalte, die von einem hover-Effekt abhängen?</p>
</li>
</ul>
<p>Speziell für Screenreader ist es wichtig, dass alle <h> Tags auf einer Seite auch dessen Hierarchie widerspiegeln. Als Beispiel wird ein Video gezeigt, in dem ein blinder Mann im Rahmen eines Accessibility-Audits des Digital Accessibility Centers versucht, per Screenreader zu der Hardware-Support Seite auf der Amazon-Hilfeseite zu gelangen, wobei Elemente, die sonst <h2>-Elemente sein sollten, nämlich Unterkategorien für Hilfe (Bestellungen, Hardware, etc.), einfache Links waren. Aus diesem Grund, dauert es für den Besucher deutlich länger, zu der gewünschten Sektion zu navigieren.</p>
<p>H-Tags sollten auch nie zu Styling-Zwecken eingesetzt werden, sie dienen ausschließlich zur Repräsentation der Seitenstruktur!</p>
<p>Auf Seiten mit Video- oder Audioinhalten sind Untertitel einzubauen, welche keine Fehler enthalten und auch gut lesbar sind.</p>
<p><strong>Kommentar</strong></p>
<p>Ich freue mich immer auf Talks zu Accessibility, da ich bisher jedes Mal etwas neues gelernt und ein besseres Verständnis für die verschiedenen Herausforderungen von Menschen mit Behinderungen bei der Verwendung von Websites bekomme habe.</p>
<h2 id="preact">We need to talk about Preact</h2>
<p>von Sara Vieira @NikkitaFtw</p>
<p>Preact ist eine JavaScript Library, die von <a href="https://github.com/developit">Jason Miller</a> begründet wurde, während er versuchte, die Innereien von Facebooks React zu verstehen. Heute steht eine große (19200 Sterne auf GitHub) und hilfsbereite Community dahinter und es wird von zahlreichen Firmen in Produktion eingesetzt (Uber, Lyft, Financial Times).</p>
<p>Sara nennt einige Punkte, in denen sich Preact von React unterscheidet:</p>
<ul>
<li>4KB Gzipped vs 32KB React</li>
<li>schneidet in Rendering-Benchmarks mehr als doppelt so schnell wie React ab</li>
<li>preact-router wird im Gegensatz zu React Router vom selben Team maintained wie die Haupt-Library</li>
<li>Standard-addEventListener für Event-Handling im Gegensatz zu Synthetic Events in React</li>
</ul>
<p>Mit dem <a href="https://github.com/developit/preact-compat">preact-compat</a> Paket können außerdem React-Komponenten in Preact verwendet werden. Dazu gibt es im Repository auch eine Demo. Somit schließt man sich mit der Entscheidung für Preact nicht von der großen Auswahl an existierenden React-Komponenten aus.</p>
<p>In Zukunft bekommt Preact sogar asynchrones DOM-Diffing.</p>
<p>In einer Live-Demo baut Sara mit Hilfe der <a href="https://github.com/developit/preact-cli">preact-cli</a> eine Preact-App, die eine Liste der heutigen Spiele in der Fußball-WM Spiele inklusive einiger Details zeigt, welche sie sich von einer öffentlichen API holt.</p>
<p><strong>Kommentar</strong></p>
<p>Ich arbeite im Frontend aktuell hauptsächlich mit React und fühlte mich während der Preact-Demo auch direkt zu Hause. Der Sprung von React zu Preact scheint mir alles andere als dramatisch zu sein, allerdings bin ich dem preact-compat Paket gegenüber noch etwas skeptisch, da es sich einfach zu schön anhört.</p>
<p>In diesem Talk ist mir außerdem zum ersten Mal die neue <a href="https://reactjs.org/blog/2017/11/28/react-v16.2.0-fragment-support.html"><Fragment></Fragment></a> Komponente aus React 16 begegnet. Endlich keine sinnlosen <div>s mehr!</p>
<h2 id="tensorflowjs">TensorFlow.js</h2>
<p>von Oliver Zeigermann @DJCordhose</p>
<p>Wer im Publikum macht Machine Learning? Drei Leute melden sich. Wer von euch kennt TensorFlow? Fast alle melden sich.</p>
<p>Oliver beantwortet für uns die Frage, warum man TensorFlow mit JavaScript verwenden wollen würde, wo doch Python viel schneller ist und es bereits viele Ressourcen dazu gibt:</p>
<ul>
<li>
<p>Bildung</p>
<ul>
<li>JavaScript kann man anfassen, man braucht nur einen Browser und Internet.</li>
<li><a href="https://js.tensorflow.org/tutorials/core-concepts.html">Konzepte</a> sind einfacher zu begreifen, wenn man damit <a href="https://playground.tensorflow.org/">rumspielen</a> kann.</li>
</ul>
</li>
<li>
<p>Entwicklung</p>
<ul>
<li>JavaScript ist eine weitverbreitete Sprache und dadurch spricht Google mit TensorFlow nun ein größeres Publikum an.</li>
<li>Kombination von Number-Crunching und interaktiven Visualisierungen.</li>
</ul>
</li>
<li>
<p>Deployment</p>
<ul>
<li>JavaScript ist womöglich die einzige Option für ML, weil der Browser alles ist, was du hast.
<ul>
<li>mobile Endgeräte</li>
<li>AI in Browser-Spielen</li>
<li>Unabhängigkeit von GPU-Hersteller
<ul>
<li>Python TensorFlow unterstützt exklusiv Nvidia CUDA Grafikkarten</li>
<li>TensorFlow.js macht <a href="https://news.ycombinator.com/item?id=15856647">„irgendwas mit fragment shadern“</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
<p>Um das beste aus beiden Welten zu bekommen, sprich die Schnelligkeit von Python und die Interaktivität von JavaScript, kann man erst in Python sein <a href="https://js.tensorflow.org/tutorials/import-keras.html">Keras</a> oder TensorFlow Modell trainieren, um es dann mit dem <a href="https://github.com/tensorflow/tfjs-converter">tfjs-converter</a> zu einem von TensorFlow.js lesbaren Format zu konvertieren und im Browser zu laden.</p>
<p>In Zukunft können wir dank <a href="https://twitter.com/nsthorat/status/1003986237361934338">WebGPU</a> noch große Performance-Boosts für TensorFlow.js erwarten.</p>
<p><strong>Kommentar</strong></p>
<p>Auch wenn eine Vielzahl der Demos nicht so geklappt haben, wie erwartet, war es für mich dennoch ein sehr inspirierender Talk und ich hoffe ihr müsst nicht allzu lange warten, bis ich in diesem Blog eine Demo von einem Sprachmodell veröffentliche, das ich vor einem Jahr für den Bonn Data Science Meetup trainiert habe.</p>
<h2 id="reactnative">Cross-Plattform-Entwicklung mit React und React Native – Möglichkeiten und Stolpersteine</h2>
<p>von Jasper Meyer @jasper__meyer</p>
<p>Jasper berichtet von seiner Erfahrung, eine existierende React App durch react-native zu erweitern. Mit Hilfe der react-native-cli ist das schon mit dem Ausführen von „react-native init“ getan, zumindest fast. Wer eine neue App mit React Native bauen möchte, verwendet besser „create-react-native-app“.</p>
<p>Es wird auf einige API-Unterschiede zwischen Web-React und React Native hingewiesen:</p>
<ul>
<li>
<p>Styles</p>
<ul>
<li>Web: CSS</li>
<li>Native: Stlye Objects</li>
<li>Eine Lösung für alle: <a href="http://cssinjs.org/">cssinjs</a></li>
</ul>
</li>
<li>
<p>Media Queries</p>
<ul>
<li>Web: CSS</li>
<li>Native: Dimensions API</li>
</ul>
</li>
<li>
<p>Lokaler Key-Value-Store</p>
<ul>
<li>Web: localStorage</li>
<li>Native: AsyncStorage</li>
</ul>
</li>
</ul>
<p>Wer React Native Komponenten auch direkt im Web verwenden möchte, für den gibt es <a href="https://github.com/necolas/react-native-web">react-native-web</a>. Dazu noch ein Lesetipp von Jasper: <a href="https://medium.com/@yannickdot/write-once-run-anywhere-with-create-react-native-app-and-react-native-web-ad40db63eed0">Write once, run anywhere with Create React (Native) App and react-native-web</a></p>
<p>Wie darf man sich nun die Entwicklung von Komponenten in einer React Native App vorstellen?</p>
<p>Jasper beschreibt es mit dem bauen einer eigenen Komponenten-Library, um plattformspezifische Komponenten “automagisch” mit es6 imports zu bekommen.</p>
<p><img src="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/reactnative.png" alt="reactnative.png" /></p>
<p>Weiterer Lesetipp:</p>
<p><a href="https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a">Warum AirBnb sich von React Native abwendet</a></p>
<p><strong>Kommentar</strong></p>
<p>In diesem Talk habe ich mich zum ersten Mal tiefer mit React Native befasst und habe bestimmt eine gewisse Sympathie dafür entwickelt. Am meisten stört mich wohl noch die 0 am Anfang der aktuellen react-native Version. Ich hoffe ja, dass ich in Zukunft mit Progressive Web Apps alle Plattformen glücklich machen kann. Dafür fehlt mir lediglich noch ein Pilotprojekt.</p>
<h2 id="hoc">Unleash the Power of Higher-Order Components</h2>
<p>von David Kopal @coding_lawyer</p>
<p>Eine kurze Definition von HOCs: Higher-Order Components sind Funktionen, die eine existierende Komponente entgegennehmen, diese manipulieren oder erweitern und eine neue Komponente zurückgeben.</p>
<p>David unterscheidet zwischen „smart components“, welche ausschließlich für Logik zuständig sind und „presentational components“, welche, wie es der Name schon sagt, meist nur noch aus der render Funktion bestehen. Diese „presentational components“ gilt es mit HOCs zu „dekorieren“.</p>
<p>Was macht eine wiederverwendbare Komponente aus? Sie ist nicht abhängig von einer spezifischen Property-Struktur.</p>
<p>Als erstes stellt David die sogenannte „Configured Higher-Order Component“ vor, welche dazu dient die Properties einer presentational component zu manipulieren.</p>
<p><img src="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/hoc1.png" alt="hoc1.png" /></p>
<p>HOCs können beliebig verkettet werden:</p>
<p>Die <a href="https://github.com/acdlite/recompose">Recompose</a> Library für React beinhaltet die meist verwendeten Higher-Order Components und eine compose() Funktion, welche eine beliebige Anzahl an HOCs entgegennimmt, um diese zu verketten.</p>
<p><img src="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/hoc2.png" alt="hoc2.png" /></p>
<p>Davids Vortrag war sehr Code-lastig und ich habe das Gefühl, dass ich dem Ausmaß der Wissensvermittlung, die ihm gelungen ist, in dieser Zusammenfassung nie gerecht werden kann.</p>
<p>Seine Code-Beispiele findet ihr unter <a href="https://github.com/codinglawyer/hocs-code">https://github.com/codinglawyer/hocs-code</a></p>
<p><strong>Kommentar</strong></p>
<p>Higher-Order Components (HOC) ist ein weiteres Pattern, welches mir zum ersten Mal auf der enterJS begegnet ist. Der Speaker David Kopal, ursprünglich Anwalt, erklärt in einem sehr gut strukturierten Talk die Anwendung dieses Patterns, nachdem er es großflächig in einem komplexen React Frontend eingesetzt hat. Ich denke jedoch, dass HOCs ohne Code-Beispiele nicht so spannend sind und empfehle daher, sich Davids Beispiele und auch die offizielle React Dokumentation zu diesem Thema durchzulesen: <a href="https://reactjs.org/docs/higher-order-components.html">https://reactjs.org/docs/higher-order-components.html</a></p>
<h2 id="d3js">Einführung in D3.js – Mächtige Datenvisualisierung im Browser</h2>
<p>von Mirco Zeiß @zemirco</p>
<p>D3.js ist eine JavaScript Bibliothek für Datenvisualisierungen im Web.</p>
<p>Über die „InputDomain“ kommen Daten in ein d3-Objekt rein und die „OutputRange“ projiziert die Daten.</p>
<p>In d3 gibt es drei Phasen:</p>
<ol>
<li>Enter: Neue Daten kommen hinzu</li>
<li>Update: Bestehende Daten werden aktualisiert</li>
<li>Exit: Bestehende Daten werden gelöscht</li>
</ol>
<p>Der Punkt (0,0) ist in D3.js immer links oben und nicht links unten, wie wir es sonst vielleicht gewohnt sind.</p>
<p>Die API eines d3-Objekts lässt sich auf diese Methoden zusammenfassen:</p>
<ul>
<li>constructor(config)</li>
<li>init()</li>
<li>render(data)</li>
<li>update(data)</li>
<li>resize(width)</li>
</ul>
<p>React/Vue und D3.js sind ein Dream-Team! Lasse D3.js rechnen und nutze moderne Frontend Frameworks für dynamisches Re-Rendering.</p>
<p>Mirco hat ein Beispiel für eine Kombination aus React und D3.js auf GitHub veröffentlicht: <a href="https://github.com/zemirco/enterjs">https://github.com/zemirco/enterjs</a></p>
<p>Das dynamische Re-Rendering von Visualisierungen soll im „componentDidMount“ Lifecycle-Hook von React passieren, wobei die Reference der d3.js svg aktualisiert wird. Dabei ist es besonders wichtig, dass jeder Datenpunkt einen individuellen key hat.</p>
<p><strong>Für Einsteiger/Neugierige</strong></p>
<p>Es wird empfohlen, nicht direkt mit D3.js Wrappern einzusteigen, welche meist schwer erweiterbar sind, sondern lieber mit GitHub Gists <a href="http://bl.ocks.org/">bl.ocks.org</a> einen interaktiven D3.js Playground zu verwenden, um mit reinem JavaScript und HTML neue Visualisierungen auszuprobieren.</p>
<p>Hier ein Beispiel: <a href="https://bl.ocks.org/zemirco/ef5dc3ae80b538e1034442c17c44237f">https://bl.ocks.org/zemirco/ef5dc3ae80b538e1034442c17c44237f</a></p>
<p>Wer heute ein Tutorial oder Buch zu D3.js bearbeiten möchte, sollte darauf achten, dass es mindestens mit Version 4 der Visualisierungs-Library arbeitet, da in dieser Version große Änderungen dazugekommen sind.</p>
<p>Leseempfehlung von Mirco: <a href="https://medium.com/dailyjs/the-trouble-with-d3-4a84f7de011f">The Trouble with D3</a> plus die Diskussion auf <a href="https://news.ycombinator.com/item?id=17298072">Hacker News</a>.</p>
<p><strong>Kommentar</strong></p>
<p>Ich habe D3.js bisher nur indirekt über React Recharts verwendet und bin damit sehr schnell zu schönen Ergebnissen gekommen, die auch für professionelle Dashboards ausreichend waren und noch viel Spielraum bieten. Nach der inspirierenden Keynote von D3.js-Meisterin Shirley Wu war es umso spannender, einen Blick „unter die Haube“ zu werfen.</p>
<h2 id="epilog" tabindex="-1"><a class="header-anchor" href="https://www.xkons.de/posts/enterjs-darmstadt-2018-eine-zusammenfassung/#epilog">Epilog</a></h2>
<p>An dieser Stelle möchte ich mich bei den Organisatoren der enterJS bedanken, die ein wirklich qualitatives und vielfältiges Programm auf die Beine gestellt haben! Ich komme gerne wieder :-)</p>
<p>Dieser Beitrag wurde ursprünglich hier veröffentlicht: <a href="https://www.webfactory.de/blog/enterjs-2018-talks">https://www.webfactory.de/blog/enterjs-2018-talks</a></p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CenterJS%20Darmstadt%202018%20-%20Eine%20Zusammenfassung%20ausgew%C3%A4hlter%20Talks%E2%80%9D">Reply via email</a></p>
Tipps für den Girls'Day in einer Software-Firma2018-04-30T00:00:00Zhttps://www.xkons.de/posts/girls-day-fuer-software/
<p>Zum bundesweiten Girls'Day haben wir acht Schülerinnen eingeladen, um ihnen die Web-Branche vorzustellen.</p>
<p>Nachdem uns im März eine E-Mail von einer Mutter einer Bonner Schülerin erreicht hat, in der sie fragte, ob ihre Tochter im Rahmen des Girls'Day zu uns in die Firma kommen könnte, haben wir uns auf der offiziellen Seite als Botschafter für mehr Frauen in der IT-Branche angemeldet.</p>
<p>Ich habe bereits 2015 einen Girls'Day organisiert, als ich noch bei IBM gearbeitet habe und nahm mich daher ohne zu zögern dieser Aufgabe an. Damals war das Feedback sehr positiv, sodass ich die Agenda vollständig übernommen habe:</p>
<ol>
<li>Kennenlernrunde</li>
<li>Vorstellung der Tätigkeiten in den verschiedenen Rollen bei der webfactory (Backend-Entwicklerin, Designerin, Projektmanagerin)</li>
<li>Spielerisch Programmieren lernen mit der "hour of code" <a href="https://code.org/learn">https://code.org/learn</a></li>
<li>Gemeinsames Mittagessen</li>
<li>Erarbeitung und Präsentation einer eigenen Projektidee</li>
</ol>
<p>Mit der Unterstützung von meinen Kollegen Eva, Jano und Søren haben wir die Mädchen durch das Programm begleitet.</p>
<p>Mein persönlicher Höhepunkt waren die kreativen Projektideen und der feste Vorsatz von einem der zwei Projektteams, von denen sich zwei von vier Teammitgliederinnen zuvor noch nicht kannten, sich in der Freizeit zu treffen, um das Projekt weiterzuentwickeln.</p>
<p>Schließlich erhielt jede Teilnehmerin noch eine Liste von nützlichen Ressourcen, um mehr über Webentwicklung und Programmierung zu lernen:</p>
<ul>
<li>Interaktive App von Google für Programmiereinsteiger (nur englisch): <a href="https://grasshopper.codes/">https://grasshopper.codes/</a></li>
<li>Interaktive Tutorials zu HTML und anderen Web-Technologien (nur englisch): <a href="https://www.codecademy.com/learn/learn-html">https://www.codecademy.com/learn/learn-html</a></li>
<li>Deutsche Website, mit der ich mir schon vor zehn Jahren HTML beigebracht habe: <a href="https://wiki.selfhtml.org/">https://wiki.selfhtml.org</a></li>
</ul>
<p>Ich bin gespannt auf die nächsten Marktführer für Mode-Sale-Finder und community-driven Fitnessratgeber im Web.</p>
<p>Dieser Beitrag wurde ursprünglich hier veröffentlicht: <a href="https://www.webfactory.de/blog/girls-day-2018">https://www.webfactory.de/blog/girls-day-2018</a></p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CTipps%20f%C3%BCr%20den%20Girls'Day%20in%20einer%20Software-Firma%E2%80%9D">Reply via email</a></p>
Erasmus+ Social Inclusion Days: Dinner in the Dark2017-12-04T00:00:00Zhttps://www.xkons.de/posts/erasmusplus-social-inclusion-dinner-in-the-dark/
<p>Seit diesem Jahr engagiere ich mich beim Erasmus Student Network (ESN) Bonn. Im Rahmen der Social Inclusion Days, welche vom 27. November bis 10. Dezember 2017 stattfinden, habe ich zusammen mit ESN Bonn ein „Dinner in the Dark“ veranstaltet.</p>
<p>Neben meiner Tätigkeit bei der webfactory engagiere ich mich auch beim Erasmus Student Network (ESN) Bonn. Im Rahmen der Social Inclusion Days, welche vom 27. November bis 10. Dezember 2017 stattfinden, habe ich zusammen mit ESN Bonn ein „Dinner in the Dark“ veranstaltet.</p>
<p>Die 21 Teilnehmerplätze für Erasmusstudierende in Bonn waren innerhalb von zwei Stunden nach Beginn der Anmeldung vergeben und wir freuten uns über das große Interesse.</p>
<p>Es galt ein Menü, Tische, Sitzplätze, Geschirr, Besteck und Augendbinden zu organisieren.</p>
<p>Trotz des engen Zeitplans ist am Freitagabend alles bereit und das dreiköpfige Koch-Team bezieht um 17:30 Uhr die webfactory Küche, wo sie für den Rest des Abends kulinarische Genüsse zaubern. Ab 18 Uhr wird das webfactory Lab umgebaut und Augenbinden werden vorbereitet, bis kurz vor 19 Uhr schon die ersten Gäste eintreffen. Jeder Gast bekommt die Augen verbunden und wird daraufhin zu einem zufällig zugewiesenen Platz an der großen Tafel geführt.</p>
<p>Als wir den ersten Gang, Feldsalat mit Feta, Granatapfel und Walnüssen, servieren, sind neue Bekanntschaften geschlossen und von oberflächlichen Gesprächen ist keine Spur. Oft wird eine leere Gabel zum Mund geführt, weswegen manche auf manuellere Methoden umsteigen. Für die Organisatoren bieten sich recht amüsante Szenen, zum Beispiel als wir den Teller einer Teilnehmerin entfernen, sodass sie mit Gabel und Löffel den Tisch nach ihrem Salat absucht.</p>
<p>Vor dem Hauptgang servieren wir den Gästen erst noch ein paar Gegenstände, die sie in Teams abtasten, um zu erkennen, worum es sich handelt.</p>
<p>Als Hauptspeise gibt es Nudeln mit Kirschtomaten und Weißweinsauce, welche eine willkommene Abwechslung von den schwer zu befördernden Salatblättern bieten.</p>
<p>Im Anschluss verwöhnt uns das Koch-Team mit einem Bratapfel-Schichtdessert, dessen Keksboden für besondere Verwirrung bei der Identifizierung sorgte.</p>
<p>Bei einem „Dinner in the Dark“ hat man nicht nur ein erhöhtes Geschmacksempfinden, sondern bekommt auch einen Eindruck davon, wie es ist, blind zu sein. Nachdem unsere Gäste die Augenbinden abnehmen dürfen, sagt mir eine Teilnehmerin, dass sie sich zu Hause unbedingt informieren müsse, wie blinde Menschen mit den Herausforderungen zurechtkommen, mit denen Sie sich in den vergangenen zwei Stunden zum ersten Mal konfrontiert sah.</p>
<p>Zum Abschluss zeigen wir zur Belustigung noch die Fotos und Videos des Abends auf der Leinwand.</p>
<p><img src="https://www.xkons.de/posts/erasmusplus-social-inclusion-dinner-in-the-dark/dinnerinthedark.jpg" alt="dinnerinthedark.jpg" /></p>
<p>Unsere Gäste und das ESN Bonn bedanken sich herzlich für die großzügige zur-Verfügung-Stellung der webfactory Räumlichkeiten!</p>
<p>Dieser Beitrag wurde ursprünglich hier veröffentlicht: <a href="https://www.webfactory.de/blog/erasmus-social-inclusion-days-dinner-in-the-dark">https://www.webfactory.de/blog/erasmus-social-inclusion-days-dinner-in-the-dark</a></p>
<p><a href="mailto:michael@mharley.dev?subject=Re:%20%E2%80%9CErasmus+%20Social%20Inclusion%20Days:%20Dinner%20in%20the%20Dark%E2%80%9D">Reply via email</a></p>