Forem: Spruce Emmanuel

Day 04: Learning JavaScript APIs: Intersection Observer API

Spruce Emmanuel — Tue, 31 Dec 2024 17:40:00 +0000

You’re scrolling through YouTube or your favorite social media app, and content loads seamlessly as you scroll. Animations come to life just as you reach them. At first glance, building features like these might seem complex, but JavaScript provides a powerful tool that makes it surprisingly simple: the Intersection Observer API.

This API eliminates the need for manually tracking scroll events and calculating element positions. Instead, it offers a faster, more efficient way to handle visibility-based interactions. In this article, we’ll explore what the Intersection Observer API is, how it works, and some cool things you can build with it.

What Is the Intersection Observer API?

The Intersection Observer API allows developers to track an element's visibility within the viewport (or any specified parent container). Think of it as a helpful observer that lets you know when the visibility of an element changes—whether it’s entering, exiting, or fully visible.

How Does the Intersection Observer API Work?

Using the Intersection Observer API boils down to two simple steps:

Create an observer.
Attach it to elements you want to monitor.

1. Creating an Observer

To get started, you create an IntersectionObserver instance. This takes two parameters:

A callback function, triggered when the visibility of the observed element changes.
Optional observer options, allowing you to fine-tune the behavior.

Here’s an example:

const observerOptions = {
  root: null, // Default: the viewport
  threshold: 0.5, // Trigger when 50% of the element is visible
  rootMargin: '0px', // No margin by default
};

const observerCallback = (entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(`${entry.target.id} is in view!`);
    }
  });
};

const observer = new IntersectionObserver(observerCallback, observerOptions);

Simplified Version

The only required parameter is the callback function. If you skip the options, the defaults will apply:

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      console.log(`${entry.target.id} is visible`);
    }
  });
});

Understanding Observer Options

To make the most out of this API, let’s break down the three main options:

1. root

By default, the observer tracks elements relative to the viewport. However, you can specify a custom parent element instead:

// Default: viewport
const observer = new IntersectionObserver(callback);

// Custom root
const observerWithRoot = new IntersectionObserver(callback, {
  root: document.querySelector('.scroll-container'),
});

2. threshold

The threshold determines how much of the element must be visible before the callback is fired. It can be:

A single value (e.g., 0.5 for 50% visibility).
An array of values to trigger multiple callbacks.

// Fire callback when 50% of the element is visible
const observer = new IntersectionObserver(callback, { threshold: 0.5 });

// Fire callback at 25%, 50%, 75%, and 100% visibility
const observerWithArray = new IntersectionObserver(callback, { threshold: [0.25, 0.5, 0.75, 1] });

3. rootMargin

The rootMargin adds an invisible margin around the root. Think of it as a CSS margin that affects when the callback fires.

Positive values expand the root’s boundaries.
Negative values shrink the root’s boundaries.

const observer = new IntersectionObserver(callback, { rootMargin: '20px' });
// Fires 20px *before* the element enters the viewport

2. Observing Elements

Once you’ve created the observer, attach it to the elements you want to monitor using observe():

const elements = document.querySelectorAll('.watch-me');
elements.forEach(el => observer.observe(el));

What Can You Build with the Intersection Observer API?

This API is incredibly versatile. Here are some practical examples to inspire you:

1. Lazy Load Images

Delay loading images until they are about to enter the viewport, improving performance:

const lazyLoad = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src; // Replace placeholder with actual image
      lazyLoad.unobserve(img); // Stop observing once loaded
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => lazyLoad.observe(img));

2. Trigger Animations

Play animations as elements come into view:

const animateOnScroll = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('animate');
    }
  });
});

document.querySelectorAll('.animate-me').forEach(el => animateOnScroll.observe(el));

3. Infinite Scrolling

Load more content dynamically as users scroll:

const loadMore = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      fetchMoreContent(); // Your function to load more items
    }
  });
});

loadMore.observe(document.querySelector('.load-more-trigger'));

Wrapping Up

The Intersection Observer API is one of the best APIs JavaScript provides for modern web development. It makes managing visibility-based interactions simple, efficient, and elegant. Whether it’s lazy loading, triggering animations, or building infinite scroll, this API is a must-have tool in your development toolkit.

Next time you’re tempted to rely on scroll events, try the Intersection Observer API instead and you’ll love how much cleaner and faster your code becomes!

If you have any questions or want to share your thoughts, feel free to message me on Twitter at @sprucekhalifa.

Until next time—happy coding! 🎉

Day 03: Learning JavaScript APIs: Page Visibility API

