<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Trevor Lasn</title>
    <description>The latest articles on Forem by Trevor Lasn (@trevorlasn).</description>
    <link>https://forem.com/trevorlasn</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F84003%2F0537155f-954c-412d-b84f-19106c0e75ad.jpg</url>
      <title>Forem: Trevor Lasn</title>
      <link>https://forem.com/trevorlasn</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/trevorlasn"/>
    <language>en</language>
    <item>
      <title>Here Are 7 Fun, Yet Challenging Front-End Ideas You Can Code </title>
      <dc:creator>Trevor Lasn</dc:creator>
      <pubDate>Thu, 11 Mar 2021 16:32:36 +0000</pubDate>
      <link>https://forem.com/trevorlasn/here-are-7-fun-yet-challenging-front-end-ideas-you-can-code-2k3b</link>
      <guid>https://forem.com/trevorlasn/here-are-7-fun-yet-challenging-front-end-ideas-you-can-code-2k3b</guid>
      <description>&lt;p&gt;Programming is a difficult thing to master. I found one of the best ways to master programming is simply building as much as you can. Hard work pays off - especially with programming.&lt;/p&gt;

&lt;p&gt;If you're new to these articles, they serve more or less as a source of inspiration. Pick a challenge that makes you excited to code and get on with building it.&lt;/p&gt;

&lt;p&gt;You can use any tools you like for the challenges. So if you've got something you'd like to practice, feel free to give it a go.&lt;/p&gt;

&lt;p&gt;If you're in a hurry and never want to run out of coding ideas - &lt;a href="https://gumroad.com/l/IuqKc" rel="noopener noreferrer"&gt;I've compiled a list of over 100 challenges here.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note: Please check out the original sources for the challenges as well. &lt;/p&gt;

&lt;p&gt;Without further ado, here are the challenges!&lt;/p&gt;




&lt;h3&gt;
  
  
  1. "Tabbar animations"- Built with only CSS
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6gwcwceoc9838qt2g9w.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fh6gwcwceoc9838qt2g9w.gif" alt="Alt Text" width="750" height="446"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A beautiful-looking tab that animates the icons when you hover or click them. Pay extra attention to the small animations. &lt;/p&gt;

&lt;p&gt;"Tabbar animation - Only CSS" - By Milan Raring&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://codepen.io/milanraring/pen/qBEPzKB" rel="noopener noreferrer"&gt;https://codepen.io/milanraring/pen/qBEPzKB&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the Tabbar animations&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to use advanced CSS concepts such as transforms, animations, transitions, etc.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  2. Crowdfunding product page
&lt;/h3&gt;

&lt;p&gt;Code the crowdfunding product page and get it looking as close to the design as possible. Check out the challenge page here for more details and instructions. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5cilqgbzvr7tkweo7wqh.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5cilqgbzvr7tkweo7wqh.jpeg" alt="Alt Text" width="800" height="586"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;"Crowdfunding product page"&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://www.frontendmentor.io/challenges/crowdfunding-product-page-7uvcZe7ZR" rel="noopener noreferrer"&gt;https://www.frontendmentor.io/challenges/crowdfunding-product-page-7uvcZe7ZR&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the crowdfunding product page&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;See the number of total backers increment by one after confirming a pledge.&lt;/li&gt;
&lt;li&gt;Toggle if the product is bookmarked or not.&lt;/li&gt;
&lt;li&gt;CSS hover states for interactive components.&lt;/li&gt;
&lt;li&gt;CSS and HTML for creating a silky smooth layout.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  3. "CSS Adventure Pack"
&lt;/h3&gt;

&lt;p&gt;We're headed back to school -  Coding school that is. Check out this awesome adventure pack Braydon Coyer made with only using CSS.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frtjdt5rbs87ewj7lutvy.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frtjdt5rbs87ewj7lutvy.png" alt="Alt Text" width="800" height="714"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;"CSS Adventure Pack" - By Braydon Coyer&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://codepen.io/braydoncoyer/pen/KKNRaKQ" rel="noopener noreferrer"&gt;https://codepen.io/braydoncoyer/pen/KKNRaKQ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the CSS adventure pack&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to use HTML and CSS to draw real-life objects.&lt;/li&gt;
&lt;li&gt;How to use CSS variables.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  4. Launch countdown timer
&lt;/h3&gt;

&lt;p&gt;We've all seen countdown timers. Why not build your own? Try building out the countdown timer and get it looking as close to the design as possible.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frg16hzo5r9zigw1nwfto.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Frg16hzo5r9zigw1nwfto.jpeg" alt="Alt Text" width="800" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;"Launch countdown timer"&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-" rel="noopener noreferrer"&gt;https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz-&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the launch countdown timer&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Countdown timer that ticks down every second&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Bonus Points: When a number changes, make the card flip from the middle.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  5. Substack reader clone
&lt;/h3&gt;

&lt;p&gt;Any Substack newsletter you subscribe to will automatically show up in the reader. If you want, you can add third-party RSS feeds, too.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7eknrbefquhnhmw576s5.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7eknrbefquhnhmw576s5.png" alt="Alt Text" width="800" height="397"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Note: The challenge is to only re-create the front-end layout. Use any dummy data as you see fit.&lt;/p&gt;

&lt;p&gt;Substack reader - &lt;a href="https://reader.substack.com/inbox" rel="noopener noreferrer"&gt;https://reader.substack.com/inbox&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the Substack reader clone&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to use CSS and HTML to re-create a modern-looking app.&lt;/li&gt;
&lt;li&gt;Bonus points: You can use any newsletter aggregator API to make it functional. &lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  6. Football (soccer) match scorecard component
&lt;/h3&gt;

&lt;p&gt;Try building out the football match scorecard and get it looking as close to the design as possible. Don't skip on the small details, such as CSS shadows and icons.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmbd23w37chxdmmdhr58m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmbd23w37chxdmmdhr58m.png" alt="Alt Text" width="800" height="511"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;"Football (soccer) match score component" - By Håvard Brynjulfsen&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://codepen.io/havardob/pen/MWKWZxZ" rel="noopener noreferrer"&gt;https://codepen.io/havardob/pen/MWKWZxZ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the Football (soccer) match scorecard component&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to use CSS and HTML in harmony to create a beautiful-looking card.&lt;/li&gt;
&lt;li&gt;Advanced CSS features such as shadows and variables.&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  7. Task Management UI
&lt;/h3&gt;

