DEV Community: Unegbu Clinton

How to push large files to git repository using Git LFS

Unegbu Clinton — Mon, 30 Sep 2024 11:22:31 +0000

So I was working on a project recently where I had to work with high-resolution assets, and as a result, they were large in size. I couldn't push the files to my repository. Whenever I tried, I received the following error:

remote: error: File file.csv is 182.47 MB; this exceeds GitHub's file size limit of 100.00 MB remote: error: GH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com.

Now let's talk about git extension Git LFS and how to utilize it.

Git Large File Storage (LFS) is a Git extension designed to handle large files in your repository more efficiently.

1. What is Git?

Git is a version control system that lets you track changes to your code and collaborate with others. Normally, Git saves all the content (files, code, etc.) directly into your repository, including any images, videos, or large binary files.

2. Why Do We Need Git LFS?

By default, Git stores everything, but large files like high-resolution images, videos, or datasets can make your repository very big and slow. Every time you push or pull changes, Git downloads all the data, which takes time and uses more storage space on your machine.

Git LFS is designed to handle these large files more efficiently by:

Storing large files separately: Instead of saving large files directly in your repository, Git LFS replaces them with pointers (small references). The actual file is stored outside your repo in a separate location.
Keeping the repo light: This way, your repository stays lightweight and fast because Git only downloads the large files when you need them.

3.How Does Git LFS Work?

When you add a large file (e.g., a video or image) to your repository, Git LFS replaces it with a small pointer file.

The pointer file tells Git LFS where the large file is actually stored.
When someone else clones your repository or pulls changes, they’ll get the pointer file instead of the large file itself unless they explicitly pull down the large files.

4. Getting Started with Git LFS

To start using Git LFS in your project, follow these steps:

1.Install Git LFS: You need to install Git LFS on your machine. For most systems, this is done by running:

git lfs install

2.Track Large Files: Once installed, you need to tell Git LFS which files to track (e.g., all .png files or _.mp4 _files). This is done using the git lfs track command:

git lfs track "*.png"

This tells Git LFS to track all files ending with .png.

3.Commit the Changes: After running the track command, Git LFS creates a .gitattributes file that defines the rules for which files to track. You need to commit this file to your repository:

git add .gitattributes
git commit -m "Track large files using Git LFS"

4.Add and Push Large Files: Now, when you add a large file (e.g., a video or image), Git LFS will automatically manage it:

git add largefile.mp4
git commit -m "Add large video file"
git push

Note
Make sure you have initialized and set up LFS before committing your large files, else git LFS would not track the file when you push. And you would continue to get the error as before. I also encountered this problem when I first started using the git LFS extension.

5. Pulling Large Files:
When someone clones or pulls your repository, they will get the lightweight pointer files by default. If they want the actual large files, they can pull them down with:

git lfs pull

6. Benefits of Git LFS

Speeds up Git operations: Your repository stays fast because Git doesn’t have to handle large files directly.
Reduces storage use: Large files are stored separately, which reduces the size of your repo.
Efficient collaboration: Only the necessary large files are downloaded when needed.

7. Drawbacks of Git LFS

Storage limits: Some platforms (like GitHub) provide limited free storage for LFS, and you may need to pay for extra storage if you have a lot of large files.
Slower pulls with large files: If you have a lot of large files and download them all at once, it can still take time, though Git LFS optimizes this compared to regular Git.

Feel free to add comments or questions. I'll gladly reply them

Implementing Smooth Scrolling for a Better User Experience.

Unegbu Clinton — Tue, 17 Sep 2024 08:56:23 +0000

Smooth scrolling is a modern micro-animation feature that enhances user experience by allowing easy navigation between sections of a page. Instead of jumping to sections instantly, smooth scrolling creates a fluid, engaging transition. It's an awesome way to keep users engaged without overwhelming them with abrupt jumps.

In this article, we'll explore two ways to implement smooth scrolling:

Using CSS
Using JavaScript

Let's first dive into using CSS for smooth scrolling.

Why CSS for Smooth Scrolling?

CSS is the simplest and most preferred method to achieve smooth scrolling. It's efficient for page performance since no extra JavaScript is loaded, making it faster and lighter. Let's go ahead and implement this in our project.

Step 1: Creating the Navigation Bar

First, let's create a simple navigation bar that holds our navigation links. These links will take users to specific sections on the page.

Make sure the navigation links are anchor tags, as they allow us to easily jump to specific sections of the page.

Step 2: Creating Sections
Now that we have our navigation links, let's create the corresponding sections.

We've created sections for each nav link.

Step 3: Adding Scrollable Content
For smooth scrolling to work, your page needs enough content to scroll. Let’s add some dummy text to make the page scrollable.

Finally we have enough content to make our page scrollable.