Spruce Emmanuel — Sun, 29 Dec 2024 06:00:00 +0000

Ever had a YouTube tutorial playing in one tab while you’re busy working in another, only to realize later that the video is still running? Most of the time, you don’t even remember which tab it’s playing from. And if you’re anything like me, you have too many tabs open to start hunting for it. That random video running in the background is silently draining your battery and consuming resources.

You don’t want the apps you build to work like that. Thankfully, JavaScript has the Page Visibility API, which lets you detect when a user has switched away from your app’s tab. With it, you can pause unnecessary tasks and save your users' precious battery life.

Today, we’re going to learn all about the Page Visibility API: what it is, why it’s useful, and how you can use it to build better apps.

By the end of this article, you’ll walk away knowing exactly how to integrate this API into your projects.

What is the Page Visibility API?

The Page Visibility API is a browser feature that helps developers figure out if a webpage is visible or hidden to the user. When a user switches to another tab or minimizes the browser, this API triggers an event that can adjust your app’s behavior accordingly.

Why Use the Page Visibility API?

This API is incredibly handy in making your apps smarter. Here’s how it can help:

Pause Resource-Heavy Tasks: Stop animations, videos, or timers when users aren’t actively viewing your app.
Save Battery Life: Especially useful for mobile users with limited battery power.
Improve User Experience: Automatically resume paused tasks or even greet users when they return to your app.

How the Page Visibility API Works

The API revolves around two key features:

document.hidden: A boolean that tells you whether the page is hidden (true) or visible (false).
visibilitychange Event: Fires whenever the visibility of the page changes.

Here’s a basic example to show how it works:

document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    console.log('The page is hidden.');
  } else {
    console.log('The page is visible.');
  }
});

When the user switches tabs or minimizes the browser, this event runs, logging whether the page is visible.

Things You Can Do with the Page Visibility API

1. Pause and Resume a Timer

If your app has a timer, you can use this API to pause it when the user switches tabs and resume it when they return.

let timer;
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    clearInterval(timer);
    console.log('Timer paused.');
  } else {
    timer = setInterval(() => {
      console.log('Timer running...');
    }, 1000);
    console.log('Timer resumed.');
  }
});

2. Greet Users When They Return

Add a personalized touch to your app by welcoming users back when they return.

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    alert('Welcome back!');
  }
});

3. Optimize Resource Usage for Videos

Make your app more efficient by pausing videos when the user leaves the page.

const video = document.querySelector('video');
document.addEventListener('visibilitychange', () => {
  if (document.hidden) {
    video.pause();
    console.log('Video paused.');
  } else {
    video.play();
    console.log('Video resumed.');
  }
});

Browser Support

The Page Visibility API is well-supported across modern browsers like Chrome, Firefox, Edge, and Safari. For older browsers, you might want to implement a fallback.

How to Check Browser Compatibility:

You can check compatibility on MDN’s Page Visibility API page.

Limitations

While this API is fantastic, it’s important to know its limits:

Not a Substitute for User Engagement: The API only tells you if the page is visible—not if the user is actively interacting with it.
Behavior May Vary by Browser: Some browsers may not fire the visibilitychange event in all scenarios, so always test thoroughly.

Wrapping Up

The Page Visibility API might not be as popular as other JavaScript APIs, but it’s a powerful tool for improving performance and user experience. By pausing unnecessary tasks when your app isn’t in use, you’re not just saving resources—you’re building apps that respect your users’ devices and preferences.

If you have any questions or want to share your thoughts, feel free to message me on Twitter at @sprucekhalifa.

Until next time—happy coding! 🎉

Day 02: Learning JavaScript APIs: Web Share API

Spruce Emmanuel — Sat, 28 Dec 2024 11:28:50 +0000

Tired of building custom sharing interfaces from scratch? Why go through all that hassle when JavaScript has a built-in tool that lets you tap into the native sharing features of your users' devices? Meet the Web Share API — a handy solution that makes sharing on the web a seamless experience.

In this article, we’ll explore what the Web Share API does and how you can use it to share text, links, and files directly from your web apps.

So after reading this article you'll be working away with knowledge of the Web Share API and how to share various data from texts, to links and even files.

What is the Web Share API?

The Web Share API is a browser feature that allows web applications to access the native sharing capabilities of a user's device. Want to send a link to WhatsApp? Share a file to an email client? All of this becomes effortless, and it works beautifully with mobile devices.

Things You Can Share Using This API

Let’s look at three ways to use the Web Share API:

1. Sharing Text

Sharing text is straightforward. Here’s a simple example:

HTML:

<button id="shareText">Share Text</button>

JavaScript:

