teleren/devto huggingface dataset:
I fixed the "Save draft" Button on dev.to - No Accidental Publishing Anymore 😇
Tags: meta, programming, javascript
Published: 2024-03-25 12:02:54

Today I accidentally published an article AGAIN, because "publish" and "safe draft" are so close together.

I even opened a [discussion, which got no responses so far](https://github.com/forem/forem/discussions/20456) (which I think existed somewhere else or I am the only one with this issue...).

<small>Cover image by <a href="https://unsplash.com/@francisco_legarreta?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Francisco De Legarreta C.</a> on <a href="https://unsplash.com/photos/a-man-with-glasses-is-looking-at-a-laptop-hHg9MC-G8_Y?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a>
  </small>

## How to fix it?

I use Greasemonkey and Tampermonkey, depending on the browser.
The fix script is rather simple:

- observe the DOM using `MutationObserver` in 
- use `body` as observe target, in case the user navigates to the edit route from dashboard or preview route
- "wait" until the `editor-actions` are added as `childList` to the `article-form`
- if they're added, get the second button ("save draft" button) and update it's margin-left style

The script looks like the following: 


```js
// ==UserScript==
// @name     dev.to save button space
// @version  1
// @grant    none
// ==/UserScript==
const BUTTON_STYLE = '200px'
const target = document.querySelector('body')


const callback = (mutationList, observer) => {
  for (const mutation of mutationList) {

    if (mutation.type === 'childList' && mutation.target.id === 'article-form') {
      const actions = mutation.addedNodes[0]
      
      if (actions && actions.id === 'editor-actions') {
        Array.from(actions.children)[1].style.marginLeft = BUTTON_STYLE
      }
    }
  }
}

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback)

// Start observing the target node for configured mutations
observer.observe(target, { attributes: true, childList: true, subtree: true })
```

Also available as gist: https://gist.github.com/jankapunkt/a442d10a2d3cda905843ca35645007d8

Feel free to comment or optimize in any way :-)

---
## About me 👋

