DEV Community: Medhat Dawoud

JavaScript Anti-patterns

Medhat Dawoud — Sun, 12 Dec 2021 23:14:15 +0000

This post was originally published on my own blog, so you can check it out from here

Usually people search for patterns to follow but some of them are searching for the anti-patterns to avoid, In my opinion both are equally important, as by knowing them you are leveling up your skills in programming using a specific tool.

What are the design patterns?

To understand what are the anti-patterns we need first to define what is a pattern. a pattern is usually a well known solution for a recurring problem, or we can first talk about the concept through a food metaphor.

This plate (for people who don't know) is a street Egyptian food called "Koshary", I picked it because it has quite a lot of ingredients including rice, pasta, hummus, lentil, tomato sauce, and more.

Let's imagine the first person who made this dish, how did he think about it? did he add all together from the beginning? did he try other ingredients that didn't work out? how did he picked each of them? I believe that can be applied to any other food.

Now if you search on the recipe of making Egyptian Koshary you can find it everywhere, that's because some people has made this documented after making several trials, these trials introduced a pattern and this recipe is the design pattern to get the same dish (results) every time.

If we project that on programming, so design patterns are simply good solutions for recurring problems, our ancestor developers made in the past and documented it for us not to repeat same issues.

What are the anti-patterns?

We can imagine now what is an anti-pattern, it is basically also some documents for bad recipes, telling people that we tried this before and here are the results, it was simply a bad idea to do the same again.

same for programming, anti-patterns are simply a bad solution for a recurring problem, people thought about it in the past and documented that their trials ended with failure or bad results.

You might be thinking, why we might have anti-patterns in JavaScript?

The reasons for having anti-patterns despite of having developer guide for all tools might be one of the following or all of them:

Different programming languages paradigm
Going with the easy shortcut solutions.
Adopting the “for now” phrase (which pile tech debt with bad practices)
Lake for experience in the tool used (new developers to JavaScript)
Or much more ...

Anti-Patterns Examples

Now we understand the terminologies, let's have some Anti-patterns / Bad practices to avoid in you next project or maybe enhance your current project whenever you notice one of them 😉

0. Naming convention

Your naming convention needs to be very clear and descriptive, whenever you see a variable or a function name you should be able to guess what to expect as a value coming from there, have a look into the following examples

Bad



// This is a user name
let n = "Medhat Dawoud"

// This is for a year
let yyyy = 2021

// This function should duplicate a number
function dNum(n) {
  return n * 2
}

// This function is checking if 2 numbers are equal
function equal(x, y) {
  return x === y
}

Good



// This is a user name
let userName = "Medhat Dawoud"

// This is for a year
let currentYear = 2021

// This function should duplicate a number
function doubleNumber(num) {
  return num * 2
}

// This function is checking if 2 numbers are equal
function isEqual(x, y) {
  return x === y
}

1. Magic numbers or strings

You might face in the code some magic number or a strings, I call them magic because you or one of the your team mates might be wondering from where does this number or string come, a bit confusing, check the examples below for more clarification:

Bad



// Calculate circle circumference which equal to
// 2 * radius * pi
function circleCircumference(radius) {
  return 2 * radius * 3.14
}

// This is one day in milliseconds
const oneDay = 86400000

// Time to live is 6 weeks
const timeToLive = 42

// This is checking if the user is admin
function isAdmin(name) {
  return name === "Medhat"
}

Good



const PI = 3.14

function circleCircumference(radius) {
  return 2 * radius * PI
}

// This is one day in milliseconds
const oneDay = 24 * 60 * 60 * 1000 // 86400000

// Time to live is 6 weeks
const timeToLiveInDays = 6 * 7 // 42

const ADMIN_NAME = "Medhat"
function isAdmin(name) {
  return name === ADMIN_NAME
}

2. Improper use of Truthy and Falsy values

In JavaScript, Falsy and Truthy values are a bit different than other tools, and by Falsy that means equal to false, and Truthy means when we check it is equal to true, we have about 5 different values which are Falsy in JavaScript which might be wise if you check for each one in the proper way instead of checking in general if they are falsy, check below for best practices.

Bad



function isTruthy(y) {
  return !y ? false : true
}

let x
isTruthy(x) // false

x = 0
isTruthy(x) // false

x = ""
isTruthy(x) // false

x = null
isTruthy(x) // false

x = NaN
isTruthy(x) // false

Good

(A comment in front of each value tells you how to check that value)



function isTruthy(y) {
  return !y ? false : true
}

let x
isTruthy(x) // This is okay to check undefined

x = 0
isTruthy(x) // check -> x !== 0 || x > 0

x = ""
isTruthy(x) // check -> x !== '' || x?.length > 0

x = null
isTruthy(x) // check -> x ?? true : false

x = NaN
isTruthy(x) // check -> isNaN(x)

3. Modify DOM in loop

Modifying DOM is one of the most expensive operations that might happen in the browser, because it cause a reflow/repaint for the page, adding or modifying DOM in a loop is the worst, instead you can use something called DocumentFragment which will be created in memory and cause the reflow only once after the loop as follow:

Bad



// Create 10 elements and push them to document
for (let i = 0; i < 10; i++) {
  const div = document.createElement("div")
  div.textContent = i
  // every loop iteration a new element is created
  // and get added to document node what causes
  // re-paint and re-flow
  document.appendChild(div)
}

Good



// DocumentFragment are saved in memory
// push elements all at once into the document node
const fragment = new DocumentFragment()
for (let i = 0; i < 10; i++) {
  const div = document.createElement("div")
  div.textContent = i
  fragment.appendChild(div)
}
document.appendChild(fragment)

4. New Object in `Array.prototype.reduce`

The problem here is to try to create a new Object in each round in reduce function, trying to make it immutable however if is creating already a new Object/Array in each route so mutating it is fine otherwise you will end up creating extra Objects in memory.

Bad



const users = [
  { name: "Medhat", admin: true },
  { name: "Adam", admin: false },
  { name: "Karma", admin: true },
]

// spread operator is creating a new Obj
users.reduce(
  (acc, item) => ({
    ...acc,
    [item.name]: item.admin,
  }),
  {}
)

// Expected Output
// {
//   Medhat: true, Adam: false, Karma: true
// }

Good



const users = [
  { name: "Medhat", admin: true },
  { name: "Adam", admin: false },
  { name: "Karma", admin: true },
]

users.reduce((acc, item) => {
  acc[item.name] = item.admin
  return acc
}, {})

// Expected Output
// {
//   Medhat: true, Adam: false, Karma: true
// }

5. Manipulate arguments

Here is a very common issue for beginners, the thing is that non-primitive data types are passing by reference not by value, which means when you make an object let obj = { name: 'Medhat' }; and create another variable to copy that object like let obj2 = obj actually obj2 in pointing at the same object in memory and if you make a change like obj2.name = 'Adam' also obj will have "Adam" as a name.

In javaScript you can access all arguments or a function through an object named arguments, given what we understand above, mutating the arguments object will make a mess, check the example below to understand what I mean

Bad



var makePerson = function(color, name, age) {
  if (arguments.length < 3) {
    color = "green"
    name = arguments[0]
    age = arguments[1]
  }

  return {
    name: name,
    age: age,
    color: color,
  }
}

var person = makePerson("Medhat", 18)
console.log(JSON.stringify(person))
// => {"name":"green","age":"green","color":"green"}

I'd advice not to ever mutate the arguments object, if you want to achieve the above result without a problem you might deep-copy the object using let argCopy = Object.assign({}, arguments); or by sending the color argument to as a last argument and make it optional.

Conclusion

In this article you should have learnt what are design patterns and what are the anti-patterns, learnt that the Koshary is an awesome food from the Egyptian cuisine, learnt 6 different example of anti-patterns/bad practices to avoid in your next JavaScript project.

I've talked about this topic before in an online event and here is the presentation, feel free to tweet to me if you have any comment or addition to the info in this article.

Tot ziens 👋

Best Refinement strategy for bigger teams

Medhat Dawoud — Tue, 23 Feb 2021 21:51:44 +0000

Originally published on my blog

We faced lately in our team an issue of wasting time, in a lot of the meetings (scrum ceremonies) most people are silent and a few of us talks, not because they are shy or the few of us likes to talk, the problem is that not everyone is needed to that meeting actually

Our team consists of 4 Frontend developers and 3 Backend developers and 1 DevOps guy and a Product owner (also acting as the Scrum master), and whenever we have a new story we try to break it down so we can have separate stories per discipline, usually it is either FE or BE or DevOps work.

What we used to do is to have as any scrum team refinement sessions to talk and explain the stories that are created by the product owner, if the majority are FE stories then the BE developers keep silent with very little interaction, and the same for the FE in case it is BE ticket.

We value everyone's input in the team even if he/she is talking about something that they are not going to implement by themselves, that's why it is important to make the whole team aware of what is in the pipeline for the team to implement, and sometimes the discussion goes too deep in technical issues, which is a little bit boring for the non-technical guy and for developers from the other side.

After some thinking and based on a previous experience I had in a different company, I suggested the following strategy to mitigate the effect of wasting the time of the unnecessary person in each refinement meeting:

Step1: Business Brief Session

Some people call it a grooming meeting, and it fits the idea but actually, others see that not convenient because of the far meeting of grooming 🤷‍♂️

In this meeting, we (the whole team) come together and only discuss the business part with the product owner, he gives us a brief about the feature and what is the expected impact and we as a technical team try to understand all the business expectations out of this implementation and what would the end-user see and feel about it.

In this phase, we never talk technically only get that brief and write the main points into the ticket description.

Step2: Technical Refinement

This meeting is managed and organized by each team separately, the FE team picks the FE tickets and the BE team picks their tickets as well, and create separate meetings on their own.

Talk as deep as possible and share ideas of implementation, also this requires us to add technical comments about the proposed solution into the ticket itself, which makes the time of implementation smaller eventually.

Also, that will save the time of people who are not interested or their technical input in that part is not very important or to even aware of this discipline.

Step3: Collective Refinement

This is the final refinement session, the whole team attends it again, we have all the tickets filled with the needed information (business, technical), and the whole team has a great understanding of what needs to be implemented and highlights at least of how it will be implemented (in step2).

The practice here is to get ticket by ticket and read it out loud (this could be by the PM or by any member of the team) so everyone could get a good idea about that ticket and the amount of effort needed to be implemented as well.

The final step is to Vote for the story points, the whole team should share in that so we can manage the expectations by the end of the sprint, as currently, we are working from home so we use scrum poker to vote for story points and it is great.

Now based on our definition of ready, our tickets should be ready to be picked up in the next sprint planning.

Conclusion

There is no one way of managing a scrum team, but the way I explained in this article fits us best and it is as follow

Don't include people into a meeting they are not needed to, and for refinements please make it through the 3 steps: Business Brief, Technical, and Collective and you will be surprised by how effective it is

If you have a different experience I'll be happy to get it through comments or to mention me on Twitter

Resources

🔗 Image by Annie Spratt on Unsplash

5 different ways to create a ticket layout

Medhat Dawoud — Mon, 09 Nov 2020 07:46:22 +0000

This post was originally published on my blog

Well, last week I've created a post about Gradient borders with curves and 3D animation in CSS, which was a trial to clone the Nextjs conf ticket, and fortunately, a lot of people liked it, but the major comments that come to me were that there are better ways to implement the half-circles in both sides of the ticket other than the one I used in my tutorial, which is fine, in this article I'm going to show you 5 other different ways to do that very easily 👌

The above is the overall result that we need to reach in the following 5 ways:

Using 2 divs inside each other and a cover (original solution).
Using pseudo-elements border transparent
Using clip-path
Using a cross div
Using Figma to design SVG and use it

1. Using 2 `div`s inside each other and a cover

That was basically the way I used in the last post to make that half-circle design, that was basically as follow:

HTML code:



<div class="ticket">
  <div class="left"></div>
  <div class="right"></div>
  <div class="ticket-content-wrapper"></div>
</div>

CSS code:



:root {
  --size: 1;
  --background: #000;
  --color1: #d25778;
  --color2: #ec585c;
  --color3: #e7d155;
  --color4: #56a8c6;
}

body {
  background: var(--background);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.ticket {
  width: 650px;
  height: 320px;
  margin: 100px auto;
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  background: linear-gradient(
    to right,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color4)
  );
  border-radius: 20px;
  padding: 5px;
}

.ticket:before,
.ticket:after {
  content: "";
  display: block;
  position: absolute;
  top: 130px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 2;
}

.ticket:before {
  background: var(--color1);
  left: -30px;
}

.ticket:after {
  right: -30px;
  background: var(--color4);
}

.ticket-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--background);
  border-radius: 15px;
}
.ticket-content-wrapper:before,
.ticket-content-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  top: 130px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--background);
  z-index: 3;
}

