Take your Typescript skills to the next level with Utility Types

<h3>5 resources to easily find or create your next CSS background</h3><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*Lqo41lU1dUbIrUEZ" /><figcaption>Photo by <a href="https://unsplash.com/@domenicoloia?utm_source=medium&amp;utm_medium=referral">Domenico Loia</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>Whenever developing a new website or a new application we need to take into account which background we will use. Finding a property background for your design is quite hard. You need to take the existing color palette into account, color composition between the elements on the section and the type of design you want to accomplish.</p><p>With these resources you would find it easier to create or find your next background for your next project!</p><h4><a href="https://getwaves.io/">getwaves.io</a></h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*bkz02laVYZfdsBwZw6SS9g.png" /></figure><p>This resource is really simple and extremely good when you try to create a wave. The waves is commonly used when trying to make a transition between to sections on a website in a creative manner.<br>This tool has a simple dashboard as you see on the image, and that is all you need. <br>You can choose between lines, bars or waves as the design. Select your color defined as a hex color and add some transparency if needed.<br>The third option lets you choose how many waves should be added. When you drag the ball it will automatically update the wave and you will instantly see the number of waves applied. Last option is too ‘shake’ to design, and regenerate the waves so that it will fit right into your design.</p><h4><a href="https://www.svgbackgrounds.com/#liquid-cheese">svgbackgrounds.com</a></h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*ipQozIuNbYmpkUjH4JIvIg.png" /></figure><p>If you want to create a fullpage background with a more creative pattern you can use the svgbackgrounds.com website. This site provides multiple options whether you like som multi gradient colors to abstract line arts. Here you also have the option to change the colors used on the background so you can easily make it fit into your current design of your website. You can also adjust the opacity and depending on the design, further adjust the design by changing the stroke, moving lines etc.</p><p>Finally you have the option as seen on the left bar, to copy the css output directly and put it into your website. This website provides SVG backgrounds, so you don’t need to worry about the scaling of images, since the vector elements will take care of it.</p><h4><a href="https://coolbackgrounds.io/">coolbackgrounds.io</a></h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*SM_ZLTejyDLoUVfLE8rQyQ.png" /></figure><p>coolbackgrounds.com is also a simple website that provides some advanced patterns. You can choose between 5 options as seen on the left. You can choose your base color on the top navigation and hereby all the 5 options will have generated some designs based on that color. If you choose the particles option, you will see all the particles moving like a gifs. You can also adjust the designs by clicking the color palette on the right bottom as well as downloading the design. <br>This website does not have the same flexibility and options as svg backgrounds but still a nifty tool if the design generated is what you need on your site.</p><h4><a href="https://pixabay.com/">pixabay.com</a></h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*sLgxJ5s4NX3cT801dor_4g.png" /></figure><p>Pixabay is another free image resource site just like <a href="https://unsplash.com">unsplash.com</a> where you can use the images without being concerted about copyright infringement.<br>What i really like about Pixabay is you have the option to choose between illustrations, vectors videos and music. You have multiple medias combined into one single site, so if you eventually wanna change your landing page from a fancy background image to a video you can find it here. <br>Pixabay has over 2.1 million royalty free stock photos free to use and you have the option to filter by colors, size, orientation etc. so you can easily find the right photo for your site.</p><h4><a href="https://undraw.co/">undraw.co</a></h4><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*pVSes8RD-4B1_hw2_3oV7g.png" /></figure><p>Undraw provides simple illustrations that has gained popularity in the last couple of years. <br>You can find all different kind of illustrations based on your need, and can search for a particular theme like ‘sport’ or ‘finance’ and you will see some illustrations that might matter to you. <br>What is so need, is you can change the color of the illustrations of the right top corner and all the illustrations will have that color like illustrated in the image above.<br>What is also perfect is that it is open-source and you can use them for free.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1b084002bda4" width="1" height="1" alt="">

5 ressources to easily find or create your next CSS background

