DEV Community: Simon

I left my well paid dev contract to sell pixels. Literally

Simon — Wed, 20 Mar 2024 12:29:26 +0000

The original concept was not my idea. Even my idea is not completely my idea (I acquired the codebase from a fellow dev and developed it further putting my own spin on it).

Either way, it seems to be taking off. Every day I sell one pixel. That's it.

Why are people buying them? Not sure, perhaps it's the angle of the 1 day auction and the simplicity of it. Perhaps people are hoping the site keeps growing and the value of the backlink will increase in value as time goes on. Or maybe it's because its possible to acquire a pixel for as cheap as $0.01.

Either way, selling pixels beats working long hours for a soul destroying job. I hope the trend continues :D

How I hacked Crisp.chat into a less intrusive feedback widget 💻️

Simon — Sat, 01 Apr 2023 15:26:30 +0000

Crisp is my go to choice for whenever I need a chat widget on a website. It has a generous free plan and I like how it all works. It's pretty solid.

But there are some limitations if you want to go beyond basic customisation. Also, unless you start upgrading to pro or unlimited most of the plugins are not available either.

Using Crisp as a feedback widget

This part was quite easy. I just made the settings to show me as always away and to only notify my via email. I also set it to ask a user for their email address.

Making the button smaller and less intrusive

It's tricky targeting the right things as the class names are dynamic so they will keep changing and you will lose your changes. I found these selectors work (so far) and should be less fragile:-

Getting the right colors to be in-keeping with the brand

Hiding the powered by Crisp link

#crisp-chatbox a[rel="noopener noreferrer nofollow"] { display: none !important; opacity: 0; visibility: hidden; }

Hope this is useful ! 😊

See widget + full code here (had issues with the code editor so couldn't post it all in Dev to) https://app.hackercabin.com/public/d/24-how-i-hacked-crispchat-into-a-less-intrusive-feedback-widget

Here is how I built the countdown timer at the top of CodeSwaps

Simon — Thu, 05 Aug 2021 14:22:13 +0000

I'm running a promotion and I wanted to make it clearer on the homepage about it. I researched a few different things but it was leading to a lot of unnecessary code bloat and with the solution I tried it was quite expensive to use the unbranded version, so I decided to code it myself.

You can see it working here. Hopefully the code will be useful to someone else here too.

<a class="countdown-wrapper" href="https://www.codeswaps.com/giving-away-1500-dollars/" target="_blank">
  ⚡️ $1500 CodeSwaps Giveaway! 2nd winner in:
  <div id="countdown">
    <div class="countdown-timer">
      <div class="countdown-timer-group">
        <div id="days" class="countdown-timer-digits"></div><span>Days</span>
        </div>
      <div class="countdown-timer-group">
        <div id="hours" class="countdown-timer-digits"></div><span>Hours</span>
      </div>
      <div class="countdown-timer-group">
        <div id="minutes" class="countdown-timer-digits"></div><span>Mins</span>
      </div>
      <div class="countdown-timer-group">
        <div id="seconds" class="countdown-timer-digits"></div><span>Secs</span>
      </div>
    </div>
  </div>
</a>

.countdown-wrapper {
  color: #fff;
  text-align: center;
  display: flex;
  text-decoration: none;
  font-size: 18px;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 2px 10px;
  background: #000;
  min-height: 60px;
  border-bottom: 1px solid #333;
  animation: slideDown 0.3s;
  animation-delay: 1s;
  animation-fill-mode:forwards, none;
  animation-iteration-count: 1;
  animation-timing-function: ease;
  transform: translateY(-100%);
  opacity: 0;


  @keyframes slideDown {
    from {
      transform: translateY(-100%);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }

  &:hover,
  &:visited {
    color: #fff;
  }
}

.countdown-timer {
  display: flex;
  margin: 4px 10px 0 10px;
  justify-content: center;

  &-group {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 4px;
    min-width: 38px;
  }

  &-digits {
    background: #ffd803;
    color: #141414;
    font-weight: 700;
    padding: 3px 0;
    border-radius: 3px;
    margin: 0 4px;
    display: block;
    width: 100%;
  }

  span {
    font-size: 11px;
    margin-top: 2px;
    display: block;
  }
}

(function () {
  const second = 1000,
        minute = second * 60,
        hour = minute * 60,
        day = hour * 24;

  //Change end date as required, next deadline is end of August
  let givesway = "Aug 30, 2021 00:00:00",
    countDown = new Date(givesway).getTime(),
    x = setInterval(function() {

      let now = new Date().getTime(),
        distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),
        document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),
        document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),
        document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

      //hide when date is reached
      if (distance < 0) {
        let countdownBanner = document.getElementById("countdown-banner");
        countdownBanner.style.display = "none";

        clearInterval(x);
      }
      //seconds
    }, 0)
  }());