&lt;p&gt;Look at the beauty. Don't you wish all apps look as sweet as this one? Check out the working version here. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2e9qdy1t8aeof1brygl2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F2e9qdy1t8aeof1brygl2.png" alt="Alt Text" width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;"Task Management UI" - By Aaron McGuire&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://codepen.io/aaronmcg/pen/GRjaRva" rel="noopener noreferrer"&gt;https://codepen.io/aaronmcg/pen/GRjaRva&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the task management UI&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to craft beautiful applications with CSS, HTML, and JavaScript&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;Conclusion&lt;br&gt;
Thanks for reading. Happy coding!&lt;/p&gt;

&lt;p&gt;Looking for more coding ideas? Never run out of coding ideas, ever again. &lt;a href="https://gumroad.com/l/IuqKc" rel="noopener noreferrer"&gt;Get access here to a bunch of front-end challenges by me.&lt;/a&gt;&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>webdev</category>
      <category>challenge</category>
      <category>react</category>
    </item>
    <item>
      <title>Here’s Another List of Exciting Front-End Challenges</title>
      <dc:creator>Trevor Lasn</dc:creator>
      <pubDate>Mon, 08 Feb 2021 10:00:11 +0000</pubDate>
      <link>https://forem.com/trevorlasn/here-s-another-list-of-exciting-front-end-challenges-2dm</link>
      <guid>https://forem.com/trevorlasn/here-s-another-list-of-exciting-front-end-challenges-2dm</guid>
      <description>&lt;p&gt;Indrek here, and I’m back with another list of exciting challenges for all sorts of front-end developers. &lt;/p&gt;

&lt;p&gt;This article is more or less a source of inspiration. Pick something that makes you excited to code and get on with building it.&lt;/p&gt;

&lt;p&gt;Check out my profile for previous challenges. Or if you’re in a hurry and never want to run out of coding ideas — &lt;a href="https://gumroad.com/l/IuqKc" rel="noopener noreferrer"&gt;I’ve compiled a list of over 100 challenges here.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Without further ado, here are the challenges.&lt;/p&gt;




&lt;h2&gt;
  
  
  Glitchy Synthwave
&lt;/h2&gt;

&lt;p&gt;Glitchy synthwave is exactly what you hoped it to be. A “glitchy” synth-wave looking animation on a 10x10x grid.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fyki00pt8f76gs3bsxg47.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fyki00pt8f76gs3bsxg47.gif" alt="Alt Text" width="598" height="622"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codepen.io/georgedoescode/pen/XWNWeYP" rel="noopener noreferrer"&gt;“Glitchy Synthwave”&lt;/a&gt; by &lt;a href="https://codepen.io/georgedoescode" rel="noopener noreferrer"&gt;George Francis&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the Glitchy Synthwave:&lt;br&gt;
How to draw a 10x0 grid. Try using the new CSS grid for this.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to use CSS transforms, transitions, and animations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Check out the original code by George Francis if you’re unsure how to do this.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Job Recruiter Dashboard UI
&lt;/h2&gt;

&lt;p&gt;Job Recruiter Dashboard is a beautiful looking dashboard with all the necessities a tech recruiter might need.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcnj2jl43p9qtfwjydd8j.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcnj2jl43p9qtfwjydd8j.png" alt="Alt Text" width="800" height="455"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codepen.io/aybukeceylan/pen/poEqdWZ" rel="noopener noreferrer"&gt;“Job Recruiter Dashboard UI”&lt;/a&gt; — By &lt;a href="https://codepen.io/aybukeceylan" rel="noopener noreferrer"&gt;Aybüke Ceylan&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the Job Recruiter Dashboard UI:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to create beautiful charts with JavaScript and CSS. Pick any charting library you prefer. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to fetch data from API. Every dashboard has some data to display. You can use whatever source for your “dummy data”.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to put together a layout with CSS and HTML. Every application needs a base layout.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Card profile with statistics
&lt;/h2&gt;

&lt;p&gt;A simple, yet modern looking profile card with social media statistics, such as followers, likes, and photos. You can use “dummy” or hard-code the data for the profile card.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fykbglv1xw1zx6nqpw3gk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fykbglv1xw1zx6nqpw3gk.png" alt="Alt Text" width="800" height="715"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Card Original Source: &lt;a href="https://profile-card-component-main-liart-omega.vercel.app/" rel="noopener noreferrer"&gt;https://profile-card-component-main-liart-omega.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the card profile:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to create modern-looking social media cards.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Basic HTML &amp;amp; CSS.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Challenge by Frontend Mentor. Code by &lt;a href="https://www.youtube.com/CodingTube" rel="noopener noreferrer"&gt;David Ruiz.&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Plasma Animation
&lt;/h2&gt;

&lt;p&gt;"When energy is added to gas — you get plasma, ionized gas. It is the most common state of matter in the universe!&lt;/p&gt;

&lt;p&gt;Found in stars, interstellar nebulae, solar winds, fluorescent lamps, neon signs, lighting, and more! The electric glows and colors plasma often produces are awe-inspiring." — Codepen.io&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2ibe9bejfsu0e7doergj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2ibe9bejfsu0e7doergj.gif" alt="Alt Text" width="800" height="290"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://codepen.io/pen?template=jOMRMdQ" rel="noopener noreferrer"&gt;https://codepen.io/pen?template=jOMRMdQ&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the plasma animation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to create a “gassy” looking animation with CSS or JavaScript.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Interactive pricing component
&lt;/h2&gt;

&lt;p&gt;A craft looking slider you can drag around. Depending on the pageviews, the price reflects that.&lt;/p&gt;