.ticket-content-wrapper:before {
  left: -30px;
}

.ticket-content-wrapper:after {
  right: -30px;
}

.left,
.right {
  position: absolute;
  top: 110px;
  width: 50px;
  height: 100px;
  background: var(--background);
  z-index: 4;
}

.left {
  left: -50px;
}

.right {
  right: -50px;
}

That was the way I did it in the last post, and I've already admitted it that was not the best way, one more thing that could be enhanced in this solution is to make the container overflow: hidden and it should save some code as well, then I started to get some suggestions from readers and watchers of my videos and these other ways are coming next.

Here you can play around with it

https://codepen.io/MedhatDawoud/pen/eYzMQzN

2. Using pseudo-elements border transparent

In this one, we can get rid of the cover and also no need to put pseudo-elements inside each other, so the new HTML will be:



<div class="ticket">
  <div class="ticket-content-wrapper"></div>
</div>

Now we removed the divs (the covers) and we decided to make only pseudo-element for the main container .ticket, as follow:



.ticket:before,
.ticket:after {
  content: '';
  display: block;
  position: absolute;
  top: 130px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 2;
  background-color: var(--background);
}

.ticket:before {
  border: 5px solid var(--color1);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
  left: -35px;
}

.ticket:after {
  border: 5px solid var(--color4);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(135deg);
  right: -35px;
}