Amazon Alexa Echo Dot in CSS, HTML and JS

Simon — Thu, 11 Mar 2021 13:04:17 +0000

In this article our goal is to create an Amazon Alexa Echo Dot in CSS, HTML and JS.

You can see the full code on Codepen and feel free to experiment with it.

CSS

The main things to highlight are the use of filter: drop-shadow, radial-gradient, and conic-gradient.. those were very useful for achieving the end result.

Here is the CSS I used to create the light.

.light-ring {
  width: 694px;
  height: 694px;
  border-radius: 50%;
  background: conic-gradient(from 180deg, #fff, #4C90FD, #A7C6FE, #508DFE, #fff);
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 10px 30px rgba(255, 255, 255, 0.5));
  box-shadow: 0 3px 1px 0px rgba(255,255,255,0.45) inset;
}

For the buttons I used a combination of gradients:-

.btn {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1f1f1f;
  position: absolute;
  box-shadow: 0 2px 1px 0px rgba(255,255,255,0.2) inset;
  filter: drop-shadow(0 2px 1px rgba(255, 255, 255, 0.2));

  &-volume-up {
    top: 90px;
    left: 50%;
    transform: translateX(-50%);
    background:
      radial-gradient(ellipse at center, rgba(40,58,71,0.5) 0%,
      rgba(0,0,0,0) 100%), linear-gradient(to bottom,
      rgba(67,85,103,0.1) 0%,rgba(76,95,111,0) 100%);
  }
}

JS

I wanted to ensure I kept the code DRY so rather than creating 80 vent divs and all the accompanying CSS which would lead to a lot of code bloat I decided to use some JS instead here.

This was to duplicate the vents:-

let vent = document.querySelector('.vent');

[...Array(79)].forEach(_ => vent.parentNode.insertBefore(vent.cloneNode(true), vent));

I also used JS to rotate and position each vent incrementally, although similar could be achieved with a css mixin.

Final Result

If you found this post useful please share it 🤝

About the Author

Simon is a freelance web designer.

Creating a Classic Car Rental App with Engine Sound Demo

Simon — Mon, 01 Mar 2021 16:25:04 +0000

Here is a little experiment using HTML5 audio to create an app mockup for an imaginary classic car rental service.

Basic markup

<div class="container">
  <div class="app">
    <img src="../codepen/mustang/app.png">
    <div class="wrapper">
      <div class="button-outer">
        <div class="glare"></div>
        <div class="shape-1">
          <div class="shape-2">
            <div class="shape-3">
              <button id="startEngine" class="btn">
                <span class="light"></span>
                <span class="sm">Engine</span>
                <span>Start</span>
                <span>Stop</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<audio id="engine" src="../codepen/mustang/start.mp3"></audio>