&lt;p&gt;Notice the beautiful gradient background and shadows for the slider.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpi6arxbh98t1mll7lvjc.jpeg" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fpi6arxbh98t1mll7lvjc.jpeg" alt="Alt Text" width="800" height="444"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Source: &lt;a href="https://www.frontendmentor.io/challenges/interactive-pricing-component-t0m8PIyY8" rel="noopener noreferrer"&gt;https://www.frontendmentor.io/challenges/interactive-pricing-component-t0m8PIyY8&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the Interactive pricing component:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to create custom sliders. Notice the slider also makes use of box-shadows.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to use linear-gradients for creating beautiful and modern-looking backgrounds.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Glassmorphism Creative Cloud App Redesign
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7xhw0p6cy0j8tao7z1ka.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F7xhw0p6cy0j8tao7z1ka.png" alt="Alt Text" width="800" height="563"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://codepen.io/TurkAysenur/pen/ZEpxeYm" rel="noopener noreferrer"&gt;“Glassmorphism Creative Cloud App Redesign”&lt;/a&gt; — By &lt;a href="https://codepen.io/TurkAysenur" rel="noopener noreferrer"&gt;Aysenur Turk&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;There is a new style and it’s gaining traction in popularity. Glassmorphism most defining characteristics are the following:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Transparency (frosted-glass effect using a Background Blur)&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Multi-layered approach with objects floating in space&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Vivid colors to highlight the blurred transparency&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;A subtle, light border on the translucent objects. &lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;— &lt;a href="https://uxdesign.cc/glassmorphism-in-user-interfaces-1f39bb1308c9" rel="noopener noreferrer"&gt;Source&lt;/a&gt;&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;What you will learn by building the Glassmorphism Creative Cloud App Redesign:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to create Glassmorphismic style backgrounds.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;CSS and &amp;amp; HTMl for creating the layout.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  “Testimonials” with CSS grid
&lt;/h2&gt;

&lt;p&gt;We see this type of testimonials often on websites. Testimonials are a fun way to acquire trust with users, and possibly convert them into paying users.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9oks6n3o9jdr5lm72wem.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/cdn-cgi/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F9oks6n3o9jdr5lm72wem.png" alt="Alt Text" width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://determined-pare-f0b511.netlify.app" rel="noopener noreferrer"&gt;Preview&lt;/a&gt; — Code by &lt;a href="https://www.frontendmentor.io/profile/JakubKepak" rel="noopener noreferrer"&gt;Vincent Frank&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;What you will learn by building the “Testimonials” with CSS grid:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to use the new CSS Grid.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Basic HTML and CSS.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Before you go
&lt;/h2&gt;

&lt;p&gt;Thanks for reading! Happy coding. I’m always ready to have fun conversations on &lt;a href="https://twitter.com/lasnindrek" rel="noopener noreferrer"&gt;Twitter&lt;/a&gt;. &lt;/p&gt;

&lt;p&gt;Looking for more coding ideas? Never run out of coding ideas, ever again. &lt;a href="https://gumroad.com/l/IuqKc" rel="noopener noreferrer"&gt;Get access here to a bunch of front-end challenges by me.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Keep me in the loop about how you’re doing with the coding challenges  —  Maybe I can offer some help or advice.&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>programming</category>
      <category>webdev</category>
      <category>challenge</category>
    </item>
    <item>
      <title>8 Frontend Coding Ideas That Will Inspire You To Code</title>
      <dc:creator>Trevor Lasn</dc:creator>
      <pubDate>Fri, 22 Jan 2021 09:46:48 +0000</pubDate>
      <link>https://forem.com/trevorlasn/8-frontend-coding-ideas-that-will-inspire-you-to-code-4ok8</link>
      <guid>https://forem.com/trevorlasn/8-frontend-coding-ideas-that-will-inspire-you-to-code-4ok8</guid>
      <description>&lt;p&gt;Indrek here. Mastering programming is hard. There are no shortcuts. It involves putting in tons of work. You’ll have to code as often as possible to get good at it.&lt;/p&gt;

&lt;p&gt;Use each idea in this article as a source of inspiration. Pick something that makes you excited to code and get on with building it.&lt;/p&gt;

&lt;p&gt;Use whatever tools or programming language you prefer. I’ll also include what you’ll learn by building each idea.&lt;/p&gt;

&lt;p&gt;Check out my profile for previous challenges. Or if you’re in a hurry and never want to run out of coding ideas — &lt;a href="https://gumroad.com/l/IuqKc" rel="noopener noreferrer"&gt;I’ve compiled a list of over 100 challenges here.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Without further ado, here are today’s coding ideas.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;This article was originally published here: &lt;a href="https://thewholesome.dev/p/8-frontend-coding-ideas-that-will" rel="noopener noreferrer"&gt;https://thewholesome.dev/p/8-frontend-coding-ideas-that-will&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  1. Animated Menu Tab Bar
&lt;/h2&gt;

&lt;p&gt;This is a 60 FPS fluid header with animations between switching tabs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2kt4z6656j5ls3br1j7e.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2kt4z6656j5ls3br1j7e.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Animated Tab Bar by abxlfazl khxrshidi.&lt;/p&gt;

&lt;p&gt;You can either use CSS animations or JavaScript to achieve the smooth 60 FPS animations.&lt;/p&gt;

&lt;p&gt;What you will learn by building the animated menu tab bar&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to use HTML, CSS, and JavaScript in harmony to recreate the menu.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to work with SVGs, CSS animations, and combining both.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  2. Cyberpunk 2077-Themed Buttons
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5gz9w1lcpb4vp0sox67v.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5gz9w1lcpb4vp0sox67v.gif" alt="Alt Text"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;Pure CSS Cyberpunk 2077 Buttons 😎 by Jhey.&lt;/p&gt;

&lt;p&gt;Beautiful Cyberpunk-style buttons. Notice the hover effect. Try to recreate it. Check out the original if you’re unsure how to do that.&lt;/p&gt;

&lt;p&gt;What you will learn by building the Cyberpunk 2077 buttons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to use CSS variables, keyframes, and clip-paths.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to create complex hover animations.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  3. Chessboard With Chess Pieces
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fiz71wfbn8u6u9q1adrth.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fiz71wfbn8u6u9q1adrth.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Cheap AI Chess! by Jake Albaugh.&lt;/p&gt;

&lt;p&gt;Interest in chess has skyrocketed after the success of The Queen’s Gambit, a drama miniseries based on Walter Tevis’s 1983 novel. I highly recommend watching it if you haven’t already!&lt;/p&gt;

&lt;p&gt;Bonus points: Make the chessboard interactive.&lt;/p&gt;