As you can see, instead of giving it a colored background, we gave it a black background and a colored border, but turn the color of the border for the top and the left to be transparent, and rotate it based on the side with -45deg and 135deg, so in the end here is the whole CSS code for this way:



:root {
  --size: 1;
  --background: #000;
  --color1: #d25778;
  --color2: #ec585c;
  --color3: #e7d155;
  --color4: #56a8c6;
}

body {
  background: var(--background);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.ticket {
  width: 650px;
  height: 320px;
  margin: 100px auto;
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  background: linear-gradient(
    to right,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color4)
  );
  border-radius: 20px;
  padding: 5px;
}

.ticket:before,
.ticket:after {
  content: '';
  display: block;
  position: absolute;
  top: 130px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 2;
  background-color: var(--background);
}

.ticket:before {
  border: 5px solid var(--color1);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(-45deg);
  left: -35px;
}

.ticket:after {
  border: 5px solid var(--color4);
  border-top-color: transparent;
  border-left-color: transparent;
  transform: rotate(135deg);
  right: -35px;
}

.ticket-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--background);
  border-radius: 15px;
}

You can play around with it here

https://codepen.io/MedhatDawoud/pen/NWrYEbo

3. Using clip-path

Well this suggestion was really cool, using this great feature in css clip-path, it should be a complete circle with a whole ring and use clip-path to cut it, so the HTML will remain as follow:



<div class="ticket">
  <div class="ticket-content-wrapper"></div>
</div>

And the CSS for making the whole circle first will be:



:root {
  --size: 1;
  --background: #000;
  --color1: #d25778;
  --color2: #ec585c;
  --color3: #e7d155;
  --color4: #56a8c6;
}

body {
  background: var(--background);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.ticket {
  width: 650px;
  height: 320px;
  margin: 100px auto;
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  background: linear-gradient(
    to right,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color4)
  );
  border-radius: 20px;
  padding: 5px;
}

.ticket:before,
.ticket:after {
  content: '';
  display: block;
  position: absolute;
  top: 130px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  z-index: 2;
  background-color: var(--background);
}

.ticket:before {
  border: 5px solid var(--color1);
  left: -35px;
}

.ticket:after {
  border: 5px solid var(--color4);
  right: -35px;
}

.ticket-content-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--background);
  border-radius: 15px;
}

Here is how it looks till now:

Then to cut these rings we will do:



.ticket:before {
  border: 5px solid var(--color1);
  left: -35px;
  clip-path: circle(65% at 100% 50%);
}

.ticket:after {
  border: 5px solid var(--color4);
  right: -35px;
  clip-path: circle(65% at 0 50%);
}

This property is mainly cut the element to the required shape, so the final look will be the desired one, worth mentioning that I found this online tool that help you play with the clip-path to get what you want easily.

You can play around with it here

https://codepen.io/MedhatDawoud/pen/qBNoQpX

4. Using a cross div

I just found this one a bit weird but it works very well, especially in case of a ticket without a border like ours, but in some cases it could be the best solution

Basically, we make a div with a smaller width and put the pseudo-elements in the right and the left to cover the sharp border.

then we put it in between a div in the top and another one in the bottom, so in total it looks like a ticket layout, and even you can make it with a split color as in the following brilliant examples by our friend.

https://codepen.io/ahmedbeheiry/pen/rNBQOLE

5. Using Figma to design SVG and use it

In this one we are going to make use of a Free application called Figma to design the ticket layout first and then we export that as an SVG element, so we can put it into our code.

to be honest, I thought that it will be tedious to learn how to do that on Figma, but it turns out to be the easiest way of them all, check out the following way to easily do that and export it as an SVG to be used in code.

Wow, it was really really easy to do and what we are going to do now is to add the exported SVG into our code inside the .ticket container and continue working, the HTML will look like:



