teleren/devto huggingface dataset:
Drop all tables and reset an Azure SQL Database
Tags: azure, sql
Published: 2022-02-24 11:29:22

During the development sometimes you need to reset and recreate the database from scratch.
Especially if you work with Entity Framework and you alter a lot of tables and keys.
For this reason I created this SQL Script that you can launch directly as query from the Azure Portal or from Visual Studio 2022 or Visual Studio Code.

As you can see in the screenshot below, I am connected trought VS 2022 SQL Server Object Explorer.

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

The script works well with Entity Framework 6.
If you want to use the same script with previous version of EF, check the name of the MigrationHistory.
It was different in some versions. 

```sql
while(exists(select 1 from INFORMATION_SCHEMA.TABLE_CONSTRAINTS where CONSTRAINT_TYPE='FOREIGN KEY'))
begin
 declare @sql nvarchar(2000)
 SELECT TOP 1 @sql=('ALTER TABLE ' + TABLE_SCHEMA + '.[' + TABLE_NAME
 + '] DROP CONSTRAINT [' + CONSTRAINT_NAME + ']')
 FROM information_schema.table_constraints
 WHERE CONSTRAINT_TYPE = 'FOREIGN KEY'
 exec (@sql)
 PRINT @sql
end

while(exists(select 1 from INFORMATION_SCHEMA.TABLES 
             where TABLE_NAME != '__EFMigrationsHistory' 
             AND TABLE_TYPE = 'BASE TABLE'))
begin
 --declare @sql nvarchar(2000)
 SELECT TOP 1 @sql=('DROP TABLE ' + TABLE_SCHEMA + '.[' + TABLE_NAME
 + ']')
 FROM INFORMATION_SCHEMA.TABLES
 WHERE TABLE_NAME != '__EFMigrationsHistory' AND TABLE_TYPE = 'BASE TABLE'
exec (@sql)
 /* you dont need this line, it just shows what was executed */
 PRINT @sql
end

exec ('DROP TABLE dbo.__EFMigrationsHistory')
```
Difference Between <br> and <br/> Tag in HTML



Tags: html, tag, programming
Published: 2022-02-24 11:09:14

## Introduction
Suppose you want your webpage to show the below message with the same format, How will you write it in HTML?

![Line breaks](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dsu80kmujk2gafbz31wo.png)

If you are planning to use carriage return (ENTER key) to produce line breaks, then let me tell you that it won’t work because HTML will ignore any carriage return and extra spaces.

You can use the br tag which is used to produce line breaks in HTML and here are the two possible ways of using br tag.

**Snippet 1:**

`<div>
    Hello <br>
    Welcome to <br>
    the blog<br>
</div>`


**Snippet 2:**

`<div>
    Hello <br/>
    Welcome to <br/>
    the blog <br/>
</div>`



Both will give the same output, but what is the difference between br and br/?

But before that let’s look at some pointers.

- br tag is used to produce line breaks in an HTML document and it is a self-closing tag.
- When a tag is used with nothing between it, then a self-closing tag (or empty tag) can be used. br is one such self closing tag, which means there is no need of closing tag ( /br) while using br.
- Generally, TAG/ (not to be confused with /TAG) is used as a condensed way of writing TAG.../TAG.

So from the above pointers, it is evident that  br and br/ will provide the same results when used in HTML.

