teleren/devto huggingface dataset:
JavaScript Libraries For Creating Awesome Carousels
Tags: javascript, webdev, productivity, shortread
Published: 2022-03-03 06:32:45

Creating your own carousels from scratch may take longer time, and to make things easier I like to share some of the libraries that you can use to create your own cool Carousels.

## 1. [Swiper.js](https://swiperjs.com/)
![Image of The View of Website SwipperJs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yz1omix8xo10mixfk8c.png)
 
Swipper.js must be my one of my favorite, not because its easy to use but it support different JavaScript framework like Vue, ReactJs, etc.
![This shows that Swpperjs is available to different framework](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5h6gt6ycpapc6nd8p1y3.png)

You can also do dragging on each slide, it feels like your clipping cards on your own hand.
 
Check Out Their website, and feel free to check their own examples.

## 2. [Slick](https://kenwheeler.github.io/slick/)
This is also one of my favorite because of how fast it is. Just add `CDN` on your website, and your ready to use the library.
![Slick Website Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pe1qbqullob4h0psfg2s.png)
The only downside here is you have to add jQuery.
 
## 3. [GlideJS](https://glidejs.com/)
![GlideJs website Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4bmn54yptv3l8q31xgv.png)
 
This is also a very good library, it also provide different API so that you can customize your carousels.

## 4. [OWL CAROUSEL](https://owlcarousel2.github.io/OwlCarousel2/)
I like this and recommend this because this library supports older versions of browsers, even those browsers who are zombies.
![Owl Carousel Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b51w6mkhvkg2k45du02y.png)

## 5. [Flickity](https://flickity.metafizzy.co/)
![Website preview of flickity](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8g4adi4cv2vr19g1ofkb.png)
I also recommend this one because it supports older browser, and its very fast. You can customize it the way you like, and it has a lot of examples on their website.

-----------------------------

To Help me create more content like this you can support me by clicking image bellow.