&lt;p&gt;What you will learn by building the chessboard: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to create an 8x8 grid. Try using CSS Grid for that.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Hand-carving the chess pieces with CSS.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Bonus: Make it interactive with JavaScript!&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  4. Project Management Dashboard UI
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgp5co7b394r5rjhr9pnw.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fgp5co7b394r5rjhr9pnw.png" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Project Management Dashboard UI by Aybüke Ceylan.&lt;/p&gt;

&lt;p&gt;This is a dashboard for project management purposes. Monitor projects and chat with clients.&lt;/p&gt;

&lt;p&gt;What you will learn by building the project management dashboard UI: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Building clean UIs with CSS and HTML.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to use WebSockets to create the chat.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  5. Neumorphic Animation
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fh1wj3o82a8960xft84sj.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fh1wj3o82a8960xft84sj.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Neumorphism_animation by masuwa.&lt;/p&gt;

&lt;p&gt;“Neumorphism (or Neo-skeuomorphism) is a modern iteration of a style of designing web elements, frames, screens, etc.” — GitHub&lt;/p&gt;

&lt;p&gt;What you will learn by building the neumorphic animation:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;How to create smooth animations with CSS and HTML.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  6. HTML Earth
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F561zpk1wm64hr06kbchs.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F561zpk1wm64hr06kbchs.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;HTML Earth (Made with LUME) by Joe Pea.&lt;/p&gt;

&lt;p&gt;Let’s recreate the Earth! By the way, did you notice the moon’s shadow on the Earth’s surface when it passes in front of the sun?&lt;/p&gt;

&lt;p&gt;What you will learn by building the HTML Earth:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to use the LUME library. According to GitHub, LUME is “a toolkit that simplifies the creation of rich and interactive 2D or 3D experiences for any device from mobile to desktop to AR/VR.”&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to create 2D and 3D objects with HTML, CSS, and JavaScript.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  7. Fluid Tabs With Animations
&lt;/h2&gt;

&lt;p&gt;Just look at this beauty. Notice the small details every time you change tabs.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmxc9vxd5ncx800woaacs.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fmxc9vxd5ncx800woaacs.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Tabbar by Aaron Iker.&lt;/p&gt;

&lt;p&gt;What you will learn by building the fluid tabs with animations&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;CSS transform for 60 FPS animations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to create complex animations with CSS or JavaScript. It’s up to you!&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  8. Cup of Water
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fv6qtg0q8y9b51yhymncz.gif" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fv6qtg0q8y9b51yhymncz.gif" alt="Alt Text"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A cup of Water by Zane Wesley&lt;/p&gt;

&lt;p&gt;This makes me want to drink water. Grab a sip before you start solving this challenge.&lt;/p&gt;

&lt;p&gt;What you will learn by building the cup of water&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;How to use CSS to create smooth 60FPS animations.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;How to use CSS transform and pseudo-selectors.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Looking for more coding ideas? Never run out of coding ideas, ever again. &lt;a href="https://gumroad.com/l/IuqKc/devto-25" rel="noopener noreferrer"&gt;Get access here to a bunch of front-end challenges by me.&lt;/a&gt; (-25% off for dev.to users)&lt;/p&gt;

&lt;p&gt;Thanks for reading and happy coding!&lt;/p&gt;

</description>
      <category>javascript</category>
      <category>frontend</category>
      <category>challenge</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Things I Wish I Knew Before I Started Coding</title>
      <dc:creator>Trevor Lasn</dc:creator>
      <pubDate>Tue, 29 Dec 2020 12:49:10 +0000</pubDate>
      <link>https://forem.com/trevorlasn/things-i-wish-i-knew-before-i-started-coding-2n7n</link>
      <guid>https://forem.com/trevorlasn/things-i-wish-i-knew-before-i-started-coding-2n7n</guid>
      <description>&lt;h4&gt;
  
  
  This article was originally published here: &lt;a href="https://thewholesome.dev/p/things-i-wish-i-knew-before-i-started" rel="noopener noreferrer"&gt;https://thewholesome.dev/p/things-i-wish-i-knew-before-i-started&lt;/a&gt;
&lt;/h4&gt;

&lt;p&gt;Coding has been an overall positive experience in my life. It tremendously nurtured my ability to think deeply about problems.&lt;/p&gt;

&lt;p&gt;Programming also taught me to break down problems into solvable and digestible chunks.&lt;/p&gt;

&lt;p&gt;Here’s what I’d tell my younger self. Use my thoughts and advice to your advantage.&lt;/p&gt;

&lt;h3&gt;
  
  
  It’s OK to Ask for Help
&lt;/h3&gt;

&lt;p&gt;Programming is extremely challenging at times— especially when starting. Don’t feel bad about asking for help.&lt;/p&gt;

&lt;p&gt;Having reliable and friendly coworkers whom you can always ask for support and vice versa. This makes for a great work environment.&lt;/p&gt;

&lt;p&gt;A great team is open to exchanging thoughts and problems, as well as solutions too.&lt;/p&gt;

&lt;h3&gt;
  
  
  Learn to Say “No” More Often — Know Your Limits
&lt;/h3&gt;

&lt;p&gt;Coding is all about solving problems as efficiently and swiftly as possible. It’s easy to overcommit and underestimate how long things will take.&lt;/p&gt;

&lt;p&gt;Don’t spread yourself out too thin — it’s nice to meet deadlines and finish projects on time. As a general rule of thumb— underpromise and overdeliver.&lt;/p&gt;

&lt;p&gt;Put your feet down, and learn to say no often. But still, keep an ear open for good ideas (you never know).&lt;/p&gt;

&lt;p&gt;Some of the best ideas started undoubtedly as crazy ideas — for example, take Airbnb.&lt;/p&gt;

&lt;p&gt;When the founders started, it seemed like a terrible idea.&lt;/p&gt;

&lt;p&gt;You want to invite strangers to your home to sleep on an air-filled mattress and serve them breakfast? What sounded crazy turned out great for them.&lt;/p&gt;

&lt;h3&gt;
  
  
  Take Short Breaks to Recharge and Avoid Burnouts
&lt;/h3&gt;

