DEV Community: Samuel Amagbakhen

Lazy Loading with Intersection Observer API

Samuel Amagbakhen — Sun, 01 May 2022 15:41:46 +0000

INTRODUCTION

So recently, I came across a better way to implement image lazy-loading on a web-page, so after a couple of articles and videos, I implemented it this way.

Before we start, let's define two things.

Lazy Loading: Lazy-loading is a technique used in optimizing a content on a web-page and in these article, we'll be using it in relation to image loading on a web-page.
Intersection Observer API: The Intersection Observer API is a browser API that provides a way for the browser to measure the position of a DOM element relative to the top of the view-port. One key thing to note is that it performs all these operations asynchronously.

Now, that we've defined that, let's see how we can use that to "lazy-load" images.

Step 1: HTML

Notice the images to be lazy loaded assigned a class of lazy-img and a data-src attribute. The links in src attributes of these images are placeholders that will load on the page initially before they are replaced by the images in the data-src attribute as we scroll.

Step 2: CSS (Optional)

I decided to make the images block elements here so that they don't all show up when the DOM is loaded, that way, some images are hidden from the view-port enabling us to see the effect of lazy-loading.

Step 3: JavaScript

The Intersection Observer API takes in a callback function and options guiding how the callback should be called.

The root option specifies the element to be used as the view-port for checking the visibility of the target DOM element. It defaults to the browser's viewport if set to null.

The threshold option takes in a number specifying how much of the target element should be visible before the callback is executed. In this case, I set it to 0.5 which indicates 50%.

Final Step - Test

So you can see it in effect, below is an embedded code-pen showing lazy-loading implemented.

How to Handle LinkedIn and Twitter Link Previews.

Samuel Amagbakhen — Sun, 10 Apr 2022 20:36:57 +0000

INTRODUCTION

It's been a while I've posted an article on Dev Community, well, a while is somewhat over a year. Anyways, while I was gone,I've learnt quite a lot which I'll get into some other time.

So, I was working on my portfolio site, and I decided to share the link on LinkedIn and Twitter and noticed something was wrong;

The image previews and description wasn't showing up quite right, I made a couple of research and still saw I wasn't getting the image to show up. I debugged and discovered I wasn't sharing the image quite right.

In this article, I'd take you through a step-by-step process of getting your link preview done properly(especially that image part, lol).

HANDLING THE PREVIEWS

Before I start, I know some people will say this is a job for marketers and not developers but it wouldn't hurt to know bit of it.

When you make a post on LinkedIn or Twitter, they take data from the meta tags on that page and preview it for the viewers to get a glimpse of what they'll be viewing by clicking on that link. Here's an example for Linked and Twitter respectively;

HOW CAN YOU DO THIS ON LINKEDIN

To do this on LinkedIn, you need to include the following meta tags and make sure they are properly formatted.

Note that LinkedIn has a couple of rules concerning the image link placed here. I'll list them below;

The maximum file size allowed is 5MB.
The minimum image dimension should be 1200px X 627px.

I encountered a problem while trying to share my image from photo hosting sites like Imgur and Google Photos so here's how I got around that issue.

I uploaded the photo to Google Photos but instead of creating a link to share the image, I opened up the image, right-clicked on it to pop open the menu and copied the image address. I pasted the address in the meta tag and it worked for me. I think LinkedIn can't pull data off the shareable link because, well, it is protected. Let me know in the comment section if that doesn't work for you.

HOW CAN YOU DO THIS ON TWITTER

While LinkedIn relies on the Open Graph meta tags to preview links, Twitter does it's own a bit differently, it uses Twitter card meta tags.

Again, I placed my url the same way I handled it for LinkedIn.

CONCLUSION

So, in case you want to see how you page/site looks before actually posting them on Twitter or LinkedIn, you can use the LinkedIn Post Inspector Tool for LinkedIn Posts or Twitter Card Validator for Twitter Posts.

THANKS FOR READING!!

Parameters and Arguments..the difference

Samuel Amagbakhen — Mon, 03 Aug 2020 15:35:43 +0000

Hello, Developers...

So, I remembered a definition I struggled with back then in CS class and I decided to differentiate so others could learn from it.

What is the difference between

Parameters and Arguments?

A lot of devs use these terms interchangeably, it's really no big deal if you're writing codes but when documenting, you want to make sure you're passing the right information across to whoever's reading your article.

Parameters are named variables which are declared during a function's definition.
Arguments are the real values passed into the functions.

As you see in the example above, the parameter in the function is the name variable passed in during the function definition while the argument is the name Samuel passed in during function invocation.

You can use this link as a reference to understand better.

Before You Start Coding...

Samuel Amagbakhen — Tue, 21 Jul 2020 17:34:18 +0000

Hey!! Dev Community, it's my first post here so I thought I'd go back to the basics. So, guys, let's go in.

I get approached with questions like, "Samuel, I want to start coding. What do I do?"

A lot of blog or articles online may just tell you to pick a language and start learning because..well, it's popular or trending or likely to rise in ranks as time goes by. I know because that's how I wrote my first "Hello World". I wrote my first code in Python and now I code in JavaScript.

Okay, Before you start coding.., what should you do?

KNOW YOUR AIM: Ask yourself this question, why am I coding? What do I want to build? Do I like the web or do I want to make desktop applications? Do I want to get into Cyber Security? Basically, I advise people looking to learn a programming language to research on Careers in Programming and then make a choice.

KNOW YOUR STACK: After picking your chosen field(you could decide to switch later though..), you'd do well to know the languages needed to learn to achieve your goal. Make research based on your geographical location, that way you'd avoid learning a language that's obsolete.

START LEARNING!! You could decide to get taught by registering for a Bootcamp or take an online tutorial in your chosen field. You can find online tutorials at Udemy, freeCodeCamp and a lot of other websites.

Following this outline has helped me pick a field and it gives me some sort of direction. I feel like just picking any language to code is like just learning how to use a tool without knowing what to use it for.

Although, some people learn languages just for educational purposes, if you looking to get into programming as a career, you should definitely choose a field.

Okay guys, I guess I've enlightened you a bit, you can leave a comment if you have contributions to this post or criticisms. I'll appreciate your feedback. Have wonderful evening(yea!, I'm writing this in the evening).