Step 4: Linking Navigation to Sections
We’ll use the href attribute of the anchor tag to reference the sections we want to scroll to. Simply add a # followed by the corresponding section ID.

So what we are basically doing from the image above is using the href attribute to reference the section we want our nav links to go to.

Step 5: Assign the appropriate identifier(id) to the appropriate section

So what we have done now is simply assigning each link to it's appropriate section with the href attribute and Ids. Therefore nav link with a href of #section-one would be matched with a section of id section-one

Now when we click on the nav link we are taken to the section.
But there is a something we noticed, it is not smooth, the page jumps to the section which is not a great experience.

Step 6: Adding Smooth Scroll with CSS
To enable smooth scrolling, add a single CSS property to the html element.

When we add the scroll-behavior property to our html, we can witness the smooth scrolling effect when our nav link is clicked.

How It Works

Under the hood, the href attribute in the anchor tag is traditionally used for navigation to external pages or URLs. However, when paired with a # followed by a section ID, the anchor tag "looks" within the current page and scrolls to the corresponding section. By adding the scroll-behavior: smooth; CSS property, we create a fluid transition between sections, enhancing the overall user experience.

The other way we can achieve smooth scrolling is using JAVASCRIPT to handle it.
We can also achieve this in just a few steps:

NB: Each section would still have the assigned id like before.

Step 1: Create a scrollIntoView function

We can create a function in javascript that would use the scrollIntoView method to achieve the same result. Like so:

Step 2: Embed function when link is clicked

we will embed the scrollIntoView function within the event listener attached to each navigation link. This way, when a link is clicked, the page smoothly scrolls to the referenced section.

This can also be refactored depending on the framework you are using for development.

This are two simple ways we can achieve smooth scrolling when building Intuitive webpages.

Leave a comment if you have a question or a feedback.

Content editable element in React.

Unegbu Clinton — Thu, 25 Apr 2024 09:21:46 +0000

In recent time, I was tasked with implementing a feature that allows users to edit content seamlessly, such as modifying paragraphs or headings. I explored various approaches to tackle this challenge, ranging from toggling text elements to input elements upon clicking or onBlur events, to leveraging the 'editable' prop in the Ant Design library.

All the above suggestions worked but not giving me the result I was looking for. Then I learnt something new. I figured you can also make text elements (paragraph tags, header tags etc.) editable seamlessly with an inbuilt attribute called contentEditable.

So contentEditable prop when passed, would make the element editable by just clicking on it, it can be a lot helpful when building rich editors so basically what this is doing is giving user the ability to inject html directly on the DOM(Document Object Model) which if we are being honest can be risky due to browsers inconsistency so it should be handled properly.

How it works

contentEditable is a property In the html element that help with rendering rich texts in the browser, and editing it on the fly, making an element editable is quite straight forward.

Let’s see an example:

From the example above we noticed the props being passed into the element

contentEdtable: This prop is set to true, which signifies to the browser that this element is editable

suppressEditableContentWarning: This prop is also added to help remove warning that’s arise when using the contentEditable prop, this is a warning you can possibly get “A component is contentEditable and contains children managed by react” if using it in a react project.

Now, let’s save the value that is being typed in our editable element.

Now in this example, we can clearly see we how we catch values typed into our editable content and save it in a state. And if we go over to our console and check after the onBlur function is fired you should see your value rendered. In our case "Hello there"

There are other methods you can use to save your data, I decided to use onBlur by discretion, but you can choose to use other functions like onInput, onMouseOut, onKeydown etc.

NB. Editable elements do not have onChange function like form elements(input tags, textarea tags etc).

Let's do one last trick. We now have our editable content up and working, but just like inputs have placeholders when it is empty, we too can add placeholders to our elements when empty.

Here is how:

In the image above you can see we added two new attributes

data-placeholder: This attribute helps us add the appropriate placeholder to our element. This is where we would add our placeholder value

className: This is us adding a className to our editable element so we can target it in our css.

Then, our final strike as we would have known is going to be in our css file.

With this css properties added to our element class our element should have the placeholder specified by the data-placeholder in the html.

And that's it guys!

We have successfully created an editable element, saved it's state locally and also added placeholder when it is empty.

Best wishes on your development journey.

Understanding JavaScript Promises

Unegbu Clinton — Thu, 11 Apr 2024 16:48:41 +0000

In modern asynchronous programming, promises play a crucial role in managing the complexity of handling asynchronous operations.
As developers, we frequently encounter scenarios where tasks take time to complete, such as fetching data from servers or making API calls. Promises provide a structured approach to dealing with these situations, making code more readable, maintainable, and efficient.

Promise States:
A promise can exist in one of three states: pending, fulfilled, or rejected.

Pending: This is the initial state when a promise is created. It represents the time between the promise creation and the point when it's either fulfilled or rejected.