const shareTextButton = document.getElementById('shareText');

shareTextButton.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      title: 'Hello World!',
      text: 'Check out this cool text I just shared using the Web Share API!',
    })
      .then(() => console.log('Text shared successfully!'))
      .catch((error) => console.error('Error sharing text:', error));
  } else {
    alert('Your browser does not support the Web Share API.');
  }
});

Preview:

2. Sharing Links

Want to let users share a link? It’s just as simple:

HTML:

<button id="shareLink">Share Link</button>

JavaScript:

const shareLinkButton = document.getElementById('shareLink');

shareLinkButton.addEventListener('click', () => {
  if (navigator.share) {
    navigator.share({
      title: 'Check out this link!',
      text: 'Here’s something interesting:',
      url: 'https://example.com',
    })
      .then(() => console.log('Link shared successfully!'))
      .catch((error) => console.error('Error sharing link:', error));
  } else {
    alert('Your browser does not support the Web Share API.');
  }
});

Preview:

3. Sharing Files

With Web Share API, you can even share files. Here’s how users can pick files from their devices and share them:

HTML:

<input type="file" id="fileInput" multiple>
<button id="shareFiles">Share Files</button>

JavaScript:

const fileInput = document.getElementById('fileInput');
const shareFilesButton = document.getElementById('shareFiles');

shareFilesButton.addEventListener('click', () => {
  const files = fileInput.files;
  if (files.length === 0) {
    alert('Please select files to share.');
    return;
  }

  if (navigator.canShare && navigator.canShare({ files })) {
    navigator.share({
      files: Array.from(files),
      title: 'Sharing Files',
      text: 'Here are some files I want to share with you.',
    })
      .then(() => console.log('Files shared successfully!'))
      .catch((error) => console.error('Error sharing files:', error));
  } else {
    alert('Your browser does not support file sharing with the Web Share API.');
  }
});

Preview:

Browser Compatibility

The Web Share API is supported on most modern mobile browsers, but desktop support is still catching up. To avoid unpleasant surprises, use the canShare method to check if the API supports what you’re sharing:

JavaScript:

if (navigator.canShare && navigator.canShare({ files: [new File([], 'example.txt')] })) {
  console.log('File sharing is supported!');
} else {
  console.log('File sharing is not supported on this browser.');
}

For detailed browser compatibility, visit the MDN Web Share API documentation.

Wrapping Up

The Web Share API is a game-changer for adding sharing functionality to your apps. By tapping into the native capabilities of users’ devices, it saves you development time while delivering a smooth, polished experience.

So, the next time you’re tempted to build a custom sharing interface, let the Web Share API do the heavy lifting for you.

And hey, if you have any questions, feel free to message me on Twitter at @sprucekhalifa. Don’t forget to follow me for more insights and updates.

Happy coding! 🎉

Learning JavaScript APIs: Console API

Spruce Emmanuel — Fri, 27 Dec 2024 16:50:16 +0000

JavaScript has a ton of built-in APIs that make programming fun and interesting. But let’s be real—how many of them do you actually use to their full potential? In this article, we’re diving into these APIs, covering what they are and the cool things you might’ve missed. From the basics to more advanced stuff, you’re bound to pick up some new tricks.

Feeling overwhelmed by JavaScript APIs? Or maybe you’re just here to learn something new? Either way, this guide is for you.

Let’s start with an API that’s been quietly helping you debug all along: the Console API. Sure, you’ve used console.log() before, but there’s so much more it can do. Let’s uncover some of its hidden tricks!

What is the Console API?

The Console API is a collection of super useful methods that make debugging, logging, and visualizing your data easier.

But let’s face it—you’ve probably been stuck on using console.log() for everything. It’s time to break out of that habit because there’s so much more this API can do.

Here are some cool things you’ve been missing out on:

Cool Things You Can Do with the Console API

1. Display Data in Tables

Ever felt like your logs are just a mess of text you can’t make sense of? console.table() has got your back.

Here’s what your logs probably look like right now:

const fruits = [
  { name: "Apple", color: "Red" },
  { name: "Banana", color: "Yellow" },
  { name: "Grapes", color: "Green" },
];
console.log(fruits);

Result:

Now let’s clean that up:

console.table(fruits);

Result:

Much better, right? It’s easier to read, and now your data actually makes sense at a glance.

2. Stop Writing Redundant If Statements with `console.assert()`

Raise your hand if you’ve written a dozen if statements just to log errors. Well, stop doing that! console.assert() is here to save the day.

Instead of this:

const isLoggedIn = false;

if (!isLoggedIn) {
  console.log("User is not logged in");
}