<div class="ticket">
  <div class="ticket-content-wrapper">
    <svg
      width="666"
      height="326"
      viewBox="0 0 666 326"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M663 131.004L662.962 133.503C663.632 133.514 664.277 133.255 664.754 132.785C665.231 132.315 665.5 131.673 665.5 131.004H663ZM663 195.996H665.5C665.5 195.327 665.231 194.685 664.754 194.215C664.277 193.745 663.632 193.486 662.962 193.497L663 195.996ZM3 195.996L3.0376 193.497C2.36812 193.486 1.72257 193.745 1.24558 194.215C0.768581 194.685 0.5 195.327 0.5 195.996H3ZM3 131.004H0.5C0.5 131.673 0.768581 132.315 1.24558 132.785C1.72257 133.255 2.36812 133.514 3.0376 133.503L3 131.004ZM23 0.5C10.5736 0.5 0.5 10.5736 0.5 23H5.5C5.5 13.335 13.335 5.5 23 5.5V0.5ZM643 0.5H23V5.5H643V0.5ZM665.5 23C665.5 10.5736 655.426 0.5 643 0.5V5.5C652.665 5.5 660.5 13.335 660.5 23H665.5ZM665.5 131.004V23H660.5V131.004H665.5ZM662.5 133.5C662.654 133.5 662.808 133.501 662.962 133.503L663.038 128.504C662.859 128.501 662.68 128.5 662.5 128.5V133.5ZM632.5 163.5C632.5 146.931 645.931 133.5 662.5 133.5V128.5C643.17 128.5 627.5 144.17 627.5 163.5H632.5ZM662.5 193.5C645.931 193.5 632.5 180.069 632.5 163.5H627.5C627.5 182.83 643.17 198.5 662.5 198.5V193.5ZM662.962 193.497C662.808 193.499 662.654 193.5 662.5 193.5V198.5C662.68 198.5 662.859 198.499 663.038 198.496L662.962 193.497ZM665.5 303V195.996H660.5V303H665.5ZM643 325.5C655.426 325.5 665.5 315.426 665.5 303H660.5C660.5 312.665 652.665 320.5 643 320.5V325.5ZM23 325.5H643V320.5H23V325.5ZM0.5 303C0.5 315.426 10.5736 325.5 23 325.5V320.5C13.335 320.5 5.5 312.665 5.5 303H0.5ZM0.5 195.996V303H5.5V195.996H0.5ZM3.5 193.5C3.34568 193.5 3.19154 193.499 3.0376 193.497L2.9624 198.496C3.14119 198.499 3.32039 198.5 3.5 198.5V193.5ZM33.5 163.5C33.5 180.069 20.0685 193.5 3.5 193.5V198.5C22.83 198.5 38.5 182.83 38.5 163.5H33.5ZM3.5 133.5C20.0685 133.5 33.5 146.931 33.5 163.5H38.5C38.5 144.17 22.83 128.5 3.5 128.5V133.5ZM3.0376 133.503C3.19154 133.501 3.34568 133.5 3.5 133.5V128.5C3.32039 128.5 3.14119 128.501 2.9624 128.504L3.0376 133.503ZM0.5 23V131.004H5.5V23H0.5Z"
        fill="url(#paint0_linear)"
      />
      <defs>
        <linearGradient
          id="paint0_linear"
          x1="3"
          y1="158"
          x2="653"
          y2="163"
          gradientUnits="userSpaceOnUse"
        >
          <stop stop-color="#D25778" />
          <stop offset="0.354167" stop-color="#EC585C" />
          <stop offset="0.729167" stop-color="#E7D155" />
          <stop offset="1" stop-color="#56A8C6" />
        </linearGradient>
      </defs>
    </svg>
  </div>
</div>

and no need for CSS code for the outer layout anymore, That's magical.

You can play around with it here

https://codepen.io/MedhatDawoud/pen/rNLvWar

Conclusion

There are always different ways to implement a UI on the web, none of them should be the best except if others don't fulfill the need, just implement the UI with all the required functionality the way it should regardless of the tools and steps you decide, and ALWAYS keep trying new stuff, if you have one more way try to tweet this post and mention me @med7atdawoud and let's continue the discussion there.

Hint: if you understand Arabic here is an explanation video

Hope you learned something new from this article.

Tot ziens 👋

Gradient borders with curves and 3d movement in CSS (Nextjs ticket clone)

Medhat Dawoud — Wed, 28 Oct 2020 10:05:47 +0000

This post has been originally published on my blog

UPDATE: here is a Japanese version of this article

On 27th of October 2020 was the first global user conference of Next.js, I'm so excited about it as a React developer, That's why I've registered immediately after I knew about it, but what happened after I registered was super interesting, I've got a confirmation message from the conf committee with this URL https://nextjs.org/conf/tickets/medhatdawoud which is an interactive ticket, well designed and well animated I'd like to thank the team for designing and developing that, and today we are going to make a clone of it (for learning purposes).

Challenges

We have quite some challenges here to resolve:

building the ticket itself (✅ will just start with a pre-created one)
implement the gradient borders.
implement the half-circles right and left.
implement the animation according to the cursor move.

Here are 5 other ways to implement that, you can check them after finishing this article

Implementation

Let's start with the implementation step by step, hence the final code could be found in this github repo alongside other challenges as well.

1. building the ticket itself

As we agreed earlier, that would be ready one, you can find the whole code in the repo, but this is the HTML:

<div class="ticket-visual_visual" id="ticket">
  <div class="left"></div>
  <div class="right"></div>
  <div class="ticket-visual-wrapper">
    <div class="ticket-visual_profile">
      <div class="ticket-profile_profile">
        <img
          src="https://github.com/medhatdawoud.png"
          alt="medhatdawoud"
          class="ticket-profile_image"
        />
        <div class="ticket-profile_text">
          <p class="ticket-profile_name">Medhat Dawoud</p>
          <p class="ticket-profile_username">
            <span class="ticket-profile_githubIcon">
              <img src="./github.svg" alt="" />
            </span>
            medhatdawoud
          </p>
        </div>
      </div>
      <div class="ticket-event">
        <img src="./event-logos.png" />
      </div>
    </div>
    <div class="ticket-visual_ticket-number-wrapper">
      <div class="ticket-visual_ticket-number">№ 014747</div>
    </div>
  </div>
</div>

Note: event-logos.png is the lower part of the ticket that I took it as a screenshot because that is out of our focus today.

And the CSS is as follow:

:root {
  --size: 1;
  --background: #000;
}