&lt;p&gt;This is something I struggle with a lot. I have the urge to work day and night.&lt;/p&gt;

&lt;p&gt;I realized this is not a sustainable lifestyle. It took me a couple of burnouts to finally fix this.&lt;/p&gt;

&lt;p&gt;I’ve come to terms with myself, and I’ve allowed myself to take breaks on Saturday and Sunday.&lt;/p&gt;

&lt;p&gt;Saturdays I’m allowed to work on side projects, while on Sundays I’m not even allowed to open the code editor.&lt;/p&gt;

&lt;p&gt;It’s a marathon, not a sprint.&lt;/p&gt;

&lt;p&gt;People have been programming for decades — there are no shortcuts to becoming great. It takes a long, long time to become proficient and confident.&lt;/p&gt;

&lt;p&gt;P.S; If you’re into startups; &lt;a href="https://www.startupscrushing.com/" rel="noopener noreferrer"&gt;check out my newsletter about early-stage startups.&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Here’s a warm intro, say hi &lt;a href="https://twitter.com/lasnindrek" rel="noopener noreferrer"&gt;@lasnindrek&lt;/a&gt;&lt;/p&gt;

</description>
      <category>programming</category>
      <category>productivity</category>
      <category>career</category>
      <category>discuss</category>
    </item>
    <item>
      <title>What are the traits of a distinguished engineer?</title>
      <dc:creator>Trevor Lasn</dc:creator>
      <pubDate>Sat, 12 Dec 2020 17:02:29 +0000</pubDate>
      <link>https://forem.com/trevorlasn/what-are-the-traits-of-a-distinguished-engineer-22cj</link>
      <guid>https://forem.com/trevorlasn/what-are-the-traits-of-a-distinguished-engineer-22cj</guid>
      <description>&lt;p&gt;&lt;strong&gt;This article was originally published here: &lt;a href="https://thewholesome.dev/p/traits-of-a-distinguished-software" rel="noopener noreferrer"&gt;https://thewholesome.dev/p/traits-of-a-distinguished-software&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;Software engineering, also identified as the art of finding elegant solutions to complex problems. Software engineers are code crafters who create art with their minds. This conjures the question—What makes someone good at their craft?&lt;/p&gt;

&lt;p&gt;Honestly, there are no right or wrong answers here. What is a good software engineer? — it’s subjective and up for anyone to interpret. But, there are some qualities we collectively appreciate in an engineer.&lt;/p&gt;

&lt;p&gt;Here are my personal views on what makes someone an excellent engineer and a great person to work with.&lt;/p&gt;

&lt;p&gt;I welcome any additional qualities you love to see in engineers in the comments.&lt;/p&gt;




&lt;h2&gt;
  
  
  You’re fun to work with
&lt;/h2&gt;

&lt;p&gt;Imagine the following scenario: You published a new pull request yesterday. The pull request was a new feature.&lt;/p&gt;

&lt;p&gt;The next morning— you feel good and feel ready to crush the day. &lt;/p&gt;

&lt;p&gt;You open up the GitHub repository and hope for a smooth merge. But that doesn’t happen.&lt;/p&gt;

&lt;p&gt;Your teammate is nit-picking on your variable naming, semi-colon insertions, and other trivialities—while completely ignoring the feature you implemented without any issues or bugs.&lt;/p&gt;

&lt;p&gt;Don’t be the guy to pester your teammates with trivialities. Use a linter or prettier to agree on code standards.&lt;/p&gt;

&lt;p&gt;The before-mentioned tools let teams agree on a standard while maintaining coding flavor.&lt;/p&gt;

&lt;p&gt;Being a fun person to work with is absolutely crucial to being a great software engineer. &lt;/p&gt;

&lt;p&gt;Many engineers think that their code speaks for themselves. While we all appreciate great code—don’t be a jerk! Especially if you’re more experienced. &lt;/p&gt;

&lt;p&gt;A great engineer should be fun to work with, non-lethargic, and ready to take on challenges. &lt;/p&gt;

&lt;p&gt;No matter how technically brilliant you are—you’ll always be limited by your ability to communicate. Make your life easier by being fun around and to work with.&lt;/p&gt;

&lt;p&gt;“A rational person can find peace by cultivating indifference to things outside of their control.” — Naval Ravikant&lt;/p&gt;




&lt;h2&gt;
  
  
  Ability to Teach and Learn
&lt;/h2&gt;

&lt;p&gt;Having the ability to lift your teammates is invaluable.&lt;/p&gt;

&lt;p&gt;You might be extremely proficient in X, while your teammate might be experienced in Y. &lt;/p&gt;

&lt;p&gt;The ability to exchange knowledge and thoughts is often underlooked during interviews. Great teams put their minds together. Greater problems require great teams.&lt;/p&gt;

&lt;p&gt;If you want to become a great engineer, you should be able to averse your ego and status in the hierarchy.&lt;/p&gt;

&lt;p&gt;Wise senior engineers will often tell you they learn new things from junior engineers all the time. Junior engineers are eager to prove themselves.&lt;/p&gt;

&lt;p&gt;Junior engineers follow the latest unproven tools and programming trends.&lt;/p&gt;

&lt;p&gt;A wise engineer considers and accepts any information from any source. Leave your dogmas at the door.&lt;/p&gt;

&lt;p&gt;Amazing developers who lack team skills stagnate in roles. Be ready to be the master, and the student the other day.&lt;/p&gt;




&lt;h2&gt;
  
  
  Not Giving Up When Things Get Hard — Be Willing to Put the Hours In
&lt;/h2&gt;

&lt;p&gt;It’s a matter of time until you’ll face a challenge that shocks and overwhelms you. &lt;/p&gt;

&lt;p&gt;You ask yourself the following: “I have to do what?! That’s impossible!” &lt;/p&gt;

&lt;p&gt;Stay calm, don’t panic.&lt;/p&gt;

&lt;p&gt;I can affirm this is all part of the ride of software engineering.&lt;/p&gt;

&lt;p&gt;Feeling overwhelmed is a vigorous thing— it’s how we evolve. &lt;/p&gt;

&lt;p&gt;To grow, we have to face new and harder challenges — it’s the best method. &lt;/p&gt;

