teleren/devto huggingface dataset:
How Do You Plan the Perfect Vacation?
Tags: beginners, webdev, tutorial
Published: 2022-04-28 15:21:47

Beautiful Blue Waters, Luxury Resorts, and Private Islands abound in the Bahamas – How Do You Plan the Perfect Vacation?

You're closer to finding paradise than you believe. The Commonwealth of the Bahamas, or simply the Bahamas, is a series of islands in the Atlantic Ocean that spans 500 miles. These Caribbean islands are popular with tourists because they're simple to get to yet provide an experience that's far from ordinary, due to turquoise oceans, warm, salty breezes, and lots of opportunity to learn how to live life to the fullest from the people.

Many Floridians boat to Freeport on Grand Bahama Island, which is situated about 70 nautical miles off the east coast of Florida. Everyone else, on the other hand, is just a short flight away. Plan a trip to the Bahamas for your next vacation and you'll discover that you don't need to go far to [dordle](https://dordle.io) feel as if you've arrived in paradise.

When is the best time to visit the Bahamas?
When is the ideal time to visit the Bahamas? It depends on your objectives. The best time to visit is from mid-December to mid-April, when the weather is at its best. However, since this is when the islands are most crowded, you'll have to struggle with increased rates and additional visitors.

If you're concerned about the cold, the Bahamas never drops below 60 degrees Fahrenheit, so there's never a terrible time to come, but bear in mind that the Atlantic hurricane season runs from June to November. While traveling during hurricane season does not ensure that your vacation will be disrupted by a storm, it is something to keep in mind when you plan your trip.

Summer months are also rainy, so you may get soaked, but there will be less customers and lower prices. If you want to visit the Bahamas when the crowds are at their lightest, consider a vacation around September and October.

What to Do in the Bahamas is a list of the best things to do in the Bahamas.
If you're visiting the Bahamas, you'll almost certainly want to go to the beach. Fortunately, wonderful beaches can be found on all of the Bahamas' islands.

Boating (you may take a day excursion or lease a private boat with a skipper), visiting private islands, and diving and snorkeling are all popular activities. If anything involves or involves water, you can (and should) most likely do it in the Bahamas. The water is clear, warm, and lovely, as well as teeming with marine life.
DevBox 2.0
Tags: webdev, programming, news, productivity
Published: 2022-04-28 15:18:25

Hi 👋

It's been a while since I posted an update here about DevBox, so this post will summarize the new things that have been added since the last few updates 😎

> DevBox is a desktop application / browser extension / web application of useful tools for developers. If you are curious, check out the [introductory post](https://dev.to/gdotdesign/devutils-everyday-utilities-for-the-everyday-developer-4m) and [website](www.dev-box.app).

The two new bigger features are **localization** and **cheat-sheets** 🎉

## Localization

All labels and content has been translated to Hungarian and Spanish in addition to English:

![Spanish Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz634y97wo3otdnbu1u8.png)

## Cheat-Sheets

10 cheat-sheets of 5 package managers and 5 common command line tools:

![Docker Cheat Sheet Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1wwnriewnq1xnwl6zany.png)

More cheat-sheets are coming in future updates 🚧

## New Tools

2 new tools were added in the last releases.

### Code Snippet to Image

This tool allows you to save an image of a code snippet which can be shared online:

![Code Snippet to Image Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hrdp2hq08w2augfrxa89.png)

### Color Information

This color gives information about a color, shows it's parts in different color spaces, CSS representations and related colors (complementary, analogous, etc...):

![Color Information Screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zsn7fwos41523289i9aw.png)

----------

For the full list of changes, check the [changelog](https://www.dev-box.app/changelog) and the and [website](www.dev-box.app).

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

Let me know your feedback in the comments 🗨️ 🙏
Quick question about code review comments
Tags: visualstudio, git, azure, help
Published: 2022-04-28 15:15:48

Recently I've started working with an environment that is new to me - the Git repository is stored on Azure dev ops and I'm working on Visual studio 2019.

For every pull request we're having a code review, in which my team leader reviews the code and writes comments (optionally, of course) of what he thinks should be changed.

My question is - Is there a way (and if so how) for me to see these comments directly in Visual studio? 

Currently I'm forced to Juggle my attention between VS and the browser showing the PR, and I think it would help a lot if I could just do it all in visual studio.

Thanks and advance, 
Zohar.

BTW, sorry for not writing here for so long
Svelte quick tip: Style prop defaults
Tags: css, webdev, svelte
Published: 2022-04-28 15:08:28

Svelte has a built-in solution for component theming using [style props](https://svelte.dev/docs#template-syntax-component-directives---style-props). So, you can use [CSS custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) in your component styles...

```html
<p>
	I have something important to say.
</p>

<style>
	p {
		border: 2px solid var(--line-color);

		/* Decorative styles */
		padding: 1rem;
		max-width: 60ch;
	}

</style>
```

...and easily set them from outside the component using style props.

```html
<TextBox --line-color="mediumspringgreen"></TextBox>
```

But what if you want your style to have a default value? The custom property `var` syntax takes a [second argument](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#custom_property_fallback_values) that sets a fallback if the property is not defined. So, if you wanted the default border color to be `darkred`, you could do the following.

```css
p {
  border: 2px solid var(--line-color, darkred);
}
```

However, this can get verbose if you want to use `--line-color` in multiple places, with the same fallback. If you want to update the default value, you have to do it multiple places!

```css
p {
  border: 2px solid var(--line-color, darkred);
  text-decoration: underline wavy var(--line-color, darkred) 1px;
}
```

There’s two ways to refactor this to make it less verbose. First, you could introduce another custom property for the default value:

```css
p {
  --line-color-default: darkred;
  border: 2px solid var(--line-color, var(--line-color-default));
  text-decoration: underline wavy var(--line-color, var(--line-color-default)) 1px;
}
```

This makes it so there’s one place to _change_ the default value, but you still have to provide the second argument to `var` every time you reference `--line-color`.

Instead, my recommended approach would be to introduce another custom property that represents _either line-color or the fallback_.

```css
p {
  --_line-color: var(--line-color, darkred);

  border: 2px solid var(--_line-color);
  text-decoration: underline wavy var(--_line-color) 1px;
}
```

So now you have two variables:

- `--line-color` is the user-supplied theme value
- `--_line-color` is what we use in our styles, and will either be the user-supplied value (if defined) or the default color

You can see this in action in this [Svelte REPL](https://svelte.dev/repl/c14650e187bb48e9a3e168b9955268ea?version=3.47.0).

You only need to introduce a variable like `--_line-color` if you plan on using the theme variable multiple places. Otherwise, it’s perfectly fine to set the fallback where you use the property, as in the first example.

The technique on display here is not unique to Svelte, and can be applied anywhere you use custom properties. However, it's of particular interest with Svelte, since custom properties are the recommended way of theming a component.
Adding dark/light mode specific images to your GitHub readme page
Tags: opensource, tutorial, html, github
Published: 2022-04-28 15:07:47

Recently we finished designing a new logo for our open-source project [Novu](https://github.com/novuhq/novu) and discovered in the GitHub docs that you can specify an image for light and dark modes separately using the: `#gh-dark-mode-only` on the .md src source suffix.

Here is an example:

```md
![Logo Dark](https://image-link.png#gh-dark-mode-only)
![Logo Light](https://image-link.png#gh-light-mode-only)
```

Only a single image will be shown depending on the user theme preference. Let's see it in action:

### Light Mode
![Light Mode Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bkwvtbj1z15u8mc0e67.png)
 
### Dark Mode
![Dark Mode Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lsivjk1upcqefh0x1hf3.png)
 

## Centering the image
It's common that you want to center a smaller image to the center of the screen. Luckily we can use the `align="center"` property on the supported `div` tag.

```md

<div align="center">
  
  ![Logo Dark](https://user-images.githubusercontent.com/8872447/165779319-34962ccc-3149-466c-b1da-97fd93254520.png#gh-dark-mode-only)
  
</div>

<div align="center">
  
  ![Logo Light](https://user-images.githubusercontent.com/8872447/165779274-22a190da-3284-487e-bd1e-14983df12cbb.png#gh-light-mode-only)
  
</div>
```

> The new lines after the starting and before closing of the div are important, otherwise the image won't be rendered.

I think the new theme matched logo looks great and it's another touch of detail that makes your GitHub personal or open-source project readme standout.

Post your results in the comments!
Create a Landing Page that converts
Published: 2022-04-28 14:51:59

These are the best landing page practices we’ve learned through the years:

To start with, divide your page into two sections: above the fold and below the fold. In the first one, make sure you earn the customer’s attention. You can use the second one to provide extra information, clear doubts and earn the sale. 

When planning the above the fold section of your landing page, keep in mind that less is more. Focus exclusively on showcasing the value you provide and explaining how you’ll create it. This should be achieved briefly with a title, a subtitle, social proof, a CTA and a few visuals. 

These five elements are key, dedicate time to perfect them.

- **Title**: sum up the value you offer in a few words. Think about the title of your landing page as a unique label for your brand. It should explain what you do and highlight what makes your offer outstanding.

- **Subtitle**: this section allows you to address the user’s main objection. To ace this, you’ll need to get to know your audience and anticipate their concerns about your offer.

- **Visuals**: show your potential customers your value. Try to avoid stock images, they will hardly highlight the uniqueness of what you offer. 

- **Social proof**: user’s reviews support your value proposition.

- **CTA**: encourage the user to take action!

If done correctly, the above the fold section of your landing page should clearly state what you are offering and get people’s attention so that they scroll down to get more information. 

Below the fold, you’ll need to show the value that you promised. Moreover, this section gives you more room to deal with your customers’ objections and doubts. Make sure you:

- Clear doubts you think they’ll have.

- Describe the main features of your product/service.

- Add social proof.

- Add another CTA.

- Add storytelling: finish your landing page with a personal touch. Briefly describe how you feel about what you are offering and how you are helping people with it.

It’s important that you don’t add anything that drives people away from your page. If a user arrives at your landing page and scrolls down, your job is to keep them there. Don’t add anything that redirects them to other pages.

Follow these easy steps and create a landing page that converts! Remember that a cluttered page will only distract and confuse your visitor. It’s best to have fewer elements, you just have to take the time to make them count.
Use SQLite in-memory with Groovy
Tags: groovy, sqlite
Published: 2022-04-28 14:46:21

I have in the past needed to do computations with a data set that I didn't want to keep. An easy way is to create an in-memory SQLite database. This is how to do it in Groovy.

```
import groovy.sql.Sql
import org.sqlite.JDBC

def sql = Sql.newInstance("jdbc:sqlite::memory:", "org.sqlite.JDBC")

sql.execute("CREATE TABLE data (id INTEGER PRIMARY KEY, col2 TEXT, col3 TEXT);")

def data = sql.dataSet("data")

1.upto(5) { id ->
	data.add(id:id, col2:randNum(9999), col3:randStr(15))
}

data.add(id:6,col2:null,col3:'should be null')

sql.rows('select * from data').each { row ->
	println "${row[0]} | ${row[1]} | ${row[2]}"
}

sql.close()

```

Bonus - two methods that create random data, used in the example:

```
def randStr(length) {
	return new Random().with { (1..length)
					.collect { (('A'..'Z')+('0'..'9')+('a'..'z'))
				.join()[ nextInt( (('A'..'Z')+('0'..'9')+('a'..'z'))
				.join().length() ) ] }
				.join() }
}
	
def randNum(maxSize) {
	return Math.abs(new Random().nextInt() % maxSize) + 1
}
```

Sample output:

```
1 | 1108 | il4qmhfUh1uvAmW
2 | 2707 | L3faFu2a5ISc8nc
3 | 7014 | a7JfVfwjZRIp4bW
4 | 8574 | tTL96UCbkOOyTBl
5 | 2011 | vXjH88yNLiaTvdV
6 | null | should be null
```
Neat! Remember: at the end of your script, your database is gone, which is what my use case required.
Paracetamol.js💊| #111: Explica este código JavaScript
Tags: webdev, javascript, spanish, beginners
Published: 2022-04-28 14:24:39

## **<center>Explica este código JavaScript</center>**
#### <center>**Dificultad:** <mark>Intermedio</mark></center>

```js
const set = new Set([1,2,3]);
console.log(set.map((item) => item * 2))
console.log(Array.from(set).map((item) => item * 2))
console.log([...set].map((item) => item * 2))
```

A. `[2, 4, 6]`, `[2, 4, 6]`, `[2, 4, 6]`
B. `Uncaught TypeError: set.map is not a function`, `[2, 4, 6]`, `[2, 4, 6]`
C. `[2, 4, 6]`, `SyntaxError`, `[2, 4, 6]`
D. `SyntaxError`, `[2, 4, 6]`, `[2, 4, 6]`

Respuesta en el primer comentario.

---
How do I ask for a raise?
Tags: anonymous, discuss, career
Published: 2022-04-28 14:23:51

_This is an anonymous post sent in by a member who does not want their name disclosed. Please be thoughtful with your responses, as these are usually tough posts to write. Email sloan@dev.to if you'd like to leave an anonymous comment or if you want to ask your own anonymous question._

***

I'm trying to work my way up through my company. Time and time again, I find myself thinking that I should earn more for my position, but I don't know how to bring up the idea of a pay raise to my manager. 

How do broach the topic of a raise to my manager? I really think I'm deserving of the raise, but I don't know how to bring it up, and it's a really nerve-wracking conversation for me.
How to rename a local and remote git branch
Tags: git
Published: 2022-04-28 14:20:07

Follow the steps below to rename a Local and Remote Git Branch:

- Start by switching to the local branch which you want to rename

`git checkout [old_name]`

- Rename the local branch by typing

`git branch -m [new_name]`

At this point, you have renamed the local branch. If you’ve already pushed the [old_name] branch to the remote repository, perform the next steps to rename the remote branch.

- Push the [new_name] local branch and reset the upstream branch.

`git push origin -u [new_name]`

- Delete the [old_name] remote branch

`git push origin --delete [old_name]`

That’s it. You have successfully renamed the local and remote Git branch.
Retro themed snake game with live highscore board!
Tags: appwritehack, appwrite, hackathon, react
Published: 2022-04-28 14:19:33

[Instructions]: # (To submit to the Appwrite Hackathon on DEV, please fill out all sections.)

### Overview of My Submission
**Snake Arcade** is a retro themed snake game with a live highscore board. 
I took this inspiration from the popular Nokia snake game which I used to play in my dad's mobile back when I was a kid. I had so much fun playing it. Moreover my friends used to brag about their scores but there's was no scoreboard to track them. And that's why I decided to build one with a highscore board 🤠. 
To make it more fun and challenging I have added a little **twist**. Whenever the golden fruit appears, you get 50 points more but there's a 20% chance that your score will be reduced by 50 points 😜. So are you willing to take the challenge? Compete with your friends and top the leaderboard!

Play now: [Snake Arcade](https://snake-arcade-bck7y.ondigitalocean.app/)

### Submission Category:
Wacky Wildcards

### Link to Code:
{% embed https://github.com/anomic30/Snake-arcade %}

### Additional Info:
**Frontend:** React.js
**Backend:** Appwrite
This is how the architecture of my Snake Arcade looks like. If you wonder how I designed this, I have used [Figma](https://www.figma.com/) :)

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

**How I integrated Appwrite:**
I have hosted the Appwrite instance on a **DigitalOcean** droplet using their 'One-Click Droplet' in the DigitalOcean Marketplace. You can find the tutorial here: https://dev.to/appwrite/announcing-appwrite-one-click-droplets-on-digitalocean-1hd8

In order to build the highscore board, I have used the Appwrite's database to store the highscore of each players. The database schema looks like this:

![Database Schema](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9wkbow35ntic0olvwf0q.png) 

Now, to query the top 10 highscores I have indexed the database based on the *userId* to locate the required data without having to search through every document for result. 

![Database Index](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/17mp0bkbjg84x5atbc29.png) 

Finally I have installed the Appwrite SDK in my React app using their [npm](https://www.npmjs.com/package/appwrite) package.

### Demo video:
![Snake Arcade Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1h3jymiti475odfsgylr.gif)

### Thank you Dev & Appwrite!
This is my first time using Appwrite. Its so simple and easy to learn that any beginners can use it in their project. I would recommend everyone to use **Appwrite** 🚀. 

#### Update 1: 
Just crossed 100 users. Thank you everyone 😀.
Sharing VS Code extensions across teams
Tags: vscode, reactnative, javascript, storybook
Published: 2022-04-28 14:11:04

Let's say you have a big monorepo (not unusual at all in these days) and that you have 20+ developers working on it and you have many tools to improve the quality of the written code.
How do you keep the developer experience at the top?

This is one of the many challenges we face at Musixmatch in our front-end codebase.

We're aware of several generic ways in which companies can provide a cohesive environment to work on. There is Vagrant, but also cloud development solutions with workspaces that provide you with stuff already configured for you.

But what about something more specific to the editor/IDE in use? What if there was a way to inform the developers that a certain project requires certain extensions and settings?

We use **Visual Studio Code** and we believe it's important for the developers to be on common ground when talking about the software we use to write code, and there is a way.

## The .vscode folder

Visual Studio Code has both a user configuration and a workspace one that can be found inside the project, within a ".vscode" folder that contains all the necessary json files to properly configure the editor.

The overall configuration of Visual Studio Code will be a merge of the configuration inside the developer computer and the one inside the project.

Can we do the same but for extensions and not just settings?

## The extensions.json file

Just the other day I was investigating why we were encountering many difficulties in writing stories with Storybook for our React Native internal design system (called **Ritmo**).

We're used to writing our stories in MDX because we found it to be more declarative than javascript. Sadly, though, there is no straightforward support from linters and syntax highlighters over MDX files*.

Thanks to the [following VS Code extension](https://github.com/mdx-js/vscode-mdx) and the [related eslint plugin](https://github.com/mdx-js/eslint-mdx), we enabled linting and syntax highlighting also inside MDX files.

So, Visual Studio Code has a way to request users working on a project, that contains a .vscode/extensions.json file, to install certain extensions. Here is an example:

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

_MDX stands for "Markdown JSX", it's an extension of the more classical MD format that allows writing JSX (e.g. using React components) inside markdown files._

I find this to be a little useful gem, also I'd love to see this approach used within open source projects.

What do you use instead to keep your projects synced and well organized between your devs?
Múltiplas chaves SSH para GitHub
Tags: github, ssh, rsa, multiplas
Published: 2022-04-28 14:09:35

# verificar chaves já existentes
`ls ~/.ssh`

# gerar chave com nome específico para não sobrescrever as chaves existentes
`ssh-keygen -t rsa -b 4096 -C "seu-email@email.com"`


# gerar arquivo config dentro da .ssh

```
# Personal account
Host github.com-usuario_git
   HostName github.com
   User git
   IdentityFile C:\Users\promoda\.ssh\id_rsa_usuario_git

# Office account
Host github.com-usuario_git
   HostName github.com
   User git
   IdentityFile C:\Users\promoda\.ssh\id_rsa
```


# adicionar essa nova chave ao seu repositório e alterar no repositório clonado o remote

```
git remote add origin git@github.com-usuario_git:usuario_git/nome_repositorio.git
```


# ou se quiser clonar direto

```
git clone git@github.com-usuario_git:usuario_git/nome_repositorio.git
```


# entrar no repositório local e setar de forma não global o user e email git

```
git config user.name "NomeUsuario"
git config user.email seu-email@email.com
```

#ainda dentro do repositório setar a ssh no config do git
`sshCommand = ssh -i ~/.ssh/id_rsa_usuario_git`


#testar ssh
`ssh -T git@github.com-usuario_git`



# créditos:
https://backefront.com.br/diferentes-sshkey-mesmo-computador/
https://dev.to/fabriciadiniz/como-utilizar-duas-contas-do-github-no-mesmo-computador-windows-2348
https://gist.github.com/EdnilsonRobert/b4e37785e23a21d0f1eba8974032a77e
https://diariodoprogramadortda.wordpress.com/2019/06/06/git-usando-multiplas-chaves-ssh/
Curl usages
Tags: linux, bash
Published: 2022-04-28 14:00:43

## Why write about curl
As a backend developer working in a startup type culture in a large organisation I play many different roles at any time in the day. 

These could be but not limited to:

1. Software developer
2. System Analyst 
3. Linux administrator 

I'm trying to documents tools I use on a daily basis 


It
Sublime Merge Keymap
Tags: sublimemerge
Published: 2022-04-28 13:55:59

Wanted to share a useful Sublime Merge config. You can create your own key mappings to perform various tasks. One of my frequently-used tasks is to `git fetch --all --prune` to bring my local box up-to-date with the various work of others. So I created a key mapping so I can do a Shift + ⌘ + r (think force refresh from the browser) inside Sublime Merge to do just that.

To do this, select the `Edit Key Bindings...` menu option under the `Sublime Merge` / `Preferences` menu:

![Screenshot showing the menu option](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rk010k6opblyy135wyrg.png)
 
And this is what my keymap looks like:

```
[
  {
    "keys": ["shift+command+r"],
    "command": "git",
    "args": {"argv": ["fetch", "--all", "--prune"]}
  }
]
```

This is Mac-specific, but you could do the same with control vs. command for Windows/Linux.