body {
  background: var(--background);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

.ticket-visual_visual {
  width: 650px;
  height: 320px;
  margin: 100px auto;
  position: relative;
  transition: all 300ms cubic-bezier(0.03, 0.98, 0.53, 0.99) 0s;
  border: 5px solid #fff;
}

.ticket-visual-wrapper {
  width: 100%;
  height: 100%;
}

.ticket-visual_profile {
  padding: calc(39px * var(--size)) calc(155px * var(--size)) calc(
      39px * var(--size)
    ) calc(58px * var(--size));
}

.ticket-profile_text {
  margin: 0;
}

.ticket-profile_profile {
  display: flex;
  flex-direction: row;
}

.ticket-event {
  margin-top: 25px;
  margin-left: -10px;
}

.ticket-profile_image {
  width: calc(82px * var(--size));
  height: calc(82px * var(--size));
  border-radius: 50%;
}

.ticket-profile_name {
  font-size: calc(32px * var(--size));
  margin: 10px 0 5px 20px;
  font-weight: 700;
}

.ticket-profile_username {
  margin: 0 0 5px 20px;
  color: #8a8f98;
  display: flex;
}

.ticket-profile_githubIcon img {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.ticket-visual_ticket-number-wrapper {
  position: absolute;
  right: 35px;
  bottom: 0;
}

.ticket-visual_ticket-number {
  transform: rotate(90deg) translateY(calc(100px * var(--size)));
  transform-origin: bottom right;
  font-size: calc(40px * var(--size));
  font-weight: 700;
  text-align: center;
  padding-bottom: 35px;
  width: calc(320px - 10px);
  border-bottom: 2px dashed #333;
}

Now it looks as follow:

2. implementing the gradient borders

The first goto CSS property for making a gradient or even an image as a border is the border-image property, which has great support on all browsers including ie11 as per MDN.

The only problem with using it is that it doesn't support border-radius so we cannot use it, unfortunately, and will make some work-around to implement that.

The idea is mainly to use a div inside another div, let's call them parent div and child div, you can easily add an image or gradient color in our case as background to the parent div, then give a solid color to the child div for example solid black in our case, then give the parent div padding of the width of the border you want, in our case 5px, and technically what the padding is doing is to put a space between the border and the content inside the element, so it will press the child div with 5px from all directions, and that will enable 5px to show from the parent div as if they are a border to the child div.

well, let's implement that, we have a parent child which is .ticket-visual_visual then we can give it a background with the desired gradient border colors, after getting the 4 colors from the main conf website and create them as custom properties as follow:

:root {
  // rest of variable
  --color1: #d25778;
  --color2: #ec585c;
  --color3: #e7d155;
  --color4: #56a8c6;
}

.ticket-visual_visual {
  // other code here
  background: linear-gradient(
    to right,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color4)
  );
}

Notice using linear-gradient the first param is to right as we needed to have that gradient from left to right.

Now we need to make the child div with solid background as we agreed, the child div here is .ticket-visual-wrapper, so let's give it a background:

.ticket-visual-wrapper {
  background: var(--background); // --background is #000
}

Now we have made it with that work-around for a gradient border, let's now try to give them border radius:

.ticket-visual_visual {
  // other styles
  background: linear-gradient(
    to right,
    var(--color1),
    var(--color2),
    var(--color3),
    var(--color4)
  );
  border-radius: 20px;
}

.ticket-visual-wrapper {
  // other styles
  background: var(--background);
  border-radius: 15px;
}

and the current result should be:

Well, we reached a good stage, for now, we have made a curved border with gradient color.

3. implementing the half-circles right and left

Note that there are several different ways to reach the same result that might be better as well than this solution feel free to write you suggestion in a comment :)

With the same idea, we used before we need to use pseudo-elements of the parent div as parent elements and for the child div as child elements.

so basically will use :before and :after pseudo-elements as follow:

.ticket-visual_visual:before {
  content: "";
  display: block;
  position: absolute;
  top: 130px;
  left: -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color1);
  z-index: 2;
}

.ticket-visual_visual:after {
  content: "";
  display: block;
  position: absolute;
  top: 130px;
  right: -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color4);
  z-index: 2;
}

As you can notice, we treat them as divs and positioned them in the middle left and right of the card, also give both of them the extremes of the gradient colors, the left one takes the first color --color1 as background and the right one takes --color4 as background, so the result now should be as follow:

Then we need to add a child circle for each of them with a solid color (black), let's add pseudo-elements for the .ticket-visual-wrapper as well, but first let's add position: relative to it:

.ticket-visual-wrapper {
  width: 100%;
  height: 100%;
  background: var(--background);
  border-radius: 15px;
  position: relative;
}

.ticket-visual-wrapper:before {
  content: "";
  display: block;
  position: absolute;
  top: 130px;
  left: -30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--background);
  z-index: 3;
}

.ticket-visual-wrapper:after {
  content: "";
  display: block;
  position: absolute;
  top: 130px;
  right: -30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--background);
  z-index: 3;
}

As you see, we made 2 smaller circles 50px X 50px then the parent ones 60px X 60px and the background here for both are the color of the background --background which is black, the last notice here is that I give them z-index: 3 to make them get elevated on top of the parent pseudo-elements.

The current result:

The only remaining thing is to hide the outer halves of the circles, TBW I found that having something like a cover for them could be a good solution, so I decided to add 2 divs that could be used as covers inside .ticket-visual_visual as follow:

<div class="left"></div>
<div class="right"></div>

and in CSS as they are inside a position: relative div, by giving them position: absolute they will be positioned well:

.left {
  position: absolute;
  top: 110px;
  left: -50px;
  width: 50px;
  height: 100px;
  background: var(--background);
  z-index: 4;
}

.right {
  position: absolute;
  top: 110px;
  right: -50px;
  width: 50px;
  height: 100px;
  background: var(--background);
  z-index: 4;
}

giving them background black, and z-index: 4 to be on to and cover the halves of the circles, the final result is:

Now the design is complete like the one implemented in the conf website.

4. implementing the animation according to the cursor move

Now is the time for a bit of JavaScript, we simply need to calculate a variable with is the position of the cursor (mouse) every time we move so we can add a listener to the mousemove event.

window.addEventListener("mousemove", e => {
  // some code to run every time a user moves the mouse cursor
})

I decided to add that in an inline script tag in the same HTML file because it doesn't require a separate file.

before the listening we need to select the ticker element and get its bounding rect as well, to calculate the center point of the ticket element as follow:

const ticketElm = document.getElementById("ticket")
const { x, y, width, height } = ticketElm.getBoundingClientRect()
const centerPoint = { x: x + width / 2, y: y + height / 2 }

then inside the mousemove event lister we need to add some code to transform that ticket, simply we can add some calculations for the degree that we will use for rotation as follow:

const degreeX = (e.clientY - centerPoint.y) * 0.008
const degreeY = (e.clientX - centerPoint.x) * -0.008

Note that this calculation means: we get the difference between the current mouse position and the center point we calculated earlier, then multiply them by a very small number 0.008, I got it by trying and error until I feel that fit best.