&lt;p&gt;When the time comes, don’t be afraid to take the giant leap forward.&lt;/p&gt;

&lt;p&gt;As with any skill, you have to put in the hours. If it’s worth doing, it’s worth doing great. Don’t just do things for the sake of it, do it because you want to show everyone how great your work is. &lt;/p&gt;

&lt;p&gt;If you’re asked to do X— do it with meticulous care plus do more than asked. Over-deliver and under-promise.  &lt;/p&gt;

&lt;p&gt;A reliable method for getting good at coding is putting in the hours. Build stuff, build anything, just build it. If you lack creativity—I have coding challenges, search for them on my profile.&lt;/p&gt;




&lt;h2&gt;
  
  
  Taking Ownership and Beyond
&lt;/h2&gt;

&lt;p&gt;If artisans take ownership and treat their code as if it belongs to them personally — they will take special care and consideration.&lt;/p&gt;

&lt;p&gt;Small teams inside a big company can quickly lose the ownership feeling. That’s why Google wants small and independent teams for their products. They're being smart.&lt;/p&gt;

&lt;p&gt;Here’s a simple protip: Treat the codebase as if the next person to deal with it will be a serial killer who knows where you live.&lt;/p&gt;

&lt;p&gt;Jokes aside— ownership is a powerful concept. If you're given a task, treat that task as it serves you directly.&lt;/p&gt;

&lt;p&gt;You want to work in a well-known company, that changes the world for the better and leaves a dent in the universe. By taking ownership and responsibility for your actions— you’re putting yourself on the radar for those types of teams.&lt;/p&gt;




&lt;p&gt;🏁 Enjoy This?&lt;/p&gt;

&lt;p&gt;Forward it to a friend, and let them know they can subscribe for free future releases &lt;a href="https://thewholesome.dev/welcome" rel="noopener noreferrer"&gt;here.&lt;/a&gt;&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>productivity</category>
      <category>career</category>
    </item>
    <item>
      <title>Here Are 8 Questions You Should Ask Your Employer Before Taking the Job</title>
      <dc:creator>Trevor Lasn</dc:creator>
      <pubDate>Tue, 08 Dec 2020 19:48:20 +0000</pubDate>
      <link>https://forem.com/trevorlasn/here-are-8-questions-you-should-ask-your-employer-before-taking-the-job-5c9o</link>
      <guid>https://forem.com/trevorlasn/here-are-8-questions-you-should-ask-your-employer-before-taking-the-job-5c9o</guid>
      <description>&lt;p&gt;This article was originally published at &lt;a href="https://thewholesome.dev/p/here-are-8-questions-you-should-ask" rel="noopener noreferrer"&gt;https://thewholesome.dev/p/here-are-8-questions-you-should-ask&lt;/a&gt; &lt;/p&gt;




&lt;p&gt;Working as a developer is a lot of fun — you get to solve challenging and complex tasks every day. Oh, and the pay is okay too.&lt;/p&gt;

&lt;p&gt;Often, your team consists of smart developers who are eager to solve the tasks as a team. Great teammates are crucial when working on larger projects, and so is the environment you work in. &lt;/p&gt;

&lt;p&gt;You don’t want to burn out in two weeks — ideally, you want to work there for years to fully see the project flourish.&lt;/p&gt;

&lt;p&gt;Finding the right developer job can be tricky since there are a lot of crappy jobs out there. A crappy developer job will you make unhappy, depressed, and unfilled — It’s a rough road you would want to avoid.&lt;/p&gt;

&lt;p&gt;Thus, I put together a list of questions you should ask your employer before taking on the job. These questions will give you a rough estimation of how much you’ll be appreciated by the company.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. How Often Do You Work Evenings and Weekends?
&lt;/h2&gt;

&lt;p&gt;A simple yet important question — this tells you if they respect work-life balance or not. You might have a life outside of work, or you might have a dog, wife, and kids that you’re looking forward to being with.&lt;/p&gt;

&lt;p&gt;If your employer doesn’t respect your work-life balance, you have hot potatoes in your lap.&lt;/p&gt;

&lt;p&gt;If you’re in your 20s, this might not be as big of a red flag, but the older you get, the more you’re going to appreciate this. &lt;/p&gt;

&lt;p&gt;Remember, no company is loyal to its employees — it’s a hoax. The company is there to make money. That’s their ultimate goal, and they’ll do whatever it takes, including working you to death. You have to fight for your freedom.&lt;/p&gt;

&lt;p&gt;If you have the chance, ask another developer on the team this question. The more they beat around the bush, the more overworked they are. If you’re not getting honest and forthright answers, assume they’re not telling you the truth.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. What’s the Average Turnover Rate?
&lt;/h2&gt;

&lt;p&gt;The turnover rate refers to the percentage of employees leaving a company within a certain period of time. Companies keep track of their average tenure —it’s a measurement for them to understand their workforce better.&lt;/p&gt;

&lt;p&gt;Firing people is expensive — it’s the last thing a company wants to do. Let’s say you’re about to work on a massive project, and if there are only two core developers left out of 25, that’s a huge red flag.&lt;/p&gt;

&lt;p&gt;With limited information, you have to figure out why so many developers left the project. &lt;/p&gt;

&lt;p&gt;Does the interviewer provide you with a reasonable explanation of why so many people left in a flurry? If they tell you they don’t know the answer, assume they're not being honest, unless it’s a startup at a really early-stage.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. What’s a Typical Day Like in This Position?
&lt;/h2&gt;

&lt;p&gt;This question gives the interviewer the opportunity to talk about the best bits of the job — and if they don’t open up and start talking out of delight, something might be off.&lt;/p&gt;

&lt;p&gt;Really, there are no right or wrongs here. I worked for a company where we all watched “South Park” during lunch breaks. At a different startup, we went swimming near the lake during lunch.&lt;/p&gt;

&lt;p&gt;Each company has a different culture, and this question gives you the chance to clear things up and see if you’re potentially a good match for the company and vice versa.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. How Have You Supported Developer Professional Development in the Past?
&lt;/h2&gt;

&lt;p&gt;If you’re just starting out, you really want a team that will allow time for a senior dev to mentor you as you’re completing your work. This is expected of more experienced developers, and you should try to find a place that values this type of mentorship. &lt;/p&gt;

