teleren/devto huggingface dataset:
10 Atajos y Fragmentos de código que nos ahorraran tiempo al programar en Visual Studio
Published: 2021-06-12 20:35:24

Visual Studio(VS) es un Potente IDE que nos brinda muchas herramientas que facilitan todo el proceso de desarrollo de software.

En esta ocasión veremos fragmentos de código y atajos que nos ahorrará tiempo al codificar en VS, los que uso en mi día a día y creo que te será de gran ayuda

En primer lugar vamos a ver fragmentos de código, estos son pequeños "atajos", basta teclear palabras claves y darles doble tab para que se inserte el código requerido.

##1. Crear una clase
                       class + doble tab
Al realizar esta acción se crea una declaración de clase, esta debe ser usada en un namespace. Y se va a visualizar así:
```csharp
class MyClass
{
}
```

Ahora tienes que reemplazar el **"MyClass" por el nombre de tu clase y ya puedes utilizarlo

##2. Crear un constructor
                       ctor + doble tab
Crea un constructor para la clase contenedora, debemos estar dentro de una clase para poder hacer uso de este, ya que toma el nombre de esta clase y crea su constructor.
Se verá así
```csharp
class MyClass
{
   public MyClass()
   {
   }
}
```

##3. Crear un  atributo
                       prop + doble tab

Crea una declaración de propiedad autoimplementada, es decir que crea una propiedad con los métodos get y set dentro de una clase.

```csharp
public int MyProperty { get; set; }
```
solo deberíamos cambiar el tipo de dato y el nombre de la propiedad.

##4.Crear un bloque Try - Catch
                       try + doble tab

crea un bloque try - catch dentro de un método
```csharp
 try
 {
 }
 catch (Exception)
 {
   throw;
 }
```
ahora solo nos queda insertar el código dentro.

##5. Console WriteLine
                    cw + doble tab
```csharp
Console.WriteLine();
```
como vemos nos ayuda a crear un Console.Writeline rapidamente, ya solo nos queda ingresar lo que queremos mostrar.


**Ahora vamos a revisar algunos atajos que podemos realizar desde nuestro teclado.**

##6. Duplicar la línea
                    Ctrl + D
Duplica la línea en donde esta el cursos o las líneas seleccionadas

**En los siguientes atajos, mantén presionado el ctrl y posteriormente digita las letras en orden.**

##7. Formatear el código
                    Ctrl + K, Ctrl + F

Formatea el código seleccionado, o el archivo actual. 

##8. Comentar un fragmento de código
                    Ctrl + K, Ctrl + C

Comenta las líneas seleccionadas

##9. Descomentar un fragmento de código
                    Ctrl + K, Ctrl + U

Descomenta las líneas seleccionadas

##10. Mostrar sugerencias
                    Ctrl + Barra espaciadora
Completa palabras, muestra sugerencias de código, un ejemplo simple lo podemos observar al usarlo después de **"clase."** nos muestra su atributos, métodos etc.