Fulfilled: A promise is said to be fulfilled when the asynchronous operation it represents is successfully completed. It means the promised result is available, and the promise transitions to this state with the resolved value.

Rejected: A promise is rejected if the asynchronous operation encounters an error. In this case, the promise transitions to the rejected state, providing the reason for the rejection, which is usually an error object.

How to Handle Promises

Understanding promises and knowing how to handle them is crucial when dealing with asynchronous operations in your applications and projects. Promises allow you to manage asynchronous calls effectively, ensuring your code remains interactive and responsive.

There are two primary methods for handling promises:

1. Async/Await
One of the notable features introduced in the updated JavaScript syntax ES6 (ECMAScript 2015) is Async/Await. This approach simplifies asynchronous code and makes it more readable.

How Async/Await works:

You create a function that makes an asynchronous task and using the async keyword before the function declaration. This signifies that the function will contain asynchronous code. Inside the function, you use the await keyword before the promise. This instructs the code to pause execution until the promise returns a result, ensuring that the subsequent lines of code within the function are not executed until the promise's result is available.

Here's an example:

The provided code utilizes an endpoint to fetch data through a function call. The function is marked with the async keyword, indicating that it's an asynchronous function and can employ the await keyword within. Within the code block, the await method is used to make a call.

** 2. The .then()**

This method is commonly used with promises to define what should happen once the promise is resolved (successfully completed). It takes a function as an argument, which will be executed when the promise is resolved. This allows you to chain actions to be taken after the promise is fulfilled. Therefore, do not wait for the promise to be resolved or rejected before executing the other lines of code.

Here's an example:

In this updated code block, our approach to handling promises has changed. Instead of using async/await, we're utilizing the .then() syntax for promise handling. This method allows us to define a sequence of actions that should occur as the promises resolve.

Practical Difference between “Aync Await” and “.then”

Now let's dive into the practical differences between the two method of handling promises

Let's run this block of code:

When we run this code we noticed something interesting, and that's the hierarchy of how our code is executed. If we check our console we get something like this :

We can clearly see that the “I came first” was executed first before the actual result from the API. Which brings us back to what we discussed earlier, when we say using the “.then” syntax we don’t wait for the promise, instead we give it a line of action to perform when it is returned which in our case we asked our code to console.log the response returned by our promise .

Now lets run this block of code:

Now let's see what we have in our console

Great. Now the console logged data were printed in the proper order. Which confirms to our earlier discovery, that Async await will not run other block of code until it gets back a response from our promise either resolved or rejected.

So its a wrap. I hope we are able to understand how promises work in JavaScript and how to handle them correctly.

Understanding Props in React: Empowering Reusable Components

Unegbu Clinton — Sat, 26 Aug 2023 17:18:00 +0000

In the world of React, a potent superpower that sets it apart as an exceptional framework is its feature known as "props," short for properties. Props provide a mechanism to convey data within components, facilitating the customization of both behavior and appearance. This seemingly simple concept forms the backbone of creating reusable components, thus enabling the development of powerful and dynamic web applications.

So, What Exactly are Props?

Props, or properties, are objects designed to pass data from one component to another, often from parent components to their child components. This mechanism allows us to change a component's behavior or appearance without needing to meddle with its internal workings. One crucial aspect to note is that props are strictly read-only; components that receive props cannot alter them directly.

The Magic of Passing Props

In React, the process of passing props involves a straightforward approach. Just as you assign attributes to HTML elements, you can bestow data upon a component by using attributes termed as props. For instance:

This is a simple card component we have created using typescript and tailwind for styling, that display the name and age of a person,

Let's consider a use case where we need to display the names and ages of more than 5 people. Instead of duplicating the same component code, we can utilize a single component called "ChildComponent" and pass in the necessary data using props.

By implementing props, we can achieve this in a clean and concise manner. Here's how

Now let's explain our code:
Looking at the code deeply we'd understand that the code is almost the same as the one earlier but with a little adjustments.

Adjustment 1: On line 7, the variable name is enclosed within curly braces {}. Similarly, on line 8, the variable age is also enclosed within curly braces. This signifies that these values are dynamic and can vary based on what is provided when the component is used.

Adjustment 2: Notably, our updated code now incorporates parameters on line 3. These parameters serve as placeholders for dynamic values. As a result, when utilizing the component, it is necessary to assign specific values to these parameters. The presence of TypeScript also helps further clarifies the expected data types that should be supplied, which in our case are string and number.

Now let's use our component

Now as we can see we are rendering our ChildComponent in the parent component, where every person is reusing the same component but with their own name and age.

Output:

To make our code implementation a lot more better, we can then introduce the ES6 Map array method.

There you have it, this is a simple explanation to how react props work.

I hope this helps
Good luck