&lt;p&gt;If they’re a company that will just throw you to the wolves for your tasks, it’s probably best to skip them, unless you thrive in those types of environments.&lt;/p&gt;

&lt;p&gt;Every decent company that wants to retain its talent should work very hard on educating its junior ranks while letting the more experienced developers explore different paths. &lt;/p&gt;

&lt;p&gt;Traveling for developer conferences, coding courses, guest speakers, and in-house conferences are great ways for developers to share their knowledge and learn new things. A great company will keep its developers by providing new and more challenging tasks.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Ask for a Tour Around the Office at the End
&lt;/h2&gt;

&lt;p&gt;Tours are important — they show initiative and that you’re interested and actually want the gig.&lt;/p&gt;

&lt;p&gt;Asking for a tour also gives you an exact image of what your future working environment looks like. If you get off the elevator and see everyone working shoulder to shoulder on pairs of tiny 19" monitors with barely enough room to move their mouse without hitting someone else’s keyboard — you’ve got a problematic employer.&lt;/p&gt;

&lt;p&gt;During the tour, and even when you first walk into the place, pay attention to the people. Are they happy? Smiling? Conversing? Or are they all miserable and have bags under their eyes? This is really telling of the workplace.&lt;/p&gt;

&lt;p&gt;If you’re not leaving the office with a big grin on your face the first day, chances are high you might never leave the building with a smile on your face.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. What’s the Best and Worst Thing About Working Here?
&lt;/h2&gt;

&lt;p&gt;This is my favorite question to ask in any sort of interview since it really turns the tables. It seems obvious, but I’ve had multiple recruiters have to stop and think about this one before giving me an answer.&lt;/p&gt;

&lt;p&gt;A perfect job doesn’t exist — every job has its ups and downs. It’s your task to find out the good and bad parts and decide for yourself.&lt;/p&gt;

&lt;p&gt;I remember asking this question from a chief operating officer (COO) in a medium-sized company, and the answer I got was very, very vague. It almost seemed like he was annoyed with the question, or he was just scared to say anything bad about the company.&lt;/p&gt;

&lt;p&gt;You guessed it — I didn’t take the job.&lt;/p&gt;

&lt;h2&gt;
  
  
  7. Ask Them to Describe Their Software Development Lifecycle (How Often Do They Release Code?)
&lt;/h2&gt;

&lt;p&gt;If they’re constantly trying to hit deadlines, have limited testing environments, don’t have automated tests, don’t have multi-tenancy, and have a horrific deployment process, then walk away.&lt;/p&gt;

&lt;p&gt;It sucks to work your butt off for six months only to be told, “Hey, scratch that, we’re not going to release the product.”&lt;/p&gt;

&lt;p&gt;Anger, disappointment, and resentment will follow, and you’ll start to reject ideas from the management team. After all, you worked nights and days only to be tossed aside. This is a downward spiral into unhappiness, unfulfillment, and probably switching companies.&lt;/p&gt;

&lt;p&gt;I’ve learned to ask what days they release their software on — if the answer is Fridays before the afternoon, you have a problem. &lt;/p&gt;

&lt;p&gt;Why would any company that makes money online make such critical changes during the hours when everyone has gone home and forgotten about their jobs?&lt;/p&gt;

&lt;p&gt;Most people have left the office already, and if things were to go wrong, there’s only a small fleet ready to handle the issue. A sensible company will push a newer version of their software when the people are in or near the office, not when they’re spending time with their families.&lt;/p&gt;

&lt;h2&gt;
  
  
  8. Ask About the Company’s Long Term Vision (What Are Your Plans for the Next Five Years?)
&lt;/h2&gt;

&lt;p&gt;This question gives the interviewer a chance to give you a clear view of the company's vision. Is the vision exciting and clear? Do you agree and align with that vision?&lt;/p&gt;

&lt;p&gt;You can usually tell when a company has a great vision. Even if it’s a startup. Usually, vision is what feeds people. A place with no vision often has a horrible culture and high turnover.&lt;/p&gt;

&lt;p&gt;You’re going to spend most of your life in that workplace and environment, and so it’s critical to be on board and agree as a collective about what you want to achieve.&lt;/p&gt;

&lt;p&gt;It’s very hard to hide the fact that you’re not passionate about the project and vision. So, save yourself the trouble and hassle if you’re just not feeling like that’s something you would want to do for the longterm. &lt;/p&gt;

&lt;p&gt;There are hundreds of thousands of developer jobs — pick the one that suits you the most. I would pick the job where I believe in the company’s vision over any other job, even one that pays double. Of course, don’t let the company take advantage of you. They should still offer competitive pay even if the vision is exciting.&lt;/p&gt;

&lt;p&gt;Conclusion&lt;br&gt;
Thanks for reading, I hoped you learned something new. After reading this article, you should be equipped with knowledge on how to find that exciting new job the next time you’re in the job market.&lt;/p&gt;

&lt;p&gt;Feel free to sign up to get future articles in your email inbox. &lt;a href="https://thewholesome.dev/" rel="noopener noreferrer"&gt;https://thewholesome.dev/&lt;/a&gt;&lt;/p&gt;

</description>
      <category>career</category>
      <category>productivity</category>
    </item>
    <item>
      <title>Coping with imposter syndrome</title>
      <dc:creator>Trevor Lasn</dc:creator>
      <pubDate>Tue, 08 Dec 2020 10:24:58 +0000</pubDate>
      <link>https://forem.com/trevorlasn/coping-with-imposter-syndrome-43dh</link>
      <guid>https://forem.com/trevorlasn/coping-with-imposter-syndrome-43dh</guid>
      <description>&lt;p&gt;There are two types of engineers: (1) Those who’ve experienced the infamous imposter syndrome and (2) those who won’t admit it. Imposter syndrome is extremely prevalent in the developer community.&lt;/p&gt;

&lt;p&gt;Imposter syndrome robs you out of confidence and joy. People suffering from imposter syndrome often feel like they’re not good enough to do the work they’re assigned to do.&lt;/p&gt;

&lt;p&gt;Are there cases where you feel at work that you’re not good enough? That’s imposter syndrome. Carrying this constant anxiety and dread ain’t easy.&lt;/p&gt;

