teleren/devto huggingface dataset:
Pure CSS3 Slider with Multiple Animation Options
Published: 2023-08-03 13:06:28

A pure CSS3 slider comes up with multiple animation options which can be used as per your design need. The slider is dead simple, clean and modern. It easy to customize and fully responsive to small and medium devices.

If you are building a responsive layout for your website, simply call this slider into a container for fixed width and if you want it to be fullscreen background slider then add it without a container.


It is auto-rotating photo slideshow which comes up with custom caption titles and text. It also has dot navigation for easy to navigation between each slide.

## How to Make CSS3 Slider With Animation
You have five different version which is easy to choose, All you need to call different CSS file and the HTML will stay same. Each of CSS file provides different slide effects. It includes the following CSS files.

**Default Style**: slider-def
**Bottom to Top**: slider-btt.css
**Left to Right**: slider-ltr.css
**Light Version**: slider-simp.css
**Top to Bottom**: slider-ttb.css
Simply add the CSS file as per your choice inside the header.


```
<head> 
  ... <!-- Your stuff --> 
  <link rel="stylesheet" href="style/slider-def.css"> 
</head>
```

Next and the only thing is adding the HTML.

```
<div id="slider">
   <div class="slides">
      <!-- First slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
      <!-- Second slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
      <!-- Third slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
      <!-- Fourth slide --> 
      <div class="slider">
         <div class="legend"></div>
         <div class="content">
            <div class="content-txt">
               <h1> Your title </h1>
               <h2> Your description </h2>
            </div>
         </div>
         <div class="images"> 
            <img src="ImagePath/ImageName.jpg"> 
         </div>
      </div>
   </div>
</div>

```
Finally, simply add your own images and change the caption content and enjoy!
Sloan's Inbox: Any advice on how to advocate for a11y improvements at my org?
Tags: discuss, career, a11y
Published: 2023-08-03 13:00:00

Howdy! Sloan, DEV Moderator and resident mascot, back with another question sent in from a DEV community member. 🦥

For those unfamiliar with this series, this is another installment of Sloan's Inbox — your go-to place for sharing advice and observations in response to folks who have sent in questions to be asked anonymously through me, Sloan. Whether it's career development, office politics, industry trends, or improving technical skills, we cover all sorts of topics here. If you want to send in a question or talking point to be shared anonymously via Sloan, we'd love to help; just scroll down to the bottom of the post for details.

So, let's see what we have for today...

### Today's question is:

> I could use help convincing my organization be more proactive and mindful of accessibility. While I think folks within the org know it's important and necessary, I really want us to be more action-oriented and do the work to improve our lighthouse score. There is always so much to do, and I feel like this work just isn't prioritized often enough. Any advice on how I might advocate for this?
>

Share your thoughts and lets help a fellow DEV member out! Remember to keep kind and stay classy. 💚

---

