teleren/devto huggingface dataset:
Video: Develop Jekyll or GitHub Pages using Docker containers
Tags: tutorial, webdev, docker, vscode
Published: 2022-04-04 23:58:02

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

All the steps I show you in the video are located at [this repo in the README](https://github.com/BillRaymond/my-jekyll-docker-website)

---
👋 Novice alert!
I hope you find this video helpful, but I also want to point out I am at best a novice Docker user, so please be easy on me :-)

## ❓ What are Jekyll and GitHub Pages?
You may be aware GitHub offers a feature called [GitHub Pages](https://pages.github.com), which allows you to host your website for free.

While you can certainly use basic html, css, and javascript, a more powerful option is to use [Jekyll](https://jekyllrb.com), which makes it easier to create a website. One of the nicest features is that you build static sites, but they are blog-aware, so blogging is super easy.

## 💻 Jekyll and local development
There is a good chance you would like to build your Jekyll site locally to create, modify, or test the functionality before moving your site to production. Unfortunately, if you want to run Jekyll locally, you will have to install Ruby, Jekyll, and other dependencies.

Worse, if you use different versions of Jekyll, you may need different versions of Ruby on your computer. Getting all of that set up is a hassle and it is something I have struggled with over the last year.

## 📦 Docker containers: The easier way to develop locally
You can use Docker containers to essentially package up a "local" development environment without having to install Ruby or Jekyll on your computer.


## 👍 Benefits of developing in a container
1. You do not need to install Ruby or Jekyll on your computer. Instead, they reside in the container

2. Using my method, you can use it with x86 or ARM chipsets (x86 being Intel and ARM being things like Apple Silicon)

3. Every Jekyll container can have its own version of Ruby and or Jekyll, making it easy to switch from one to another (for example, I use Ruby 3.0.3 and Jekyll 4.2.x for my podcast website and Ruby 2.7 with Jekyl 3.9.2 for my company website)

4. By using Microsoft’s Remote-Containers extension in VSC, the code you write remains on your computer and runs in the container. That means if you accidentally delete the container, you do not lose your files.


## ➡️ Pre-requiresites
While I cover these steps in the video, you will need the following to get started:

1. A free [Docker](https://www.docker.com) account, along with the Docker Desktop
2. A free [GitHub](https://github.com) account
3. A free copy of [Visual Studio Code](https://code.visualstudio.com)
4. The following two free VSCode extensions:

[Docker](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker)

[Remote-containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)
Use multiple .NET SDK CLI Commands on Mac M1
Tags: m1, dotnet, csharp, zsh
Published: 2022-04-04 23:47:55

Personally, It has been a bit frustrating working with multiple .NET core SDKs on the M1, especially when you use dotnet cli commands a lot.

## Problem 

Installing .NET 5 and .NET 6 creates two folders **/usr/local/share/dotnet/x64/sdk** and **/usr/local/share/dotnet/sdk** respectively and executing the dotnet commands on the cli can be annoying. If .NET 5 takes precedence on the cli you can't run a command for .NET 6 unless you specify the full path and then the command.

## Solution

I use ITerm2, ZSH and Oh my Zsh because it has more features and better functionalities than the default terminal and you can set this up using this amazing post below:

{% embed https://www.freecodecamp.org/news/how-to-configure-your-macos-terminal-with-zsh-like-a-pro-c0ab3f3c1156/ %}

### STEPS

* Open the zshrc file using the command below and if you don't have the file you can use the link above to create one

```
open ~/.zshrc
```
* Create a permanent alias for the dotnet directory path that's not the default on your terminal. In my case, .NET 5 is the default and to run .NET 6 commands easily, add the below to your .zshrc file

```
alias dotnet6="/usr/local/share/dotnet/dotnet"
```

**note:** 
> **dotnet6** can be any name you want and **/usr/local/share/dotnet/dotnet** is the path that targets .NET 6.

* Restart the terminal and then run

```
dotnet6 --info
```

*.NET 6 command check*
![*.NET 6 command check*](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf9v43rusvqre7tc8ca7.png)

*.NET 5 command check*
![*.NET 5 command check*](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8o9gb0tmft5n55g25kp.png)
How to add claps to your blog
Tags: javascript, react, blog
Published: 2022-04-04 23:39:00


You may notice that if you scroll to the bottom of any blog post on my site, you will see a section that asks you if you like this post and if you do to give it some claps. This isn't something you see very often but it is easier than you think.

Personally, I chose to use Lyket, a great bit of indie development. It supports React, HTML and WordPress so perfect for all the cases you might need.

### The Setup

For a React based blog you just need a single package, `@lyket/react` and you are ready to start adding claps to your website.

Next you need to signup for your Lyket account which can be found at [https://lyket.dev](https://lyket.dev) . Once you signed up grab the `Public API token` from the settings.

#### ![Use settings](https://res.cloudinary.com/dub20ptvt/image/upload/v1642873631/Blog%20Posts/add-claps-to-blog/yzgcbin70tmkvh0ul8pm.jpg)

#### Wrap our \_app.js

Now that we have all the required pieces, we can wrap our application in a provider so we can use it with Lyket. First you need to import `Provider` from Lyket but instead of importing as `Provider` let's use `LyketProvider` .

```
import { Provider as LyketProvider} from “@lyket/react”
```

Now we need to wrap our application in this provider and pass in our API token so Lyket can know which account to use.

Your `_app.js` should look similar to the following:

```
import '../styles/index.css'
import { Provider as LyketProvider} from “@lyket/react”

export default function MyApp({ Component, pageProps }) {
  return (
    <LyketProvider apiKey="[YOUR-API-KEY]">
      <Component {...pageProps} />
    </LyketProvider>
  );
}
```

#### Using Lyket on a page.

Lyket is now available on any page we want. Open up the page you want to use Lyket on and add the follow import `import { ClapButton } from '@lyket/react';` then we can use this component wherever we want. For example:

```
import { ClapButton } from '@lyket/react';

export BlogPost = ({ title,slug, content }) => {
  return (
    <div>
      {title}
      <ClapButton id={slug} namespace="blog-posts" />
      {content}
    </div>
  );
};
```

That is it, now your readers can clap when they love your post. Give it a shot below!
Estilos de case no mundo do desenvolvimento
Tags: beginners, writing, programming, info
Published: 2022-04-04 23:23:01

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

Você que programa (ou já viu um trecho de código seja em memes ou em posts de dicas) já deve ter percebido que existe alguns padrões de escrita ao nomear arquivos, criar variáveis, funções entre outras coisas. Mas e se eu te falar que existe uma padronização onde cada tipo? Sim, possui mesmo... e é disso que vamos falar neste artigo!

### camelCase

É uma convenção de nomeação na qual a primeira letra de cada palavra em uma palavra composta é colocada em maiúsculo, exceto pela primeira palavra. Os desenvolvedores de software geralmente usam camelCase para escrever código-fonte com isso ele se torna muito útil na programação, já que os nomes dos elementos não podem conter espaços. A convenção de nomeação torna os nomes compostos mais legíveis. Por exemplo, **o myAmazingClass** 
é mais fácil de ler do que **a myamazingclass.**

### PascalCase

Combina palavras colocando a primeira letra de todas as palavras (até mesmo a primeira palavra) em maiúscuo e removendo o espaço, da seguinte forma:

Normal: **my amazing class**

PascalCase: **MyAmazingClass**

Esta também é uma maneira muito popular de combinar palavras para formar um único conceito. É frequentemente usado como uma convenção para declarar classes em muitos idiomas.

### snake_case

Combina palavras substituindo cada espaço por um sublinhado (_) e ela possui uma variação (que vamos falar posteriormente), então ela ficaria da seguinte forma:

Normal: **my amazing class**

snake_case: **my_amazing_class**

**SCREAMING_SNAKE_CASE**

É uma variação do snake_case onde também combina palavras substituindo cada espaço por um sublinhado (_) mas também é escrita com todas palavras em maiúsculas então ela ficaria da seguinte forma:

Normal: **my amazing class**

SCREAMING_SNAKE_CASE: MY_AMAZING_CLASS

### kebab-case

A maneira de escrever palavras compostas separadas por hífens (-) em vez de usar o espaços. Geralmente, tudo é escrito em minúsculas como por exemplo: "o-que-e-kebab-case".

Este estilo de escrita é amplamente utilizado em SEO (Search Engine Optimization — técnica usada por desenvolvedores de software para otimizar os mecanismos de busca)

### nocase

Também é uma maneira de escrever palavras compostas porém sem separação por hífens, ou espaços e tudo é escrito utilizando as letras minúsculas. 

Com isso encerramos este artigo, é muito legal ver que existe diferentes maneiras de escritas nos códigos e que cada uma possui sua própria nomeclatura. Espero que eu tenho ajudado você com mais conhecimento no seu dia a dia e nos vemos por ai!

Fontes onde pesquisei esse conteúdo:

- https://pt.wikipedia.org/wiki/CamelCase
- https://techlib.wiki/definition/pascalcase.html
- https://en.wikipedia.org/wiki/Snake_case
- https://en.wiktionary.org/wiki/kebab_case
Day 2-4 -- #100days
Tags: webdev, 100daysofcode, beginners
Published: 2022-04-04 22:16:31

Hello Everyone, my 100 days of code continues.
My day-1 was a flexbox project from a design mock up. For day 2 to 4, I've been catching up on CSS Grids. Its been interesting so far, knowing you can use both flex and grids to make your life more easier. 
Day 5 will probably be a project on grids. Will keep you guys updated.

May the code be with y'all
Get job easily with Cvtheque
Tags: cv, resume, build, getjob
Published: 2022-04-04 21:52:10

Cvtheque
Get job very easily with ready-made professional CV, resume available for you on Cvtheque Platform for Free
Yeah, it's free, just get your account and build your CV quick
Cvtheque, it's fast, simple & secure.
Just click on the link below to get access and start building your resume very easily & quick.
https://cvtheque.biz
Day 5
Tags: expressgenerator, express, javascript
Published: 2022-04-04 21:45:41

---
title: Day 5
published: true
description: Introducing express-generator
tags: expressgenerator, express, JavaScript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7znuyj0i9tyw7arkf2j6.png
---

Make use of templating engine - I will use Handlebars

Introduce a generated base for quick development - [express-generator](https://expressjs.com/en/starter/generator.html)

Reason for express generator we can't always built things from scratch the plan is to start from a base.

In terminal run

> `npx express-generator --view=hbs --git day5`
>
> `cd day5`
>
> `npm i`
>
> If problems arise just run:
>
> `npm audit --force`
>
> Start server
>
> `npm start`
>
> You can check the command in package.json
>

 When server is running open browser and open :

 `localhost:3000`

From day4 prject copy authenticate folder and files inside public folder

style.css will be replace the one in /public/stylesheets

script.js goes inside /public/javascripts

add script tag inside /views/layouts.hbs file 

Inside /views/index.hbs file add html forms from day4/index.html 

Inside /views/index.hbs login form tag change action tag must be `action="users/login"`
Announcing vcluster Plugins and the vcluster SDK
Tags: kubernetes, vcluster, devspace, loft
Published: 2022-04-04 21:32:08

By [Rich Burroughs](https://twitter.com/richburroughs)

[vcluster](https://www.vcluster.com/) is an open source project that allows users to create and run virtual Kubernetes clusters inside of a shared cluster. A virtual cluster runs inside a namespace of the shared host cluster, but it appears to the user as a standalone, dedicated cluster. The Loft Labs team released the initial version of vcluster almost one year ago. Since then, a lot of momentum has built around the project, and we’ve received a lot of helpful feedback from users.

We believe that tools should be opinionated and easy to reason about while also providing ways for users to extend them. We’ve heard from users and contributors who want to use vcluster in all kinds of interesting scenarios, but it doesn’t make sense for us as maintainers to support every possibility by changing how vcluster works or adding features.

So in version 0.6.0 of vcluster, we’ve added the ability for users to write vcluster plugins using the new [vcluster SDK](https://github.com/loft-sh/vcluster-sdk). vcluster plugins are written in Go, and they can customize vcluster in many ways. There are currently three examples in the GitHub repo:

* [bootstrap-with-deployment](https://github.com/loft-sh/vcluster-sdk/tree/main/examples/bootstrap-with-deployment): This example shows how to have a deployment automatically applied in your vclusters when they’re provisioned. Creating resources like this is very powerful, as it means you don’t need to use other tools to create the deployment once the vcluster is provisioned.
* [crd-sync](https://github.com/loft-sh/vcluster-sdk/tree/main/examples/crd-sync): This plugin syncs a CRD from the vcluster to the host cluster in the same way that pods are synced to the host. This is another post-provisioning task that would require additional tooling to perform without vcluster plugins. 
* [pull-secret-sync](https://github.com/loft-sh/vcluster-sdk/tree/main/examples/pull-secret-sync): This example shows how to sync a pull secret from the host cluster to the vcluster. The secret is synced from the namespace on the host cluster where your vcluster is running into the default namespace of the vcluster itself.

Many other tasks could be automated with vcluster plugins, and we’re excited to see what ideas people in the community have. We’re also looking to build more examples and provide a place where users can share their plugins with the community.

Want to build your own plugin? [Here’s a tutorial](https://www.vcluster.com/docs/plugins/tutorial) that will walk you through the process. If you have questions about vcluster plugins or using the SDK, you can open a GitHub issue on the [GitHub repo](https://github.com/loft-sh/vcluster) or visit our [community Slack](https://slack.loft.sh/) to chat with the maintainers and other community members. We’d love to hear your feedback.
typescript expression produces a union type that is too complex to represent in NextJS, React
Tags: nextjs, react, producesauniontype
Published: 2022-04-04 21:13:46

I very confusing with error "typescript expression produces a union type that is too complex to represent" in NextJS, React.

After searching, googling i found the solution.

I have got solution from [this post](https://stackoverflow.com/questions/68692230/ts-expression-produces-a-union-type-that-is-too-complex-to-represent-with-materi)


I have "@react-three/drei" and "@react-three/fiber" package in my nextJS application.

Just remove both, and problem is done.
How To Run Both Your Backend And Your Client Server With One Command.
Tags: javascript, react, node, vscode
Published: 2022-04-04 20:13:46

Have you ever felt like you’re running your servers way too often and thought to yourself, "Maybe my life would be simpler if I just had to do this once instead of twice every time?" This can be time consuming when adding new features to the backend or installing new packages in the middle of a production.


## A Life Saver Package
[Concurrently](https://www.npmjs.com/package/concurrently) is a Node Package Manager that will help you in avoiding the need to execute several commands to launch your servers. You could run all commands on separate terminals, but I'm sure you, like most people, wish there was an easier solution.

As the name implies, this package allows you to execute your client and backend server simultaneously with a single command.

## INSTALLATION
In the `package.json` of your root directory, add these scripts below:

`"start": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\"",
    "server": "nodemon index.js",
    "client": "cd client && npm start"`

All that remains is to put your new tool to the test!

In your Terminal, go to the root directory of your project and run:

`npm start`

You're all set! Your server and your front-end should be running at the same time.
Peak Heights 🦖
Tags: algorithms, 100daysofcode, cpp, programming
Published: 2022-04-04 20:00:38

# Description

You are given a two-dimensional integer `matrix` containing `0`s and `1`s where `0` represents water and `1` represents land. Return a new matrix of the same dimensions where we increase the height of every land cell as much as possible given that:

- The height of any water cell stays `0`
- Any cell can differ by at most `1` unit of height between neighboring cells (up, down, left, right)

You can assume there is at least one water cell.

**Constraints:** 

- `n, m ≤ 250` where `n` and `m` are the number of rows and columns in `matrix`

## Example 1

### Input

```
matrix = [
    [0, 1, 0],
    [1, 1, 1],
    [1, 1, 1]
]
```

### Output

```
[
    [0, 1, 0],
    [1, 2, 1],
    [2, 3, 2]
]
```

---

# Intuition

Do `multi source BFS` from all the water positions i.e 0's by inserting all such cells into a queue

# Implementation

```cpp
int dx[4] = {0, 1, 0, -1}, dy[4] = {1, 0, -1, 0};

vector<vector<int>> solve(vector<vector<int>>& matrix) {
    int rows = matrix.size(), cols = matrix[0].size();
    vector<vector<bool>> visited(rows, vector<bool>(cols, false));
    queue<pair<int, int>> q;
    for (int i = 0; i < rows; i++) {
        for (int j = 0; j < cols; j++) {
            if (matrix[i][j] == 0) q.push({i, j});
        }
    }
    int val = 0;
    while (!q.empty()) {
        int size = q.size();
        for (int i = 0; i < size; i++) {
            auto point = q.front();
            q.pop();
            if (visited[point.first][point.second]) continue;
            visited[point.first][point.second] = true;
            matrix[point.first][point.second] = val;
            for (int j = 0; j < 4; j++) {
                int x = point.first + dx[j], y = point.second + dy[j];
                if (x >= 0 && x < rows && y >= 0 && y < cols && !visited[x][y]) q.push({x, y});
            }
        }
        val++;
    }
    return matrix;
}
```

## Time Complexity

- Time: O(n)
- Space: O(n)
Learn Python in 100 Days by spending <5 mins every day!
Tags: python, beginners, tutorial, opensource
Published: 2022-04-04 19:53:20

I am happy to announce the launch of #100daysofpython, a free video course which can help you master the fundamentals of python 🐍 in just 100 days and the only requirement is to spend less than 5 minutes every day (avg).

You can checkout the entire course on the [official website](https://edpunk.com) now.

![Curriculum](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5l939kwk5a4hz7hir195.png)
Remix SaaS kit Changelog #1
Tags: remix, react, saas, release
Published: 2022-04-04 19:48:07

---
title: Remix SaaS kit Changelog #1
published: true
description: Vercel deployment, locale dropdown, page loader component and more.
tags: remix,react,saas,release
cover_image: https://yahooder.sirv.com/saasfrontends/remix/blog/changelog/2022-04-04.png
---

[You can also view this here.](https://remix.saasfrontends.com/changelog)

## April 4, 2022

### Closed issues
- ✅ #1: Vercel deployment not translating with remix-i18next
- ✅ #2: Implement a global loading component
- ✅ #3: Display Stripe invoices
- ✅ #4: Add a locale dropdown
- ✅ #5: Mobile site not responsive
- ✅ #10: Translate meta titles
- ✅ #17: Add /admin/tenants table columns: Workspace, User and Contracts count, Plan, and Revenue

### Added issues
- ⌛ #6: Upgrade to React 18
- ⌛ #7: Make fewer database calls
- ⌛ #9: Add Component: GDPR cookie consent page and banner
- ⌛ #11: Add Module: Workflows with Custom Forms and Custom Fields
- ⌛ #12: Add Page: Blog
- ⌛ #13: Remove TenantSelector and WorkspaceSelector and have {tenantId}/{workspaceId} on the URL
- ⌛ #14: Add Page: Roles and User roles
- ⌛ #15: Add Page: Object-level permissions (Create, Read, Update, Delete)
- ⌛ #16: Remove Postmark hard-coded dependency

---


Let me know what you think!
Creating your own Javascript overlay for Twitch
Published: 2022-04-04 19:43:45

---
title: Creating your own Javascript overlay for Twitch
published: true
description: We go through how to create a twitch overlay in javascript so we can play a game and show updates in the overlay if the javascript code detects new followers. We also integrate it with a real-time clock counting down for stream end.
tags:
cover_image: https://i.ytimg.com/vi/WxHraX-ZNlY/maxresdefault.jpg
---

{% youtube WxHraX-ZNlY %}

We go through how to create a twitch overlay in javascript so we can play a game and show updates in the overlay if the javascript code detects new followers. We also integrate it with a real-time clock counting down for stream end.
Deadliner
Tags: rust, productivity, product, deadline
Published: 2022-04-04 19:40:07

🎉🥳Announcing Deadliner

Manage your deadline gently by updating the wallpaper of your desktop with the time left.

🗓️Set deadline
🖼️Update wallpaper dynamically
🤗Less annoying way for reminding you
🎨Full Customization
👨‍👦‍👦Cross Platform
⚡🦀 Efficient

Learn more:

[YouTube Video](https://youtu.be/ySn-Ykdq5BU)

[Landing page](https://deadliner.vercel.app)

[Source Code](https://github.com/YassinEldeeb/deadliner)
How to Delete a Table from a Database in Django
Tags: django, python, programming, tutorial
Published: 2022-04-04 19:29:33

## [Solution Link](https://github.com/tieje/delete_django_table)

## Solution

How to delete a single table in Django 4.0:

1. Remove \<YourDeleteTable\> model from `models.py` file
2. Remove \<YourDeleteTable\> class from `admin.py` file and ALL other instances of wherever this class is used.
3. `python manage.py makemigrations <<your app>>`
4. `python manage.py migrate`

## Background

I wrote this guide because I lost all my data from following a different guide on Stack Overflow. T_T

## [Solutions to Additional Database Problems in Django](https://www.dev2qa.com/how-to-drop-change-tables-from-sqlite3-database-in-django/)
Vuex Airbnb JS ESLint
Published: 2022-04-04 19:27:12

I found the following useful when working with VueJS and using the Airbnb ESLint rules.

```
# .eslintrc.yml

rules:
  # Airbnb Eslint sets the no-param-reassign props option to true, which warns
  # against the modification of parameter properties. However, in order to
  # control the state (using Vuex), one must use mutations/actions.
  # Set it to false.
  'no-param-reassign':
    - error
    -
      props: false
```