&lt;p&gt;If this all is too familiar to you— this article is just for you. Here are ways to cope with imposter syndrome and eventually beat it. Hopefully, as a result, you’ll become a more confident and happier person.&lt;/p&gt;

&lt;h2&gt;
  
  
  Just Because It’s Hard Doesn’t Mean You’re Not Good at It
&lt;/h2&gt;

&lt;p&gt;Programming is hard. Like really, really hard. There, I’ve said it.&lt;/p&gt;

&lt;p&gt;I’m not a prodigy at coding, but I never gave up, and neither should you. Programming is humbling — there’s so much to know. Accept the fact that it’s not possible to know everything about everything when it comes to programming.&lt;/p&gt;

&lt;p&gt;We work better in teams. The more complicated the project, the bigger the team. Accept the fact that it’s not possible for you to know everything. Trust your teammates and have a support system in place.&lt;/p&gt;

&lt;p&gt;Why do we put so much burden on ourselves to know everything? This causes the inevitable cascade of imposter syndrome effects when we cringe at the whimsical job requirements.&lt;/p&gt;

&lt;h2&gt;
  
  
  Learn to Say No
&lt;/h2&gt;

&lt;p&gt;What do you say when a friend asks you to build the following?&lt;/p&gt;

&lt;p&gt;“It’s like Tinder, but for cats”&lt;/p&gt;

&lt;p&gt;You’d probably be wise to say no to that. How come we have such a difficult time doing that?&lt;/p&gt;

&lt;p&gt;It’s difficult to say no to a person who is excited about a project. Agreeable people tend to struggle with this more than less agreeable personalities.&lt;/p&gt;

&lt;p&gt;Saying no wakens up intensely negative emotions—embarrassment and guilt. We have to get over that and move on. We can’t work on every project.&lt;/p&gt;

&lt;p&gt;Knowing when to say ‘no’ is a skill. Like with all skills, it’s trainable and you’ll become better at it.&lt;/p&gt;

&lt;p&gt;You should always keep your ears open and be open to new ideas. Just learn to say no when you feel the time is not right or you’re already working on something.&lt;/p&gt;

&lt;p&gt;As a developer, we’re students for life, and we shouldn’t forget that.&lt;/p&gt;

&lt;p&gt;A decision-making framework: Here’s how I decide between a ‘no’ and a ‘yes’&lt;br&gt;
Here are a couple of questions that should reveal how you feel about a project and whether you’re tilting more toward a ‘no’ or a ‘yes.’&lt;/p&gt;

&lt;p&gt;Without lying to myself — Can I honestly commit to this project full-time for at least six months?&lt;/p&gt;

&lt;p&gt;What happens if I get bored or tired of the project? Am I able to continue and push through when things get tough?&lt;/p&gt;

&lt;p&gt;Am I getting paid? Do the bills get paid or do I have to live on previous savings?&lt;/p&gt;

&lt;p&gt;What happens if a co-founder leaves— Will the project die overnight? Who will be the captain if a storm approaches?&lt;/p&gt;

&lt;p&gt;Am I excited about the future of the project? Do I dream about the project and can’t stop writing code?&lt;/p&gt;

&lt;p&gt;I bet if you take the time and go through the questions, you’ll find some clarity as to what to do.&lt;/p&gt;

&lt;h2&gt;
  
  
  Exercise, Exercise, Exercise
&lt;/h2&gt;

&lt;p&gt;I’m a big advocate of consistent exercise routines. We’re not genetically born to live stationary lives.&lt;/p&gt;

&lt;p&gt;Imagine if you could buy only one car for the rest of your life — You would take good care of that car. You would change the tires and oil and bring it to maintenance more than you normally would, right?&lt;/p&gt;

&lt;p&gt;Well, if you agree with the above, think about this for a moment. We only get one body for the rest of our lives. Let me say that once more — one body, per life. That’s it, no refunds, no swaps, everyone has to deal with the cards they’re dealt with.&lt;/p&gt;

&lt;p&gt;We only get one body for the rest of our lives. It would be foolish to not maintain it.&lt;/p&gt;

&lt;p&gt;It doesn’t have to be a frenzy. Start small, but most importantly, start today. Like a well-known brand says, “Just do it.”&lt;/p&gt;

&lt;p&gt;Take the time to take care of your body and well-being.&lt;/p&gt;

&lt;p&gt;Remember middle school? Can you remember what your favorite sport was? Go and reignite your favorite game memories.&lt;/p&gt;

&lt;h2&gt;
  
  
  Become a Mentor, Teach Kids or Junior Developers
&lt;/h2&gt;

&lt;p&gt;When I started coding, I wished someone took me under their wing and showed me the way. I’m a self-taught programmer and I had no mentors to ask for help.&lt;/p&gt;

&lt;p&gt;Fortunately, I know English and have two programming buddies, Stackoverflow and Google.&lt;/p&gt;

&lt;p&gt;Teaching is humbling — there’s something about it that makes you appreciate what you’ve accomplished.&lt;/p&gt;

&lt;p&gt;If you're like me and your modus operandi tilts more industrial — I have to work every day to feel normal — teaching helps with that.&lt;/p&gt;

&lt;p&gt;Teaching also trains your patience, a priceless skill to attain.&lt;/p&gt;

&lt;p&gt;The next time you go to work, school, or contribute to open source— pick up someone's code, review it, and leave positive notes and ways to improve.&lt;/p&gt;

&lt;p&gt;When it comes to reviewing code and other people's work—It’s super easy to be insensitive.&lt;/p&gt;

&lt;p&gt;If every pull request or bug report is a friendly note saying how much the users like using your application, and they include some pointers on how to improve. Those notes would be appreciated and motivate you to work harder, wouldn’t they?&lt;/p&gt;

&lt;p&gt;Be the mentor you wish you had.&lt;/p&gt;

&lt;p&gt;If you enjoyed this, I also write a newsletter for developers: &lt;a href="https://thewholesome.dev/" rel="noopener noreferrer"&gt;https://thewholesome.dev/&lt;/a&gt; -- I share tips and tricks, career advice, and programming news. It's 100% free, forever.&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>javascript</category>
      <category>career</category>
    </item>
  </channel>
</rss>