Then we can use these calculated degrees to make the transformation:

window.addEventListener("mousemove", e => {
  const degreeX = (e.clientY - centerPoint.y) * 0.008
  const degreeY = (e.clientX - centerPoint.x) * -0.008

  ticketElm.style.transform = `perspective(1000px) rotateX(${degreeX}deg) rotateY(${degreeY}deg)`
})

at line 5 you can find that we simply set the perspective of the element to 1000px which is a big number to make it move very smooth without rotation, also we used the rotation of x and y based on the calculated degrees.

Then the final result will be:

And, we're done here, you might notice some shiny gradient on moving the mouse, but that's for you for homework to make the ticket look glossy, please let me know if you did.

Conclusion

I've enjoyed writing this article, and I hope you enjoyed reading it as well: we've learned from it multiple things or at least I hope so:

How to work-around and make a gradient border with border-radius in place
How to implement a half-circle with a gradient border
How to use perspective in implementing a 3D animation
How to think about the calculation of the variable
All code is on Github go check it out, fork, clone, and do your homework 😉.

Finally, feel free to share it or discuss it with me on Twitter if you want any help, or follow and let's be friends.

If you understand Arabic, here is an explanation step by step in an Arabic tutorial:
https://youtu.be/BfAydRvM-vk

Tot ziens 👋

Dark mode easily on the web

Medhat Dawoud — Thu, 22 Oct 2020 15:22:19 +0000

This post has been originally published on my blog

Dark mode 🌒 has been a trend for the last few years, and you can find almost all website enable that, including famous ones like Twitter, and the main reason for that fame of Dark mode is that in low light places it is way better for man's eyes to see the light text on a dimmed background than vice versa.

In this quick article, I'm trying to show you the way you can implement that easily using CSS and JavaScript.

Assumptions

we have a small HTML page that has a light theme by default and we need to implement the dark theme as well as an option for the visitors, so basically we are going to do that easily by changing the variables of the CSS either it is the custom properties of CSS --primary-color or using Sass $primary-color or any other way.

Here is how it looks like a light theme

Explanation

let's have a look first into the CSS variables we have (don't worry the whole code is on a GitHub repo that is mentioned at the end of the article)

:root {
  --primary-bg: #eee;
  --primary-fg: #000;
  --secondary-bg: #ddd;
  --secondary-fg: #555;
  --primary-btn-bg: #000;
  --primary-btn-fg: #fff;
  --secondary-btn-bg: #ff0000;
  --secondary-btn-fg: #ffff00;
  --image-opacity: 1;
}

// here is the rest of the CSS styles

The main goal is to change these variables values to the following:

:root {
  --primary-bg: #282c35;
  --primary-fg: #fff;
  --secondary-bg: #1e2129;
  --secondary-fg: #aaa;
  --primary-btn-bg: #ddd;
  --primary-btn-fg: #222;
  --secondary-btn-bg: #780404;
  --secondary-btn-fg: #baba6a;
  --image-opacity: 0.85;
}

only in case we have a dark mode preference from the user, the above variables are the same variables names with only different values to make the theme dark, as whenever you define the same variable twice the later one will override the first one.

Implementation using only CSS

We have several ways to resolve this issue, for example using prefers-color-scheme media query in CSS, will enable the list of color variables if the media query matches as follow:

@media (prefers-color-scheme: dark) {
  :root {
    --primary-bg: #282c35;
    --primary-fg: #fff;
    --secondary-bg: #1e2129;
    --secondary-fg: #aaa;
    --primary-btn-bg: #ddd;
    --primary-btn-fg: #222;
    --secondary-btn-bg: #780404;
    --secondary-btn-fg: #baba6a;
    --image-opacity: 0.85;
  }
}

It has a great support in most of the modern browsers, and of course not IE11.

In this case, you don't have to implement a toggle button for the user as your website will follow the user preference anyway.

User preference: In modern operating systems you can change the general theme of the OS in settings to have it dark or light, and by adding the above code in your CSS it will get the user preference from the operating system and show the website in the preference of the user based on it, that's a great tip 💫

Here is how it looks in dark mode:

But you might face a problem if the user prefers to preview your website in light mode regardless of the operating system preferences, in this case, you have to implement a button for the user to switch to their own preference.

Implementing a toggle button (JavaScript)

Let's start by adding a simple script tag in the end of the HTML file before the closing of the body, and select in it the button that we are going to use as dark mode toggle.

// here is the button
<div id="dark-mode-toggle" title="Dark mode toggle">🌒</div>
... // here is the script tag
<script>
  const toggleButton = document.querySelector("#dark-mode-toggle")
</script>

Now we should think about a way to keep that user preference saved and persisted, and the best solution for that is localStorage.

let's listen to the click on that button and check if the value of the theme key in localStorage is dark convert it to light and change that Icon otherwise do the opposite.

Here is the script:

<script>
  const toggleButton = document.querySelector('#dark-mode-toggle');

  toggleButton.addEventListener('click', (e) => {
    darkMode = localStorage.getItem('theme');
    if (darkMode === 'dark') {
      disableDarkMode();
    } else {
      enableDarkMode();
    }
  });

  function enableDarkMode() {
    localStorage.setItem('theme', 'dark');
    toggleButton.innerHTML = '☀️';
  }

  function disableDarkMode() {
    localStorage.setItem('theme', 'light');
    toggleButton.innerHTML = '🌒';
  }
</script>

Now we have a functionality of the button to change the theme key in localStorage from light to dark and vice versa, and also it switches the icons to show something, but still, we didn't reach our goal.

The idea here is to create a wrapper class that will hold the dark mode CSS variables and adds/remove that class based on the condition, and the best element to use for that in the body.

First modify the CSS and create that class as follow:

.dark-mode {
  --primary-bg: #282c35;
  --primary-fg: #fff;
  --secondary-bg: #1e2129;
  --secondary-fg: #aaa;
  --primary-btn-bg: #ddd;
  --primary-btn-fg: #222;
  --secondary-btn-bg: #780404;
  --secondary-btn-fg: #baba6a;
  --image-opacity: 0.85;
}

then let's move to the script to change the functions a little bit:

function enableDarkMode() {
  document.body.classList.add("dark-mode")
  localStorage.setItem("theme", "dark")
  toggleButton.innerHTML = "☀️"
}