Try this:

const isLoggedIn = false;

console.assert(isLoggedIn, "User is not logged in");

If the condition is false, the message will be logged. So simple, right?

3. Measure Code Performance

Curious about how long a block of code takes to execute? Say hello to console.time() and console.timeEnd().

Here’s how you can measure performance:

console.time("Loop Timer");
for (let i = 0; i < 1_000_000; i++) {}
console.timeEnd("Loop Timer");

Result:

Now you can figure out what’s slowing down your app!

4. Count How Many Times a Block Runs

Ever wondered how often a piece of code gets executed? Keeping track manually can be tricky, especially as your code grows more complex. That’s where console.count() comes in handy.

Imagine this scenario:

function greetUser(name) {
  if (name.startsWith("A")) {
    alert(`Hello, ${name}!`);
  }
}

greetUser("Alice");
greetUser("Bob");
greetUser("Alex");
greetUser("Anna");

At first glance, it might be easy to figure out how many times the greeting runs for names starting with "A." But as your logic expands, you might lose track.

Now let’s simplify things with console.count():

function greetUser(name) {
  if (name.startsWith("A")) {
    console.count("Greeting users starting with A");
    alert(`Hello, ${name}!`);
  }
}

greetUser("Alice");
greetUser("Bob");
greetUser("Alex");
greetUser("Anna");

console.countReset("Greeting users starting with A"); // Reset the count

greetUser("Alice");

Here’s What’s Happening:

Every time a name starting with "A" is greeted, console.count() increments the count and labels it "Greeting users starting with A."
After the reset with console.countReset(), the count starts fresh.

No more guessing or adding print statements all over your code. Just one line, and you’ve got it covered!

5. Style Your Logs with CSS

Sometimes, you need your logs to pop. Use %c to style your logs with CSS and make them stand out.

Example:

console.log(
  "%cWarning: This feature is deprecated!",
  "color: white; background-color: red; font-size: 16px; padding: 4px; border-radius: 4px;"
);

Result:

Highlight errors, warnings, or just have some fun with your logs.

6. Group Related Logs Together

Tired of scrolling through endless logs? Use console.group() to group related logs together.

Here’s an example:

console.group("User Info");
console.log("Name: John Doe");
console.log("Age: 25");
console.groupEnd();

Output:

▼ User Info  
   Name: John Doe  
   Age: 25

You can also use console.groupCollapsed() to keep groups collapsed by default.

Wrapping Up

The Console API is a lot more powerful than you think. From tables to performance measurement, counters, styling, and grouping, there’s a tool for almost every debugging scenario.

This is just Day 1 of our 30 Days of JavaScript APIs series. If you found this helpful, bookmark this article for later and be sure to stick around—there’s so much more to learn!

And hey, if you have any questions, feel free to message me on Twitter at @sprucekhalifa. Don’t forget to follow me for more insights and updates. Happy coding!

Building SmartInbox: My Nylas Journey

Spruce Emmanuel — Mon, 02 Sep 2024 06:43:05 +0000

This is a submission for the Nylas Challenge: AI Expedition.

What I Built and Why

For this challenge, I built SmartInbox, an AI-powered email assistant designed to integrate AI with the Nylas API, demonstrating how these technologies can work together. The core idea was to show how AI can be trained with a user's email data to provide accurate, context-aware summaries and smart replies using Retrieval-Augmented Generation (RAG).

Hosted Auth by Nylas

To securely connect users' emails and obtain the necessary permissions, I used the hosted authentication provided by Nylas. This allows users to safely link their email accounts to SmartInbox.

AI Training with Custom Data

SmartInbox allows users to train their AI model by uploading any email dataset of their choice. This training enhances the AI's ability to generate more relevant and accurate responses based on the user's unique email data.

Specialized Summaries and Smart Replies

Once the AI is trained, users can view their emails and receive specialized summaries and smart replies tailored to the context of each email. This feature highlights the potential of combining AI with the Nylas API to streamline email management.

Please note that since this is a demo project, the functionality to send emails has not been included.

Demo

Check out this short video where I show the main features of SmartInbox and how it helps with email management. Training the AI Model with a large dataset might take a while when watching the demo.

You can also view the project live here to explore its features firsthand.

Code

You can find the source code on GitHub. This project is open source and available under the MIT license.

iamspruce / nylas-ai

SmartInbox

SmartInbox is an AI-powered email assistant that helps you efficiently manage your emails. It provides intelligent email summaries and smart reply suggestions, allowing you to handle your inbox with ease.

Features