<figure><img alt="" src="https://cdn-images-1.medium.com/max/860/1*OvMKzmKvumNzJoNTT7d-uA.png" /></figure><p>At my first job, i was working as a Frontend Developer where i would implement all the latest and greatest technologies like React, Typescript, Webpack etc. <br>One day i was talking with one of the senior developers at the company about how frontend development has evolved alot and how it used to be. Frontend development where javascript was only used for validating forms and in general just simple things and not like today where the size of codebase and level of complexity it has become today in most web applications.</p><p>At one point, he mentioned that he remembered this HTML element ‘marquee’ which used to exist, but was not sure if it still works in the browser.</p><p>Quickly opening the editor and trying it out.</p><pre>&lt;marquee&gt;Fancy&lt;/marquee&gt;</pre><p>And now you have this banner going from right side to the left in an infinite linear animation.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/706/1*uGy8CsVP16uajH2qSBwkEA.gif" /></figure><p>I instantly replied “this is some 1990’s website design and user experience :D”.</p><p>Even though the element is deprecated, you can still use it in all modern browsers. But do not rely on it to be around for much longer, since it is obsolete and can be removed at anytime.</p><h4>What is the Marquee element?</h4><p>Marquee is a HTML element that defines an animating text to be moved in a direction within the borders of the marquee element. When you look at the specs, they have defined the animation as a ‘scroll’. You have multiple properties to control this animation.</p><p><strong>Loop</strong> = Define how many times the animation should pass. Default is -1 which is infinite.<br><strong>scrollamount</strong> = How fast should the animation go?<br><strong>scrolldelay</strong> = Sets the interval between each animation.</p><p><strong>Direction = </strong>Lets you specify which way the animation should go. Possible values are “Up”, “Down”, “Right”, “Left”.</p><p>You can actually nest marquee inside of another marquee and create this state of the art animation where the parent marquee has a direction of “up”, and the child marquee has an animation of “right” which results in following masterpierce :-)</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/646/1*-1JA-WcQ8uDCUfrcswp7DQ.gif" /></figure><p>Another property which is quite nice is the <strong>behavior </strong>property where you can pass either Slide, Scroll and Alternate.<br><strong>Scroll</strong> is the default value and shows the text overflowing the borders as seen above.<br><strong>Slide </strong>is moving but when it hits the end of the animation it stops.<br><strong>Alternate</strong> is moving backwards the same way when it hits the end of the animation.</p><p>Combining the alternate behavior with nesting one marquee element, and you get this classic animation from the DVD screensaver.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/548/1*qk0zs7rq-Iesl1peBQjZ5Q.gif" /></figure><p>With just some simple styling and adding the classical dvd screensaver image, you will get the classical screensaver we all know and love.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1000/1*8beLIbhLFQcdhbePZWHOdQ.gif" /></figure><p>And here is the code:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e53abea3ef79206e7727d2d866da8880/href">https://medium.com/media/e53abea3ef79206e7727d2d866da8880/href</a></iframe><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/aef1692f296aabe7f7eda79a5b643f7d/href">https://medium.com/media/aef1692f296aabe7f7eda79a5b643f7d/href</a></iframe><p>This was so simple to implement, and with such little amount of code. I can see the use case of the marquee element still today, and what i’ve experienced when playing with the element was only joyful. It all looks fine to me. So that raises the question.</p><h4>What happened to the Marquee Element?</h4><p>When HTML5 was developed, W3C decided to mark the Marquee element as obsolete, so that developers would not use the element. Most browser still supports the element only because many sites has already implemented this page, and browsers wants to be backward compatible.</p><p>There are actually multiple reasons why this element is deprecated. The 3 major reasons is the following.</p><p><strong>It has never been a HTML Standard element.<br></strong>Since Microsoft introduced the element in Internet Explorer, it was adopted quickly by the different browsers, but never made it into the specification itself from W3C who defines all the standard element of HTML.</p><p><strong>Seperation of concern<br></strong>One of the big reason why marquee is deprecated is because the element is a ‘presentation’ element. HTML is a markup language (hence the name Hyper Text Markup Language), and is concerned with the structure of the website. Marquee element is not concerned about the structure, but is only used for presentation purposes. W3C then decided that if you wanted to achieve the same behaviour, developers should use CSS animation or javascript instead.</p><p><strong>It’s annoying<br></strong>The banner is mostly associated with advertisement, or a bad user experience where you try to get the users attention in a poorly executed way. The element is a reflection of a historical way of approaching websites where you wanted to use blinkers and banners across the pages to get the users attention. But as the UI/UX design has evolved over the years, the best practices has been established and marquee is an element that is not part of “best practices” when talking about user experience.</p><p>Although you probably not are going to use the marquee element at all, it is nice to know a little about the history of web development and the existing of the amazing marquee element.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=6ec6782f42ce" width="1" height="1" alt="">

