Forem: isarisariver

Why you should have a side project

isarisariver — Tue, 09 Mar 2021 06:03:15 +0000

What is a side project?

A side project is something that you are working on aside from your main objective or job. As a developer, it usually means you are coding in your personal time outside of your main job. The goal of a side-project is often to make a living, but there are many more benefits of side projects other than making money.

Summary

Working on something will help you come up with new ideas
The best way to learn something new is to take the plunge and use it in real-life examples
They help you become better at what you are doing

Working on something will help you come up with new ideas

Ideas don’t come just from thin air. They come from inspiration. That’s why methods like brainstorming are so powerful because they involve creating many ideas in a short period of time. Working on a side project is like an idea generator. For example, the idea for oneword.domains was born while trying to find a good name for a side project. I started working on Cow Pilot while trying to make sense of my to-do list for another project.

When you work on a side project, you will face a lot of problems. Often these problems lead to the “What if there was a tool for that?” questions that give you the idea for your next project.

The best way to learn something new is to take the plunge and use it in real-life examples

Courses are great to learn the basics of new technology or programming language. But they can only teach you so much. The best way to learn something is to actually use it. Build something of your own with it.

Want to learn React and love cooking? Build an online cookbook with your favorite recipes. Look at other recipe sites for inspiration.

They help you become better at what you are doing

It takes a lot of work to get good at something. Photographer Henri Cartier-Bresson said,

“Your first 10,000 photographs are your worst.”.

Malcolm Gladwell wrote a whole book about the “10.000 hour rule”.

Side projects are a great way to hone your skills and become better at what you do. When you are still new, it can be hard to think about what to build with a limited set of skills. But your skills will grow while you are working on it and no matter where you are when you start, you will improve while you are creating it and soon you will wonder why you ever had any doubts about it.

Projects can also evolve over time to match your skills. Let’s go back to the online cookbook with your favorite recipes. After you have built the cookbook and added a few recipes, you have the idea to build a user interface to add recipes within the app rather than in your code. You build it and when that is done you want to have more recipes, so you look for an API that serves recipes and includes them in your app. Then you want to share it with others, so you add authentication and let other people add recipes and comment on others.

In the beginning, it might have been scary to build an app with all these functionalities, but by building it step-by-step matching our progress it has grown organically and you didn’t even have to think about it.

Conclusion

In this article, we talked about how side projects are a great way to

generate new ideas
learn something new
improve your skills

Don’t beat yourself up if you don’t know what your side project should be. Just pick a topic you are passionate about and start building.

What I Learned in 120 Days of Indie Hacking

isarisariver — Wed, 03 Mar 2021 04:53:23 +0000

Hi Devs, long time no see.

Around 120 days ago I started my journey as an indie hacker. I started building Cow Pilot, a task management app where every task has a due date. Since then I have learned a lot about coding and met a lot of great people.

Summary

find your schedule and work on it every day
talk to users, their feedback is invaluable
maintain your existing codebase, don't only add new features
plan new features properly
there is a great community of indie hackers online

Work on it Every Day

Building a product takes a lot of time and work. But if you want to succeed in building a product, you don't need to have a lot of spare time. All you need is discipline and a good schedule. I have a full-time job and two young children. The only time I can work on my project is when they sleep. That's either after they go to bed or before they wake up.

I used to work in the evening. But often I did not accomplish much, because I was too tired after a long day. Nowadays I wake up at 5 AM before everybody else. That gives me up to 2-3 hours to work on my projects. I am refreshed in the morning and cannot wait to get started. This time is much more productive than in the evening.

You can build a product even if you only have 1 hour or 30 minutes every day. The time compounds and before you know it you have written thousands of lines of code or written dozens of blog articles.

As Benjamin Franklin said:

Little strokes fell great oaks.

Talk to Your Users

When I started building Cow Pilot, I shared the initial version on Dev.to. I received a lot of helpful comments. You mentioned things I had not considered or bugs that I had not noticed.

The same thing happened after I released the app on Producthunt. The most valuable feedback came from users that told me that they like the idea, but would not switch from their current app (yet).

I have made it a practice since then to send an email to a random user from time to time. I just write something like

Hi, this is Marian. I hope you're having a great day. I just wanted to check in and see if you have any questions or remarks about Cow Pilot. Thank you so much for using my app.

It took me a long time to send the first email.