AI-Powered Summaries: Automatically generates concise summaries of opened emails, so you can quickly grasp the main points without reading through the entire message.
Smart Reply Suggestions: Offers context-aware reply suggestions using Retrieval-Augmented Generation (RAG) based on your email data. This saves time by allowing you to respond to emails with just a click.
Training with Personal Email Data: The AI assistant is trained using your own email data, ensuring that the summaries and suggestions are tailored to your specific communication style and preferences.

Getting Started

Prerequisites

Node.js (v14 or higher)
Nylas API Key for email integration
Anthropic API Key for AI capabilities
Hugging Face API Key for embedding models
PostgreSQL database for storing user data…

View on GitHub

My Journey

Creating SmartInbox was a great learning experience. I began by setting up a full-stack app using the NEON OSS Next.js Starter, which gave me a strong base. Then, I built an easy-to-use email dashboard with shadcn/ui and connected Nylas for secure email authentication.

Nylas was key in securely connecting to users' email accounts. It allowed me to fetch email data, which I then processed with an AI model.

To make the AI work better, I trained it using public email datasets so it could give more accurate summaries and replies. I also used Claude AI to make the tool even smarter.

During this project, I learned how AI can simplify handling emails and how to combine different APIs and machine learning tools. I'm proud of how it all came together to create a tool that helps people save time. This project has inspired me to keep exploring how AI can improve everyday tasks.

NEON OSS Next.js Starter Kit

Spruce Emmanuel — Fri, 30 Aug 2024 09:52:34 +0000

This is a submission for the Neon Open Source Starter Kit Challenge : Ultimate Starter Kit

My Kit

This is a powerful starter kit designed to kickstart your Next.js projects with ease. It comes fully equipped with authentication, Prisma integration, and a sleek UI using Tailwind CSS and Shadcn UI. Whether you're building a personal project or a full-scale application, this kit provides a solid foundation, including ready-to-go configurations for popular deployment platforms like Vercel, Netlify, and Heroku.

Link to Kit

You can find my starter kit on GitHub: NEON OSS Starter Kit.

iamspruce / neon-oss-starter

The NEON OSS Next.js Starter Kit is a full-stack application template designed to help developers kickstart their projects with modern technologies.

NEON OSS Next.js Starter Kit

Overview

The NEON OSS Starter Kit is a full-stack application template designed to help developers kickstart their projects with modern technologies. It features built-in user authentication, database management, and a fully responsive design, all powered by NEON, Next.js, Prisma, and Tailwind CSS. This starter kit is ideal for building scalable, serverless applications with ease, enabling you to focus on adding your unique features without worrying about the initial setup.

Tech Stack

Next.js 14: React framework for building web applications
NEON: Serverless PostgreSQL database
Prisma: Next-generation ORM for Node.js and TypeScript
NextAuth v5: Authentication for Next.js
shadcn/ui: Re-usable components built with Radix UI and Tailwind CSS
Tailwind CSS: Utility-first CSS framework

Features

User Authentication: Includes sign-up, login, and logout functionality with protected routes for both client-side and server-side authentication, leveraging NextAuth.js.
Database Management: Integrated with Prisma for seamless…

View on GitHub

The repository includes detailed instructions on setting up the kit and getting started with your project.

Your Journey

I chose this stack because it combines the best tools for modern web development, making it easier to create robust, scalable applications. Through this process, I learned how to streamline the integration of various tools like Prisma, NextAuth, and Tailwind CSS, making them work together seamlessly. This project taught me the importance of simplicity and structure in a starter kit, ensuring that developers can focus on building their apps rather than getting lost in setup configurations.

Display: none; worsen or improve website performance?

Spruce Emmanuel — Tue, 16 Feb 2021 15:03:04 +0000

webDevs does display: none; worsen website performance or improves it. 👇👇

15 Ways To Use Google Like A Pro

Spruce Emmanuel — Tue, 09 Feb 2021 00:00:00 +0000

Googling is an Essential skill every web related person must have. In this guide i put together 15 ways to get better in Searching for content on the web

01. Google advanced search

Google advanced search is one of the best google feature, you can narrow your results down to region and when it was updated

Try out The:

Google advanced search preview

02. Finding Quick Definations

Google does a great job in finding answers to your search word or phrases, like what is css , but you can find the meaning of any word in google by adding Define at the begining of the word

Define Css

03. Perform Calculations

You can also perform calculations in google as well by entering any maths equation like so

30*800

04. Unit conversion

Google also performs unit conversion just by entering any unit conversion in the search box

200m to mm

100 dollers to naira

05. Searching for an exact image size