What happened to the Marquee HTML element?

Control rendering with React Memo

<figure><img alt="" src="https://cdn-images-1.medium.com/max/960/0*8iCnNMgkuyRP7Qk6.jpg" /></figure><p>Podcasts is a great way to gain new knowledge just by listening to other. Whenever i’m out running, cleaning the house, or out travelling i like to put my earphones in and start listening to podcasts. As a frontend developer i like to hear podcasts where coding, design and web development is the main focus and i will share some of the podcasts i really like to hear and something you should probably give a listen to.</p><h3>Podcast 1: Shoptalk show</h3><p>Podcast <a href="https://shoptalkshow.com/">here</a></p><p>Shoptalk is a podcast brought to you by Dave Rupert, lead developer at <a href="https://paravelinc.com/">paravel</a>, and Chris Coyier who create <a href="https://css-tricks.com/">CSS Tricks</a> and cofounded <a href="https://codepen.io/">CodePen</a>.</p><p>Specially Chris Coyier is a famous and competent figure in the frontend development and design community sharing all his tips and tricks on CSS Tricks on how to create a certain design or style an element a certain way.</p><p>In this down to earth podcast you will listen to the two hosts talking about all aspects of frontend development from configuring webpack, accessibility to understanding fonts and serverless architecture.</p><p>This podcast is a great source to learn something new, but at the same time get in a feel good mood, since the hosts is very pleasant to listen to and is also talking about developer life, family, training and other non development topics that results in a perfect combination and creating a balance.</p><h3>Podcast 2: Syntax.fm</h3><p>This podcast is the first frontend development podcast i’ve stumpled upon, and i’ve been listening to it every since. With podcast segments like Tasty Treats, potlocks and deep dive into different technologies like Gatsby, GraphQL and React you will find it inspirational og enjoyable. Wes Bos and Scott Tolinski, the two hosts of the podcast, is great communicators and always explain complex technologies in layman terms so all level of experience with frontend development can follow along.</p><p>If i should choose only one frontend development podcast that you should listen to, then this will be the one.</p><h3>Podcast 3: Real Talk Javascript</h3><p>John Papa, a known figure in the Angular community, and a expert in his field, is also hosting a podcast show. Real Talk Javascript often dives into technical challenges with eg. scaling an web application, using a design system, or integrating linters. John Papa often invites guest hosts with a great knowledge on the topic for the current episode and asking great interviewing questions. A great listen for you, if you also like frontend development podcast with a more technical approach.</p><h3>Podcast 4: Coding Blocks</h3><p>This show is not about frontend development, but software development in general. The three hosts is .net developers and often talks about broader and more generic topics in general spanding from software architecture, design patters to clean code and the way of a pragmatic programmer. Even though you may be a frontend developer, listening to these different technologies, techniques and paradigms of software development is a great source to expand your current knowledge set and hopefully get a broader and more general understanding in software development.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1f77b263a270" width="1" height="1" alt="">

4 Podcasts you want to listen to as a frontend developer