function disableDarkMode() {
  document.body.classList.remove("dark-mode")
  localStorage.setItem("theme", "light")
  toggleButton.innerHTML = "🌒"
}

Now the functionality should be working properly on clicking on the toggle button as follow:

One more thing to notice is that on reloading you are not getting the dark mode if it is the setting in localStorage, and the solution is pretty easy, by adding this at the beginning of the script.

let darkMode = localStorage.getItem("theme")

if (darkMode === "dark") enableDarkMode()

That's it and you can go now, BUT in this case we lost the user preference that we implemented before using the media query, the good news is that we can listen to that in Javascript as well as follow:

window
  .matchMedia("(prefers-color-scheme: dark)")
  .addListener(e => (e.matches ? enableDarkMode() : disableDarkMode()))

by using the above code, whenever the user change his preference your website will follow that, finally we have a complete solution, here is the full script tag:

<script>
  const toggleButton = document.querySelector("#dark-mode-toggle")
  let darkMode = localStorage.getItem("theme")

  if (darkMode === "dark") enableDarkMode()

  toggleButton.addEventListener("click", e => {
    darkMode = localStorage.getItem("theme")
    if (darkMode === "dark") {
      disableDarkMode()
    } else {
      enableDarkMode()
    }
  })

  function enableDarkMode() {
    document.body.classList.add("dark-mode")
    localStorage.setItem("theme", "dark")
    toggleButton.innerHTML = "☀️"
  }

  function disableDarkMode() {
    document.body.classList.remove("dark-mode")
    localStorage.setItem("theme", "light")
    toggleButton.innerHTML = "🌒"
  }

  window
    .matchMedia("(prefers-color-scheme: dark)")
    .addListener(e => (e.matches ? enableDarkMode() : disableDarkMode()))
</script>

Conslusion

😅 Phew, that was it, an easy but important solution that is very popular nowadays, you can find the whole code example on the Github repo, and I hope that you learned something new in this quick tutorials.

Feel free to share it or discuss it with me on Twitter if you want any help, or follow and let's be friends.

If you understand Arabic, here is an explanation step by step in an Arabic tutorial:
https://youtu.be/QC0PMPhq6CM

Tot ziens 👋

Cloning hey pin menu using CSS and JavaScript

Medhat Dawoud — Wed, 07 Oct 2020 09:43:44 +0000

Note: this post was originally published on my personal blog

The best way to strengthen the basics of web development or precisely to be a good frontend developer is to practice HTML, CSS, and JavaScript a lot, and the best way to learn these technologies is by making a lot of side projects using them, that's exactly why I decided to start a new series of blogs implementing simple ideas for building small pieces of working UI components, in most cases will be using vanilla JavaScript, vanilla CSS, and normal HTML markups.

In this article I'm starting my very first challenge by cloning the pin menu (set aside menu) of hey.com website, I made the free trial and after exploring it, I found quite a lot of good design decisions over there, but what pokes me most was the pin menu they implemented for emails as a shortcut to reach them, regardless the purpose of creating that as you can see it in the example above, but I liked the idea and decided to clone it and create a replica to it.

Assumptions

Gived an Array of data loaded in pure JavaScript as follow:

const listOfItems = [
  "semicolon.academy",
  "twitter@SemicolonA",
  "FB.com/semicolonAcademy",
  "YT.com/SemicolonAcademy",
  "twitter@med7atdawoud",
  "IG/medhatdawoud",
  "medhatdawoud.net",
]

const stack = document.getElementById("stack")
for (let i = 0; i < listOfItems.length; i++) {
  let div = document.createElement("div")
  div.classList.add("single-block")
  div.innerHTML = `
      <div class="content">
        <img src="${path / to / heyLogo}" />
        <div><h3>${listOfItems[i]}</h3><p>description</p></div>
      </div>`
  stack.append(div)
}

From line 11 till 20 we have a normal for-statement, and inside it, we create every time a new div element and give it a class single-block that will be used to apply the styling of the block of data so it can be similar to the hey.com menu item.

Keep in mind that stack that is selected at line 11 is a div in the HTML file that will hold the whole design, and all CSS is provided later in the full example (don't worry about it for now).

Now we got the following result

This could be considered the start state, and from here we need to understand the challenge as follow.

Challenge

1- make the above list of items look like a stack.

2- make the behavior of expanding on click.

3- on click on anything other than the stack it should turn back in (collapsed).

Implementation

1- let's start by turning it from a list of divs into a stack.

To turn that list of divs into a stack view we need to play around with CSS, first of all, I can imagine the stack look to be a list of divs that are in different layers and each has a different position, so here is the list of CSS we are supposed to add in general

body {
  font-family: sans-serif;
  font-size: 16px;
}

#stack {
  position: absolute;
  height: 80vh;
  bottom: 30px;
  left: 40%;
  text-align: center;
  cursor: pointer;
}

.single-block {
  position: absolute;
  bottom: 0;
  background: #fff;
  box-shadow: 0 0 10px #eee;
  border-radius: 10px;
  transition: ease-in-out 0.2s;
}

.single-block .content {
  display: flex;
  padding: 11px 20px 9px;
}

.single-block .content img {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
}

.single-block .content > div {
  text-align: left;
  margin-left: 10px;
  width: 180px;
}