Very useful when working with logos and when you need an image of specific file size, just add imagesize:500x400 at the begining of a word or phrase

imagesize:500x400 spongeBob

Exact 500x400 spongebob image

06. Search Social Media

It is very easy to narrow a search to only social media in google, you can search only social media for a particular user or word in google by just adding @ at the begining of the word like

@SpruceEmmanuel

07. Search For Hashtags

You can also search for your favourite hashtags by just adding # at the begining of the hashtag

#100daysOfCode

08. Search for Items with a specific prize

Finding items that falls withing your budget is one of the coolest thing i like in Google, this can be acheived by simply adding the $ to the begining of the price

Intro to python books $100

09. Exclude certain words from your search result

This is done by adding an - at the begining of the woed you want to exclude

Create a blog with only html -css

10. Searching for an exact match

You can search for an exact match of a word or phrase by puting the word or phrase in qoute

"What is Javascript"

11. Search within a range of numbers

This is extremely useful when you have a minimum and maximum budget, you can Search for items price that are sold for $40 t0 200$ by adding ... between two numbers

Javascript Cookbook $50...$100

12. Combining Search

Add OR between two search query to search for two items at at time. You can combine this with other search parameters to get more accurate search result, also notice that the "OR" is in uppercase

Javascript Cookbook $50...$100 OR Python offline guide $40

13. Search a particular site

You can search a specific site by adding site: at the begining of a site or domain

site:spruce.com.ng

site:.dev

14. Search for a related site

Check similar sites is possible in google by adding related: at the begining of a site

related:spruce.com.ng

15. Google cached version of a site

Can't find an article you once read on a site? you can always check the cache version of a site in google by adding cache at the begining of a site

cache:spruce.com.ng

How to create 5 Cool css only Line effects

Spruce Emmanuel — Fri, 01 Jan 2021 09:38:03 +0000

Lines are always a great way to design our web pages, and lines ain't meant to be boring


//Html
<div class="line"></div>

// Css
.line {
 border-bottom: 2px solid #ccc; // lines shouldn't be this boring
}

5 css only line effect

Adding line to a text

line added to header text from smashingmagazine

Ever wanted to create something like that? 😊

What if I told you that this can easily be achieved with a few lines of css


 // HTML code
   <div class="line-before">
     <span class="line-before__inner">
     Latest posts
    </span>
    </div>

// Css 
.line-before__inner {
 position:relative;
 display:block;
 width:100%;
 color:#333;
 background-position:center;
 z-index:2;
 padding-left:calc(100px + 1em);
}

.line-before__inner::before {
 content:'';
 position:absolute;
 display:block;
 width:100px;
 height:1px;
 background-color:currentColor;
 left:0;
 top:50%
}

And there you have, as simple as that...

Other cool css only Line effects

Highlight Text

Add line to both side of an Element

Css only Wavy line

Animate line on hover

This article was originally written here, Find me online here

Top 5 CSS methodologies in 2021

Spruce Emmanuel — Mon, 28 Dec 2020 07:36:27 +0000

Css is very difficult to manage when you are dealing with a large system, this is because Everything in css is Global...

Over the years developers have tried to proofer solution to this CSS maintainability problems, and this as led to many developers creating their own css methodologies...

What are css methodologies?

css methodologies are systems that are formaly documented down that help us to auhor/write css as isolated modules, rather than just some long indivisible code.

Top 5 CSS methodologies in 2021

Atomic Css
BEM
ITCSS
SMACSS
OOCSS

Please note that this list is based on the survey from The state of CSS 2020

The Big Reveal

There is no best CSS methodology, The one you just to use depends on you and the type of your project.

This post was originally written here
Top 5 CSS methodologies in 2021
...

Create A Blog On Your Mobile Phone Part 3

Spruce Emmanuel — Mon, 21 Dec 2020 00:00:00 +0000

Sad to announce the end of this "how to create a blog on your mobile phone series", well i know we have learned a lot of new things in this web series

Some things we have learned so far

what mobile blogging is
how to create a free website on github with jekyll
how to clone your website to your mobile phone
how to run some basic Git Commands in your mobile phone
and so many other things

incase you missed the other series, don't worry you can always go back and read them up

Link to previous series

Create a blog on your mobile phone part 1

Create a blog on your mobile phone part 2

Now lets go back to what we are really here for, blogging from your mobile phone

What is blogging

Blogging refers to writing, photography, and other media that is self-published online.

So basically you know what blogging is all about, its a way for a lot of people to express their feelings and share there ideas online.

Blogging with jekyll

your blog posts live in a directory called _posts in the root of your site, so basically thats where you will add all your blog posts