Add styles

  .wrapper {
    text-align: center;
    position: absolute;
    bottom: 50px;
    height: 290px;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 100px;
    transition: transform 1s;
    transform: translateX(-50%);
  }
  .button-outer {
    background: linear-gradient(135deg, #4c4c4e 0%, #414141 34%, #6a6a6a 55%, #212121 100%);
    width: 290px;
    height: 290px;
    margin-left: 5px;
    margin-top: 5px;
    border-radius: 50%;
    box-shadow: 1px 1px 4px rgba(138, 135, 135, 0.68) inset;
    overflow: hidden;
    position: relative;
    transform: translateZ(3px);
    transform-style: preserve-3d;
  }
  .shape-1 {
    width: 260px;
    height: 260px;
    background-color: #1e1e1e;
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 50%;
    box-shadow: 3px 3px 1px 1px #505050 inset, 1px -1px 1px 1px #e6e6e6 inset;
  }
  .shape-2 {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #101010;
    border: 1px solid rgba(94, 94, 94, .7);
    box-shadow: -2px -2px 1px rgba(168, 168, 168, 0.8) inset;
    transform: translateZ(5px);
  }
  .shape-3 {
    width: 230px;
    height: 230px;
    margin-top: 5px;
    margin-left: 5px;
    background-color: #252525;
    border-radius: 50%;
    border: 1px solid #1c1c1c;
    box-sizing: border-box;
    box-shadow: -2px 3px 1px #5f5f5f inset;
  }
  .glare {
    width: 220px;
    height: 250px;
    border-radius: 50%;
    background-color: #fff;
    margin-left: 35px;
    transform: translateY(-50px);
    box-shadow: 0 0 50px 37px #fff;
  }
  .btn {
    -webkit-tap-highlight-color: transparent;
    background: #666;
    border-radius: 50%;
    width: 225px;
    height: 225px;
    margin-left: 2px;
    margin-top: 2px;
    border: 0;
    transition: all 0.1s;
    cursor: pointer;
    box-shadow: 0 0 10px 3px #000 inset, 0 -50px 100px rgba(0, 0, 0, 0.8) inset, 0 30px 60px rgba(0, 0, 0, 0.8) inset;
    box-sizing: border-box;
  }
  .btn:active {
    box-shadow: 0 0 12px 5px #000 inset, 0 -60px 100px rgba(0, 0, 0, 0.8) inset, 0 50px 60px rgba(0, 0, 0, 0.8) inset;
    padding-top: 13px;
    background-position-y: 6px;
  }
  .btn:focus {
    outline: none;
  }
  span {
    font-family: sans-serif;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 30px;
    color: #212121;
    transition: all 0.6s;
    display: block;
  }
  .playing span {
    color: #C5DEA1;
    text-shadow: 0 0 15px #8CA579, 0 0 2px #fff;
  }
  span.sm {
    font-size: 20px;
  }
  .light {
    width: 35px;
    height: 15px;
    margin: 0 auto;
    background-color: #212121;
    margin-bottom: 25px;
    border-radius: 7px;
    border: 1px solid #1b1b1b;
    transition: all 0.6s;
  }
  .playing .light {
    background-color: #f9ea1a;
    border: 1px solid #923C14;
    box-shadow: 0 0 11px 3px #C94A29 inset, 0 0 32px 6px #C77713, 0 0 100px #fff
  }

Bringing it to life

let audioElem = document.getElementById("engine");
let startEngine = document.getElementById("startEngine");

startEngine.addEventListener("click", handlePlayButton, false);
playAudio();

async function playAudio() {
  try {
    await audioElem.play();
    startEngine.classList.add("playing");
  } catch(err) {
    startEngine.classList.remove("playing");
  }
}

function handlePlayButton() {
  if (audioElem.paused) {
    playAudio();
  } else {
    audioElem.pause();
    startEngine.classList.remove("playing");
  }
}

Final result

About the author

Simon is a freelance web designer.

Credits

Button concept: https://codepen.io/taltmann42
Image credit: https://unsplash.com/photos/BwBxVVdlpYE

Creating a Braun BN0171 Watch SVG animation

Simon — Sat, 06 Feb 2021 23:26:10 +0000

In this tutorial our goal is to create a Braun BN0171 Watch SVG animation starting from a Sketch file resource. We will look at how to extract and optimise the SVG for web, how to add the necessary CSS, and finally how to bring this to life with a sprinkling of JavaScript. It’s just for fun, but often I find making things fun to be the best way to learn things.

OK let's begin

To start with we are going to download this resource:-

https://www.behance.net/gallery/64303683/Braun-Watch-Free-Vector-Resource

Extracting the SVG and optimising it for web

When we export an SVG from Sketch it outputs a lot of extra guff we don't really need.

Open up your SVG in a code editor and you will see something like this at the beginning (plus a lot of unnecessary ID's):-

<?xml version="1.0" encoding="UTF-8"?>
<svg width="403px" height="776px" viewBox="0 0 403 776" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
    <title>Group</title>
    <desc>Created with Sketch.</desc>

We don't need all that extra stuff so we're going to use a tool to clean this up. I recommend optimising your SVG code using something like https://jakearchibald.github.io/svgomg/

My method was to extract certain things separately like the time indicators. The end result html was:-

<div class="container">
  <div class="watch">
    <svg width="403" height="776" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="b">
          <stop stop-color="#383838" offset="0%"/>
          <stop stop-color="#2D2D2D" offset="100%"/>
        </linearGradient>
        <linearGradient x1="50%" y1="114.4%" x2="50%" y2="0%" id="c">
          <stop stop-color="#383838" offset="0%"/>
          <stop stop-color="#2D2D2D" offset="100%"/>
        </linearGradient>
        <linearGradient x1="129.7%" y1="50%" x2="37%" y2="50%" id="e">
          <stop stop-color="#141414" offset="0%"/>
          <stop stop-color="#5A5A5A" offset="100%"/>
        </linearGradient>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="g">
          <stop stop-color="#010101" offset="0%"/>
          <stop stop-color="#6A6A6A" offset="23.4%"/>
          <stop stop-color="#4A4848" offset="35.4%"/>
          <stop stop-color="#383838" offset="55%"/>
          <stop offset="100%"/>
        </linearGradient>
        <linearGradient x1="166.8%" y1="50%" x2="-40.1%" y2="50%" id="f">
          <stop stop-color="#262626" offset="0%"/>
          <stop offset="46.6%"/>
          <stop stop-color="#1F1F1F" offset="100%"/>
        </linearGradient>
        <linearGradient x1="-4.7%" y1="18.2%" x2="72.6%" y2="94.2%" id="j">
          <stop stop-color="#47474A" offset="0%"/>
          <stop stop-color="#050505" offset="100%"/>
        </linearGradient>
        <filter x="-72.7%" y="-44.4%" width="245.5%" height="188.9%" filterUnits="objectBoundingBox" id="d">
          <feOffset dy="4" in="SourceAlpha" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="2" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.177139946 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/>
          <feMerge>
            <feMergeNode in="shadowMatrixOuter1"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
        <filter x="-3.1%" y="-3.1%" width="107%" height="112.3%" filterUnits="objectBoundingBox" id="h">
          <feMorphology radius="10" in="SourceAlpha" result="shadowSpreadOuter1"/>
          <feOffset dx="9" dy="28" in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="7" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.109091938 0" in="shadowBlurOuter1"/>
        </filter>
        <filter x="-8.1%" y="-6%" width="132.3%" height="113.1%" filterUnits="objectBoundingBox" id="l">
          <feOffset dx="20" dy="2" in="SourceAlpha" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="4.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1"/>
        </filter>
        <filter x="-7.2%" y="-7.2%" width="114.5%" height="114.5%" filterUnits="objectBoundingBox" id="n">
          <feMorphology radius="5" in="SourceAlpha" result="shadowSpreadOuter1"/>
          <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"/>
          <feMorphology radius="15" in="SourceAlpha" result="shadowInner"/>
          <feOffset in="shadowInner" result="shadowInner"/>
          <feComposite in="shadowOffsetOuter1" in2="shadowInner" operator="out" result="shadowOffsetOuter1"/>
          <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
          <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" in="shadowBlurOuter1"/>
        </filter>
        <circle id="i" cx="179.5" cy="179.5" r="179.5"/>
        <circle id="a" cx="180" cy="181" r="165"/>
        <circle id="o" cx="179.5" cy="179.5" r="179.5"/>
        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="53.1%" gradientTransform="rotate(88 1 1) scale(1 1.18918)" id="p">
          <stop stop-color="#303033" offset="0%"/>
          <stop stop-color="#979797" offset="6.4%"/>
          <stop stop-color="#3D3D40" offset="100%"/>
        </radialGradient>
        <radialGradient cx="50%" cy="50%" fx="50%" fy="50%" r="48.1%" id="q">
          <stop stop-color="#303033" offset="0%"/>
          <stop stop-color="#ADADAD" offset="90%"/>
          <stop stop-color="#3D3D40" offset="100%"/>
        </radialGradient>
        <path d="M181 345v16a179 179 0 110-359v16a163 163 0 100 327zm0 0v16a179 179 0 110-359v16a163 163 0 100 327z" id="m"/>
        <mask id="k" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="330" height="330" fill="#fff">
          <use xlink:href="#a"/>
        </mask>
      </defs>
      <g fill="none" fill-rule="evenodd">
        <g transform="translate(109)">
          <path fill="#000" d="M1 0h173v264H1z"/>
          <rect fill="url(#b)" y="198" width="176" height="64" rx="3"/>
          <rect fill="url(#b)" y="132" width="176" height="64" rx="3"/>
          <rect fill="url(#b)" y="66" width="176" height="64" rx="3"/>
          <rect fill="url(#b)" width="176" height="64" rx="3"/>
        </g>
        <g transform="matrix(1 0 0 -1 111 776)">
          <path fill="#000" d="M1 0h173v264H1z"/>
          <rect fill="url(#c)" y="198" width="176" height="64" rx="3"/>
          <rect fill="url(#c)" y="132" width="176" height="64" rx="3"/>
          <rect fill="url(#c)" y="66" width="176" height="64" rx="3"/>
          <rect fill="url(#c)" width="176" height="64" rx="3"/>
        </g>
        <g transform="translate(19 207)">
          <g filter="url(#d)" transform="translate(358 162)">
            <path fill="#000" d="M0 2h8v32H0z"/>
            <ellipse fill="url(#e)" cx="13" cy="18" rx="9" ry="17"/>
            <path d="M17 29a6 6 0 01-7 6H4V3 1h6a6 6 0 017 6v22z" stroke="url(#f)" stroke-width="2" fill="url(#g)"/>
          </g>
          <use fill="#000" filter="url(#h)" xlink:href="#i"/>
          <use fill="url(#j)" xlink:href="#i"/>
          <use stroke="#6A6A6C" mask="url(#k)" stroke-width="82" stroke-dasharray="1,85.40000152587891" xlink:href="#a"/>
          <use filter="url(#l)" xlink:href="#m" fill-rule="nonzero" fill="#000"/>
          <g opacity=".8">
            <use fill="#000" filter="url(#n)" xlink:href="#o"/>
            <circle stroke="url(#p)" stroke-width="20" stroke-linejoin="square" cx="179.5" cy="179.5" r="169.5"/>
          </g>
          <circle stroke="url(#q)" stroke-width="16" cx="179.5" cy="179.5" r="171.5"/>
        </g>
      </g>
      <img class="watch-logo" width="50" height="21" src="{{ base.url }}/assets/css-tricks/img/braun-logo.png" alt="Braun">
    </svg>
    <div class="watch-face">
      <svg class="hours" width="6" height="87" xmlns="http://www.w3.org/2000/svg">
        <path d="M5 1H0v85h5z" fill="#BBB" fill-rule="evenodd"/>
      </svg>
      <svg class="mins" width="6" height="130" xmlns="http://www.w3.org/2000/svg">
        <path d="M1 1h5v128H1z" fill="#BBB" fill-rule="evenodd"/>
      </svg>
      <svg class="secs" width="20px" height="155px" viewBox="0 0 20 155" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g transform="translate(-745.000000, -310.000000)" fill="#E9BB00">
            <g transform="translate(642.000000, 207.000000)">
              <g transform="translate(43.000000, 103.000000)">
                <path d="M106.472762,11.6036371 C108.625079,12.8462778 109.362517,15.5984346 108.119876,17.7507514 L102.119876,28.1430562 C102.004219,28.3433801 101.875486,28.5314473 101.735376,28.7068021 C102.653234,30.1676886 103.183369,31.8961942 103.183369,33.7485195 C103.183369,38.9952246 98.9300743,43.2485195 93.6833692,43.2485195 C92.6719919,43.2485195 91.6975278,43.0904753 90.7833266,42.7977366 L31.7992886,144.960273 C31.385075,145.677712 30.4676894,145.923525 29.7502505,145.509311 C29.0328115,145.095098 28.7869988,144.177712 29.2012124,143.460273 L88.103434,41.4379377 C85.7278274,39.7110658 84.1833692,36.9101564 84.1833692,33.7485195 C84.1833692,28.5018144 88.4366641,24.2485195 93.6833692,24.2485195 C93.8000598,24.2485195 93.916259,24.2506234 94.0319309,24.2547953 C94.1123135,24.047175 94.210476,23.8425393 94.3256475,23.6430562 L100.325648,13.2507514 C101.568288,11.0984346 104.320445,10.3609964 106.472762,11.6036371 Z M93.5,31.1643518 C92.1192881,31.1643518 91,32.2836399 91,33.6643518 C91,35.0450637 92.1192881,36.1643518 93.5,36.1643518 C94.8807119,36.1643518 96,35.0450637 96,33.6643518 C96,32.2836399 94.8807119,31.1643518 93.5,31.1643518 Z" transform="translate(68.861757, 78.355262) rotate(150.000000) translate(-68.861757, -78.355262) "></path>
              </g>
            </g>
          </g>
        </g>
      </svg>
    </div>
  </div>
</div>

All we need to do then is identify the hour, minute and second hands and add the correct classes. I recommend inspecting the html in Chrome dev tools for this part.

Adding styles

Now we can style the SVG with CSS. The trickiest part was getting the transform-origin right which took a bit of trial and error. Also notice a nice trick with filter: drop-shadow which works much better than box-shadow in this case.

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  background-color: #FFCC00;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 776px;
  margin: 0 auto 100px;
}

.watch {
  width: 403px;
  position: relative;

  &-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-28px, -70px);
  }

  &-face {
    position: absolute;
    width: 359px;
    height: 359px;
    top: 208px;
    left: 19px;
  }

  .hours {
    position: absolute;
    left: 50%;
    top: 88px;
    transform-origin: 48% 105%;
    filter: drop-shadow(1px 1px 0 #999999) drop-shadow(0.11rem 0.11rem 0.13rem rgba(0, 0, 0, 0.95));
  }

  .mins {
    position: absolute;
    left: 49%;
    margin-left: 2px;
    top: 45px;
    transform-origin: 48% 103%;
    filter: drop-shadow(1px 1px 0 #999999) drop-shadow(0.11rem 0.11rem 0.13rem rgba(0, 0, 0, 0.95));

  }

  .secs {
    position: absolute;
    left: 48%;
    top: 50px;
    transform-origin: 49% 84%;
    filter: drop-shadow(1px 1px 0 #f3dc7c) drop-shadow(0.11rem 0.11rem 0.13rem rgba(0, 0, 0, 0.95));
  }
}

Bringing it all to life

The final step was to bring this to life keeping the JS to a minimum we come up with:-

var inc = 1000;

clock();

function clock() {
  const date = new Date();

  const hours = ((date.getHours() + 11) % 12 + 1);
  const minutes = date.getMinutes();
  const seconds = date.getSeconds();

  const hour = hours * 30;
  const minute = minutes * 6;
  const second = seconds * 6;

  document.querySelector('.hours').style.transform = `rotate(${hour}deg)`
  document.querySelector('.mins').style.transform = `rotate(${minute}deg)`
  document.querySelector('.secs').style.transform = `rotate(${second}deg)`
}

setInterval(clock, inc);

And that's it! Hope you enjoyed this little write-up.

Final Result

ps, the designer seemed to think there were 72 seconds in a minute so I had to omit the secondary indicators on the watch. :(

If you found this post useful please share it 🤝

About the Author

Simon is a freelance web designer.

Can Jekyll still cut it in the modern world of JAMstack?

Simon — Wed, 03 Feb 2021 23:19:13 +0000

Jekyll is by no means on the bleeding edge of technology. Far from it. It’s one of the oldest SSGs in a field that seems to launch new contenders almost every other month. Can Jekyll still cut it in the modern world of JAMstack? The answer, as always, is “it depends!”.

For me the answer is an emphatic yes. Here are some reasons why I think Jekyll is still more than worthy of consideration for your static website. But before that, a little background information.

Last year I experimented with a lot of different static site generators from Middleman to Gatsby to Hugo to Nuxt to Gridsome. You name it, I probably tried it.

After a while I settled on Gridsome. I still use it for some projects and would use it again in a heartbeat. That said, one thing I kept coming back to again and again was the thought.. "Why did I not just use Jekyll?"

What I like about Jekyll

Jekyll does so many things well (often with the smallest bit of liquid code and front matter) and is so flexible. According to the official docs:-

"Jekyll does what you tell it to do — no more, no less. It doesn't try to outsmart users by making bold assumptions, nor does it burden them with needless complexity and configuration. Put simply, Jekyll gets out of your way and allows you to concentrate on what truly matters: your content."

That has been my experience too. If I want to use some jQuery - it's cool with that. There's no judgement with Jekyll. It doesn't get in the way. At the end of the day, these SSG's all do one thing, they output HTML, CSS and JavaScript. Static site generators are simply build tools that are largely about personal preference.

Is Jekyll right for you?

Well, as always that depends. But what I would say is do not dismiss Jekyll just because of the latest trends. Judge for yourself. Old tech is not necessarily a bad thing. This article from CSS Tricks is worth a read. It certainly has some interesting statistics. Here is an excerpt from that article:-

"We spend so much time in the bubble of bleeding-edge tech that we lose touch with how the web is really built. Most of the web favors old, stable tech instead of new bling." - Lea Verou

What about performance?

From my experience I would say if used correctly Jekyll can give excellent performance. On my website I am using background video, jQuery, only mildly optimised images, full Bootstrap and a ton of scripts. You name it, I used it. It's video heavy and image heavy.

I use Cloudinary to serve the images and video, and Netlify for the hosting and I get perfect desktop scores (and more than acceptable mobile scores at this stage considering the amount of time I spent on the site).

Final thoughts

If used well Jekyll is just as good as any other SSG (and arguably better in some ways). A lot of these new contenders are simply carrying over concepts that were already there in Jekyll that can often be achieved with less verbose code.

As with anything though, there are trade-offs so you need to way all these up carefully. I have heard that for exceptionally big websites build times can start to get crazy, although even then there are things that can be done to optimise that.

If you have a site built with Jekyll I would love to hear about it in the comments.

About the Author

Simon is a freelance web designer.

How to succeed as a new freelance web designer in 2021

Simon — Wed, 20 Jan 2021 10:50:26 +0000

I often smile to myself when I see the same stereotypes of what it’s like to be a freelance web designer. The pictures are very enticing. You know the ones.. “person sat on the beach relaxing with laptop”, “person in coffee shop smiling and chilling out”. For me these pictures have become such a cliche. Of course, if this is your life as a freelancer I congratulate you. Sincerely, well done.

Unfortunately for most of us, this is not the reality - especially in the beginning. Becoming a freelance web designer is very hard. In 2021 it’s possibly never been harder to start out. The barrier to entry is very low and you will have a lot of competition. There’s a lot stacked against you, and only the most determined will succeed.

My top 7 tips for succeeding as a freelance web designer

Here is the best advice I can think to share after spending 13 years in the industry, starting out as a freelancer in 2008.

Plan the business side of things as early as possible

Decide early on how you intend to take payments. What payment gateways will you use? (I am in the UK so use a combination of Stripe and GoCardless). Will you use an automated invoicing system? (I use FreeAgent). Will you need professional indemnity insurance and at what level? etc etc. You will also need to get your contracts in place and think of how to create professional proposals that will win clients. This is all boring stuff but it’s the minimum that you will need to get in place asap. It’s all about being organised and professional from the beginning.

Don’t be afraid to fail

Failing, strangely, is often part of the journey. Many people who have gone on to be successful testify to that. Here are some of my favourite quotes.

“Your most unhappy customers are your greatest source of learning.” - Bill Gates

“A person who never made a mistake never tried anything new.” - Albert Einstein

“One who fears failure limits his activities. Failure is only the opportunity to more intelligently begin again.” - Henry Ford

“Many of life's failures are people who did not realize how close they were to success when they gave up.” - Thomas Edison

You might not know yet in what way or how you will fail, but when it happens the main thing is to learn from it and embrace it as part of the journey.

Remember that every “overnight success” was years in the making

A lot of what we perceive as "overnight successes" were actually years in the making. The story of Paul Jarvis at Fathom is just one of many I could have picked as an example. You can read his story here:- “20 years to overnight success”.

Don’t fall into the trap of trying to impress other web designers and developers

Your goal is to win clients, and these are rarely other web designers or developers. Trying to impress fellow developers will lead you down the wrong path. This means you might not use the latest ‘on trend’ technology for your site, but rather you use what you are familiar with and that gets the job done efficiently, whether thats PHP, Jekyll, Ruby, WordPress or something else.

Don’t bore your clients about your tech stack

It might be hard to accept this point, but the fact is your potential clients don’t really care about what tech stack you use. Rambling on about nodes will probably put them to sleep or leave them looking for the back button. They only care about how you can solve one of their pain points or what you can do for them and their business in terms of real business value and solving business problems.

Quickly learn how to market yourself

Accept that in the beginning you will need to spend far more time and effort on marketing yourself than on the thing you love - making websites. At least 80% of your time at the beginning is marketing. This percentage might fall later on to around 20-50% of your time, but it will always be a part of your business. Only around 10% of your time at the beginning should be spent on building your actual website.

Finally, remember to enjoy the journey

You may find that the path that works out for you is not your original direction. Go with what works and ditch what doesn’t. Don’t be afraid to change. When you are starting out you never really know how things are going to pan out, and that keeps things interesting.

My personal journey progressed from some really small gigs at the beginning to working on a major e-commerce site with over a million users. I never envisaged at the beginning that my path would go in that direction. (By the way, one other thing I learned is that small gigs are not such a bad thing. I recently decided to go back to doing smaller gigs as I missed the variety and challenge of working on different projects.)

Of course, these are just a few things I could have shared. There's much more to consider. Perhaps you would like to share what has worked for you (or not as the case may be). I am always interested to hear about other peoples journey. Feel free to leave a comment or drop me a message on my website.

Image credit. Photo by Vojtech Bruzek on Unsplash.

Yes, I did search for "freelance".