I felt so awkward writing it. I was so worried about finding the right words. But what was the worst that could happen? In the end, I just sent it. Everything is a learning experience. After all, when was the last time you wondered why a newsletter or email has strange wording? The second email was much easier than the first one.

It's important to maintain your existing codebase, not only to add new features

I have written a lot of code in this project. Sometimes it takes me a while to understand what I have written or I ask myself "Why did I make it so complicated?". I guess it means that I am growing as a developer.

Nowadays I try to comment my code as much as possible. I write down in plain English what I want to accomplish and what I had to consider at the time of writing. It helps me a lot when I come back a few weeks later.

It is easy to neglect proper formatting and commenting when trying to build as fast as possible. Releasing a new feature is more important to me than having a perfect folder structure. After all, I am the only person working on it. But as the codebase grows bigger it also becomes harder to find what I'm looking for. It is the perfect time to think about improving the codebase and make it more maintainable.

“If you are unable to understand the cause of a problem, it is impossible to solve it.” – Naoto Kan

Plan new features properly

Every new feature has countless angles, how it can affect existing code. I believe that too much planning can negatively affect your productivity, but so can not enough planning.

Let's look at an example: In February I added Projects to Cow Pilot.

What was on my list:

add selector in sidebar and in task modal
add new field in task on database
add new routes in backend to handle CRUD (create, read, -update, delete)
handle CRUD in frontend
handling tasks in bulk edit

What I did not plan in advance

handling tasks without projects
removing a task from a project
selecting multiple tasks to move them to a project, but some of them already are in that project
handling "undo" for one task and multiple tasks
etc.

In the beginning, I did not account for "negative" actions like removing a project. This led to a back and forth of fixing and testing. I would have been faster and the code would have been cleaner if I had taken it into account from the beginning.

The indie hackers community

There is a big community of indie hackers out there. Everybody is very supportive and they are very active on Twitter. There are also dedicated communities like Makerlog and IndieHackers.com.

I have met new interesting people and friends. A lot of them build in public, which means sharing their ongoing process of building their product. There is a lot to learn from their insights. The most valuable lessons come from mistakes they have made.

Conclusion

It has just been four months since I started working on this project. I have learned more in these four months than I could ever learn from any course or bootcamp. I have come very far already when I compare my MVP to where I am now. But I am far from finished.

A repository with more than 250 web development resources

isarisariver — Sat, 09 Jan 2021 11:35:47 +0000

Hi, I'm Marian. I compiled a list with all my resources that have helped me in my web development projects in the last 2 years.

https://github.com/isarisariver/webdev

I am currently working on a due-date driven task management app called Cow Pilot and wanted to have a single location for all my links and snippets rather than having it scattered across multiple apps and browsers.

I divided it into the following categories:

General
Html
CSS
Javascript
Node JS / Express JS
Heroku
React
Libraries
Landing Page
MongoDB
Design
Git / GitHub
VS Code
Security, CORS and Authentication
Auth0
Videos
Snippets and Commands

Most of the resources are aimed at (advanced) beginners I guess, since I am a noob myself. The resources range from Stack Overflow answers over long form blog posts to official references.

I hope it's useful. Feel free to share it.

Cheers,
Marian

How I created my app from idea to public beta in one month

isarisariver — Fri, 11 Dec 2020 19:51:55 +0000

Hi, I'm Marian and I'm the creator of cow-pilot.io, a due date driven to-do list app written in ReactJS. In this post I want to share my journey from idea to launch of the public beta.

From Idea to MVP

There are lots of task management apps out there, Todoist being one of my favourites. My problem with most of them is that they are either too basic or have so many features that they become overwhelming and it's hard to find the task I'm looking for.

So I decided to build my own app. As a challenge I made a plan to finish the MVP within a week. With this approach I made sure that I only add what is absolutely necessary and don't fall into the trap of adding a bunch of stuff that does not really contribute to the original idea.

I wanted the MVP to have the following basic features:

Provide a fixed structure for all tasks.
Don't allow more than 6 tasks for "Today", to focus on my most important tasks
Drag and drop to quickly move tasks between blocks.
Have a due date for all tasks automatically

No database, no login, just a teaser page, a demo and a signup link for the private beta.