Your blog file names begin with "year-month-date-your-title.md"

so when creating your post, always follow the order Year - month - date - title.md

for a detailed on how to write blog posts on jekyll please refer to this jekyll guide below

Learn more about jekyll post

Publishing your first post

The first step is to open your spck editor, The editor you downloaded in the first part of this series, open it and navigate to your _posts folder

_Posts folder looks like this

Go ahead and delete the post found there and create another one with

YEAR-MONTH-DAY-TITLE.md format

Add new file

After you created the post

add your layout and title like this

Modify jekyll site on spck editor

Now you can add anything to your blog post, after all you are now a blogger, after you are done with writting your post, just go ahead and commit your changes and then push them online like we learned in our previous post

and there you have it, you just created your first post, go ahead and preview your new post online

this is what your new website look like in a mobile view

this is what your new website look like in a pc view

Previous posts from this series

Create a blog on your mobile phone part 1

create a blog on rour mobile phone with jekyll part 2

Other resources to learn from

Getting Started With The Web

Jekyll tutorials home

Blogging in jekyll

thanks for reading....

Create A Blog On Your Mobile Phone Part 2

Spruce Emmanuel — Mon, 21 Dec 2020 00:00:00 +0000

Hello dear reader and welcome to the second part of this web series on how to create a website or blog right from your mobile phone.

Quick Recap

Like i said this is the second part of this series, incase you missed the first part you can always go back and read it here:

Create a blog on your mobile phone part 1.

Talking about reading the other article, You should really read that article up as this one is just building on what we learned in the orther article

We learn't a few and very essentials things though:

concept of mobile blogging
how to create a free website/blog
how to clone your website/blog to your mobile phone
and quit a all lot of other things

Don't just take my word for it, you should read it up yourself.

Requirements

Before you continue on this tutorial you should have at least a basic knowledge of the things listed below

HTML
How the web works (refer to part 1)

Yep thats all you will be needing for this part of the series...

Welcome to jekyll

If you are the curious type like me, you would have asked yourself, what is JEKYLL

What really is Jekyll?

Jekyll is a static site generator. it takes text written in your favorite markup language and uses layouts to create a static website. You can tweak the sites's look and feel, URLs, the data displayed on the page and more

From the defination you get the idea... Jekyll is just plain html text that are converted to static website's.

Well static is the opposite of Dynamic , think of jekyll as the opposite of Dynamic websites built on WordPress and other dynamic websites...

of course being static is one of the features i like about jekyll, being static means your pages load super fast, no third party content(You own your contents and codes), and easy set up and customization, like you create a website with just Html, Css and js, Jeez how super fast is that...

In addition to all it's other cool features and plugins, it also uses the Shopify Liquid:

Lquid is an open-source template language created by shopify and written in Ruby.

Did i also mention that jekyll and github are completely free?

Yep they sure are.

Resources to learn jekyll

you can learn all about jekyll and liquid from the below links

Intro to git

What is git?

Git is a distributed version-control system for tracking changes in any set of files... and so on

Basically git is just meant and used to commit , pull and push changes to your remote repository

A lot of terminologies used here, dont worry about that, you will soon see them in action very soon, but before then let me introduce you to what they are and how they are connected to creating a site on your mobile phone

