teleren/devto huggingface dataset:
Enhance Your Website's Image Carousel with Owl Carousel Two and Elevated Zoom
Tags: javascript, elevatedzoom, owlcarousel, webdev
Published: 2023-05-28 01:32:25


![Enhance Your Website's Image Carousel with Owl Carousel Two and Elevated Zoom](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/asgrehfp7befbzq66q46.png)


Link to view the live demo: [View Demo](https://sammulla47.github.io/owl-carousel-two-integration-with-elevated-zoom/)

Link to raw code: [Raw Code
](https://github.com/sammulla47/owl-carousel-two-integration-with-elevated-zoom/)
we'll explore how to integrate Owl Carousel Two with Elevated Zoom to enhance the image carousel functionality on your website. By combining these two powerful tools, you can create an engaging and interactive user experience for showcasing product images or any other type of visual content. Let's dive in!

Understanding the HTML structure: We'll start by examining the provided HTML code and understanding its structure. It includes a container element for the carousel, a set of image items, and a zoom lens element.

Applying CSS styling: To ensure a visually appealing carousel, we'll apply CSS styling to the carousel container, image items, and zoom lens. This includes setting the dimensions, positioning, and other visual properties to achieve the desired look and feel.

Integrating Owl Carousel Two: Next, we'll integrate Owl Carousel Two into the HTML structure. This powerful carousel library allows us to create responsive and touch-friendly image carousels with ease. We'll initialize the carousel, set the number of items to display, and configure navigation options.

Incorporating Elevated Zoom: Now comes the exciting part – integrating Elevated Zoom into the carousel. This advanced zoom library enables users to zoom in and inspect the images in detail. We'll add the necessary JavaScript code to enable zoom functionality and customize settings like the zoom window dimensions.

Adding interactivity: To enhance the user experience, we'll incorporate interactivity into the carousel. This includes adding event listeners to the zoom lens for hover and click actions. Users can hover over the lens to see it change color, indicating interactivity, and click to trigger the zoom-in functionality.

By following these steps, you can create a captivating image carousel that not only showcases your products or visual content but also allows users to explore the images up close with the zoom functionality.

Feel free to access the live demo here to see the integration in action. If you're interested in studying or modifying the code, you can access the raw code here.

In conclusion, integrating Owl Carousel Two with Elevated Zoom offers a powerful solution for enhancing image carousels on your website. Take advantage of the flexibility and customization options provided by these tools to create an immersive and visually appealing user experience. Happy coding and creating stunning image carousels!
How to override shortcode in WordPress
Tags: wordpress, shortcode, webdev, javascript
Published: 2023-05-28 01:23:31

To override a shortcode in WordPress, you need to follow a series of steps. Here's a definitive guide to help you override a shortcode:

Identify the shortcode you want to override: Determine the name of the shortcode you want to modify or replace. Shortcodes are usually defined by plugins, themes, or custom code snippets.

Create a child theme (optional): It is recommended to use a child theme to ensure that your changes are not lost when the parent theme is updated. If you're already using a child theme, skip this step.

Create a new folder in the /wp-content/themes/ directory and name it as your child theme (e.g., my-child-theme).

Inside the child theme folder, create a new file named style.css. Add the following code to the style.css file to create a basic child theme:

**css
**```
/*
Theme Name: My Child Theme
Template: parent-theme-folder-name
*/
```
Replace parent-theme-folder-name with the name of the parent theme's folder.

Create another file in the child theme folder named functions.php.

Add code to the child theme's functions.php file: Open the functions.php file in your child theme folder and add the following code:

php

```
function override_shortcode_function_name($atts) {
    // Your custom shortcode functionality here
}
```
```
add_shortcode('shortcode_name', 'override_shortcode_function_name');
```

Replace override_shortcode_function_name with a unique name for your custom function, and replace shortcode_name with the actual name of the shortcode you want to override.

Customize the shortcode functionality: Inside the override_shortcode_function_name function, you can write your custom code to override the shortcode's functionality. You have full control over the output and behavior of the shortcode.

For example, you can modify the shortcode's output, retrieve additional data, or integrate it with other plugins or functions.

Save and upload the child theme: Save the changes to the functions.php file in your child theme folder. Then, upload the entire child theme folder to the /wp-content/themes/ directory of your WordPress installation.

Activate the child theme: Log in to your WordPress dashboard, navigate to "Appearance" -> "Themes," and activate your child theme. This ensures that your custom code is loaded and overrides the parent theme's shortcode.

Test the overridden shortcode: Insert the overridden shortcode into a post, page, or widget to verify that it's functioning as expected. Make sure to use the new functionality defined in your custom shortcode function.
Order-agnostic symbolic links
Tags: shell
Published: 2023-05-28 01:21:55

---
title: Order-agnostic symbolic links
author: ''
published: true
publishDate: Sat May 6 2023
displayDate: 6 May
cover: 'https://i.ibb.co/swkd4P2/ccc.jpg'
cover_image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Sarajevo_City_Panorama.JPG/2560px-Sarajevo_City_Panorama.JPG'
description: Order-agnostic symbolic links
tags:
  - shell
id: 1483311
date: '2023-05-28T01:21:55Z'
---

## Order-agnostic symbolic links

I don't use symbolic links a whole bunch, but when I do use them I always forget the order of arguments in the `ln` command. So I wrote a function that allows you to create a symbolic link in any order so I never have to think about it again.

```bash
isym () { # Make symbolic link in any order # ➜ isym cats dogs
  [[ -e $1 ]] && ln -s $1 $2 || ln -s $2 $1
}
```

Here's a breakdown of what happens within this function:

- **[[-e $1]]**

  Initially, the function checks whether $1, the first parameter, is a valid file or directory (-e). This safety check prevents creating symbolic links to non-existent files or directories.

- **&& ln -s $1 $2**

  If $1 is indeed a file or directory, the function creates a symbolic link to $1 named $2.

- **|| ln -s $2 $1**

  If the first condition fails (i.e., $1 doesn't exist), the function attempts to create a symbolic link to $2, named $1.

## Usage

```bash
➜ isym <file> <link>
➜ isym <link> <file>
➜ isym /etc/asda.conf ~/asda.conf
➜ isym ~/asda.conf /etc/asda.conf
```

Now this can be used in any order without worrying about the order of the arguments.
The 11th day of the 100 Days of Code challenge
Published: 2023-05-26 23:32:34

This day was a day of travel, I just landed and sadly didn't get much in. I only watched 30 minutes of an app design tutorial and just finished reading the Atomic Habits book for 10 minutes. It's 2:30AM as I'm writing this and for tomorrow, I'm planning to finish the tutorial and hopefully create a prototype for my app's homepage. There's also another small project I'm planning on making that shouldn't take too long at all.

The next week will be a bit packed but I'll do my best to fit in as much programming-related stuff as possible.

As for my reading session, it's obvious and not obvious at the same time how we have relationships with the things in our environment that affect our habits. For example, your phone can be used for just about anything. Be it for productivity or for social media. For a lot of people, it'd be harder to be productive on their phone, as they associate it with browsing social media. The phone is the cue to start browsing. Setting specific environments for specific habits and avoiding mixing, will allow for those environments to become clear cues of the habit. Even with limited space, if you dedicated one table for working and one table for personal time, that would already make for two different cues initating different habits.

That's about it,
happy coding!
Video: Customising Your GitHub Profile!
Tags: github, opensource, tutorial, video
Published: 2023-05-28 00:52:37

In this video, I show you how to utilise Markdown and automated Github Actions to create an impressive Readme for your #github profile.

{% embed https://youtu.be/PPSVGEqFtys %}

If you have any thoughts or feedback, do let me know in the comments section.
Enable PWA with next.js 13 or later using next-pwa (disabled in development environment)
Published: 2023-05-28 00:50:39

---
title: Enable PWA with next.js 13 or later using next-pwa (disabled in development environment)
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-01-27 07:48 +0000
---

Maybe next-pwa will support it in time, so you can wait and it will be fine, but this is a patch code for those who really want to support it right now. Version,

- next ^13.4.2
- next-pwa ^5.6.0

The file to be modified is next-pwa ^5.6.0. The file to be modified is next.config.js

## next.config.js

    /** @type {import('next').NextConfig} */
    const path = require("path");
    const isDev = process.env.NODE_ENV !== "production";
    const withPWA = require("next-pwa")({
        dest: "public",
        disable: isDev,
        buildExcludes: ["app-build-manifest.json"],
    });
    const generateAppDirEntry = (entry) => {
        const packagePath = require.resolve("next-pwa");
        const packageDirectory = path.dirname(packagePath);
        const registerJs = path.join(packageDirectory, "register.js");
        return entry().then((entries) => {
            // Register SW on App directory, solution: https://github.com/shadowwalker/next-pwa/pull/427
            if (entries["main-app"] && !entries["main-app"].includes(registerJs)) {
                if (Array.isArray(entries["main-app"])) {
                    entries["main-app"].unshift(registerJs);
                } else if (typeof entries["main-app"] === "string") {
                    entries["main-app"] = [registerJs, entries["main-app"]];
                }
            }
            return entries;
        });
    };
    const nextConfig = {
        experimental: {
            appDir: true,
        },
        reactStrictMode: true,
        webpack(config) {
            if( !isDev ){
                const entry = generateAppDirEntry(config.entry);
                config.entry = () => entry;
            }
            return config;
        },
    };
    module.exports = withPWA(nextConfig);

## Referenced Sources

[Next v13 app-build-manifest.json - Does not register a service worker that controls page and start_url #424](https://github.com/shadowwalker/next-pwa/issues/424)
Build your dream product
Published: 2023-05-26 16:30:31

Don’t be us.

We just made our first dollar by selling our Mac OS product and it took us 3 years to get this point. 

Here’s how you can avoid making the same mistakes as us. 

1. Establish what value you’re giving and to who.

At the end of the day, you’re giving value to people so that they would give you value in return, with dollas. Come up with a couple ideas that you think might bring value to people. Find one you like and explore it.

It’s ok if you’re wrong at this point. You can always pivot, but you just want to be specific enough so you understand what your mistakes are and how you can grow.

2. Ship your product now.

Think of the quickest and cheapest  (ideally free) way you can bring that value to your people. You don’t need a genius idea or the perfect product. Just get it out there. TikTok, Reddit, clubs wherever your target audience is, get your product to them.

What’s more important here is that you’re getting your product out there. You’re getting live feedback and you’re seeing if people like your product or not.

Do they like it? 
That’s awesome! Keep going, bring more value, and ship it again. 

Are they trashing on it? 
Go back to step one but you’re not starting from scratch here. Fine tune your first value proposition and ship again.

It really just becomes this loop of build, ship, then learn over and over again.

This is the idea that we’ve been shipping on. Go ship yours.
https://hyperfocused.app/

And thank you to buildspace for these valuable lessons. 
https://buildspace.so/
Automated system clean up - Linux
Tags: linux, tutorial, terminal, automation
Published: 2023-05-28 00:05:44

This is a tutorial on how to create a script to clean Linux system cache and useless files, and then schedule it to run on a daily basis using cron jobs.

**Step 1: Creating the Cleaning Script**
First, let's create a script that will perform the cleaning operations. We'll name it `clean.sh`. Follow these steps:

1.1 Open a text editor on your Linux system.

1.2 Start a new file and add the following lines to the script:
   ```bash
   #!/bin/bash
   
   # Clean system cache
   sudo sync && echo 3 | sudo tee /proc/sys/vm/drop_caches
   
   # Clean temporary files
   sudo rm -rf /tmp/*
   ```

   In this script, we're using the `sync` command followed by `echo 3` to clear the system cache. Then, we use the `rm` command with the `-rf` option to remove all files and directories inside the `/tmp` directory.

1.3 Save the file as `clean.sh` in a directory of your choice.

1.4 Make the script executable by running the following command in the terminal:
   ```bash
   chmod +x clean.sh
   ```

   This command grants execute permissions to the script.

**Step 2: Testing the Cleaning Script**
Before scheduling the script with cron jobs, it's a good idea to test it to ensure it works as expected. Follow these steps to run the script manually:

2.1 Open a terminal.

2.2 Navigate to the directory where the `clean.sh` script is located using the `cd` command:
   ```bash
   cd /path/to/script/directory
   ```

2.3 Run the script by typing its name:
   ```bash
   ./clean.sh
   ```

   This will execute the script and perform the cleaning operations. Make sure to provide your password when prompted for `sudo` commands.

2.4 Verify that the system cache is cleared and the temporary files are removed.

**Step 3: Scheduling the Script with Cron Jobs**
Now that we have the cleaning script ready, let's schedule it to run on a daily basis using cron jobs. Follow these steps:

3.1 Open a terminal.

3.2 Type the following command to edit the crontab file:
   ```bash
   crontab -e
   ```

3.3 If prompted, choose an editor to edit the crontab file.

3.4 In the crontab file, add the following line to schedule the cleaning script to run daily at a specific time (e.g., 3 AM):
   ```
   0 3 * * * /path/to/clean.sh
   ```

   This line specifies that the script will run at 3 AM every day (0 minutes, 3 hours).

3.5 Save the crontab file and exit the editor.

**Step 4: Verifying and Managing Cron Jobs**
To verify that the cron job is set up correctly and manage cron jobs, you can use the following commands:

- To list the existing cron jobs for the current user, type:
  ```bash
  crontab -l
  ```

- To remove all cron jobs for the current user, type:
  ```bash
  crontab -r
  ```

- To edit the cron jobs for the current user, type:
  ```bash
  crontab -e
  ```

All done! The cleaning script will now be executed automatically at the specified time each day, ensuring that your system stays clean and optimized.

Remember to adjust the file paths and schedule timing in the script and cron job line according to your specific requirements.
練馬プログラミングクラブ
Published: 2023-05-27 23:55:43

東京都練馬区で行われるプログラミングクラブです。どなたでも参加できます。初心者歓迎。一緒にプログラミングを楽しみましょう。参加費は無料。参加には事前登録が必要です。中学生以下の方は、保護者とご一緒にご参加ください。

connpass

<a href="https://nerima-programming-club.connpass.com/">conpass - 練馬プログラミングクラブ</a>

公式サイト

<a href="https://perlclub.net/event/nerima_program_club">練馬プログラミングクラブ</a>
CSS code refactoring
Published: 2023-05-27 23:23:13

To refactor means to restructure the source code of an application or piece of software in order to improve operation without affecting functionality. 
Programmers should abide by the D.R.Y. (Don’t Repeat Yourself) principle and avoid W.E.T (We Enjoy Typing). 

Reasons for code refactoring 
Readability 
Modularity 
Efficiency 
Length 

Readability is the extent to how easy it is for other programmers to comprehend your code. Refactoring your code makes it less verbose, consequently less painstaking to go through. 

Modularity relates to how easy it is to use bits of your code. To achieve this, all styling codes should only belong in the CSS file(s). 

Efficiency dictates how fast your code runs. 

Cutting down on the length of your code, improves readability. 


Below are steps to take to refactor your css code:
Arrange your selectors systematically.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6octmk9vdgcoe851jmy3.jpeg)


Use classes as selectors for more specific styling like font size and line height. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kb3hhk0pg1qpn82e719.jpeg)



To include multiple selectors, separate with commas. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/es8mer6bhhxdbgsqi06e.png)
Understanding Assign by Value and Assign by Reference in JavaScript.
Tags: javascript, beginners, programming, webdev
Published: 2023-05-27 23:00:07

**_Assign by Value_:** 

When assigning a **primitive** data type (like numbers, strings, or booleans), the value is copied to the new variable. Any changes made to one variable won't affect the other. For example:
```
let a = 5;
let b = a;
b = 10;

console.log(a); // Output: 5
console.log(b); // Output: 10
```
_**Assign by Reference**_: 

When assigning **objects** (including arrays and functions), the reference to the object is copied, not the actual value. So, any modifications made to the object will affect all variables pointing to it. For example:
```
let arr1 = [1, 2, 3];
let arr2 = arr1;
arr2.push(4);

console.log(arr1); // Output: [1, 2, 3, 4]
console.log(arr2); // Output: [1, 2, 3, 4]
```
Understanding these distinctions is crucial for avoiding unexpected bugs and ensuring your code behaves as expected. It's also vital when working with function parameters and returning values.

Keep these concepts in mind while developing in JavaScript, and it will help you write more robust and predictable code. Happy coding! 😄🚀
The 12th day of the 100 Days of Code challenge
Published: 2023-05-27 22:22:48

Today, I finished watching the remaining part of the tutorial I began yesterday. I also did some of my homework and then have a friend come over after all the time I haven't been in my home country, I didn't plan accordingly therefore didn't have as much time as I wanted to work on my project app. I already got an image in my head and some online inspiration that use the color palette I've been wanting to use, I talked it out with ChatGPT telling him to act as if it was the "design team" of the app.

I plan on trying to look for some more inspiration online tomorrow before I start with sketching the app on Figma.

Even though it's 1AM and I wake up at 7AM, I still dedicated 10 minutes of reading Atomic Habits, I do not allow myself to read less than that. Usually, I find that enough to receive a good amount of information and sometimes get close to the finishing line of a chapter.

This was one I could relate to, improving your environment rather than dwelling on "discpline", which tends to be a short-term solution. I believe most people have a certain threshold that will one day get surpassed as the cues to those bad habits never go away.

Sometimes, I had weeks where I would constantly play a driving game on my computer. What did I do to get rid of that habit? I put the steering wheel away. Haven't touched it for nearly a year.

You forget about those habits as the environment changes, as the cues are no longer there. A study mentioned in the book found that a large percentage of soldiers were heroin addicts in Vietman, but their addiction went overnight in the US. All of the cues and triggers were no longer there in the US.

So it goes like this, make the good habits obvious and have as many cues for those as possible and try to eliminate the bad habits' cues.

That's it for today,
happy coding!

That's about it!
good news from AFFiNE - the open-source-project: add your ideas now
Tags: webdev, python
Published: 2023-05-27 21:46:07

good news from AFFiNE - the open-source-project: 
see more: https://twitter.com/AffineOfficial

https://affine.pro

the developers: We're coming to #Singapore with an #oss #meetup

#AFFiNE in collaboration with @supabase

We'll be talking about #opensource and 
@thorwebdev will be sharing about building #ai apps with #postgres 

plz  add your ideas now - get heard by the develoers - tell them what you want to have - which features. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vnnlo99vci9q810hb2ye.png)


see more: https://twitter.com/AffineOfficial
Streamlining Codebase, Mastering useContext, and Deployment Research: A Day in Coding
Tags: webdev, javascript, beginners, programming
Published: 2023-05-27 21:10:46

Day 116 of #365DaysOfCode & day 16 of #100DaysOfPython

Hello everyone! Today, I want to share the progress made on my ongoing project and the insights I have gained.

Cleaning Up the Codebase
First things first, let’s talk about the backbone of any project — the codebase. Today, my priority was to streamline my codebase to enhance its readability and performance. I put a significant amount of effort into:

Refactoring for efficiency: Functions and components were analyzed and rewritten to ensure optimal performance.

Improving code readability: Best practices for indentation, added meaningful comments, and renamed variables for clarity and understanding.

Eliminating dead code: Any part of the code that was redundant or not being used was removed to maintain cleanliness.

Why use Context?
Consider a scenario where you have a large application with nested components. You might have data at the top level that you need to pass down into a deep child component. Passing props from component to component is not only tedious but also makes the code hard to read and manage. This is where Context comes in, allowing us to pass data directly to any component we need.

Unpacking useContext
React’s Context API has been a game-changer in managing state and passing data around in a React application. Today, I had the chance to use useContext.

I implemented useContext to establish a UserTypeContext. This context helps the application determine whether the current user is a ‘client’ or a ‘freelancer’. The UserTypeContext was then made available to all child components, negating the need for prop drilling and providing a more efficient state management solution.

Researching Deployment Platforms
Lastly, I researched deployment platforms for my project. I weighed the pros and cons of various platforms like Heroku, AWS, and Netlify, looking into factors such as scalability, cost, ease of use, and support for different tech stacks. This will help me make a better decision when it comes time to deploy my application, ensuring it is readily accessible and provides a seamless user experience.

In parallel, I continued my Python course by practising nested data structures and building an auction program. It was an exciting day filled with a lot of learning and coding!