I have a full-time job, so to finish it in one week I got up a 5am every day. That gave me 2-3 hours before I had to go to work and a little time in the evening before going to bed. It was the most productive week I had in a long time and I kept up this schedule until today. Turns out waking up early can be very easy when there is a good purpose.

Sharing the initial version

After it was finished, I shared it on Hackernews, because I read that's where I have to go to validate an idea. I got 0 upvotes. Well, that was disappointing ...

I tried again the two days later and shared it on Dev.to. This post was a great success for me. I got a lot of feedback from the community how to improve the UI, fix some bugs etc. The reactions convinced me to keep working on my app. Around 25 people signed up for the closed beta.

Sending out invitations for the private beta

With 25 people on the waitlist it was time to start building a database and to add login functionalities. It took me a few more days to set up the Express server in NodeJS, link it to a MongoDB cluster and implement authentication with Auth0.

Once everything was finished I started sending out the invitations. I wrote a much too long email that most of my recipients probably did not even read.

Everybody hates long emails.

Out of the 25 email addresses I had, 8 did not even exist and nobody replied. In total 2 users logged in once and never again. Another disappointment... In hindsight I would have written that invitation differently, but the response probably wouldn't have been much better.

Launching on Product Hunt

Even though I experienced another setback, I kept working on my app. I started using it to track my own project, which gave me a lot of ideas how to improve it further. After almost one month of working on it a couple of hours every day I did not have much feedback except from my family and the Dev.to community.

So I decided to start the public beta and launch it on Product Hunt. 😀 If again I get zero feedback, maybe that means there are not enough people who are interested in a task management app like this.

I read a few guides what to do when preparing to launch on Product Hunt.

There's of course the official guide, but also posts like this one on Reddit that helped me a lot.

Following the advice

I launched on a Saturday and
at midnight PST (which conveniently is 9am in Germany 😀).
I prepared a few GIF's for the listing,
wrote a first comment to welcome users and explain why I built this app.

I was in the top 5 for while, but in the end came in 7th. I got around 500 visitors and 50 new users on Saturday. The traffic I received from Product Hunt did not go down until the middle of this week and I have already received very positive feedback and interesting questions from some of the users. This time around they are actually using it 😀

What comes next

One week after starting the public beta I have around 80 users. I hope I can get more feedback, so that I can further improve the app. After making sure that the app is stable I want to start working on desktop and mobile apps.

While it is not a huge overwhelming success, it is slowly growing and gaining new users. It is such a rewarding experience to see that people are actually using an app that I have built.

I hope this little journey can help you staying motivated with your own side project. If you have any questions, just let me know here or on Twitter.

How do you structure your React projects?

isarisariver — Mon, 30 Nov 2020 13:34:12 +0000

I don't really have a structure when it comes to my projects. I guess it doesn't really matter as long as I am the only one working on it.

I usually start by putting everything in 1 file. When I feel like it gets too big, I create a second file. When I get too many files, I create folders like "assets" for images or "utils" for reusable functions.

This is what my current project looks like.

How do you guys organise your projects? Any tips for a self-taught noob like me? :)

How to create separate Signup and Login screens with Auth0

isarisariver — Sat, 28 Nov 2020 07:40:44 +0000

Hi guys. Today I wanted to quickly share how to create separate sign up and login screens in Auth0's universal login, as it is not directly mentioned in their otherwise great documentation.

At the moment it is only possible to go directly to the signup screen with the "new experience", but since it lacks customization, I did not want to use it for my own project. I assume you already have an integration and are just looking for a way to separate signup and login, so I will not go much into detail about the rest.

Go directly to the signup page

Usually signup looks like this. The widget shows both login and signup and the user has to choose.

To show the signup first, we have to provide a parameter to the loginWithRedirect function that is calling the screen, for example '{ mode: "signUp" }'. This parameter can then be read in the Lock widget with config.extraParams

/* Example with React*/
  <Signup 
    onClick={() => loginWithRedirect({ mode: "signUp" })}>
      Sign Up
  </Signup>

Customize Login Page

Now that we have a separate button for signup, the next step is to go to "Universal Login" in the dashboard and activate the "customize login page" option.

This opens the Lock widget for editing.

Lock is an embeddable login form that can be configured to your needs and is recommended for use in single-page apps

Lock has a lot of configuration options, but we are mostly interested in the following:

config.extraParams
initialScreen
allowLogin
allowSignup