But, whenever we are using XHTML (which is more strict than HTML), it doesn’t allow leaving tags open (like you cannot write just br, you have to close it also but /br doesn't make sense since it is a self-closing tag ), hence br/ will be used in that case.

Also using br is less effective when it comes to code neatness and readability than br/. Hence br/ is generally preferred over br 

To sum up, the key differences between br and br/ in HTML can be understood with the help of the following table: 

## Difference between br and br/ Tag


![Difference between br and br/ Parameter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4hbdtz42j37qre6bxoz.png)




## Browser Compatibility
Let’s look at its browser compatibility now

## Desktop Browsers


![Desktop Browsers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dpfc89yaj0fi3zhezfbv.png)

![mobile Browsers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rqtg4grvbtr60hpcxzt9.png)


## Conclusion 
Both br and br/ produces the same result i.e line break. But br/ is preferred because it can be used with strict rules as well(like while writing XHTML document) and the latter looks cleaner and readable.


Read more about other self-closing tags on [Scaler topics](https://www.scaler.com/topics/br-tag-in-html/).




_Author: Rdiddhi Suteri_
I have made a chrome extension for unwavering focus and deep flow
Tags: productivity
Published: 2022-02-24 10:27:24

An important part of my morning ritual is reading my affirmations everyday. They have helped me stay focused on my long term goals and not fall for mediocrity. But on somedays, I forget to repeat my affirmations and then tend to lose the momentum. 

So I have made a chrome extension called [Affirmations Flow](https://www.geetapandey.com/affirmations-flow). It replaces new tab with your custom affiramtions. You can add as many affirmations as you want and it shuffle plays them on the new tab, one affirmation at a time.

Here is a quick demo, take a look and let me know how you find it :) 

{% youtube WcYkBWHFeXQ %}
Loading Excel data in Node JS by converting them into json.
Tags: javascript, node
Published: 2022-02-24 10:26:17

In this tutorials, we are going to use the xlsx package to load the records from the spreadsheet. Start by creating your nodejs project by running the command
1. first create your project directory say reconciliation
2. Open the terminal run the command **npm init**
3. Install the xlsx package by running the command **npm i xlsx --save**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1zy43jb000yz7gxe3gxy.jpeg)
this is tutorials is to announce the xlsx package
Gaming Dashboard
Tags: gaming, dashboard, ui, design
Published: 2022-02-24 10:18:10


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

Design Tools: XD, Adobe Illustrator

----

ui, ui design, vue, react, js, javascript, ux, tailwind, bootstrap, front end, wordpress, website animation, website, crypto, crypto trading
Useful VS Code Extensions for Web Development
Tags: extensions, vscode, webdev, frontend
Published: 2022-02-24 10:05:32

**Visual studio code offers a wide range of extensions.** **Here I am listing down some top VS Code extensions for web development.**

## i) [Prettier – Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
This extension performs the formatting of the JavaScript, CSS, and HTML code.

## ii) [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
This extension makes the development time faster by autocompleting file names.

## iii) [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
Live Server extension provides the live preview of your web application right within the editor.

## iv) [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
ESLint is the linting utility for JavaScript. It checks your code for common errors and lets you know in the editor itself. It’s like a virtual peer who is validating your code while you are writing it.

## v) [Auto Close Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag)
This extension automatically adds the closing tag of HTML and XML.

## vi) [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek)
As its name suggests, this extension lets you jump to the CSS code using classes and IDs.

## vii) [Project Manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)
The Project Manager has been a savior to manage multiple projects in VS code.

## viii) [GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
With GitLens, you can view code authorship, check commit number, view changes between the last commit and existing changes, and so on.
Django Admin Mazer - Custom Django-admin replacement
Published: 2022-02-24 10:03:23

I am currently working on a Django admin templates replacement app, named `django-admin-mazer`. Available to install with `pip` for your testing.

The templates are taken from an open-source admin template available [here](https://zuramai.github.io/mazer/demo/index.html).

Installation process:

1. `pip install django-admin-mazer`

2. Add '`django_admin_mazer`' in your `INSTALLED_APPS` and you are good to go.

Github: [https://github.com/mahyess/django-admin-mazer](https://github.com/mahyess/django-admin-mazer)

Some screenshots taken while in development:

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1xqmtoqgoz5m9yugf7s.png)

![App Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/miagqlfsb7tden7p6aoy.png)

![Login Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qihnqz7gcveotorb6r09.png)

![Model Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/najnyiqqp8yjf7n6b5bu.png)

![Update Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5x0j3nruc8jehuel0tnv.png)

Be warned, this project is bootstrapped in a short amount of time, so expect some glitches here and there. So, there are unfinished tasks that I may not have found out just yet. 

Please feel free to point out problems, or even contribute to the project.

Github: [https://github.com/mahyess/django-admin-mazer](https://github.com/mahyess/django-admin-mazer)
AWS Insiders Podcast: An Inside Look at The Planet-Scale Architecture of DynamoDB with Alex DeBrie (Part 1)
Tags: aws, podcast
Published: 2022-02-24 09:56:57

## Podcast
* [Episode URL](https://aws-insiders.simplecast.com/episodes/an-inside-look-at-the-planet-scale-architecture-of-dynamodb-with-alex-debrie-author-of-the-dynamodb-book-part-one)
* Subscribe on [Apple Podcasts](https://podcasts.apple.com/us/podcast/aws-insiders/id1608453414), 
 [Spotify](https://open.spotify.com/show/0sH9zDLABk6FoLM0cpZHu1) or [RSS] (https://feeds.simplecast.com/4vl2TtzP)


## EPISODE NOTES
On this episode, Alex dives deep into the intricacies of Amazon DynamoDB, a Planet-Scale NoSQL database service that supports key-value and document data structures. Alex discusses the consistency and predictability in the design of DynamoDB’s performance, and how to best utilize it. 

> “How is Dynamo different than a relational database? I’d say the biggest thing is, it’s designed for consistency and predictability, especially around its performance and what that response time is going to be, and also how high it can scale up on different axes.” Alex DeBrie, Principal at DeBrie Advisory and Author of “The DynamoDB Book”.


## Time Stamps
* (02:08) How Alex discovered and got started with Amazon DynamoDB
* (04:34) The value of writing “The DynamoDB Book”
* (07:08) The underlying architecture and the unique qualities of Amazon DynamoDB
* (13:45) The advantages of single table design 
* (17:48) Illustrating examples of single table design 
* (21:45) Doing the math with Amazon DynamoDB for consistency and predictability

 
## Sponsor
This podcast is presented by [Cloudfix](https://cloudfix.com/). 
CloudFix automates easy, no risk AWS cost savings. So your team can focus on changing the world.
Mengelola Beberapa Versi Bahasa Pemrograman Go Dengan Go
Tags: softwareengineering, go, tools
Published: 2023-02-13 01:28:48

---
title: Mengelola Beberapa Versi Bahasa Pemrograman Go Dengan Go
published: true
date: 2022-02-24 09:51:53 UTC
tags: softwareengineering,golang,tools
canonical_url: https://risyandi.medium.com/3-dev-tools-mengelola-beberapa-versi-bahasa-pemrograman-go-dengan-go-c28cf4babe30
---

![images](https://cdn-images-1.medium.com/max/1024/0*oI1o83xcoPbmMyN6.png)
<figcaption>Source by : google.com</figcaption>

Berawal dari menjalankan sebuah proyek yang dimana setiap proyek aplikasi menggunakan beberapa versi Go yang lama dan yang terbaru, membuat kita akan kewalahan jika harus berpindah dari versi Go yang lama ke yang terbaru, apalagi jika akan mulai menjalankan nya didalam satu lingkungan kerja.

Untuk mempermudah dalam mengelola versi Go di dalam satu lingkungan kerja kita bisa menggunakan cara berikut, cara ini akan membantu kita untuk menginstall beberapa versi Go dalam satu lingkungan kerja sistem operasi Windows.

- Pastikan kamu sudah menginstal bahasa pemrograman Go versi stable atau yang terbaru.
- Pastikan kamu sudah melakukan setup _system environment variable_ untuk destinasi path untuk Go.

![images](https://cdn-images-1.medium.com/max/512/1*Fw3cva7Rc1GJtDBJHRi3Ug.png)
<figcaption>Source by : images environment variable windows</figcaption>

- Setelah semua dipastikan tersedia kita bisa mulai mengelola versi go. Secara default kita sudah memiliki Go dengan versi terbaru sebagai contoh secara default kita sudah menginstalkan Go versi 1.16. , Lalu kita mulai installkan versi lama yang misalkan kita ingin menginstalkan Go versi 1.9.
- Untuk menginstal Go versi 1.9 itu kita bisa mengetikan perintah pada command line $ go get golang.org/dl/go1.9 lalu tekan enter.

![images](https://cdn-images-1.medium.com/max/377/1*nm1qkcpdiT02kZJ3gYCVmg.png)
<figcaption>Source by : folder in gopath</figcaption>

- Lalu ketikan perintah pada command line $ go1.9 download untuk mendownload versi Go yang sebelumnya di inisiasi.
- Setelah proses download versi Go1.9 selesai kamu bisa mengubah alias ketika kamu ingin menggunakn Go versi 1.9 ini dengan mengetikan perintah di command line $ alias go="go1.9" untuk mengecek perubahan alias Go versi lama kamu bisa mengecek nya dengan cara mengetikan perintah berikut di command line $ go1.9 version / go1.9 help dan jika kamu ingin mengecek default Go versi kamu bisa mengetikan perintah $ go version / go help.

Semoga cara ini membantu untuk mengelola beberapa versi Go pada lingkungan kerja yang sama.
Taking too much time in building Angular multi-module project
Published: 2022-02-24 09:33:54

Hi community, I am a mid-level Angular developer and currently working on a Multi-Module web application being developed using Angular11
For my LOCAL Dev & Unit testing, I am following the below steps.
Step-1: Write/change code
Step-2: Run npm start on one of project module module
(ng build nsd-common-lib-module && cd dist && cd nsd-common-lib-module && npm pack)
Step-3: A .tgz file created on the local folder
Step-4: I use to Install the .tgz file on other dependent modules
Step-5: Npm start the other modules

Problem I am facing: Above steps took too much time even I did a small text/code change. So help me in case there is some best practices for LOCAL Dev & Unit testing of Angular11 multi-module project where I can do fast debugging.
Ally Beaton looks back on two years in the Kaizen design system
Tags: designsystems, react, webdev
Published: 2022-02-24 09:24:33

On her second-last day as [Culture Amp]'s tech lead for the
[Kaizen design system], [Ally Beaton] joined me to look back on two years of progress in our React component library:

{% youtube Gn6w_nE0eYk %}

If you're interested in being Kaizen's next tech lead, check out [the job ad] and please apply!

[Ally Beaton]: https://twitter.com/trycatchally
[Culture Amp]: https://www.cultureamp.com
[Kaizen design system]: https://cultureamp.design
[the job ad]: https://boards.greenhouse.io/cultureamp/jobs/3880125
Using a newer version of FFmpeg with Docker.
Tags: devjournal, docker
Published: 2022-02-24 09:19:09

## Introduction

Hello, I needed to use FFmpeg in a node application, however the problem was the default FFmpeg that can be installed with the node image was too old and didn't support what I was trying to do.

There were two ways to handle this either compile FFmpeg from source, which would take a while and I really didn't want to have a long Dockerfile, not to mention the cleanup afterwards.

So I decided to copy the FFmpeg bin from the "jrottenberg/ffmpeg:4.4-alpine" into the Nodejs image. Reason being it's simpler.

---

## Using FFmpeg 4.4 with the node image

To use the FFmpeg bin with the node image I changed the head of my Dockerfile like so:

```Dockerfile
FROM jrottenberg/ffmpeg:4.4-alpine AS FFmpeg
FROM node:16-alpine

COPY --from=FFmpeg / /
```

With this I was able to use FFmpeg 4.4 with the Node 16 image. 
I also learned something new about Docker. 

Hopefully this will help me in future projects, and hopefully be of use to you.
Show Dev: OS Wordle in 60+ languages!
Tags: opensource, gamedev, vue, tailwindcss
Published: 2022-02-24 09:08:55

**🧱🚀 Launch Day!**

I'm launching an Open-Source sideproject I've been working on for a bit :)

I reaaaaaally suck at frontend, & wanted to get better. So I remade my current favorite frontend-heavy game with some extra pizzaz.

Presenting: [Wordle Global](https://wordle.global)!

The main goal was to get some practice with Vue.js and TailwindCSS under my belt, and also make something useful. I hope this finds some use out there!

The whole thing is open-source, and you can (and actually, please do) suggest improvements or fixes over at [GitHub](https://github.com/Hugo0/wordle)

There's fun languages, like Klingon or Tolkien's Elvish that you can measure yourself on, as well as right to left languages like Arabic or Hebrew.

Here's the direct link if you want to check it out:
https://wordle.global

And here's the [ProductHunt](
https://www.producthunt.com/posts/wordle-global
) launch, where I'd appreciate an upvote :P

Hope you enjoy!
Wireframing in UI/UX
Tags: wireframing, figma, design, ux
Published: 2022-02-24 08:45:58

WIREFRAMING IN UI/UX
In my previous article about UI/UX for beginners, the article discussed the early stages in UI/UX, important key-notes, and procedures to start. 
In this article, we shall be explaining about wireframing in UI. 
Wireframing: This refers to the initial process involved in building an API. 

Before an app is designed, the UI designer would decide on how the app should look, mostly considering usability by targeted users, and wants of the client . The designer would sketch out the design manually or digitaly on a computer.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y504maf038rgzjiu1rhf.png)
Fig. 1.0 shows the combination of desktop and mobile wireframing.

Some wireframing tools include
UXpin
AdobePhotoshop
Mockplus
Justinmind
Ninjamock
Mockflow
Invision free-hand( for collaboration on a white-board like canva)

Furthermore, one can choose to sketch the flow of the design on a paper; for example, in sketching a full website for a company, it’s necessary one sketches the look of the Homepage, Aboutpage, ContactUs, et.c. Alternatively one can also have the sketch done using wireframing tool on Figma or Adobe XD platform.
The UI designer must have it tucked somewhere in his subconsciousness that users comes first so that icons, components, and features are placed such that using it becomes seamless and easy. Comformity to real-life workflow is from the integral purpose and essence of wireframing.


ADVANTAGES OF WIREFRAMING

Wireframing has several advantages that makes the workflow easier for the designer. It helps to pave an easy and clear  path of what the design would look like.
Few of the advantages are:

- 
**Helps to refine navigation**: for example, a typical wireframes done well helps user to be able to test-run it by checking if the positioning of other components and features won’t disrupt its usability.

 

- 
**It makes content development more effective
: Wireframing offers all necessary content effectiveness. For example, once the wireframing is done, one can correct any abnormally in text alignment, font size, and  images.

- 
Makes the design process iterative: wireframing serves as process in design elements in which all layouts and functionalities are distinguished in the wireframe rather than having them all in a single design like the completion of an application. 

- 
It makes the design work faster and easier: 

- 
It reduces errors and mistakes in design

- 
It gives better insight of the workflow/design to be done.
Integrating Google re-Captcha In Laravel
Published: 2022-02-24 08:39:30

## Hello!

The aim of this simple blog post is to give you the demonstration of how you can add google capthca verification in your laravel application.

Video link of this same post.
https://youtube.com/watch?v=KzWJDV00ITc&t

The package that we will going to use:
https://github.com/anhskohbo/no-captcha

## Step #01:
Installing package

```
composer require anhskohbo/no-captcha
```

## Step # 02:
Go to app/config/app.php file of your project and then go to the providers array and add this class to the providers array.

```
Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class,
```

Now, in the same file go to the aliases array and add this package aliase.

```
Anhskohbo\NoCaptcha\NoCaptchaServiceProvider::class,
```
Now, Let's publish the config file.
```
php artisan vendor:publish --provider="Anhskohbo\NoCaptcha\NoCaptchaServiceProvider"
```

## Step # 03
Now let's configure this package, To configure this you need to add add NOCAPTCHA_SECRET and NOCAPTCHA_SITEKEY in .env file.

Go to the **.env** file and add these lines:
```
NOCAPTCHA_SECRET=secret-key
NOCAPTCHA_SITEKEY=site-key
```

Now you need to generate these secret key and site key from google re-captcha form.

Link to generate google re-Captcha keys:
https://www.google.com/recaptcha/admin/create

This is the form here from where you can generate these keys.
If you are on a local-server so the below form fields will work great for you but if you are on a live server you just need to add your domain.

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

## Step # 04
Now, we will see that how you can you display this re-captcha in the front-end part of your application.

```
<div>
 {!! NoCaptcha::renderJs() !!}
 {!! NoCaptcha::display() !!}
</div>
```
By adding the above div in to the front end of your blade file, the re-captcha will be displayed.

I hope this blog will help you in any manner to learn how to add re-Captcha verification in your laravel application.

If you have any queries or questions or facing any problems, Feel free to mention here in the comment below.

Thanks!

Video Link :
https://youtube.com/watch?v=KzWJDV00ITc&t
Weird JavaScript - Part 1 🧑‍💻
Tags: javascript, beginners, react, weird
Published: 2022-02-24 08:29:41

Hey I am Javascript!!
Instead Weird Javascript. 

> **Its look simple but its not !!**

As being said, lets move straight to see some **Weird** parts:

Note: You can comment your answers

**<u>WJS - 1</u>**

```
function bark() {
  console.log('🐕 barkk barkk!🐕 ');
}

bark.animal = 'dog';
```
🔥🔥 What you think it will output  👨‍💻 ? 
Answer:
with `bark.animal=dog`, one more element is get added to function `bark()`, don't be surprise, Everthing is Object in JavaScript and thats why its wired

One more
**<u>WJS - 2</u>**

```
let number = 0;
console.log(number++);
console.log(++number);
console.log(number);
```
🔥🔥 What you think it will output  👨‍💻 ? 
Answer:
```
let number = 0;
console.log(number++); // Output : 0 and then increment it by 1 its known as return then increment
console.log(++number); // Output: 2 AND its increment then return
console.log(number); // it will log latest value of number i.e. 2
0 2 2
```
Follow @msabir for more