*Want to submit a question for discussion or ask for advice? [Visit Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous.*
Online MySQL Training
Tags: mysql, database, learning, datascience
Published: 2023-08-03 12:58:21

Ready to conquer the world of database management? Our extensive [online MySQL courses](https://thedbadmin.com/online-mysql-training/) have something for everyone, from novices to seasoned learners. We pride ourselves on offering an in-depth curriculum that breaks down even the most intricate topics, starting with our beginner-friendly "Complete MySQL Training for Beginners" course or our advanced modules for those seeking a greater challenge. Experience our beginner's MySQL training free of charge as a launchpad into the subject, and when you're set to progress further, our MySQL administration modules await. For a more targeted approach, we even offer free MySQL database administration training, accompanied by a comprehensive advanced MySQL tutorial in PDF format. For those wanting to formally certify their abilities, we provide thorough guidance and resources on how to secure MySQL certification. There's no time like the present to begin your MySQL online training journey, joining the hundreds of accomplished individuals we've proudly trained. Start today and shape your future in database management.

Additionally, we offer [free demo classes](https://thedbadmin.com/online-mysql-training/) for those who want to get a glimpse of our teaching style and course content. Start today and shape your future in database management.
Git Commands Mastering Basics, Merge, and Rebase
Tags: git
Published: 2023-08-03 12:51:08

---
title: Git Commands Mastering Basics, Merge, and Rebase 
published: true
description: description
tags: Git
---
## Group Changes

### Lists all local branches in the current repository
```bash
git branch
```

### Creates a new branch
```bash
git branch [branch-name]
```

### Switches to the specified branch and updates the working directory
```bash
git checkout [branch-name]
```

### Combines the specified branch’s history into the current branch. 
This command is used when you want to combine changes from two different branches. It creates a new "merge commit" in the branch that preserves the history of both branches.
```bash
git merge [branch]
```

### Deletes the specified branch
```bash
git branch -d [branch-name]
```

### Rebase
The `git rebase` command moves or combines a sequence of commits to a new base commit. Essentially, it's a way to integrate changes from one branch into another, but it differs from `merge` by rewriting commit history. Use it carefully, as it can complicate the commit history and is not recommended if you're working on a public branch that others are using.
```bash
git rebase [base]
```
Using condensed font with Flutter
Tags: flutter, vscode, font
Published: 2023-08-03 12:50:18

Sometimes small font is too small, but the condensed one is exactly the one that can save the design. Below are the steps required to add and use a condensed font in the Flutter project. 

**1. Choose and download the font.**
Go to Google Fonts and choose font: 

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

(I have typed Russian word to easily find fonts that support Russian.)

Select font. On the font page press `Download family` button on the right top. Save the zip locally and extract.  

I have chosen two fonts: `Fira Sans Extra Condensed` and `Sofia Sans Extra Condensed`. They both support Cyrillic letters. 


**2. Add font files to the `assets` folder.**

Create an `assets` folder (if not already exists) at the root of the project. Add a `google_fonts` folder under. Put fonts (`.ttf` files) there. 

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

I renamed the Sofia font file as the filename was too long. 


**3. Add fonts to the `pubspec.yaml`**


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


**4. Use the font in the widget**

```
Text(
                    description,
                    style: TextStyle(
                      fontSize: 11,
                      fontFamily: 'FiraExtraCond',
                    ),
                  ),
                  Text(
                    paymentType,
                    style: TextStyle(
                        fontSize: 14,
                        color: Theme.of(context).colorScheme.error,
                        fontFamily: 'SofiaExtraCond',
                        fontVariations: [
                          FontVariation('wght', 500),
                        ]),
                  ),
```

Note, that `Sofia` is a **variable** font that supports `FontVariations`. I.e. single font file contains fonts with different `wght` (weight) variations. 

Here is the result: 

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

The first line is the default Roboto font, the second one is Fira and the last one is Sofia. 

Obviously, using the above guide we can add any custom font, not only condensed and not only downloaded from Google Fonts. 

Happy designing!
Creating Custom 404 Pages on GitHub Pages
Tags: webdev, javascript, beginners, programming
Published: 2023-08-03 12:28:15

Title: Creating Custom 404 Pages on GitHub Pages

Introduction:
GitHub Pages provides a convenient way to showcase your projects, personal website, or portfolio. While it's essential to have well-designed and functional pages, it's equally important to provide a user-friendly experience when visitors encounter a non-existent page. In this article, we'll walk you through the process of creating custom 404 pages on GitHub Pages, ensuring that even error pages leave a positive impression.

### Prerequisites:
Before you start, ensure you have the following:

1. A GitHub account
2. A GitHub repository where you want to host your custom 404 page
3. Basic knowledge of HTML and Git

### Steps to Create Custom 404 Pages:

#### Step 1: Create Your Custom 404 Page
1. Open a text editor or integrated development environment (IDE).
2. Create a new HTML file named `404.html`. This will serve as your custom 404 page.
3. Add the content you want to display on your error page. This could include a message, links to other pages, or a search bar.
4. Style your `404.html` page using CSS to make it visually appealing and consistent with your site's design.

#### Step 2: Upload Files to Your GitHub Repository
1. Open your GitHub repository on the GitHub website.
2. Click on the "Add file" button and choose "Upload files."
3. Upload your `404.html` file and any associated CSS files or assets.
4. Optionally, create a `.nojekyll` file in the repository root to prevent Jekyll processing.

#### Step 3: Commit and Push Changes
1. Add a commit message describing the changes you made (e.g., "Added custom 404 page").
2. Commit the changes to your preferred branch (usually `main` or `master`).
3. Push the changes to your GitHub repository.

#### Step 4: Configure GitHub Pages Settings
1. In your GitHub repository, navigate to the "Settings" tab.
2. Scroll down to the "GitHub Pages" section.
3. In the "Source" dropdown, select the branch containing your custom 404 page (e.g., `main`).
4. Click "Save."

#### Step 5: Verify Your Custom 404 Page
1. Wait a few minutes for GitHub Pages to update.
2. Open a web browser and navigate to your GitHub Pages website (usually `https://<username>.github.io/<repository>`).
3. Try accessing a non-existent page, such as `https://<username>.github.io/<repository>/nonexistent`.
4. You should now see your custom 404 page displayed.

### Conclusion:
Creating a custom 404 page on GitHub Pages enhances the user experience by providing helpful information and navigation options when visitors encounter an error. By following the steps outlined in this article, you can easily create and deploy a custom 404 page that aligns with your site's design and content. This small but thoughtful touch can contribute to a more professional and user-friendly GitHub Pages website.
Creating and Running Docker Containers with Logstash, Elasticsearch, and Kibana
Tags: logstash, elasticsearch, kibana, docker
Published: 2023-08-03 12:26:56

---
title: Creating and Running Docker Containers with Logstash, Elasticsearch, and Kibana 
published: true
description: description
tags: Logstash, Elasticsearch, Kibana, Docker
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ai2vf40cfin1l6p57isd.png
---
![Creating and Running Docker Containers with Logstash, Elasticsearch, and Kibana](https://raw.githubusercontent.com/ShunMare/tips/master/blog-posts/Logstash-Elasticsearch-Kibana/Create-Run-Docker-Containers-Logstash-Elasticsearch-Kibana/assets/flow.svg)
## Create `docker-compose.yml`
```yaml
version: '3'
services:
  elasticsearch:
    image: docker.elastic.co/elasticsearch/elasticsearch:8.9.0
    environment:
      - discovery.type=single-node
    volumes:
      - esdata:/usr/share/elasticsearch/data
    ports:
      - 9200:9200

  logstash:
    image: docker.elastic.co/logstash/logstash:8.9.0
    volumes:
      - ./logstash/config/logstash.yml:/usr/share/logstash/config/logstash.yml
      - ./logstash/pipeline:/usr/share/logstash/pipeline
    ports:
      - 5044:5044
    depends_on:
      - elasticsearch

  kibana:
    image: docker.elastic.co/kibana/kibana:8.9.0
    ports:
      - 5601:5601
    depends_on:
      - elasticsearch

volumes:
  esdata:
```
If you want to mount log files, use the following code:
```yaml
volumes:
  - ./logstash/logs:/usr/share/logstash/logs
```
## Creating `logstash/config/logstash.yml` and `logstash/pipeline/logstash.conf`
Create a folder named "logstash" in the same directory as the `docker-compose.yml`. Inside the "logstash" folder, create two subfolders named "config" and "pipeline". Save the following `logstash.yml` and `logstash.conf` files into their respective folders.
File Structure:
```bash
/my_project
  docker-compose.yml
  /logstash
    /config
      logstash.yml
    /pipeline
      logstash.conf
```
`logstash/config/logstash.yml`:
```yaml
http.host: "0.0.0.0"
path.config: /usr/share/logstash/pipeline
```
`logstash/pipeline/logstash.conf`:
```conf
input {
  beats {
    port => 5044
  }
}

output {
  elasticsearch {
    hosts => ["elasticsearch:9200"]
  }
  stdout {
    codec => rubydebug
  }
}
```
Here is the basic Logstash configuration to read the content of a text file and output it to standard output (stdout):
```conf
input {
  file {
    path => "/path/to/your/file.txt"
    start_position => "beginning"
    sincedb_path => "/dev/null"
  }
}

output {
  stdout { codec => rubydebug }
}
```
## Starting the Docker Container
```bash
docker-compose up
```
## Stopping and Removing All Running Containers
```bash
docker stop $(docker ps -a -q)
docker rm $(docker ps -a -q)
```
## Displaying Docker Container Logs
```bash
docker logs <your-container-id>
```
or
```bash
docker-compose logs logstash
```
## Stopping Docker Containers
```bash
docker-compose down
```
## Restarting Containers
```bash
docker-compose up
```
## Entering a Running Docker Container
```bash
docker exec -it <container_id> /bin/bash
```
or
```bash
docker exec -it <container_id> /bin/sh
```
Nuxt3: cool feature
Tags: nuxt, vue, javascript, programming
Published: 2023-08-03 12:19:50

One of the best things about Nuxt3 is this beautiful effect when you run any project 💻
i made a repo for this effect so anyone can check it out and learn from it 🙏
🔗 : https://github.com/AHMAD19858/nuxt-effect
The Vital Role of Lawyers in Software Development Companies
Published: 2023-08-03 09:07:44


In the rapidly evolving world of technology, software development companies face many legal challenges that can significantly impact their success. As such, the role of lawyers within these companies has become more crucial than ever.

First and foremost, lawyers play a vital role in ensuring compliance with the complex laws and regulations governing the technology industry. From data protection and privacy laws to intellectual property rights, having legal experts on board helps software development companies navigate the legal landscape and avoid potential pitfalls.

Moreover, lawyers assist in safeguarding the company's intellectual property, including software code, trademarks, and patents. By securing intellectual property rights, software development companies can protect their innovative products and prevent unauthorized use or infringement by competitors.

Contract drafting and negotiation is another area where lawyers are invaluable. Whether it's dealing with clients, vendors, or partners, lawyers can ensure that contracts are comprehensive, fair and provide adequate protection for the company's interests.

Additionally, as software development companies often collaborate with clients across different jurisdictions, lawyers with expertise in international law can facilitate seamless cross-border operations and address legal challenges in global markets.
[lawrina.org](https://lawrina.org/lawyers/) - has a database of attorneys for software development companies that can help you with all problematic issues.

In conclusion, lawyers are an indispensable asset to software development companies, offering their legal expertise to navigate complex regulations, protect intellectual property, and secure mutually beneficial business relationships. Their presence not only helps mitigate potential legal risks but also paves the way for the company's growth and continued success in the competitive tech industry.
Webinar Zebrunner Testing Platform: collaborative environment for manual and automated testing
Published: 2023-08-03 11:48:11

🚀 Want to optimize manual and automated testing processes, improve collaboration, and achieve better traceability in just an hour? 🏁
🗓️ Join us for an exciting #webinar on August 15th, where Hanna Hlushakova and Hanna Sukhadolava will demonstrate how Zebrunner transforms your testing journey, ensuring seamless integration and maximizing your team's productivity at every stage!

🔗 Register now to secure your spot: https://zebrunner.com/testing-platform-overview-wb1?utm_source=devto&utm_medium=webinar3&utm_campaign=post_announcement_w1 

#manualtesting #automationtesting #automatedtesting #testautomation #events2023 #testingtools
Academic research: How organisations keep records about their algorithmic systems
Tags: ai, machinelearning, datascience, data
Published: 2023-08-03 11:34:03

Hi there,

First off, apologies if this kind of post isn't allowed. Feel free to delete if it's not.

I'm a Research Associate at the University of Cambridge's Computer Lab, doing research on a wide range of data-driven and algorithmic systems. We're particularly interested in how those that work with algorithmic systems (e.g. ML/AI) keep records about their systems. This might be various kinds of technical logs, or about the development, deployment, and use of these systems. 

We're currently aiming to document some of the approaches, attitudes, and challenges associated with record-keeping for these types of systems, to better understand how professionals that work with these systems can be better supported about the types of records that they may or may not want to be keeping.

To explore this further, we're currently running a survey. If you happen to be a professional working with algorithmic/ML systems, with a spare ~20 minutes, it would be really helpful if you'd consider answering some questions. The link to our questionnaire is here: https://cambridge.eu.qualtrics.com/jfe/form/SV_3n6RuowNogZKG34

Thanks very much! I'm more than happy to come back and share the results of our research here if that's of interest to anyone!
"Mastering JavaScript: Unleashing the Power of Programming"
Tags: javascript, beginners, programming
Published: 2023-08-03 11:33:58

The University of Debrecen proudly presents "Mastering JavaScript: Unleashing the Power of Programming." This comprehensive course is designed to take students on an exciting journey into the world of JavaScript, one of the most versatile and widely used programming languages in the digital era. Whether you are a computer science enthusiast or a web development aspirant, this course will equip you with the essential skills and knowledge to excel in the realm of programming. Join us as we delve into the intricacies of JavaScript, explore its practical applications, and uncover the secrets to building interactive and dynamic web applications. With expert instructors, hands-on projects, and a supportive learning community, this course is the perfect stepping stone for your programming ambitions. Don't miss the opportunity to harness the full potential of JavaScript and unlock endless possibilities in the world of programming at the University of Debrecen. Enroll now and pave your path to becoming a JavaScript pro!
WEBSITE:https://southasia.edu.unideb.hu/