[![Buymecoffee Donate to Bro Jenuel](https://i.imgur.com/jnnBYBem.png)](https://www.buymeacoffee.com/BroJenuel)
Laravel 9 Livewire CRUD Example using Modal
Tags: laravel, livewire
Published: 2022-03-03 06:20:36

Hello Dev,

Now, let's see an article of laravel 9 livewire crud example. you will learn laravel 9 livewire crud with jetstream & tailwind css. I explained simply step by step laravel 9 livewire crud with a modal tailwind. I explained simply step by step laravel 9 jetstream livewire crud application example. Let's get started with insert update delete with laravel 9 livewire.

Laravel 9 jetstreams are designed by Tailwind CSS and they provide auth using livewire and Inertia. I will show you how to create a module with livewire on default jetstream auth in laravel 9.

In this example, we will install jetstream and create auth scaffolding using livewire, Then we will create a posts table with title and body fields. we will create a simple crud operation with that. so let's follow step by step and create a crud application with livewire. you can see the preview:

[Laravel 9 Livewire CRUD Example using Modal](https://www.codecheef.org/article/laravel-9-livewire-crud-example-with-modal)
Home Depot Survey
Published: 2022-03-03 06:17:23

Home Depot Customer Satisfaction Survey at [www.HomeDepot.Com/Survey](https://takesurvey.onl/www-homedepot-com-survey/) is designed to get customers’ feedback, reviews, and suggestions that help them improve on their products and services.

The survey basically wants to know what customers think of their products and how happy clients are with their general customer services.

So, if you have shopped at the Home Depot store or are a regular shopper, you should consider leaving some feedback.
Send Message to Discord Server via Javascript
Tags: javascript, webdev, discord, beginners
Published: 2022-03-03 06:07:28

### Problem

Recently I added a new feature to this site, which is a recommendation feature where people can sign in using either Github / Google credentials and give me their recommendation. Is it such a waste of time to keep checking on the page to see any new data, hence I think if each time user adds new data and the system notifies me it will be much more convenient? I choose discord instead of email, due to the simplicity of sending a message using a discord bot than using Gmail. Below are the steps!

### Step 1: Create a Discord server

[How to Create Discord Server](https://support.discord.com/hc/en-us/articles/204849977-How-do-I-create-a-server-)

### Step 2: Create a webhook in the server

Edit Channel -> Create Webhook -> Copy the webhook url (should look like this "https://discord.com/api/webhooks/{random_text_here}")

### Step 3: Create a http request

There are several way to create a http request (fetch, axios, etc). In this example I'll be using a simple fetch request.

```javascript
fetch("your_webhook_url", {
  body: JSON.stringify({
    content: `type your message here`,
  }),
  headers: {
    "Content-Type": "application/json",
  },
  method: "POST",
})
  .then(function (res) {
    console.log(res);
  })
  .catch(function (res) {
    console.log(res);
  });
```

Voila. All that you need is just a simple webhook URL. Each time you trigger the HTTP request it will send a message to your discord server via bot. I'm using it in my [recommendation page](https://www.melvinliu.com/support).
![Result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ok5dg8mue05l04hkrxly.png)
My Python Journey So Far
Tags: python, beginners, codenewbie
Published: 2022-03-03 05:56:42

 I wish to dive into Data Analysis and then Machine Learning but I need a solid foundation in python first. It has been very interesting so far. Easy and beginner friendly. From "Hello world" to comments, data types and numbers my journey has been really interesting so far. I cant wait to explore more complex and complicated aspects of it.
MDN New Design with new contents
Tags: javascript, react, mdn, webdev
Published: 2022-03-03 05:38:29

So, this year MDN Web Doc revamps there website designs and contents.
Here you can see [MDN Web Docs](https://developer.mozilla.org/en-US/)
Also find the Reference link at the bottom of this article.

**<u>Lets quickly go through what's new there:</u>**

1. Brand new logo. M monogram using underscore to convey the 
   process of writing code.
 
2. Trending and favorite dark mode is added.

3. Completely new homepage with search in center and blog articles 
   below that.

4. Soon, MDN will come up with MDN Plus. MDN Plus is subscription 
   based module, which will include more content. As per MDN Docs, 
   notifications, article collections and an offline experience 
   might be the part of this plan.

![MDN WEB DOCS SS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/960zvnq3ehq1583fbjyx.png)
**<u>Some important links:</u>**
1. [HTML Documentation Index](https://developer.mozilla.org/en-US/docs/Web/HTML/Index)
2. [Javascript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
3. [React from Web Doc] (https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started)
4. [Angular from Web Docs] (https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started)
5. [Vue from Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks#vue_tutorials)
6. [Git and Github Overview from Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/GitHub)
7. [Cross Browser Testing from Web Docs](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing)

And much more are there, Go and explore it.

Add the links in comment which you found to be new in MDN.

Cheers!!
Displaying numbers as k,M values in Reactjs
Tags: react, javascript, webdev, beginners
Published: 2022-03-03 05:34:22

SI Prefixs are everywhere. Facebook Likes, Twitter Reweets YouTube Views etc. See the example below to understand what I mean.

Example:

| Before         | After        |
|----------------|--------------|
| 1000 Views     | 1k Views     |
| 25000 Likes    | 25K Likes    |
| 30000 Retweets | 30k Retweets |

In this post we will see how we can convert the numbers to shortern numbers.

> 🎉 Make sure to bookmark this for later

We are going to use React for this example, But this works on all nodejs projects

### Create a react app
```bash
npx create-react-app numbers
```
Wait until the project gets created.

### cd into the directory
```bash
cd numbers
```

### Install the required dependency
```bash
yarn add numify

or

npm install numify --save
```

### Now in the `App.js` file paste the below code.

```javascript
import "./styles.css";
import { numify } from "numify";
import { useState, useEffect } from "react";

export default function App() {
  const [number, setNumber] = useState(null);

  useEffect(() => {
    // Change the Number as per your choice
    setNumber(numify(2700000000));
  }, []);

  return (
    <div className="App">
      <h1>2700000000 will be rendered as {number}</h1>
    </div>
  );
}
```

### Then, Run the Project using the command

```
npm run start
```

Once the project is started, You'll see this in browser.

![Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08r0bt902syek78m8mol.png)
  
I hope you find this useful, Please drop a heart and leave your comments.

> 🎉 Make sure to bookmark this for later
Load external font with web component
Tags: webcomponents, font, tutorial
Published: 2022-03-03 05:16:35

## Background 

Recently while working on an application I faced a very strange issue, where the expected external font was not getting loaded on the web component. I’m still new to the web component world, so I started reading more about it and soon found there is no straightforward/elegant way to load external font for a web component. After reading almost all of the articles about and around font import in the web component, I finally figure out a way to hack it and make it work. 
If you’re not familiar with the web component then I’ll suggest you to read this nice blog on it [HERE](https://kinsta.com/blog/web-components/#what-are-web-components).

## Getting Started 

There are a few ways to load external font for a web component, first way is to load the font from the outer DOM (which defeats the purpose of the web component, as we want it to be autonomous). The second way is to load the font from the web component itself by injecting a `link` to the outer DOM. Though it's a hack, still I feel a pretty good way to load an external font until web component add functionality to achieve it.

We need to inject the `link` element to the head of the consuming HTML page from the web component. Now once the font is loaded in the browser, you can use the font to style the web component.

E.g.

```JS
constructor(){
        super();
        const font = document.createElement("link");
        font.href = "https://fonts.googleapis.com/css2?family=Dancing+Script&display=swap";
        font.rel = "stylesheet"
        document.head.appendChild(font);
    }
```
[Codepen example](https://codepen.io/akdevcraft/pen/BamvrWW)

## Sample Code
The code snippet presented in this blog is available on Github, [Sample Code](https://github.com/an1meshk/tutorials/tree/main/web-component-font).

_If you have reached here, then I did a satisfactory effort to keep you reading. Please be kind to leave any comments or ask for any corrections. **Happy Coding!**_

## My Other Blogs:
- [Avoid Spring RestTemplate Default Implementation to Prevent Performance Impact](https://dev.to/akdevcraft/never-use-spring-resttemplate-default-implementation-2ghj)
- [Team Agreement in Software Engineering](https://dev.to/akdevcraft/software-engineering-sample-team-agreement-2275)
- [My firsthand experience with web component - learnings and limitations](https://dev.to/akdevcraft/my-firsthand-experience-with-web-component-learnings-and-limitations-4dd8)
- [Streaming logs of all pods at once](https://dev.to/akdevcraft/streaming-logs-from-all-pods-at-once-1kh7)
- [Certified Kubernetes Application Developer (CKAD) Exam Tips](https://dev.to/akdevcraft/certified-kubernetes-application-developer-ckad-exam-tips-4a1b)
Jenkins Installation & Configuration on AWS EC2 Linux instance
Tags: aws, awsec2, linux, jenkins
Published: 2022-03-03 05:05:23


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

**Jenkins** is a free and open-source automation server. It helps automate the parts of software development related to building, testing, and deploying, facilitating continuous integration and continuous delivery.

## Step 1: Launching an Amazon Linux EC2 instance

[Refer video “[How to launch an Amazon Linux ec2 Instance](https://youtu.be/7zxwY_gXEbk)”]

## Step 2: Installation of Jenkins on EC2 Instance

**i.** Run the command to update all the packages.

`sudo yum update`

**ii.** Check if java is installed or not using the command

`java -version`

If java is not installed, install using the following command

`sudo yum install java-1.8.0-openjdk`

**iii.** Now, to download the latest Jenkins package

`sudo wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat/jenkins.repo`

**iv. **To enable the installation of the package, import the key file from Jenkins-CI:

`sudo rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key`

**v.** Install Jenkins on the EC2 instance

`sudo yum install jenkins`

**vi.** To start the Jenkins service

`sudo service jenkins start`

**vii.** Access the Jenkins server using the public DNS of the EC2 instance or public IP of the instance on port 8080.

**http://{ec2-public-dns}:8080 or http://3.89.79.74:8080/**

**viii.** Login using the **username admin** and to get the **initial admin password** execute the following command:

```
sudo su -
cd /var/lib/jenkins/secrets/ 
cat initialAdminPassword
```
**ix.** To stop Jenkins service

`sudo service jenkins stop`


{% youtube EvSFUjlC3vc %}
What the heck is instantSearchSDKJS BridgeClearHighlight captured by Sentry?
Tags: sentry, logging, edge, ios
Published: 2022-03-03 05:47:07

---
title: What the heck is instantSearchSDKJS BridgeClearHighlight captured by Sentry?
published: true
date: 2022-03-03 04:58:08 UTC
tags: sentry, logging, edge, ios
canonical_url: https://bharathvaj.me/instant-search-sdk-bridge-function
---

Recently at work, encountered this interesting error on Sentry logs and there were multiple events for this one so as usual started debugging.

When Googled, landed on [a StackOverflow Q&A](https://stackoverflow.com/questions/69261499/what-is-instantsearchsdkjsbridgeclearhighlight) which was the only post available regarding this issue.

 ![explain image](https://media1.giphy.com/media/WsNbxuFkLi3IuGI9NU/giphy.gif)

After going through all the answers and comments in Q&A, the issue seems to occur only on Edge on iOS mobile. This is a harmless cross-browser issue that we can ignore in Sentry.

The reason for this one is Edge uses Safari’s WkWebView instead of its own Blink. In order to implement features like Bing’s instant search, etc Edge injected these methods into the loaded pages and then the outer browser calls those JavaScript functions that were injected.

Here, someone had goofed and got rid of (or renamed) the injected JavaScript function, but failed to remove/update the browser code that tries to call that injected JavaScript. Since Sentry captures all the errors logged to the console, it is logged to our app errors. So for me, it is one less issue to worry about, I assume the same for you.

 ![success image](https://media1.giphy.com/media/l2JdVRfJozpjq70SA/giphy.gif)

Happy Hacking!!!
It's Okay To Be A Fan Of A Programming Language
Tags: design
Published: 2022-03-03 04:39:30

It's okay to let your guard down and just read through that GitHub. I don't know, take some notes, even. You can't understand the header files but you understand the desire. You know why you like the repository and you're enjoying it. Tomorrow morning you might wake up and have forgotten how it all glued together. So what?  All of that will add up to you understanding a part of tech that is obscure but valuable.
Stipend and Project size details for Google Summer of Code 2022 (3/5)
Tags: webdev, programming, javascript, beginners
Published: 2022-03-03 03:43:37

Let’s talk about project size and stipend
A lot has changed this year, in the past, all the projects are used to be of the same size with the same stipend, things have changed this year.

🔴 Multiple Sizes of Projects
There are going to be 2 project different types of projects one is medium-sized projects (~175 hours) and the other is large projects (~350 hours).

You can spread the project out over a longer period of time and you can even switch to a longer time frame mid-program if life happens.

Rather than a mandatory 12-week program that runs from June — August with everyone required to finish their projects by the end of the 12th week, now mentors and their GSoC Contributors can decide together if they want to extend the deadline for the project up to 22 weeks.

🔴 Stipend

- For medium-sized projects:
A base amount of 3000 USD and then adjust it based on each country’s PPP value. There is a minimum (1500 USD) and maximum (3300 USD) stipend amount.

For India it’s adjusted to — 1500 USD

- For large-sized projects: We start with a base amount of 6000 USD and then adjust it based on each country’s PPP value. There is a minimum (3000 USD) and maximum (6600 USD) stipend amount.

For India it’s adjusted to — 3000 USD

- The Stipend will be paid in 2 halfs
▪ First Evaluation (paid July 29): 45%
▪ Final Evaluation (paid September 20): 55%

All the payments will be done through payonner which will charge a transction fee which is minimal.
Ionic SQLite Capacitor
Tags: ionic, angular, programming, android
Published: 2022-03-03 03:37:18

Hola, aprenderemos como implementar SQLite en ionic capacitor, para este ejemplo iniciaremos un nuevo proyecto.

```
$ ionic start "sqlite-capacitor" blank — capacitor
```
Instalar las siguientes librerías
```
$ npm install @ionic/storage
$ npm install @ionic/storage-angular
$ npm install cordova-sqlite-storage
$ npm install localforage-cordovasqlitedriver
```

Esta implementación nos funcionara tanto para web como móvil, en la versión web utilizara IndexedDB y en la versión móvil SQLite.

Creamos los siguientes directorios y archivos.


![directorios](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4y0mlhmfdv96n8bov4hf.PNG)
**platform.strategy.service.ts**

![platform.strategy.service.ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jvyq62p9kyw532yoy445.PNG)

**StorageService.ts**

![StorageService](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8if0w5b1des9t1zvft1h.png)

**StorageSQLiteService.ts**

![StorageSQLiteService](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dqdtq7lg447exdk07htg.png)

**StorageProvider.ts**

![StorageProvider.ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zapy4maqeebd3p7fg3wp.png)

**app.module.ts**

![app.module.ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pmmbhm457icdaxsml3re.png)

**app.component.ts**

![app.component.ts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6d50pbzigvtoizfux8qh.png)

Procedemos a levantar el proyecto en web o a construir la aplicación con capacitor.

**Web**

```
$ ionic serve
```

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

**Android**

```
$ ionic cap copy android
$ ionic cap sync android
```
Colocamos estas 2 instrucciones en el **AndroidManifest.xml**

```
<uses-permission android:name=”android.permission.READ_EXTERNAL_STORAGE” />
<uses-permission android:name=”android.permission.WRITE_EXTERNAL_STORAGE” />
```

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


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

Construimos la aplicación.

```
$ ionic cap build android
```

Abrimos android studio y damos clic en run ‘app’.

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

Todo el código de referencia [aquí](https://github.com/diazrony/IonicSQLiteCapacitor.git)

No olvides dejarle tu estrellita al repositorio.
Espero te haya servido de mucho, Saludos.
Tabs vs Spaces: I have been disillusioned 🤯
Tags: programming
Published: 2022-03-03 03:06:27

I have been steering away from any tabs/spaces article or conversation, for I considered this subject to be too trivial to debate on. I have been a stickler for 2 spaces since a while, and I don't care much about others' preferences.

So, I was under the impression that a tab is a character of a fixed size (6 or 8 spaces, perhaps). That's why I used 2 spaces, it fits more code on the screen.

Yesterday, when I was trying to quickly edit some stuff using Sublime Text (I rarely ever use it), I noticed it says at the bottom: `Tab width: 4`. I went to switch it to 2, I noticed another option, `Use spaces instead`. What? Up until that point, I believed that tab width refers to the number of spaces to indent code. That is when realization hit me.

![](https://media.discordapp.net/attachments/948776154586816542/948776209955819540/unknown.png)

Your code editor can display tabs to be of any length you want, it's not fixed! If you are working with someone on a project, and let's say they prefer 4 spaces and you prefer 2, just use tabs instead! You can configure your editor/IDE to display it as 4 and 2 respectively.

So that's it, I am a changed person now. I hope I cleared it out if a person who had the same stupid assumption I had read this post. Happy hacking!
#2 Python Series...
Tags: python
Published: 2022-03-03 03:02:35

Hi....

If we use len function for string it will print the lenth of the string by calculating value. What if we print a length of integer??..
Let's see in compiler...
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k1gits9885jcwdmlsuyk.png)

If we use Double quote for integer then it is treated as a String....

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0xi3jpjfugn66mmuv4y9.png)
 
To over come this need to understand what is data types.
 
Interger - (123)
Flaot - (123.321)
String - ("Hello World!")
Boolean - true / false
 

The variable type can be checked with compiler by using type function.


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

Type casting- Means converting type 

num = len(input("Drop a message"))

new_num_char = str(num)

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

Exersise :

String input to int and add the string values.

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


Mathamatical Operations:
a = 5
b = 10
sum = a+b
subtract = a-b
multiply = a*b
divide = a/b
power = a ** b

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

PEMDAS- priority
()
**
*
/
+
-
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn5y6y0xfuwocn5wtksp.png)
 
 
BMI - Calculator 

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

Flow division :

print(10//5)
output = 2
without using round or type casting we can achieve int value by using this.


#f-String
score  = 0

print(f"your score is {0}")
this f string type cast in a quick and easy way.....

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

GitLink : https://github.com/Saravananb15/Python/tree/day2