<figure><img alt="" src="https://cdn-images-1.medium.com/max/870/1*nc_c848oyl5XD4O9fS0-Pg.jpeg" /></figure><p>Chrome has has the majority of the global browser market share with over 64% based on <a href="https://gs.statcounter.com/browser-market-share">statscounter.com</a>. That marketshare is also reflected in my friends and colleagues usage of the browser, but i tend to see that the capability of the features in the browser is not used or is rarely used.</p><p>Chrome and Chrome DevTools has been an essential tool in my toolbelt for as long as i remember. I’ve improved my development workflow in Chrome DevTools and expanded my toolbelt with these tips resulting in an overall productivity and efficiency. I find that these tips i’m sharing is something that keeps coming back whenever i help someone out, or something i’ve found really useful or is using on a daily basis.</p><h4>Tip 1: Disable Cache</h4><p>If you clear the cache rarely, then holding down the refresh button next to linkbar and press <em>Empty Cache and Hard Reload </em>is in my opinion the preferred way. If you need to clear the cache every time you refresh the site to make sure that the content displayed is up to date, then i think you will benefit from disable the cache in Chrome DevTools.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/480/1*u5Zqz3iGrlkMJCVy3fiVHA.gif" /></figure><p>To do that you need to open <em>Chrome Developer Tools -&gt; Network tab -&gt; Disable Cache</em>. You find the disable Cache checkbox option right below the network tab. Remember that you are only disabling the cache when the Chrome DevTools is open. Now you can just reload the page, and the cache will be cleared in the browser.</p><h4>Tip 2: Blackboxing files</h4><p>Whenever i debug some code written in a frontend framework like Angular or a library like jQuery, i often step through some of the core files of the framework/libraries which i don’t want to pollute my debugging process. That means in order to debug 2 different custom javascript files, i have to jump into 5 core angular files controlling the rendering of elements in angular components, or how lifecycle hooks is defined behind the scene. Not ideal!</p><p>To solve this issue, you can right click on the file you want to ignore and press ‘blackbox script’. Now this file won’t be called when you debug your application. If you have an exception occurring in a blackboxed file, then it will not be skipped.</p><p>If you want to blackbox multiple files at once you can press f1 or the three dots in top right corner in DevTools and go to ‘Settings’.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/708/1*nHTpD2HxmX81PkefJck1PQ.gif" /></figure><p>Then press Blackboxing in left menu, and press the ‘Add Pattern’ button. Now you should be able to insert a regex that can target your desired files to blacklist.</p><h4>Tip 3: Unminify files</h4><p>I find this tip useful for people who still is copying all the minified content of a file into an editor and unminify the content there. To unminify the content in Chrome DevTools, look right below the content of the file in the first toolbelt.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/706/1*ixudELQ2vcQj1HMWb_OwRg.gif" /></figure><p>You will find 2 curly brackets on left side with a hover text ‘Pretty Print’. Click that button and all the content will be unminified.</p><h4>Tip 4: box-shadow editor / cubic-bezier editor</h4><p>Visualising how certain style will be applied to an element, can sometimes be difficult. For a developer that is also working as a designer, you are perhaps tweaking the code by 1 pixel to get just the design you want. When working with box shadows, multiple variables can make that styling of the property difficult and also very time consuming. If you at the same time dont have Hot Module Reloading or live reloading, then the amount of time spend is very high.</p><p>Chrome DevTools has this built in editor for box shadows that is just amazing!</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/369/1*IuUYnWRHEufJi97pgFWisw.gif" /></figure><p>If you press the box next to the values, you have a live editor you can use and see the styling being applied to your element live. Pretty awesome.</p><p>This concept of live editor is also used when applying an easing function to a transition.<br>As you see below, you can tweak the easing function for how the animation should occur. The purple ball sliding horizontal across the editor demonstrates how the animation looks based on your customization.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/378/1*RHTdjSLANGzdfMACQy-sXw.gif" /></figure><h4>Tip 5: Debug animations</h4><p>If you have an animation on you site or on another site where you want to inspect how to animation is, then DevTools also have a tool for that. In the GIF below you have a tab inside DevTools where you can rerun animations, slow down to 25%, 10% of total duration and also differentiate between the different animations occuring on the site. You can also see the properties used in the animation. On <a href="https://kasperdue.com">my website</a> i use opacity and transform properties to animate my logo. You can see below that the element affected, and how the easing function occurs. Useful tool if you have a more complex animation on your site, and you want to slow down the animation and make sure the timing/coordination is pixel perfect.</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/775/1*vIVBulwmK7YcI9yJbUI64g.gif" /></figure><h4>Endnotes</h4><p>Although many of these tips is pretty basic, i hope that you have found some of them useful or at least learned something new. If you have any tip that you find useful in your daily development workflow, the please share in the comment section below.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=e2e4f722d53" width="1" height="1" alt="">