config.extraParams is already configured out of the box and we can use it to read the parameter that we provided in loginWithRedirect.

// Decode utf8 characters properly
  var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
  config.extraParams = config.extraParams || {};

If you put a console.log in the widget, you can see all the parameters that are passed when the widget is open. In my case I send "login_hint" for signup.

The actual configuration of the widget starts at line 38 and starts with var lock = new Auth0Lock(config.clientID, config.auth0Domain,

We add our 3 lines of code after that initialization

Choose initial screen

initialScreen lets us choose, which screen to show first when using loginWithRedirect. We want to show signup when the parameter we gave earlier is present and show login when it is not. Be careful to use camelcase for signUp, otherwise it will not work

  intialScreen: config.extraParams.mode === undefined ? 
    'login' : 'signUp',

Either login or signup

To show only one of the two screens at any given time, we can use the allowLogin and allowSignup options. If the extraParams that was given is present, we want to show only signup, otherwise we show only login.

  allowLogin: config.extraParams.mode === undefined ? 
    true : false,
  allowSignUp: config.extraParams.mode === undefined ? 
    false : true,

And that's it. Now we have two separate screens for signup and login.

If you have any questions, please let me know.

I just published my new side project

isarisariver — Tue, 17 Nov 2020 04:54:56 +0000

Hi guys, I just published my new side project and I'd love to have some feedback 😊. I built it in 5 days, focussing only on the essentials.

I had a breeze making this and getting it ready for a demo in the shortest possible amount of time. This is the link: https://www.cow-pilot.io/. I would really love to hear what you think about it.

It is built with React, hosted on Heroku. It's already a win for me, because in the process I learned about styled components, a library that makes styling much, much easier than plain CSS.

I also learned about react-beautiful-dnd, which is an awesome library for drag and drop by the guys who made Trello. They have an eggcellent course on egghead.io to help learn it. I don't like video courses much usually, but this one is really well made and helped build the foundation of my app.

How to create a README.md for your Github profile

isarisariver — Sun, 15 Nov 2020 19:40:27 +0000

The other day I came across a Github profile with a big flashy username/README.md on the profile screen. I had no idea this is possible, so I checked how to do it and now I have one, too.

How to create the profile README.md

To create the profile readme, simply create a repository with the same name as your username. You will be greeted immediately with this message:

How to edit the profile README.md

Go to the profile and start editing the README. It works like with any other README.md on Github. To use images and gifs, upload them to your secret repository and reference them in the README.

That's it. Have a great start of the week! 🦄

How to Create a Custom Confirm Box with React

isarisariver — Sun, 15 Nov 2020 06:09:57 +0000

Hi, I'm Marian and I just released my new side project called Cow Pilot. It's a to-do list app, but you can only add 6 tasks.

Today I wanted to share how I created a custom confirm box, since the standard ones look kinda boring and different in every browser.

For example, the same confirm box looks like this in Firefox

and like this in Chrome

Not pretty. It can be set up like this.

<button 
  className="delete button"
  onClick={() => {
    const confirmBox = window.confirm(
      "Do you really want to delete this Crumb?"
    )
    if (confirmBox === true) {
      handleDeleteCrumb(bookmark)
    }
  }}>
</button>

Introduction

The custom variant works like this:

Add an opaque full screen background to the DOM
Below that, add a div that acts as the confirm box container
Inside the div add a text and the Cancel and OK buttons

In normal state, the background and the container both have the property display: none, which means they are not visible on the screen and other than visibility: hidden don't take up any space.
We make them visible by clicking on a button, for example in my case "Delete Task", which calls a function that changes display: none to display: flex (or instead of anything else that is not none)

There are several ways to make them visible:

use display.querySelector(".container").style.display = to unhide and hide the box
use useState to add and remove a class with property display: none
use inline styles and toggle the display: none property with useState
use styled components, a library I have started using recently. We pass props to the styled component and use it to toggle between display: flex and display: none

In this post I will focus on the first variant. If you are interested I can make a follow-up for the other ways as well, just let me know in the comments.

Creating the Elements

First, let's create the background. I'm adding it to be able to close the box by clicking anywhere outside of it. I also disable scrolling with overflow:hidden while the background is visible. I like to make it black and 50% opaque to accentuate the confirm box, but you can also make it completely opaque.

/* The JSX */
<>
  <div 
    className="confirm-bg" 
    onClick={() => handleConfirmationBox()}>
  </div>
</>

/* The CSS */
.confirm-bg {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #202020;
  opacity: 0.55;
  overflow: hidden; /* disable scrolling*/
  z-index: 2; /* higher than all other items, but lower than 
    the confirm box*/
}

Next we add the container. I use position: fixed to place it close to the delete button. In our component we have to add it right before the background, otherwise it will appear behind it on the screen.

/* The JSX */

<>
  <div className="container">
    <div className="confirmation-text">
      Do you really want to delete this task?
    </div>
    <div className="button-container">
      <button 
        className="cancel-button" 
        onClick={() => handleConfirmationBox()}>
          Cancel
      </button>
      <button 
        className="confirmation-button"
        onClick={handleDeleteTask}>
          Delete
        </button>
    </div>
  </div>
  <div 
    className="confirm-bg">
    onClick={() => handleConfirmationBox()}
  </div>
</>


/* The CSS */
.container {
  display: none;
  flex-direction: column;
  position: fixed;
  background-color: #f37736;
  width: 230px;
  top: 75%;
  left: 50%;
  transform: translate(-50%, -75%);
  border-radius: 0.3rem;
  padding: 1rem;
  z-index: 5; /* Higher than the z-index of the background */
}

.confirmation-text {
  display: flex;
  color: white;
  margin: 0.5rem 0 2rem;
  text-align: center;
  line-height: 2rem;
  font-size: 1.1rem;
}

.button-container {
  display: flex;
  margin-top: auto;
  justify-content: space-between;
}

.confirmation-button, delete-button {
  display: inline-flex;
  background-color: #cc0000;
  color: white;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 0.3rem;
  font-size: 1rem;
}

.cancel-button {
  background-color: #999999;
}

.confirmation-button:hover {
  background-color: red;
  cursor: pointer;
}

.cancel-button:hover {
  background-color: #b2b2b2;
  cursor: pointer;
}

Toggle the elements

Now the elements are set up and we can work on showing them and hiding them again.

First we need the button that triggers the confirmation check. It can be anywhere in the component. On click, the button calls a function that changes the display property .

/* JSX */
<button 
  className="delete-button"
  onClick={() => {handleConfirmationBox()}>
    Delete
</button>

Inside of handleConfirmationBox we will use a state to check, if we should show or hide the confirmation check. We use a boolean value and set the default to false. In the handleConfirmationBox function, we assign false to hiding the popup.

We call this function when we:

click on the delete task button
click on the cancel button
click anywhere outside the box, while it is visible

/* define the state */

import  { useState } from "react"

const [delTask, setDelTask] = useState(false)

/* if delTask is false, change the display properties of our 
 * two elements and change delTask to true, so that next time 
 * the function is called, the elements are hidden again
 */

const handleConfirmationBox = () => {
  if (!delTask) {
    document.querySelector(".confirm-bg").style.display = "flex"
    document.querySelector(".container").style.display = "flex"
    setDelTask(true)
  } else {
    document.querySelector(".confirm-bg").style.display = "none"
    document.querySelector(".container").style.display = "none"
    setDelTask(false)
}

Final words

And that's it. Now the confirmation will look the same on all devices and we can customize it the way we want. Like I say, there are several ways to achieve the hide/unhide. I personally like styled components because I can just pass the delTask state as prop and change the display property based on that.

If you have any questions or if I missed something, please let me know.

Creating a Context Menu for my Bookmark Manager

isarisariver — Wed, 04 Nov 2020 15:32:38 +0000

Today I replaced the topbar entries of my bookmark manager called Crumb Collector with a context menu, because they did not fit properly anymore on mobile devices. The app is written using the MERN stack, so in this post I'd like to share how I created this context menu in React.

I also finally managed to properly loop the cover image GIF, but that's not the topic of this post.😉

The Requirement

I used to have just the Log In button in the top right corner, but wanted to add a few more icons, which made it too wide for mobile devices. I wanted the context menu to open when the user hovers over it and it should include important links on the site as well as links to my blog, Twitter and Dev.to.

The Basic Setup

The topbar is a div-element with fixed position, so that it is always at the top of the screen. I am using FontAwesome for the caret icon. The More entry is the container for our context menu. The menu itself is placed outside of the viewport using position: absolute and right: -10rem and will be made visible when we hover over More.

I added a transition-delay to .topbar-menu so that it does not disappear immediately, when the mouse leaves the element that triggered the hover-effect.

The JSX

<div className='topbar'>
  <div className='topbar-items'>
    {handleDarkmode}
    <span className="more" >
      More <i className="fas fa-caret-down"></i>
        <ul className="topbar-menu">
          <li>...</li>
          <li>...</li>
        </ul>
    </span>
  </div>
</div>

The CSS

/* This is the topbar, pinned to the top.*/
.topbar {
  position: fixed;
  display: flex;
  flex-direction: row;
  height: 48px;
  width: 100%;
  background-color: #252525;
  line-height: 36px;
  z-index: 2;
  top: 0;
}

/* This is the class for the topbar items.*/
.topbar-items {
  display: flex;
  margin-left: auto;
  margin-right: 2rem;
  align-items: center;
  cursor: pointer;
  color: white;
}

/* This is the context menu, placed outside of the viewport 
 */
.topbar-menu {
  position: absolute;
  right: -10rem;
  margin-top: 0.8rem;
  background-color: #1c75da;
  display: flex;
  flex-direction: column;
  transition: 0.1s;
  transition-delay: 0.3s;
  text-align: center;
  width: auto;
  border-radius: 0.3rem;
  font-weight: 700;
}

Displaying The Context Menu

I want the menu to show up automatically when I hover over More, so I have to add :hover to the menu entry in combination with class .topbar-menu. On hover, the menu will move into the viewport using transform: translateX.

.more:hover .topbar-menu {
  transform: translateX(-11rem);
  transition: 0.1s;
}

Styling the menu

The first four items are just regular list-items that are styled like this:

The JSX

        <ul className="topbar-menu">
          <li className="dropdown">
            <Link className='profile-link' to="/support">
              Contact
            </Link>
          <li>          
        </ul>

The CSS

.dropdown {
  width: 140px;
  height: 2rem;
  line-height: 2rem;
  cursor: pointer;
  border-bottom: 1px solid white;
}

.profile-link {
  text-decoration: none;
  color: white;
  width: max-content;
  width: 100%;
  height: 100%;
  display: block;
  font-size: 0.9rem
}

.profile-link:hover {
  background-color: #4490E1;
  border-radius: 0.3rem;
}

To avoid making the menu unnecessary long, I wanted to place the social icons all in one row. I added a second class to the list-item and changed the display property to inline-flex and added flex: 0.34 to give each 1/3rd of the width.

The JSX

<li className="dropdown social">
  <a className="profile-link social"
     rel="noopener nofollow noreferrer"
     href="https://dev.to/isarisariver">
       <i className="fab fa-dev" 
          title="DEV Profile">  
       </i>
  </a>
</li>

The CSS

li.dropdown.social {
  display: flex;
  justify-content: space-evenly;
}

.profile-link.social {
  display: inline-flex;
  width: auto;
  font-size: 1.2rem;
  align-items: center;
  flex: 0.34;
  justify-content: center;
  border-radius: 0.3rem;
}

Conclusion

And that's it. I hope it can help you with your next project! If you have any questions, just drop me a message. 😄

How to Determine Font Color based on a Random Background Color

isarisariver — Fri, 30 Oct 2020 20:30:22 +0000

Inspired by this great post by @dailydevtips1 about how to create random colors with Vanilla Javascript, I decided to write a little follow-up to make sure, the random color also has a matching font-color.

Creating the Random Background Color

As a reminder, we are generating random hexadecimal number with this function:

Math.floor(Math.random()*10000000).toString(16)

Actually, we might as well use 16777215 as a multiplier, which is the maximum possible decimal for a color (meaning 16777215 === #FFFFFF).

The result of this formula is a 6-digit hexadecimal number. Like RGB colors it consists of three parts:

The first two digits represent the color red
digits three and four represent the color green
the last two digits represent the color blue

Determining the Font Color

To determine, which is the best possible font-color for a certain background, we can follow the recommended algorithm on www.w3.org.

Color brightness is determined by the following formula:
((Red value X 299) + (Green value X 587) + (Blue value X 114)) / 1000

Converting this formula to Javascript could look something like this:

const red = parseInt(color.substring(0,2),16)
const green = parseInt(color.substring(2,4),16)
const blue = parseInt(color.substring(4,6),16)
const brightness = red*0.299 + green*0.587 + blue*0.114

Now we have an integer value for the perceived brightness of our background color.

We took each color from the previously generated random color using substring and converted the hexadecimal to a decimal using parseInt().

Since the variable brightness of our function represents the brightness of our color, we can now use it to define the font color. I found that 180 is a good threshold to switch from white to black, but it's probably best to experiment a bit.

The function to set the font color could look like this.

if (brightness > 180) {
      return { backgroundColor: '#' + color }
    }
    else return {
      backgroundColor: '#' + color,
      color: '#ffffff'
    }

And my whole function looks like this:

  const randomColor = () => {
    let color = Math.floor(Math.random()*16777215).toString(16)

    /* sometimes the returned value does not have 
     * the 6 digits needed, so we do it again until
     * it does 
     */

    while (color.length<6) {
      color = Math.floor(Math.random()*16777215).toString(16)
    }

    let red = parseInt(color.substring(0,2),16)
    let green = parseInt(color.substring(2,4),16)
    let blue = parseInt(color.substring(4,6),16)
    let brightness = red*0.299 + green*0.587 + blue*0.114

    /* if (red*0.299 + green*0.587 + blue*0.114) > 180 
     * use #000000 else use #ffffff 
     */

    if (brightness > 180) {
      return { backgroundColor: '#' + color }
    }
    else return {
      backgroundColor: '#' + color,
      color: '#ffffff'
    }
  }

In an app it would look like this:

How to Create a Custom Tooltip with Pure CSS

isarisariver — Mon, 26 Oct 2020 07:48:28 +0000

I always find the standard tooltip in browsers a bit boring, so I usually implement a custom one.

The standard tooltip can be used by adding the title attribute to any Html element. When the user hovers over the element, the tooltip will show up after a short delay. Like this:

Hover over me

<h2 title="DEV is a community of software developers">
Dev.to
</h2>

For the custom tooltip we need three items:

The element that contains the tooltip
A hovercard that contains the tooltip and is only visible when we hover over the element
The tooltip content itself

In my example I have a list of links and when we hover over the link, we can see a short summary of the target of that link.

Let's create the Html first.

<li class="recent-link">
  <a href="https://www.crumb-collector.com">Crumb Collector</a>
  <span class="hovercard">
    <div class="tooltiptext">
      Crumb Collector is a minimal and easy to use bookmark manager.
    </div>
  </span>
</li>

We now have a list-item element that contains a link, the hovercard and the tooltiptext.

First we style the list-item. We have to assign the position property, so that we can position its children relative to it.

.recent-link {
  position: relative;
  color: #252525;
  padding-bottom: 18px;
  font-size: 1rem;
}

Next we position the hovercard. We make it invisible at first by setting opacity: 0. The opacity changes to opacity: 1 when we hover over .recent-link.
By using z-index: 1 we make sure that is displayed on top of other content with a lower z-index (by default 0).
The positioning depends on the length and content of the tooltip. The longer the content, the more we have to offset the hovercard.

.hovercard { 
  position: absolute; 
  opacity: 0; 
  z-index: 1;
  left: 50%;
  top: -90px;
  transform: translateX(-50%);
}

.recent-link:hover .hovercard { 
  opacity: 1; 
  transition: 0.5s;
  transition-delay: 0.1s;
}

Finally we style the tooltip itself, for example like this.

.tooltiptext {
  display: flex; 
  flex-direction: column; 
  justify-content: flex-start; 
  background-color: #0366d6;
  padding: 18px; 
  border-radius: 5px; 
  color: white; 
  line-height: 15px;
  transition: 1s;
  width: 200px;
}

Which looks like this:

We can do anything we want inside the tooltiptext-class.

Let's say we want to display additional information about a user when we hover over the avatar (inspired by Squarespace).

  <div class="hovercard">
        <div class="cover-image">
          <div class="avatar">A
          </div>
          <div class="username">Plain Water</div>
        </div>
        <div class="points">2,345</div>
        <ul class="stats">
          <li class="stats-item">Content Count: </li>
          <li class="stats-item">Joined: </li>
          <li class="stats-item">Last Visited: </li> 
        </ul>
      </div>

Final Words

Thanks for checking out this tutorial. Please let me know, if it is helpful and if you are interested in seeing more like this.
If you have any questions, just let me know in the comments or shoot me a message.