teleren/devto huggingface dataset:
Amazing shoe preview product card design using spline
Tags: freecodez, react, html, blog
Published: 2023-10-07 12:24:31

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**Amazing shoe preview product card design using spline**

![Amazing shoe preview product card design using spline](https://res.cloudinary.com/freecodez/image/upload/v1696681462/images/q9u8ijxio71agc1ur9b9.webp)

For full source code visit : [https://freecodez.com/post/3xngrh7](https://freecodez.com/post/3xngrh7)


```
<!-- https://freecodez.com -->
<div class="absolute inset-0 z-0 group cursor-pointer bg-violet-50">
    <canvas id="canvas3d" class="block w-full h-full relative z-10"></canvas>

    <div class="absolute left-1/2 top-1/2 z-0 -translate-x-1/2 -translate-y-1/2">
        <svg class="animate-spin h-10 w-10" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
            <g fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2">
                <circle class="opacity-20" cx="12" cy="12" r="11" />
                <path d="m23 12c0 6.1-4.9 11-11 11" />
            </g>
        </svg>
    </div>
</div>
```

Source Code : [https://freecodez.com/post/3xngrh7](https://freecodez.com/post/3xngrh7)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
sort command
Tags: beginners, cli, terminal, linux
Published: 2023-10-07 12:22:15

### The default function of sort command and the -r or --reverse option

```
nuclearegg69@zenbook-f13:~$ cat unsorted.txt
white apple
yellow orange
black banana
hannah montana
cheetah in the savanna
nuclearegg69@zenbook-f13:~$ sort unsorted.txt
black banana
cheetah in the savanna
hannah montana
white apple
yellow orange
nuclearegg69@zenbook-f13:~$ sort -r unsorted.txt
yellow orange
white apple
hannah montana
cheetah in the savanna
black banana
```

### -u option or --unique prints only unique lines while sorting


```
nuclearegg69@zenbook-f13:~$ nano unsorted.txt
nuclearegg69@zenbook-f13:~$ cat unsorted.txt
white apple
white apple
yellow orange
yellow orange
black banana
hannah montana
cheetah in the savanna
nuclearegg69@zenbook-f13:~$ sort -u unsorted.txt
black banana
cheetah in the savanna
hannah montana
white apple
yellow orange
```

### Sorting numbers 

```
nuclearegg69@zenbook-f13:~$ cat unsortedNums.txt
1
2
188
9
78
nuclearegg69@zenbook-f13:~$ sort unsortedNums.txt
1
188
2
78
9
nuclearegg69@zenbook-f13:~$ sort -n unsortedNums.txt
1
2
9
78
188
```

The sort command by default doesnt work for numbers because it compares character by character so first number in 188 is 'more up in the list of numbers' than 2 so 188 goes first, so we have to use -n or --numeric-sort for it work as we would expect.
Navigating the Depths of E-commerce Web Design 🚀
Published: 2023-10-07 12:16:56

👋 Hello!

We're thrilled to embark on a new journey exploring the multifaceted world of E-commerce Web Design! 🌎 Over the upcoming weeks, we'll delve into a series of topics that touch on various aspects of designing compelling, user-friendly, and effective e-commerce platforms.

🔥 Hot Topics for Discussion:

UX Magic: Unraveling the Secrets Behind User Experience in E-commerce
Checkout Smoothness: Strategies to Enhance the Checkout Process & Minimize Abandonment
Responsive Excellence: Crafting E-commerce Designs for All Screens & Devices
AI & AR Wonders: Innovating Shopping Experiences with AI and AR
…and many more! 🚀

🗣 Let’s Discuss!

Whether you’re a seasoned web designer, an e-commerce business owner, or someone intrigued by the digital realm, your insights are valuable! Each week, we'll feature a new sub-topic under the vast umbrella of E-commerce Web Design, opening the floor to your experiences, questions, and knowledge sharing.

📘 Community Guidelines:
To ensure our discussions are productive and welcoming, kindly adhere to the following guidelines:

Respect & Politeness: Treat fellow members with respect. Agree to disagree without being disagreeable.

Stay On Topic: Ensure your contributions are relevant to the thread's subject matter.

No Spam or Promotions: Avoid posting unsolicited promotions or links to external websites.

Privacy Matters: Do not share yours or others' private information on the forum.

Help & Support: Assist other members where possible, sharing knowledge generously.

Report & Flag: If you encounter inappropriate content or behavior, please report it to the moderators.


🚀 Get Involved!

Share Your Insights: Noticed a trend or a novel approach in e-commerce web design? Share it with us!
Ask Questions: Stuck on a design challenge? Your community is here to help!

Showcase Your Work: Developed a stunning e-commerce website recently? Give us a sneak peek!

🔗 Join the Conversation!

Dive into the first discussion thread right here: and let's get the ball rolling on an enlightening exchange of ideas, solutions, and experiences!

Looking forward to exploring the enthralling domain of E-commerce Web Design with all of you! 🎉
Social Login with Laravel
Tags: laravel, php, socialmedia, google
Published: 2023-10-07 12:13:59

Social login has become an integral part of modern applications, making the process of user registration seamless and user-friendly. In today's blog, we're going to dive into the world of social login and explore how Laravel Hands-On provides a comprehensive and user-friendly guide to implementing it in your applications.

**Why Social Login Matters**

Imagine being able to sign up for a new app or website without having to fill out lengthy registration forms or remember yet another username and password. Social login does just that. It allows users to log in or create accounts on a platform using their existing social media credentials. In other words, it streamlines the registration process by tapping into the data from popular social media platforms like Google, Facebook, and Apple.

[**Laravel Hands-On: Your Guide to Social Login Simplicity**](https://github.com/mazimez/laravel-hands-on/tree/social-login)

Laravel Hands-On is your go-to resource for learning Laravel in a beginner-friendly and comprehensive way. But it's not just limited to the basics; it goes above and beyond to simplify complex topics like social login. The focus here is on Google login, but you'll also find insights into integrating Facebook and Apple logins seamlessly.

The magic of Laravel Hands-On lies in its ability to explain even the most technical concepts in a manner that's easily understood by anyone. It's like having a conversation with a knowledgeable friend who wants you to succeed. You won't find jargon or confusing tech-speak here; instead, you'll find clear and concise explanations that break down the process of implementing social login into simple steps.

**Understanding OAuth-2: The Backbone of Social Login**

Before delving into the implementation details, it's essential to grasp the foundation of social login: OAuth-2. But don't worry; Laravel Hands-On has you covered here too.

With Laravel Hands-On, the journey to mastering social login begins, and it's a journey that promises to be informative, enjoyable, and, most importantly, accessible to everyone. Happy coding!
Using Github Actions with Bun
Tags: webdev, bunjs, devops, javascript
Published: 2023-10-07 12:06:43

Still using Bun after last week's hype? Great! Let's learn together how you can use Github Actions and Bun 🚀🍞

## Setup

I am assuming that you already have a GitHub repository with a working bun project. If not, you can find everything in [this public GitHub Repository](https://github.com/sliplane/dockerize-bun)

Create a file in `.github/workflows/test.yaml` and copy-paste the following yaml. You will probably only need to change the last line!
```yaml
name: Test Bun # Name it however you want

on:
  push:
    branches:
      - main # Execute on every push
  workflow_dispatch: # Execute on manual trigger

jobs:
  build-and-start:
    runs-on: ubuntu-latest # Linux base image
    steps:
      - uses: actions/checkout@v3 # Checkout repo
      - uses: oven-sh/setup-bun@v1 # Setup bun
        with:
            bun-version: latest # You can also use a specific version
      - run: bun install # Only needed if you have any dependencies
      - run: bun ./print.ts # Change to your entrypoint!
```

You can now see your [Action runs here:](https://github.com/sliplane/dockerize-bun/actions)

![GitHub Actions](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8yhvwqrvzk24fosp8ki5.png)



## Conclusion

I'd love to know if you are already using Bun for a project! How has the journey been so far? And how are you going to use Github Actions for it? 😊
Chronicles of the Unemployed, Week One After 12 Continuous Years of Employment
Tags: unemployment, frontend, javascript
Published: 2023-10-07 12:04:39

## 📅 A Sudden Shift

**Introduction:**  
Life is full of surprises. Twelve years of continuous employment, and suddenly, I'm facing the uncertainties of unemployment. Being in a foreign land, a place I ventured into for growth, only amplifies the emotional weight.

## 🌍 Foreign Grounds, Familiar Concerns

**The Challenge of Change:**  
Moving countries is a leap of faith. The aspiration was growth, both professional and personal. But this unexpected interlude makes me grapple with the challenges of being jobless in unfamiliar surroundings.

## 🏦 Navigating Financial Uncertainties

**Financial Reality Check:**  
Two kids and savings that might not last long makes every day a financial puzzle. Especially in a different country, every financial decision feels amplified.

## 🚀 Casting the Net, Both Wide and Far

**The Application Marathon:**  
From 46 applications sent, spanning giants like FAANG to nascent startups, only two translated into interviews. The cold, impersonal nature of today's hiring process stands out glaringly. An advanced technology that can sideline a candidate without human intervention seems more like a setback than progress.

## 🖥️ Interviews: A Balance of Hopes and Setbacks

**Trials and Tribulations:**  
The world of interviews is full of surprises. Out of the two chances, one moved to the second round, offering a glimmer of hope. The other, with its live coding session, reminded me of my vulnerabilities. But every interaction, every feedback, becomes a stepping stone towards growth and a renewed determination to demonstrate my potential.

## 📜 Week One: Reflections and Realizations

**The Lessons So Far:**  
One week. A small fraction of time, yet filled with profound revelations. Beyond acknowledging the transient nature of the corporate realm, I'm discovering personal resilience, adaptability, and the essence of self-belief.

## 🌟 Conclusion

**Forward, Always:**  
This is merely the onset of my chronicles. Though the journey is peppered with uncertainties, I'm fortified by hope and unwavering resolve. To all navigating similar waters: setbacks often precede great comebacks.

I always value feedback and interaction. Feel free to [follow me on Twitter](https://twitter.com/LuisHCCDev), [engage with my Threads](https://www.threads.net/@luishccdev), or [connect with me on LinkedIn](https://www.linkedin.com/in/luis-castro-cabrera/). Eagerly awaiting our digital crossings!

If you like my content and want to support me, you can do so by [buying me a coffee](https://www.buymeacoffee.com/luishcastrv) ☕️. I would really appreciate it!
Will it be fine to learn UI/UX as a developer?
Tags: discuss, design, beginners, webdev
Published: 2023-10-07 12:02:41

What are the advantages of learning UI/UX for developers?

How can it enhance their skills and versatility while also improving their understanding of user experience? 

Absolutely! Learning UI/UX as a developer can be incredibly beneficial. Not only will it enhance your skills and make you a more well-rounded developer, but it will also give you a deeper understanding of the user experience and how to create interfaces that are both functional and visually appealing. 

You can find a valuable[ ebook](https://bit.ly/3LMEFYw) here to gain some more knowledge about it.
Enhance Your Workflow with Desktop Shortcuts
Tags: linux, shell, command
Published: 2023-10-07 11:47:29

Good day, folks;
I was experiencing an always-repetitive task each morning and sometimes in the afternoon too. Starting the workday by opening the same applications and services every morning and afternoon can become tiresome. Each time I powered on my laptop, I found myself going through the same motions-launching Visual Studio Code, IntelliJ, and starting up the required services on terminal.

Today, I will show my first fix-solution with a simple yet powerful script.

> Script is a text file that contains a sequence of commands for a UNIX-based operating system.

As a Linux user, you might be familiar with using the terminal for various operations, but did you know that you can streamline your workflow further by creating desktop shortcuts? In this blog post, I will show you the necessity and importance of desktop shortcuts on Linux and how they can make your life easier.

Desktop shortcuts provide a convenient way to access frequently used applications, scripts, or commands with a single click. They eliminate the need to remember and type complex commands every time you want to perform a specific task. Imagine having a long series of commands that you use regularly to start your development environment, open projects, or perform system maintenance. With desktop shortcuts, you can simplify these operations and save valuable time.

We can leverage .desktop files, which are text-based configuration files. These files contain metadata about the application, including its name, command to execute, icon, and categories.

For instance, let’s create a desktop shortcut to start a local development server.
**Script file:**
`
!/bin/bash
sudo service nginx stop
sudo service apache2 restart
gnome-terminal --working-directory=/home/yinebeb/path/to/myapp/
code /home/yinebeb/path/to/myapp/`

**Desktop entry file:**

`
[Desktop Entry]
Name=eTech-erp
Comment=stop Nginx, restart Apache2, open Terminal, Code and GoLand
Exec=/bin/bash /home/yinebeb/path/to/myapp.sh
Icon=/home/yinebeb/path/to/logo.png
Terminal=false
Type=Application
Categories=Utility;Development;`

Save the script file with .sh extension as in myapp.sh and the desktop with .desktop as in myapp.desktop. Move the desktop entry file to .local/share/applications

Now make these file privilege to executable by running following commands:

`$sudo chmod +x myapp.sh
$sudo chmod +x myapp.desktop`

After this, you can access your app on the start menu, just press the supper key, type your app name, e as in eTech-erp, the name in the desktop entry.

**Conclusion**

By creating shortcuts to commonly used applications and scripts, you can save time, boost productivity, and maintain a well-organized work environment. If you find yourself bogged down by repetitive tasks, consider creating a simple script to automate your routine. Embrace the power of automation and set yourself free to explore new horizons in your daily work life.

Stay tuned for more tips and tricks!

ደህና ሁኑ | good bye!
Button border animation using css
Tags: freecodez, react, html, blog
Published: 2023-10-07 11:44:29

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**Button border animation using css**

![Button border animation using css](https://res.cloudinary.com/freecodez/image/upload/v1696674546/images/q3z3dygnp5ozyioumbup.webp)

For full source code visit : [https://freecodez.com/post/0avsukr](https://freecodez.com/post/0avsukr)


```
<!-- https://freecodez.com -->
<div class="container">
    <a class="btn" href="#">
        <span class="btnInner">Button</span>
    </a>
</div>
```

Source Code : [https://freecodez.com/post/0avsukr](https://freecodez.com/post/0avsukr)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
pwd & ls
Tags: beginners, tutorial, cli, terminal
Published: 2023-10-07 11:35:23

### pwd command

- it lets you print out the path of the current working directory
- pwd stands for print working directory
```
someone@zenbook-f13:~$ pwd
/home/someone
```

### ls command

- it lists files and directories(folders) inside current working directory except for hidden files

- ls stands for list

```
someone@zenbook-f13:~$ ls
a  b  c  d  e  test
someone@zenbook-f13:~$ ls test
a  apple  b  banana  c  cactus  test2
```
- you could also provide an argument for the ls command to list the contents of the argument folder

#### ls options

- `-a` lists ALL files and directories and that means including hidden files. hidden files start with a dot `.` 

```
someone@zenbook-f13:~$ ls -a
.   .bash_history  .bashrc  .hushlogin  .local       .profile         .sudo_as_admin_successful  a  c  e
..  .bash_logout   .cache   .lesshst    .motd_shown  .python_history  .zcompdump                 b  d  test
```


- `h` lists contents in human-readable format
```
someone@zenbook-f13:~$ ls -lh
total 4.0K
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 a
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 b
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 c
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 d
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 e
drwxr-xr-x 3 someone someone 4.0K Oct  5 02:33 test
```
- `l` lists contents in long format 

```
someone@zenbook-f13:~$ ls -l
total 4
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 a
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 b
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 c
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 d
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 e
drwxr-xr-x 3 someone someone 4096 Oct  5 02:33 test
```
- `--sort=someSortingCriteria` intuitive
```
someone@zenbook-f13:~$ ls -l --sort=time
total 4
drwxr-xr-x 3 someone someone 4096 Oct  5 02:33 test
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 d
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 e
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 a
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 b
-rw-r--r-- 1 someone someone    0 Oct  3 19:07 c
```
wc command
Tags: terminal, cli, beginners, tutorial
Published: 2023-10-07 11:32:39

The wc commands stands for word count

```
nuclearegg69@zenbook-f13:~$ ls
a  b  c  echo  empty  inNano3  inNano3.txt  inNanoRenamed  inNanoSymlink  testRen  testRen2
nuclearegg69@zenbook-f13:~$ nano a
nuclearegg69@zenbook-f13:~$ wc a
 5  5 58 a
```

When we pass a file as an argument to `wc` and run it, it gives us three numbers: the first is the line count, the second is the word count, the third is the bytes count. 

You can add options to wc to limit what you want

```
nuclearegg69@zenbook-f13:~$ wc -l a
5 a
nuclearegg69@zenbook-f13:~$ wc -w a
5 a
nuclearegg69@zenbook-f13:~$ wc -c a
58 a
nuclearegg69@zenbook-f13:~$ wc -m a
58 a

```

`-l` option gives you the lines only
`-w` words only
`-c` bytes only
`-m` characters only
Embarking on a Cloud Journey: Simplifying the Cloud for Beginners
Tags: beginners, firstpost, aws, cloud
Published: 2023-10-07 10:47:37

Title: **"Embarking on a Cloud Journey: Simplifying the Cloud for Beginners"**

Hello Cloud Enthusiasts!

I'm thrilled to be a part of this fantastic cloud community, and I want to kick things off with a simplified introduction to the world of cloud computing. Whether you're just starting or looking to brush up on your cloud knowledge, let's make this journey together straightforward and enjoyable.

Why Cloud Computing?

Imagine having your computer, files, and software accessible from anywhere, just like magic! That's what cloud computing offers – the ability to store and access your data and applications online, rather than on your local device.

My Cloud Journey

My cloud journey began with the need for flexibility and scalability. Traditional IT setups felt rigid and expensive. Cloud computing was the answer, offering the freedom to scale resources as needed and pay only for what you use.

Why This Blog?

I'm excited to contribute to this blog because I want to demystify the cloud for beginners. Cloud computing can seem complex, but it doesn't have to be. We'll explore cloud basics, essential services, and practical use cases.

What to Expect

In upcoming posts, we'll cover topics like cloud service models (IaaS, PaaS, SaaS), key cloud providers, and how to get started with popular cloud platforms. If you have questions or topics you'd like us to dive into, please share in the comments – let's make cloud computing simple and accessible for everyone.

Conclusion

Cloud computing is all about convenience, scalability, and accessibility. I'm excited to embark on this journey with you all and look forward to providing straightforward insights and knowledge sharing that will make understanding the cloud a breeze.

Stay tuned for our upcoming posts, and don't hesitate to reach out with your thoughts and suggestions. Together, let's make the cloud a friendlier place for beginners!

Cheers to a seamless cloud experience!

Best regards,
Amit Vitthal Kolekar
Advantages of Using React JS for Web App Development
Tags: react, reactjsdevelopment, ai
Published: 2023-10-07 10:43:11

Using React JS for web app development offers several advantages that contribute to the efficiency, scalability, and overall success of the development process. Here are some key advantages of using React JS:

**Simplified Development Process:** React JS uses a modular approach where the user interface is divided into reusable components. This makes development easier, encourages code reuse, and simplifies maintenance and updates. Developers can efficiently create, reuse, and combine components to build complex user interfaces.
**Efficient Rendering:** As we have seen, React JS utilizes a virtual DOM, which is a lightweight copy of the actual DOM. When there are changes in the data, React calculates the most efficient way to update the virtual DOM and applies those changes to the actual DOM. This process, known as reconciliation, ensures that only the necessary components are re-rendered, resulting in improved performance and faster rendering times.
**Enhanced Performance:** React JS optimizes performance by minimizing direct changes to the DOM. By using the virtual DOM and updating only necessary components, React reduces the workload on the browser, resulting in a smoother and more responsive user experience.
**Large and Active Community:** Developers can find solutions to common challenges, access libraries, and packages, and stay up-to-date with the latest trends as React JS has a vast and active community of developers.
**SEO-Friendly:** React JS supports server-side rendering (SSR), which enables search engines to crawl and index web pages more effectively. This improves the search engine visibility of web applications built with React JS and helps with search engine optimization (SEO) efforts.

These advantages make [React JS](https://www.uplogictech.com/mobile-app-development-company) a popular choice for developers seeking to build robust, scalable, and high-performance web applications.