COMMIT: this command is used to save your changes to your local repository (the site you cloned to your mobile phone in the part 1 of this series)
PUSH: this command is used to push(as the name implies) all the files you have commited to your remote repository
REMOTE REPO: This is a common repository that all team members use to exchange their changes. This repository is stored on a code hosting service like Github(That's where github comes in)

Conncecting the dots...

You may be wondering, how does this have to do with blogging from mobile phone...

well from the explanations above, you only need two things

Remote Repository
A place to run Git commands from

you already have a remote repo, so you shouldn't worry about that, what i will introduce to you is how you can execute git commands on your mobile phone

I guess we are done talking...

Too much talk and explanations (I really hope you get the idea), now lets stop talking and start showing how things work

Go ahead and lunch your spck editor, [The one you downloaded on the previous post]

Your cloned project should look like this

Now its time to upload your own contents

Scroll down to the images folder and select it

Image folder looks like this

Click on the three dots(menu of the image folder),and click on Upload File

Click on upload file

Now upload a loving photo of your self, or your website logo..

Now its time to edit the config file and customize the site to display your own info

Now close your image folder and look for and open the file called

_config.yml

when you open it, you should see something like this below

Your config file looks like this

basically anything you edit here affects your site drastically, so be careful of what you touch in here

First thing you should change is name, in your config file change your name


name: your name
#Change it to the name you want to use
#name: Spruce

Change the description too


description: web developer from somewhere
#Change it to anything you want, just dont make it too look (seo issues)
#description: web developer based in Edo, Nigeria

Do you remember the image you uploaded? yep you do, its time to use it. From the Getting Started With The Web you read in the first part of this series i assume you now know how the web work...


avatar: https://....
#Change it to the file you uploaded earlier
avatar: /images/spruce.jpg #in my case

Edit your footer links, add your social media liks to the footer links


footer-links:
  dribble: dribble username
  email:
  facebook:
  ..... etc

Change your url to your site url


url: github-username.github.io
#where github username is changed to your username
url: sprucestatic.github.io #in my case

Note: Leave the baseurl feed empty if your site is "github-username.github.io", but if your site is "github-username/static-site-name" add "/static-site-name" to the baseurl

but if you have followed this series from the beginning please leave baseurl empty...

Now its time to use the Git commands we explained before now

in the spck editor

Click on the last fork icon at the bottom of the editor

Click on the last fork icon to your right

Once you have click on the fork icon, you should see something that looks like the one below

Click on the commit all

the next steps are easy

Click on Commit All
Enter commit Message

You can enter anything in your commit message, but that dosen't mean you should just write a bunch of anything you think of, a commit message should briefly explain the changes you made to your project.

Remember from our defination of commit, it just save the changes to your local computer, in our case your mobile phone, that is the changes wont reflect on the web just yet, Now that is where GIT PUSH comes in the picture... Push as the name implies pushes your saved commit to your remote repo (the one hosted on github) so that people can view it on the web.

As you might have noticed, editing, uploading and committing to your cloned project dosen't require any data Connection. But when pushing your changes, you need a data connection, So go ahead and switch on your data connection and follow the below steps

To push your changes follow this steps:

Click on the last fork icon again
Click on push
Click Ok

Wait for it to push your changes

Boom and there you go, your websites should be live with your changes on the web in a minute...

Go ahead and preview your website

On mobile phone your site looks like this

On a pc your site looks like this

Well thats the end of this part of the series... Next stop is Blogging , Thanks for reading...

Previous parts of this series

Create a blog on your mobile phone part 1

Forem: Spruce Emmanuel

Day 04: Learning JavaScript APIs: Intersection Observer API

What Is the Intersection Observer API?

How Does the Intersection Observer API Work?

1. Creating an Observer

Simplified Version

Understanding Observer Options

1. root

2. threshold

3. rootMargin

2. Observing Elements

What Can You Build with the Intersection Observer API?

1. Lazy Load Images

2. Trigger Animations

3. Infinite Scrolling

Wrapping Up

Day 03: Learning JavaScript APIs: Page Visibility API

What is the Page Visibility API?

Why Use the Page Visibility API?

How the Page Visibility API Works

Things You Can Do with the Page Visibility API

1. Pause and Resume a Timer

2. Greet Users When They Return

3. Optimize Resource Usage for Videos

Browser Support

Limitations

Wrapping Up

Day 02: Learning JavaScript APIs: Web Share API

What is the Web Share API?

Things You Can Share Using This API

1. Sharing Text

2. Sharing Links

3. Sharing Files

Browser Compatibility

Wrapping Up

Learning JavaScript APIs: Console API

What is the Console API?

Cool Things You Can Do with the Console API

1. Display Data in Tables

2. Stop Writing Redundant If Statements with console.assert()

3. Measure Code Performance

4. Count How Many Times a Block Runs

5. Style Your Logs with CSS

6. Group Related Logs Together

Wrapping Up

Building SmartInbox: My Nylas Journey

What I Built and Why

Hosted Auth by Nylas

AI Training with Custom Data

Specialized Summaries and Smart Replies

Demo

Code

iamspruce / nylas-ai

SmartInbox

Features

Getting Started

Prerequisites

My Journey

NEON OSS Next.js Starter Kit

My Kit

Link to Kit

iamspruce / neon-oss-starter

The NEON OSS Next.js Starter Kit is a full-stack application template designed to help developers kickstart their projects with modern technologies.

NEON OSS Next.js Starter Kit

Overview

Tech Stack

Features

Your Journey

Display: none; worsen or improve website performance?

15 Ways To Use Google Like A Pro

01. Google advanced search

Try out The:

02. Finding Quick Definations

03. Perform Calculations

04. Unit conversion

05. Searching for an exact image size

06. Search Social Media

07. Search For Hashtags

08. Search for Items with a specific prize

09. Exclude certain words from your search result

2. Stop Writing Redundant If Statements with `console.assert()`