5 tips to improve your development workflow with Chrome DevTools

<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Fp-pxzENpWhf3nVJG2RNRw.jpeg" /></figure><p>Whenever i am reading a blog post or an article online, I find the user experience improved when i see a progress bar at top of the page indicating how much content has been read and how much is left to read.</p><p>Since I’m launching my own blog, I wanted to write a blog post describing how I’ve implemented this component with React and Styled Components. You should see the component in action by looking at the top of this page in the blog post found on my site <a href="https://kasperdue.com"><strong>kasperdue.com</strong></a></p><p>I’ve deployed the component to NPM with the name <a href="https://www.npmjs.com/package/read-progressbar"><strong>read-progressbar</strong></a><strong>, </strong>so feel free to use it and comment on how i can improve it!</p><h4>Step 1: Track scroll position and extract the height and the top values on our target container.</h4><p>The amount of progress shown in the progress bar will be determined by the amount of scrolling we have done inside the container we want to track.<br>My post is wrapped in a container which contains the height value and the top value we will need in order to calculate how much of the content we have read.</p><p>I’ve created a component called <strong>ReadProgressBar</strong> where you will pass a ref to the component that you want to track the progress. Whenever the ref is passed, i attach <strong><em>trackScrollEvent</em></strong> function to the scroll event on the window object.</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/0f5d525f3661b5f741889f229939193e/href">https://medium.com/media/0f5d525f3661b5f741889f229939193e/href</a></iframe><p>The trackScrollEvent function will calculate the amount of scrolling done on the screen with the containers position as a context. We will use the <strong><em>getBoundingClientRect </em></strong>property of an element which will return CSS border boxes associated with the element. This will be useful, because we need the top and height value to calculate the progress.</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/acd821262ae79131d092dbd636d55efe/href">https://medium.com/media/acd821262ae79131d092dbd636d55efe/href</a></iframe><p>We will then take the innerHeight of the window object to determine when the end of the container has been reached. If we are scrolling and the top of the container is off screen at the top, then the top value will have a negative value, and then we know if the progress should occur. We then subtract the window height from the container height and divide it with the top value and multiply it all with 100 to get a percentage value.</p><h4>Step 2: Pass progress to component and animate the translateX property in style attribute</h4><p>The Bar component will start with a width of 100% and a translateX value of -100%. We do not want to animate the width value due to performance issues, so instead we will animate the translateX value and slide it in from the side based on the progress. We will also hide the progress bar if the target container is not in the view yet.</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/078f290e45c8b52694acd797f7bb0356/href">https://medium.com/media/078f290e45c8b52694acd797f7bb0356/href</a></iframe><p>To get a smooth animation when the progress is increased or decreased we will apply <strong><em>transition: .1s ease</em></strong> to the style properties, and we will apply <strong><em>will-change: transform;</em></strong> property to tell the browser which property we are going to animate.</p><p>That is all! We can now import this component into our sites and pass a ref to it and see the magic happen in the top of our pages. I’ve extended the component so we can pass a color<em> </em>property to style the progress bar, and a background color property to change the background of the container.</p><p>You can find the source code for the component on Github <a href="https://github.com/kasperduen/read-progressbar">here</a>. Feel free to comment or send a message on how i can improve the code, or a different approach to improve the overall quality.</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=6cfb69f30373" width="1" height="1" alt="">

Posts

Take your Typescript skills to the next level with Utility Types

16 October 2020

5 ressources to easily find or create your next CSS background

11 October 2020

What happened to the Marquee HTML element?

4 August 2020

Control rendering with React Memo

2 August 2020

4 Podcasts you want to listen to as a frontend developer

19 March 2020

5 tips to improve your development workflow with Chrome DevTools

9 February 2020

How to create a reading progress bar with React and Styled Components

1 February 2020