Nos vemos en [Twitter](https://twitter.com/veronicaguamann) e [Instagram](https://www.instagram.com/veronicaguamann/) ;)
How to watch a directory to detect changes using java
Tags: java, io, watch
Published: 2021-07-03 07:33:51

---
title: How to watch a directory to detect changes using java
published: true
date: 2021-06-12 20:19:10 UTC
tags: java, io, watch
canonical_url: http://bazlur.com/2021/06/how-to-watch-a-directory-to-detect-changes-using-java/
---

Have you ever noticed, when you open a file into two different editors, and when you made changes in one, the other one informs you that the file has changed and you need to reload? How does it do that?

Well, the following coding snippet would do the trick. Let’s watch a particular directory and listen to the event.

![100DaysOfProgramming_Day004](http://bazlur.com/img/Day006.png "100DaysOfJava")

for **copy/paste** pleasure: [https://github.com/rokon12/100DaysOfJava/blob/main/src/main/java/com/bazlur/Day006.java](https://github.com/rokon12/100DaysOfJava/blob/main/src/main/java/com/bazlur/Day006.java)
Redux Thunk
Published: 2021-06-12 20:15:28

What is thunk? Thunk is one of the most common redux middleware packages for redux. What is middleware? Middleware has the ability to stop, modify, or otherwise mess around with actions. There are plenty of middleware packages available, and they are mostly used for dealing with async actions. That is where thunk comes into play!

It is mainly used for asynchronous data calls. You can delay the dispatch of an action until all of the desired data is retrieved or the returned function has been called and completed its task. An example would be making a GET request to an outside API, you will need to wait for all of the data to be returned before you dispatch the action associated with the request. Or else you will run into errors when trying to render your components.
Normally, action creators can only return objects. But with redux-thunk, they can return functions to the action creators. When a normal object is passed to the action creator, it will carry out the action right away. But if a function, ie a fetch to an outside API, is called, thunk will call that function asynchronously. Once the promise is resolved, thunk will pass the returned value to the action creator.

The main way to use redux-thunk is to apply it when your redux store is created. You will first need to install redux-thunk to your app by using the command:
```
npm install --save redux-thunk
```
Once thunk is installed, you will need to import it into your app. As well as importing createStore and applyMiddleware from the redux package.
```
import { createStore, applyMiddleware } from 'redux
import thunk from 'redux-thunk';
```
Once all of these files are imported into your component, you will be able to create your redux store using:

```
const store = createStore(
    yourReducer,
    applyMiddleware(thunk)
):
```

Make sure to import your reducer to the file where you are creating your store. This will connect your store and reducers to thunk and allow you to make asynchronous calls.
Setup your app on Google Domains with Layer0
Tags: layer0, dns, nextjs, ssl
Published: 2021-06-12 20:01:58

So recently, I bought [rishi.app](rishi.app) with [Google Domains](https://domains.google/), and it was super easy to get [my portfolio](https://github.com/rishi-raj-jain/rishi.app) to production with [Layer0](https://www.layer0.co?ref=rishi-raj-jain) as the developer-first deployment platform, and obviously [Next.js](https://nextjs.org) the #1 react framework (well for me)!

## Why Layer0 for deployment?
- [Framework Independent](https://docs.layer0.co/guides/overview#section_react__vue__and_angular?ref=rishi-raj-jain): Layer0 supports the most widely used technologies for building progressive web applications. React, Next, Vue, Nuxt, Angular, Sapper, Gatsby, Razzle, even Static HTML/JS!
- [Real Time User Monitoring](https://docs.layer0.co/guides/core_web_vitals#section_npm_or_yarn?ref=rishi-raj-jain): One line code to measure Real-Time Core Web Vitals!
- [EdgeJS](https://www.layer0.co/edgejs?ref=rishi-raj-jain): Clear caches, define own CDN rules, and cache splitting. Seems like a lot of power to developer already?
Find many more reasons at [https://www.layer0.co/products](https://www.layer0.co/products?ref=rishi-raj-jain)

## Why Next.js as my #1 React Framework?
- Incremental Static Regeneration, Pre-Rendering, Server Side Rendering (SSR): The performance-first configurations integrated intuitively. Read More On https://nextjs.org/docs/basic-features/data-fetching
- Automatic code splitting: The best [automatic code splitting](https://nextjs.org/blog/next-9-2#improved-code-splitting-strategy) till date.
- Hot Module Replacement (HMR): A fast refresh [100ms faster](https://nextjs.org/blog/next-10-1#3x-faster-refresh) than fast refresh itself.

# Configuring Google Domains with Layer0

### Steps on Google Domains
1. Add a synthetic record for subdomain forwarding:
![Screenshot 2021-06-13 at 1.10.08 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w9y95whayoi1qfa0e0w5.png)
 
2. Add custom resource records for automatic TLS certification and hosting it on the apex domain:
![Screenshot 2021-06-13 at 1.14.45 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cggvhz1eipdtsz92vq64.png)

### Steps on Layer0
1. Deploy Your App (Or deploy an example [Deploy To Layer0](https://app.layer0.co/deploy?repo=https%3A%2F%2Fgithub.com%2Flayer0-docs%2Flayer0-nextjs-examp))

2. Add domain in the settings tab of your project
![Screenshot 2021-06-13 at 1.19.33 AM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rzhvv8amj70pne1qg7op.png)

3. Configure TLS
As you've already added the custom resource records, just click on Generate SSL
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0a8tzv4qes640sjpsgcf.png)

All set 🚀. Feel the speed now 🏎.
Feel free to drop any feedback in comments!
How to create table in HTML ? [Explained with Eaxmple ]
Tags: html, css, beginners, tutorial
Published: 2021-06-12 19:45:44

Hey folks

Are you looking for Guide to create table in HTML then this post is for you readers. I am going to guide or explain you how you can create awesome tables in HTML with example.

Content 
► Tags We need
► Example

**Read more**:<a href="https://dev.to/deepai/how-i-made-responsive-footer-footer-using-html-and-css-3fci"> Copyright responsive footer using HTML and CSS </a>

**Tags to create awesome HTML Table**

Without Tags we can't make tables and Tags are vital part of any kind of HTML project.
Tag:
<span style="background-color: rgba(222, 222, 222, 0.3); color: blue; font-family: &quot;Source Code Pro&quot;, Menlo, Consolas, monospace; font-size: 15.75px;">&lt;table&gt;</span> This Tag Defines HTML Table.
<span style="background-color: rgba(222, 222, 222, 0.3); color: blue; font-family: &quot;Source Code Pro&quot;, Menlo, Consolas, monospace; font-size: 15.75px;">&lt;tr&gt;</span> This Tag Defines Each Table row.
<span style="background-color: rgba(222, 222, 222, 0.3); color: blue; font-family: &quot;Source Code Pro&quot;, Menlo, Consolas, monospace; font-size: 15.75px;">&lt;th&gt;</span> This Tag Defines header of table.
<span style="background-color: rgba(222, 222, 222, 0.3); color: blue; font-family: &quot;Source Code Pro&quot;, Menlo, Consolas, monospace; font-size: 15.75px;">&lt;td&gt;</span> This Tag Defines cell of table.

**Read More** : <a href="https://dev.to/deepai/how-i-added-block-element-to-paragraph-1n82" >How I added block elements to paragraph ?</a>

For content check out my <a href="https://social.msdn.microsoft.com/Profile/DeepAI"> MSDN </a> Profile and <a href="https://ello.co/deepai"> Ello</a> also.
**Example**

{% codepen https://codepen.io/DeepAI20/pen/qBrJzbN %}

As you see above in codepen how I made HTML Table.we can also changes background colour of table, borders,each cell of HTML Table. We Just need to add colour code.
Hope I added Some value in HTML Table project If you liked this post make sure visit my other profiles.
T3N :<a href="https://t3n.de/pioneers/profile/deepa-aai/">Open </a>
LinkTree : <a href="https://linktr.ee/DeepAI"> Open </a>

Thanks for Reading 🙏.
Semantic HTML in 5 Minutes
Tags: html, webdev, codenewbie, beginners
Published: 2021-06-12 19:36:11

#### What is Semantic HTML

Semantic HTML refers support and accessibility tags introduced to the markup language HTML in the 2008 release of HTML5. These new tags like `<details>` & `<summary>` bring about new ways for browsers to identify new elements on a webpage and with more description.   

#### Why Semantic HTML

The need for more descriptive tags were necessary as the internet grew and here's a few important reasons for Semantic HTML: 

1. **Accessibility:** Tags like `<nav>` & `<article>` give more meaningful information for things like screen readers, which allow upwards of 5 million more people with reading disabilities to access web pages. 

2. **Advanced Capabilities:** Tags like `<audio>` & `<video>` bring new ways to add media to web pages. 

3. **Specificity:** Tags like `<header>` & `<footer>` provide more clearer distinction than divs for developers to work with. 
`ex: <div id="header">Semantic HTML</div>`

#### Converting to Semantic HTML
 
Let's make this more accessible to get rid of the deeply nested div issue. 

```html

<!-- Before -->

<div id="header">
 <div id="section">
   HTML Elements:

   <div id="article">This is an article about HTML elements</div>
 </div>
</div>


<!-- After -->

<header>
 <section>HTML Elements:</section>

 <article>This is an article about HTML elements</article>
</header>
```

#### Learn More 

* Modernizer - Javascript library for detecting Semantic tags on a website.

* Visit [MDN](https://developer.mozilla.org/en-US/docs/Glossary/Semantics) for a deeper look into Semantic HTML elements.

#### Let's chat about Semantic HTML

The was a quick intro into Semantic HTML and how you can make your web pages more descriptive and accessible. If you enjoyed this post feel free to leave a comment about your experience working with Semantic HTML or HTML5.

Happy Coding,
Terry Threatt
Dark Mode Toggle Switch
Tags: html, css, webdev, codepen
Published: 2021-06-12 19:30:08

An extension to [Gaurav's custom toggle switch](https://dev.to/devggaurav/let-s-create-a-custom-toggle-switch-using-html-and-css-33df). I modified it so that users can switch between light and dark modes.
{% codepen https://codepen.io/mrwolferinc/pen/LYWgoqp %}
Need help and expertise
Tags: mongodb, mongoose
Published: 2021-06-12 19:27:56

Hi all I am a newbie to the MERN stack and I am stuck and all the document reading is not helping me solve this. Can some expert either push me in the right direction or help solve my problem.

Problem : -My react implementation is passing data to the NODEjs backend as follows
[
{ Group1: [ ‘player1name’, 'player2name ] },
{ Group2: [ ‘player3name’, ‘player4name’ ] }
]
This is after doing logic and transformation at the front end.

My mongo schema looks like this

const tournamentSchema = new Schema({
TournamentName: { type: String, required: true },
TournamentFormat: { type: String },
TournamentNumberOfPlayers: {type: Number},
TournamentNumberOfGroupsAndTeams: { type: Number },
TournamentStartDate: { type: Date, default: Date.now },
TournamentEndDate: { type: Date, default: Date.now },
TournamentNumberOfWeeks: { type: Number },
TournamentActive : { type: String },
TournamentAuction: { type: String },
TournamentSchedulingLogic: { type: String },
TournamentNumberOfRounds: { type: String },
TournamentTeams: { type: Array, default: [] },
TournamentGroups: { type: Array, default: [] },
TournamentPlayers: { type: Array, default: [] },
TournamentMatches: { type: Array, default: [] }
});

Its the TournamentPlayers field that I want to update. It has been defined as an array and my incoming data is also an array. So my thought was to do a findOneandupdate. The id of the document I am obtaining in node and passing it correctly to the findOneandupdate. however nothing happens. There is no error message be logged also for me to debug further.

Can someone help please? Is my schema incorrect or am I supposed to use some othr operation for this.
CSS Box Reflect
Tags: beginners, webdev, css, tutorial
Published: 2021-06-12 19:15:27

<p><span class='first-letter'>T</span>he `-webkit-box-reflect` CSS property lets you reflect the content of an element in one specific direction.</p>

We can create the reflections using the box-reflect property.

```css
/* Direction values */
-webkit-box-reflect: above / below / left /  right;

/* can also add offset value */
-webkit-box-reflect: below 10px;

/* even add gradient */
-webkit-box-reflect: below 0 linear-gradient(transparent, white);
```

#### Example

```html
<img src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/i/2fea277d-540b-42af-b152-782940dc49ef/de4cpd0-caed317f-b05d-4852-acb8-3ce25b38d873.png" />
```

```css
img {
  -webkit-box-reflect: right;
}
```

<u>Output:</u>
<img src="https://i.imgur.com/83fatFf.png" alt="css box reflect" />

Checkout the codepen here:

{% codepen https://codepen.io/suprabhasupi/pen/gOmdqPg %}


## Browser Support 🌐

Box-reflect doesn't have the best support, but it's upcoming. So far, Firefox and IE have no support at all.

<img src="https://i.imgur.com/H1nPSDt.png" alt="css box reflect support" />

## Reference 🧐

- <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect">MDN Box Reflect</a>
- <a href="https://caniuse.com/?search=-webkit-box-reflect">Can I Use box-reflect</a>

<a href="https://www.buymeacoffee.com/suprabhasupi" target="_blank"><img src="https://i.imgur.com/4t25pJE.png" alt="Buy Me A Coffee" /></a>

<table>
  <tbody>
    <tr>
      <td>
        🌟 <a href="https://twitter.com/suprabhasupi"> Twitter</a>
      </td>
      <td>
        👩🏻‍💻 <a href="https://www.suprabha.me/"> suprabha.me</a>
      </td>
<td>
        🌟 <a href="https://www.instagram.com/suprabhasupi/"> Instagram</a>
      </td>
    </tr>
  </tbody>
</table>
How to build an internal tool on Airtable using Retool and Sequin
Published: 2021-06-12 17:45:32

[Retool](https://retool.com/) and [Airtable](https://Airtable.com) make a great pairing.

Airtable is great for managing data around almost anything. Retool is a great for building internal tools on that data.

For instance, you can use [this Customer Success Airtable template](https://airtable.com/templates/sales-and-customers/expWibrfsinGaxuX5/customer-success-management) and Retool to rapidly build a customer success tool (as we do in the video below). Or, you can use this [Product Catalogue template](https://airtable.com/templates/local-business/expZvMLT9L6c4yeBX/product-catalog) and Retool to build a resource management tool.You could even expose a customer portal if you wanted to.

While not exactly no-code (you'll need a little JavaScript / SQL), Retool takes care of most of the hard work so you can just focus on building your app. If you are comfortable with Airtable scripting - then you'll be right at home in Retool.

After many readers successfully built apps using our [written tutorial for building apps on Airtable using Retool](https://dev.to/syncinc/how-to-build-an-app-using-airtable-and-retool-1ao5) - and after many request for a video - we made one!

In this video tutorial you'll go step-by-step through how to build a custom app using Retool with Airtable and our service - [Sequin](https://sequin.io).
Actions Handled By Resource Controller in a Restful API (using verbs)
Tags: laravel
Published: 2021-06-12 17:33:09

I look at this table so often that I thought it deserved a post. Taken from the laravel website: 

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jis8lkadyy1rkrql6512.png)
I Started Streaming on Twitch
Tags: kedro, python, webdev
Published: 2021-06-12 17:32:57

---
cover_image: https://images.waylonwalker.com/start-streaming-dev.png
tags:
- kedro
- python
- webdev

title: I Started Streaming on Twitch
canonical_url: https://waylonwalker.com/start-streaming/
published: true
---

I recently started streaming on [twitch.tv/waylonwalker](https://www.twitch.tv/waylonwalker) and it's been a blast so far.

* python
* kedro
* Data Science
* Data Engineering
* webdev
* digital gardening

## Kedro Spaceflights

It all started with [kedro/issues/606](https://github.com/quantumblacklabs/kedro/issues/606), Yetu called out for users of kedro to record themselves doing a walk through of their tutorials.  I wanted to do this, but was really stuck at the fact that recording or editing somewhat polished vide is quite time consuming for me.

![kedro-issue-606](https://images.waylonwalker.com/kedro-issue-606.png)

## Inspiration

My introduction to twitch came from [twitch.tv/theprimeagen](https://twitch.tv/theprimeagen). I watched him on YouTube, and then decided to drop into a stream.  It was so fun to watch him live that I started following others in the science and tech category.

* [twitch.tv/teej_dv](https://www.twitch.tv/teej_dv) Brilliant neovim core dev, I learn a bunch about nvim every time I watch.
* [twitch.tv/cmgriffing](https://www.twitch.tv/cmgriffing) Super Chill and engaging chat.
* [twitch.tv/cassidoo](https://www.twitch.tv/cassidoo) Fantastic discussion/chat.
* [twitch.tv/anthonywritescode](https://www.twitch.tv/anthonywritescode) Building the python ecosystem.
* [twitch.tv/kierisi](https://www.twitch.tv/kierisi) Exploring data in r-studio, taking xgboost to Sliced.

## Streaming What I Do

After taking a jump in with the spaceflights tutorial I realized that it really was not that hard to do, and I can stream things that I am doing anyways.  I will be streaming while I build open source kedro plugins, pipelines, and while I work on my website.

## YouTube

I started storing all the replay, and some clips on
[YouTube](https://www.youtube.com/channel/UChoRUssc5HoO-xQ9hUKZ1mA).  If that is more of your thing be sure to check it out.  I would greatly appreciate anyone who subscribes to help me. get to the 100 subscriber baseline to get my custom url.


{% youtube 55g8FQr0kgA %}

> Here is a small clip from my latest stream.
LeetCode 189. Rotate Array
(javascript solution)
Tags: algorithms, javascript
Published: 2021-06-12 16:54:30

###Description:
Given an array, rotate the array to the right by k steps, where k is non-negative.

###Solution:
Time Complexity : O(n)
Space Complexity: O(1)

```javascript
var rotate = function(nums, k) {
    // Account for all possible k values
    k %= nums.length;
    // Rotate all the numbers
    reverse(nums, 0, nums.length - 1);
    // Rotate first k numbers
    reverse(nums, 0, k - 1);
    // Rotate number from k onward
    reverse(nums, k, nums.length - 1);
    
  // Function to rotate the array from params start to end
  function reverse(nums, start, end) {
    while (start < end) {
      const temp = nums[start];
      nums[start] = nums[end];
      nums[end] = temp;
      start++;
      end--;
    }
  }
};
```
Day 109
Tags: 100daysofcode, programming
Published: 2021-06-12 16:31:47

Day 109/200 of #200DaysOfCode #100DaysOfCode #100daysofcodechallenge 

- Solved two problems on Codewars.

1 - The Most Sacred of Days (6 kyu)
2 - Day of The Week (7 kyu)
What is the best path way to follow in becoming a node.js expert?
Published: 2021-06-12 16:18:01

I am a newbie to coding, and I started coding late 2020 during the covid-19 lockdown. Since then it's been challenging not until last months when i build my first responsive website following dev challenges. I've been super excited afterwards but still I feel I am not doing so well. I will appreciate any advice, guide, or resources that could help me level up with my coding career.
By the way you can find a link to the challenge I mentioned earlier below;

https://eggscod-fylochallenge.netlify.app/

Repository:
http://gitHub.com/Eggscode/Fylo-Challenge