.single-block .content h3 {
  margin: 0;
  font-size: 16px;
  font-weight: normal;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.single-block .content p {
  color: #aaa;
  margin: 0;
}

Now with the transform property in css we can play around, as using transform we can scale the items up and down, and we can translate them in the Y axis which is exactly what we want to do, but we should add these styles inline in JavaScript because that will depend on the order of the item anyway.

basically we will start the first item with a scale of 1 and translate of 0 as follow

transform: scale(1) translateY(0);

using the above CSS we can inject it into each item in the list but with a different value of the scale and transform, I did the math and the conclusion is that the scaling down value is 0.033333333 so we that value each item should be smaller than the one before it, also for the translation on Y-axis value will be 0.7 same as scaling for each item.

also as per our referent (hey.com pin menu) items should be shown in reverse so we need to do that effect in reverse, and to get that reverse index we need the following line inside the for-statement.

const reverseIndex = listOfItems.length - 1 - i

Now we can use it as a variant for each item, the final added code before appending the item will be

const baseScaleChange = 0.033333333
const baseTranslateChange = 0.7
const reverseIndex = listOfItems.length - 1 - i
div.style.transform = `scale(${1 - reverseIndex * baseScaleChange}) 
     translateY(-${baseTranslateChange * reverseIndex}rem)`

after applying that to the code we have before the append line we should get the following result

2- Now let's start the next task to expand on clicking on the stack

To do that we need basically to make a small change to the transform property, we need in this case to make each item translate in both axis' X and Y with a specific value, and also we need to use rotate function provided in the transform property to make that curve in the list of items.

I did the Math again and the rotation change will be 1.1 and the translation on x change will be 0.4 per item, and finally the translation on Y will be 4 per item, and BTW we can use the function translate that takes first parameter is the value for X and the second one is for Y, to apply all of this we need to listen on click event for that stack div and loop on the current available list to apply that as follow:

stack.addEventListener("click", function(e) {
  const blocks = this.querySelectorAll(".single-block")
  blocks.forEach((block, i) => {
    const reverseindex = blocks.length - 1 - i
    block.style.transform = `rotate(${reverseindex * 1.1}deg) 
    translate(-${reverseindex * 0.2}rem, -${reverseindex * 4}rem)`
  })
})

I think that the code explains itself, so I'm not going to spend a lot of time on this part, but now after adding this code and clicking on the stack div all items should expand just the same as the behavior in hey.com menu.

3- Now we reached the last task to collapse the menu again.

we can do that easily by doing the same thing we did before for items in the first place, by listening to click event on document, as follow:

document.addEventListener("click", function(e) {
  const blocks = document.querySelectorAll(".single-block")
  blocks.forEach((block, i) => {
    const reverseIndex = listOfItems.length - 1 - i
    block.style.transform = `scale(${1 - reverseIndex * baseScaleChange}) 
      translateY(-${baseTranslateChange * reverseIndex}rem)`
  })
})

after adding the above code actually, the menu expands itself would not work anymore, and the reason is the Event Bubbling which is applying the click event on the stack div and then bubble the event to be applied on its parent and then on its parent until the document element which has already an implementation for the click event as well that we just implemented but what it is doing is exactly the opposite of what we are doing on clicking on the stack, so we need to stop that bubbling from happening, a very simple solution is by adding the following line at the beginning of event handing for stack div click.

e.stopPropagation()

that makes the final code in the js file will be as follow:

const heyLogoSrc =
  "https://production.haystack-assets.com/assets/avatars/defaults/hey-84b6169bf4060a76a94a072fe96b5fef7970b02d19507e2ab3952c042c21b154.svg"
const listOfItems = [
  "semicolon.academy",
  "twitter@SemicolonA",
  "FB.com/semicolonAcademy",
  "YT.com/SemicolonAcademy",
  "twitter@med7atdawoud",
  "IG/medhatdawoud",
  "medhatdawoud.net",
]

const baseScaleChange = 0.033333333
const baseTranslateChange = 0.7
document.addEventListener("DOMContentLoaded", function() {
  const stack = document.getElementById("stack")
  for (let i = 0; i < listOfItems.length; i++) {
    let div = document.createElement("div")
    div.classList.add("single-block")
    div.innerHTML = `
      <div class="content">
        <img src="${heyLogoSrc}" />
        <div><h3>${listOfItems[i]}</h3><p>description</p></div>
      </div>`
    const reverseIndex = listOfItems.length - 1 - i
    div.style.transform = `scale(${1 -
      reverseIndex * baseScaleChange}) translateY(-${baseTranslateChange *
      reverseIndex}rem)`
    stack.append(div)
  }

  stack.addEventListener("click", function(e) {
    e.stopPropagation()
    const blocks = this.querySelectorAll(".single-block")
    blocks.forEach((block, i) => {
      const reverseindex = blocks.length - 1 - i
      block.style.transform = `rotate(${reverseindex *
        1.1}deg) translate(-${reverseindex * 0.2}rem, -${reverseindex * 4}rem)`
    })
  })

  document.addEventListener("click", function(e) {
    const blocks = document.querySelectorAll(".single-block")
    blocks.forEach((block, i) => {
      const reverseIndex = listOfItems.length - 1 - i
      block.style.transform = `scale(${1 -
        reverseIndex * baseScaleChange}) translateY(-${baseTranslateChange *
        reverseIndex}rem)`
    })
  })
})

That's pretty much it, what we implemented is very close to what is implemented on hey.com website.

Result and conclusion

Now we completed the challenge and the final result is as follow:

The final code can be found on challenges Github repo, and you can reach out to me if you have any suggestion in code or maybe another challenge 😉 on twitter @med7atdawoud, I hope that you learned anything useful today and if you do please share it with others.

Tot ziens 👋

Side Note: If you are an arabic speaker or understand arabic, you can also watch me coding that in an arabic tutorials in the following video on my technical arabic channel on Youtube
https://www.youtube.com/watch?v=4TPszCQt8nk

DEV Community: Medhat Dawoud

JavaScript Anti-patterns

What are the design patterns?

What are the anti-patterns?

You might be thinking, why we might have anti-patterns in JavaScript?

Anti-Patterns Examples

0. Naming convention

Bad

Good

1. Magic numbers or strings

Bad

Good

2. Improper use of Truthy and Falsy values

Bad

Good

3. Modify DOM in loop

Bad

Good

4. New Object in Array.prototype.reduce

Bad

Good

5. Manipulate arguments

Bad

Conclusion

Best Refinement strategy for bigger teams

Step1: Business Brief Session

Step2: Technical Refinement

Step3: Collective Refinement

Conclusion

Resources

5 different ways to create a ticket layout

1. Using 2 divs inside each other and a cover

2. Using pseudo-elements border transparent

3. Using clip-path

4. Using a cross div

5. Using Figma to design SVG and use it

Conclusion

Gradient borders with curves and 3d movement in CSS (Nextjs ticket clone)

Challenges

Implementation

1. building the ticket itself

2. implementing the gradient borders

3. implementing the half-circles right and left

4. implementing the animation according to the cursor move

Conclusion

Dark mode easily on the web

Assumptions

Explanation

Implementation using only CSS

Implementing a toggle button (JavaScript)

Conslusion

Cloning hey pin menu using CSS and JavaScript

Assumptions

Challenge

Implementation

Result and conclusion

4. New Object in `Array.prototype.reduce`

1. Using 2 `div`s inside each other and a cover