I regularly publish articles about **Meteor.js** and **JavaScript** here on dev.to. I also recently co-hosted the [weekly Meteor.js Community Podcast](https://www.youtube.com/@meteorjscommunity), which covers the latest in Meteor.js and the community.

You can also find me (and contact me) on [GitHub](https://github.com/jankapunkt/), [Twitter/X](https://twitter.com/kuester_jan) and [LinkedIn](https://www.linkedin.com/in/jan-kuester/).

If you like what you read and want to support me, you can [sponsor me on GitHub](https://github.com/jankapunkt), [send me a tip via PayPal](https://paypal.me/kuesterjan) or sponsor a book from [my Amazon wishlist](https://www.amazon.de/-/en/hz/wishlist/ls/12YMIY0QNH9TK?ref_=list_d_wl_lfu_nav_1).
AWS Community Day Bengaluru - Ideation to Execution
Tags: aws, womenintech, leadership, ai
Published: 2024-03-25 12:01:35

𝐀𝐖𝐒 𝐂𝐨𝐦𝐦𝐮𝐧𝐢𝐭𝐲 𝐃𝐚𝐲 𝐁𝐞𝐧𝐠𝐚𝐥𝐮𝐫𝐮 - 𝐈𝐝𝐞𝐚𝐭𝐢𝐨𝐧 𝐭𝐨 𝐄𝐱𝐞𝐜𝐮𝐭𝐢𝐨𝐧 - 𝐚 𝐡𝐮𝐠𝐞 𝐬𝐮𝐜𝐜𝐞𝐬𝐬

I still remember the initial conversation with Jones Zachariah Noel N about hosting AWS Community Day in Bengaluru 2024 5 months back, infact an in-person AWS Community event at large after 2019.

📍 AWS Community Day Bengaluru has been a journey that began with a spark of an idea and culminated in an event that exceeded all expectations. It was a testament to the collaborative effort of our sponsors, speakers, and volunteers who poured their hearts and souls into making it a success. Their dedication and passion shone through every aspect of the event, from the insightful sessions to the seamless organization.

📍 We extend our heartfelt thanks to all the speakers who shared their knowledge and insights, making AWS Community Day Bengaluru a truly enlightening experience. 

     Runcy Oommen Senthil Kumar, Amrith Kumar Ashish Kumar Abhinav Dubey Jithin Jude Paul Debarshi Mondal Kishan S Shrey Batra Madhivanan Anbalagan Zameer Fouzan Dimple Vaghela Deepika Nair & team

📍 A special shoutout to our dedicated volunteers who worked tirelessly behind the scenes, ensuring that everything ran smoothly and efficiently throughout the event.

      Jones Zachariah Noel N Ayyanar Jeyakrishnan (AJ) Sridevi Murugayen Ramya Natesan Avinash Dalvi Abishek Subramanian Ranjinni Joshe ✨️ Padmini Subramanian Sankara Sabapathy  vidya prabhu Piyush Jalan Omshree Butani Vijaya Nirmala Gopal Shafraz Rahim Praveen Jayakumar

📍 We are immensely grateful to our sponsors for their generous support, without which this event would not have been possible. Your contributions are deeply appreciated.

     MongoDB Karissa Fuller New Relic Serverless Guru Snowflake KonfHub Whizlabs Packt

📍 Last but not least, a big thank you to the AWS team for their continuous support and guidance, helping us bring this event to life and showcasing the best of AWS to our community.

      Amazon Web Services (AWS) Ridhima Kapoor Shafraz Rahim  Rashmi Nambiar 🌤 Farrah Campbell 

Here is the glimpse of the event..

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

Links: [LinkedIn](https://www.linkedin.com/feed/update/urn:li:activity:7177967076785971200/)

**Gallary**

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


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


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




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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cb4etxj4tpy26iy9lwrb.png)
Getting Started with JavaScript
Tags: webdev, javascript, beginners, programming
Published: 2024-03-25 12:00:00

The first thing we need to do, is install a piece of software called a web browser. A web browser lets us view websites that we create in this course.

The most popular web browser for web development is Google Chrome. So, I recommend using that.


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


If you don't have Google Chrome, you can open a default web browser on your computer. For Windows, it is Microsoft Edge, and for Mac it is Safari.


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


Type in google.com at the top and press Enter.


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


Search for Google Chrome, and click the result.


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


Follow the instructions to download and install.


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


Once we have installed Chrome, we are ready to begin.

Happy Coding!
Karl 🤛

P.S. Brand new [JavaScript for Beginners eBook](https://t.co/5BGqLTIkyp) from ME...And it's free.
What is Querying a Database? Everything You Need to Know
Tags: webdev, beginners, tutorial, sql
Published: 2024-03-25 12:00:00

So, one of the most common things that you are going to be doing is our queries.

So, a database query is a request that is made to the database management system for specific information.

So, you will hear the word query thrown a lot. In general, a query is, you are just asking a database management system to give you some information.

So, as a database structure becomes more and more complex, it becomes more difficult to get more specific pieces of information that we want.

And if you have a very complex database layout or schema, then getting a specific piece of information can be a little bit tricky. And that is why we write database queries.

So, you could write a very complex database query which in a lot of ways is like a program, if you have ever used a programming language before, and that query will then instruct the relational database management system to grab a specific piece or specific pieces of information from the database.

So, a good way to think of a query is, that it is kind of like a Google search. So, I go on Google and I would generally type in specific information that I want, then Google would give me the information that matches that search query.

That is a lot like a database query. Except, with a database query, we are not going to write the query in English like we would with Google.

So, I can go up to my Google search bar, and I could type something in English, Spanish, or whatever language you speak.

But for a relational database management system, we have to write our queries using either SQL or a specific language that is meant for that database management system.

Happy Coding!
Karl 🤛

P.S. This is a small sneak preview of my flagship course, [The Art of Web Development](https://karlgusta.gumroad.com/l/mwiky/6wh7z13). 14 Chapters and 111 Lessons that will help you become a Full-Stack Web Developer with just ONE course (even if you're just starting or don't have an idea).
Setup Next.js 14 project with Eslint + Prettier + Tailwind CSS
Tags: nextjs, eslint, prettier, tailwindcss
Published: 2024-03-25 11:49:04


To set up a Next.js 13 project with ESLint and Prettier, you can follow these steps:

## Step 1: Create a Next.js Project

```
npx create-next-app my-nextjs-app
```

Replace my-nextjs-app with the name of your project.

## Step 2: Install ESLint and Prettier

Navigate to your project directory and install ESLint, Prettier, and required plugins:

```
cd my-nextjs-app
npm install --save-dev eslint prettier eslint-plugin-react eslint-config-prettier eslint-plugin-prettier prettier-plugin-tailwindcss

```

## Step 3: Create ESLint Configuration

Create an ESLint configuration file named .eslintrc.js in your project root:

```
module.exports = {
  extends: ['next', 'next/core-web-vitals', 'eslint:recommended', 'plugin:react/recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
  plugins: ['react', '@typescript-eslint'],
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: 'module',
  },
  rules: {
    // Add your custom ESLint rules here
  },
};
```

## Step 4: Create Prettier Configuration

Create a Prettier configuration file named **.prettierrc.js** in your project root:

```
module.exports = {
  semi: true,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  plugins: ["prettier-plugin-tailwindcss"],
};
```

## Step 5: Configure VSCode (Optional)

If you're using Visual Studio Code, you can install the ESLint and Prettier extensions for automatic linting and formatting.

## Step 6: Add Scripts to package.json

Add the following scripts to your **package.json** file:

```
"scripts": {
  "lint": "eslint .",
  "format": "prettier --write ."
}
```

## Step 7: Run ESLint and Prettier

```
npm run lint     # Run ESLint
npm run format   # Format code with Prettier
```
Here are some tips for hiring Lahore Call Girls
Published: 2024-03-25 11:17:13

**Do your research:** There are many escort services in Lahore. Take some time to read reviews and compare prices. This will help you find a reputable service that offers great value for your money.

**Check the abilities of the service:** Make sure that the service is licensed and insured. This will protect you in case of any problems.

**Ask about the policies of the service:** Find out what their policy is regarding cancellations, refunds, and payments. This will help you avoid any surprises later on.

**Get recommendations:** Ask your friends or family if they have any recommendations for Lahore call girl services. This can help you narrow down your choices and find a service that will meet your needs.

**Meet the escort in person:** Once you've found a service that you're interested in, arrange to meet the escort in person. This will give you a chance to see if you're compatible and to ask any questions that you have.

<a href="https://lahorelovegirls.online/call-girls-in-lahore/">Hiring a Lahore call girl</a> can be a great way to add some excitement to your stay in the city. Just make sure that you do your research and choose a reputable service. This will help you have a great experience and avoid any problems.
Les Bases de JavaScript : Un Aperçu
Tags: webdev, javascript, beginners, programming
Published: 2024-03-25 11:31:10

JavaScript est un langage de programmation polyvalent largement utilisé pour créer des applications web dynamiques. Que vous soyez un débutant en programmation ou que vous souhaitiez simplement rafraîchir vos connaissances, cet article vous présentera les bases de JavaScript.

1. **Variables et Types de Données**
Les variables en JavaScript sont utilisées pour stocker des données. Voici quelques exemples :

```
// Déclaration de variables
let nom = "Alice"; // Chaîne de caractères
let age = 30; // Nombre entier
let estMariee = false; // Booléen
let fruits = ["pomme", "banane", "orange"]; // Tableau
let personne = { nom: "Bob", age: 25 }; // Objet

```

2. **Opérateurs**
JavaScript prend en charge divers opérateurs pour effectuer des opérations sur les données. Voici quelques exemples :

```
// Opérateurs arithmétiques
let resultat = 10 + 5 * 2; // 20

// Opérateurs de comparaison
let x = 10;
let y = 5;
console.log(x > y); // true

// Opérateurs logiques
let estVrai = true;
let estFaux = false;
console.log(estVrai && estFaux); // false

```

3. **Structures de Contrôle**

JavaScript utilise des structures de contrôle telles que if, else if, else et switch pour prendre des décisions conditionnelles :

```
let heure = 12;
if (heure < 12) {
    console.log("Bonjour !");
} else if (heure >= 12 && heure < 18) {
    console.log("Bon après-midi !");
} else {
    console.log("Bonsoir !");
}

// Utilisation de switch
let jour = "Lundi";
switch (jour) {
    case "Lundi":
        console.log("C'est Lundi !");
        break;
    case "Mardi":
        console.log("C'est Mardi !");
        break;
    default:
        console.log("C'est un autre jour !");
        break;
}
```

4. **Fonctions**

Les fonctions en JavaScript sont des blocs de code réutilisables. Voici un exemple de fonction qui additionne deux nombres :

```
function additionner(a, b) {
    return a + b;
}

let resultatAddition = additionner(5, 3); // 8

```

5. **Événements**

JavaScript est souvent utilisé pour rendre les pages web interactives en répondant aux événements de l'utilisateur. Par exemple, voici comment afficher une alerte lorsqu'un bouton est cliqué :

```
<button id="monBouton">Cliquez-moi</button>

<script>
    document.getElementById("monBouton").addEventListener("click", function() {
        alert("Le bouton a été cliqué !");
    });
</script>

```

**Conclusion**

JavaScript est un langage de programmation puissant et polyvalent utilisé pour rendre les pages web interactives et dynamiques. En comprenant ces bases et en pratiquant avec des exemples, vous pouvez créer des applications web plus avancées et répondre aux besoins des utilisateurs de manière efficace. Continuez à explorer et à expérimenter avec JavaScript pour découvrir tout son potentiel !
Launch your SaaS in days, not weeks with Next Starter AI: Your all in one NextJs Typescript Boilerplate kit!
Tags: saas, webdev, productivity, typescript
Published: 2024-03-25 11:25:05

Next Starter is a boilerplate that contains everything for developing your AI, SaaS, AI tool or any other web application and allows you to transform your idea into a product. For tasks that take up your time, such as authenticating users, Next Js boilerplate with stripe and lemon squeeze payment integration with supabase, integrating AI tools, and sending emails quickly, Next Starter AI provides you with the basic code to start them quickly. Save your time from all the boring stuff, such as API setup, customer support, and more.

In addition, we have created marketing guides specifically for you to accelerate the marketing process of your product. This marketing guide, which is complete and ready for use, speeds up your marketing efforts and helps you make your first sale within days. It includes websites for backlinks, startup directories, and guest blog posts. Furthermore, you don't have to worry about what to do in the field of marketing. We have made marketing easy for you. With these guides, you can easily start earning money by marketing your product in a short time.
How to deploy your nextJs project on Linux Server with Ngnix and pm2
Tags: linux, ubuntu, aws, nextjs
Published: 2024-03-25 11:23:28

Hey devs! Ready to roll? Today, we're spicing things up! Picture this: deploying your Next.js project on a Linux server with Nginx and PM2! Sound tough? Let's buckle up! 💻✨

Read the full article here:

https://codecraftsangita.blogspot.com/2024/03/how-to-deploy-next-js-project-on-linux.html
Why Visual Studio Code is the Best editor for React.js Development
Tags: javascript, webdev, beginners, programming
Published: 2024-03-25 11:21:36

Choosing the right Editor is crucial for efficient React.js development. Among the various options available, Visual Studio Code (VS Code) stands out as the preferred choice for many developers. In this article, we'll explore why VS Code is considered the best editor for React.js development.

**Seamless Integration with React Ecosystem:**
Visual Studio Code provides excellent support for the React ecosystem out of the box. It offers syntax highlighting, code completion, and IntelliSense for JSX, JavaScript, and CSS, making it easier to write React components and styles.

**Rich Extension Ecosystem:**
VS Code boasts a vast collection of extensions, many of which are specifically tailored for React development. Extensions like ES7 React/Redux/GraphQL/React-Native snippets, Prettier, ESLint, and Debugger for Chrome enhance productivity by automating tasks, formatting code, and providing debugging capabilities.

**Built-in Terminal:**
VS Code comes with a built-in terminal, allowing developers to execute commands without switching between different applications. This feature is particularly useful for running npm scripts, managing version control with Git, and running development servers.

**Powerful Code Navigation:**
With features like Go to Definition, Peek Definition, and Find All References, VS Code enables developers to navigate codebases effortlessly. This is invaluable when working with large React projects with numerous components and dependencies.

**Integrated Version Control:**
VS Code seamlessly integrates with version control systems like Git, providing a unified interface for managing code changes. Developers can stage, commit, push, and pull changes directly from within the editor, streamlining collaboration workflows.

**Customizable User Interface:**
Visual Studio Code offers a highly customizable user interface, allowing developers to tailor their workspace to suit their preferences. Whether it's adjusting themes, configuring keyboard shortcuts, or rearranging panels, users can personalize their development environment for maximum efficiency.

**Excellent Performance:**
Despite its extensive feature set, Visual Studio Code remains lightweight and responsive, even when working with large React projects. Its efficient resource utilization ensures smooth performance, even on machines with modest hardware specifications.

**Cross-Platform Support:**
VS Code is available for Windows, macOS, and Linux, making it accessible to developers across different operating systems. This cross-platform compatibility ensures a consistent development experience regardless of the platform used.
Thailandos
Published: 2024-03-25 11:13:44

Have you ever booked a trip to an island paradise and found it less appealing than what it was made out to be? We’ve been there too. This led us to open a travel agency geared towards giving travelers everything they need to make informed travel decisions. 

Part of our mission is to give travelers the best possible experience for the type of trip they want to take, whether it be to connect with the Thai culture, find their inner zen, go on an exhilarating adventure or learn new skills.

Here at Thailandos, we believe it’s never too late to experience the extraordinary. This is your chance to go on a holiday, and we’re here to help. 

Visit Thailandos at https://www.thailandos.com/
Participating in The Collab Lab: Week #7
Published: 2024-03-25 11:05:28

We are pretty close to the end of our Collab Lab project 🤯.

Since we started, I worked each week pairing with another developer on an issue assigned to us. Usually, it was a new feature to add, and it was great that the complexity was growing at a very nice pace, so it kept us really engaged with the project.

Last week, we adopted a more spontaneous approach, as we wanted to address several open issues before beginning to work on the UI styling. We paired on those issues based on our interests, and collaboration was mostly asynchronous.

## Define a CSS framework or library
At the moment, we've decided that our next step and focus for the upcoming weeks will be to start working on improving the UI and enhancing the look of our app. We've already begun collecting references in a Figma mood board, although I must admit that working on it wasn't my top priority until now. I've been doing some research on CSS frameworks and component libraries that we might want to use for the project, and we'll be defining our choice in the next few days.

My fav options are: 

🛠️ **Tailwind**: is a CSS framework that uses a utility-first CSS approach. It offers a low-level utility API with classes to build any design directly in your markup without writing CSS, and a set of ready-to-use components.
It might take some effort to get used to it, but it simplifies the development process and provides a lot of flexibility. A main benefit is that it encourages a consistent use of colors, spacing, typography, shadows, and other styling elements within your app.
Another benefit is that it automatically removes all unused CSS when building for production, so the result is a final CSS bundle that is as small as possible.
The website has extensive documentation, and there is an active community plenty of resources, plugins, and extensions available.

🛠️ **Chakra UI**: is a simple and modular component library that allows you to build visually appealing UIs fast. It has a strong focus on accessibility and strictly follows WAI-ARIA standards for all components. It is themeable, and components are customizable to match the design needs of your app and it includes dark mode support. 
It uses a composable approach that keeps complexity low and ensures that the styles and functionality are flexible and extensible. You can easily compose new components from existing ones.
Chakra UI also has an active community and great documentation. It includes resources, tutorials, and examples to get started.

---

## Learning highlights of my week

It was a really enjoyable week for me, as it involved writing code, but also a lot of writing and reading. I also made some time to finish the useState blog post, so now [my React Hooks learning series](https://dev.to/vivitt/series/26502) includes three articles.

---
See you next week! Thanks for reading :)