teleren/devto huggingface dataset:
Where Frontend Ends and Backend Begins
Tags: beginners, webdev, podcast, javascript
Published: 2022-02-02 22:57:42

{% spotify spotify:episode:6W2dfGrYcYKGqAcgL7iH3F %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://www.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## Announcements

The **Svelte for Beginners** Udemy course is now live! Mike took his experience in teaching and learning Svelte and created a course. 

This course will teach you the fundamentals of JavaScript frameworks. 

**Get it now on Udemy!** 👇

[Svelte For Beginners](https://www.udemy.com/course/svelte-for-beginners/?couponCode=HATTSALE)

## What's This One About?

Frontend versus backend development can be very confusing to a beginner. It's difficult enough to understand all the syntax and rules of thumb that you must follow, let alone be confused by the difference between client-side and server-side programming. In this episode, Matt and Mike discuss the difference between frontend and backend development, covering what client versus server-side is, and how the lines between the two roles blur more than you may think.


## Show Notes

* What is frontend, backend and full-stack development?
* What does “client-side” mean?
* What does “server-side” mean?
* What “logic” is considered frontend and which is considered backend? 
* Why are some computations done on the frontend and others done on the backend?


## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**


You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
My New Spacecraft Browser Game with Vanilla JS
Tags: webdev, javascript, css, gamedev
Published: 2022-02-02 22:07:17

I enjoy creating mini-games or implementing interaction designs on the web.

And here is the browser game I've made recently!

### Source Code:
https://github.com/danialdezfouli/spacecraft-game

### Online Demo:
https://spacecraft.vercel.app/


Feel free to ask questions or share your thoughts with me :)
3 ways to add timeouts in your npm scripts
Tags: node, javascript, webdev, npm
Published: 2022-02-02 22:05:57

---
title: 3 ways to add timeouts in your npm scripts
published: true
tags: node, javascript, webdev, npm
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ilvn1sgoylut6shk6k80.png
---

Timeout values are not very reliable because they depend on the available computing power. What takes 10 seconds on a fast PC may take 30 seconds on a slightly slower or busy PC. Nevertheless, timeouts have a right to exist because they are easy to implement. In the following, I would like to show you how you can add a timeout in your npm scripts for your build pipeline.

<!--more-->

## 1. Sleep

The easiest way to add a timeout is to use the Linux [sleep](https://manpages.ubuntu.com/manpages/focal/en/man3/sleep.3.html) command. Simply pass it the specified number of seconds as an argument and use it in your "scripts" section of your "package.json" file: 

```json
"scripts": {
  "server1": "node ./src/server1.js",
  "server2": "node ./src/server2.js",
  "timeout": "sleep 5",
  "start": "npm run server1 && npm run timeout && npm run server2"
}
```

⚠️ This only works on Linux operating systems and macOS! For Windows you would have to use the [Windows Subsystem for Linux](https://www.youtube.com/watch?v=bRW5r7TK6KM) or one of the following two options because there is no `sleep` command on windows.

## 2. Delay

[Sindre Sorhus](https://sindresorhus.com/), who actively maintains 1164 npm packages at the time of this writing (🤯), mimicked the behaviour of `sleep` with JavaScript in his [delay-cli](https://www.npmjs.com/package/delay-cli) package. It can be installed as development dependency and used across platforms:

```json
"devDependencies": {
  "delay-cli": "2.0.0"
},
"scripts": {
  "server1": "node ./src/server1.js",
  "server2": "node ./src/server2.js",
  "timeout": "delay 5",
  "start": "npm run server1 && npm run timeout && npm run server2"
}
```

## 3. setTimeout

Who wants to cover most operating systems (macOS, Linux & Windows) without installing additional dependencies can use `setTimeout`. Node.js is able to run inline JavaScript code using the `-e` ([--eval](https://nodejs.org/api/cli.html#-e---eval-script)) command-line option. 

Node.js v16 provides Promises-based [timer functions](https://nodejs.org/api/timers.html) that are easy to use:

```json
"scripts": {
  "server1": "node ./src/server1.js",
  "server2": "node ./src/server2.js",
  "timeout": "node -e \"require('node:timers/promises').setTimeout(5_000)\"",
  "start": "npm run server1 && npm run timeout && npm run server2"
}
```

☝️ Note: You can prefix Node.js builtin modules with `node:` to differentiate them from third-party packages.

## Get connected 🔗

Please [follow me on Twitter](https://twitter.com/bennycode) or [subscribe to my YouTube channel](https://www.youtube.com/c/typescripttv) if you liked this post. I would love to hear from you what you are building. 🙂 Best, Benny
Json nesnesini freezed modeline dönüştürmenin kolay yolu 💫 🌌 ✨
Tags: flutter, dart, dev, freezed
Published: 2022-02-02 20:54:08

Bu yazıda elimizdeki json nesnesini hızlı bir şekilde nasıl freezed modeline dönüştürebileceğimizi öğreneceğiz :)

https://app.quicktype.io/ sitesine gidin 

name alanına freezed modelinize vermek istediğiniz ismi girip 
Source type selectinden json'ı seçin :

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

Language alanındaki parametreleri resimdeki gibi ayarlayın:

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

Buraya kadarki her şey tamamsa json nesnenizi yapıştırın gitsin :D
İşte bu kadar kolay ✨

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


[resource :)](https://github.com/sametmasaci)
Terraform: Common aws_ami Searches
Tags: terraform, boilerplate, aws
Published: 2022-02-02 20:03:11

---
title: Terraform: Common aws_ami Searches
published: true
description: It should not be this difficult to search for a dang AMI
tags: #terraform #boilerplate #aws
//cover_image: https://direct_url_to_image.jpg
---

Searching for AMI's is not fun. Here are some you might be searching for:

### Amazon Linux 2 (latest):

```terraform
data "aws_ami" "amazon_linux_2" {
  most_recent = true
  owners      = ["amazon"]

  filter {
    name   = "name"
    values = ["amzn2-ami-hvm-*-x86_64-ebs"]
  }
}
```

### Graviton 2

### RHEL 7 (latest) 
Thanks: @wsarwariamzn

```terraform
data "aws_ami" "rhel_7" {
  most_recent = true
  owners      = ["309956199498"]

  filter {
    name = "name"
    values = ["RHEL-7.9_HVM_GA*-x86_64-0-Hourly2-GP2"]
  }
}
```

Please send me more and I'll include them in this post!
A useful tool to start in the programming world
Tags: startup, beginners, roadmap, programming
Published: 2022-02-02 20:02:16

A few days ago on a telegram group , I've found out this interesting resource (https://roadmap.sh/).

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

Basically it's a website where you can view roadmaps divided by macro-sectors of programming (eg Backend, Frontend, Android etc ...). for each offers a roadmap containing topics and resources useful to undertake that path, what a great tool!

Do you know it? It seems to me an excellent starting point to refine their skills.
Laravel 8 and Fontawesome without SASS
Tags: fontawesome, laravel, webpack, svg
Published: 2022-02-02 19:52:08

---
title: Laravel 8 and Fontawesome without SASS
published: true
description: How to import only the icons you are using!
tags: fontawesome, laravel, webpack, svg 
//cover_image: https://direct_url_to_image.jpg
---
Did a bunch of digging around today, without much luck, as most articles still require you to use scss/sass, are referencing older versions of Laravel.  Plus the official documentation isn't stellar either.  This article should serve as a quick reference to get things running.

First install these:
`npm install @fortawesome/fontawesome-svg-core`
`npm install @fortawesome/free-solid-svg-icons`
  
Then edit your `resources/js/app.js` and add these lines:
```
import { library,dom} from '@fortawesome/fontawesome-svg-core';
import { faAirFreshener } from '@fortawesome/free-solid-svg-icons/faAirFreshener';
import { faAddressBook } from '@fortawesome/free-solid-svg-icons/faAddressBook';

library.add(faAddressBook, faAirFreshener)

dom.watch()
```

Make sure your blade app layout file has the import in the `<head>`:
```
<!-- Scripts -->
<script src="{{ mix('js/app.js') }}" defer></script>
```
  
Now open your blade file of choice and add this code:
```
<i class="fas fa-address-book"></i>
<i class="fas fa-air-freshener"></i>
```

Make sure npm run watch is using mix and is running. That's it.

Couple of side notes:
I tried using
`import { faAirFreshener, faAddressBook } from '@fortawesome/free-solid-svg-icons';`
But my public/js/app.js file blew up to 1.51mb.  Importing them individually kept the js file to 795kb.  I tried a variety of approaches but the above is the only one that didn't make my js file blow up in size.

My webpack.mix.js was updated for tailwindcss so it's not quite the default out-of-the-box version, here's what it looks like:
```
const mix = require('laravel-mix');

mix.disableNotifications()

mix.js('resources/js/app.js', 'public/js')
 //   .sourceMaps()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}
```
☕ Java Virtual Threads Specification
Tags: java, programming, news, backend
Published: 2022-02-02 19:49:38

I recently found out this interesting Java specification - [The Java Virtual Threads](https://openjdk.java.net/jeps/8277131)

On of the biggest concerns of threads implementation in Java is that they user a real OS threads whenever we use them in our applications.

OS threads are limited and expensive if you don't manage them well. When building a high concurrence software you will need to create and manage a logic to reuse threads as much as possible, usually using thread pools.

The theory is simple: your application should get one available thread of the pool when it needs it and return it once it finishes its job.

But in practice, well.. The thread pools end up being shared between several modules with different responsibilities. That code starts loosing cohesion and it's more difficult to maintain. And at the end one thread cannot be identified with a single transaction because it will be in charge of very different functionalities during its lifetime.

To mitigate this problem, the Java team has created the Virtual Threads. Java will be in charge behing the curtains to asign and liberate OS resources while you will have the possibility to represent single-resposibility transactions with separated Virtual Threads. No more headaches about optimizing the pool (intially) and no more spaguetti code because of that.

Another great things of this new Thread implementation is that is been integrated into `Thread` API. That way it won't require a big learning curve or it shouldn't have very big side effects if you would like to migrate your code:

```java
// Virtual thread creation using Thread Builder interface
Thread thread = Thread.ofVirtual().name("virtual_thread_1").unstarted(runnable)

// Virtual thread factory
ThreadFactory factory = Thread.ofVirtual().factory();
```

It looks promising, but I'm expecting to try it out as soon as possible to check the potential of this thread implementation. Let's keep an eye on it!

If you liked this article, feel free to follow me on [twitter](https://twitter.com/javihache_dev)  and check out [my personal blog](https://javihache.dev/). Thank you! 😁
Request for Opinion: Modal UI Archetypes & Naming
Published: 2022-02-02 19:44:42

i am developing a modal system in my application, and i want to define a taxonomy for different archetypes of modals.

so far I have:

- utility modals: those which are invoked only briefly, are generally smol + direct, and aren't addressable via URL

- detail modals: those which are invoked to support a deeper workflow (e.g. editing a record, display medium-length content) and are presented as 50vw flyouts. may or may not be addressable via URL

---

the thing I want to come up with a name for is: "detail modals that can be invoked from more than one context and may have differing URLs based on the invoking context"

e.g. 

- detail modal supporting `OperationA` on `RecordB`, launched from `ContextA`

vs.

- detail modal supporting `OperationA` on `RecordB`, launched from `ContextB`

---

i'm specifically looking for a succinct "name" for these types of `Context Aware Detail Modals` (this being my current "best name")

would love to hear your thoughts on if there's something more clear to describe this behavior
Neat, Easy Way to Run Node.js Functions from the Command Line
Tags: node, npm, javascript, webdev
Published: 2022-02-02 19:37:47

Today I learned a quick trick for running and testing Node scripts from the command line.

It’s as simple as this with NPX:

`npx run-func ./your-file.js functionName`

NPX will prompt you to install run-func. You can also add any optional or required argument after the function name.

What’s particularly nice is that NPX will handle any dependency imports. The same thing can be accomplished with this node script, but it won’t handle tab-complete as nicely:

`node -e 'require("./dist/your-file.js").yourFunction()'`

Of course you can also use the Node REPL (Read-eval-print loop) interpreter by typing `node` in terminal and then requiring and running any methods in your script or module. Nice for interactive programming, but I found the output isn’t as friendly.
Quick Tip: OUTPUT clause – Good Policy | SQL
Tags: sql, clause, mssql, output
Published: 2022-02-09 20:54:54

---
title: Quick Tip: OUTPUT clause – Good Policy | SQL
published: true
date: 2022-02-02 19:20:06 UTC
tags: SQL,Clause,MSSQL,Output
canonical_url: 
---

Let’s check how the OUTPUT clause can save the day if we, after an update, may want to revert what has been updated.

Imagine that we have the following output from a customer table on the SQL:

![](https://toolgbrmaker.files.wordpress.com/2022/02/image.png?w=409)

And we decided to switch all the customers with the first name **“Antonio”** to **“António”**. A simple update query like the following could achieve what we’re looking for…

![](https://toolgbrmaker.files.wordpress.com/2022/02/image-2.png?w=412)

Now, happens something completely unexpected in the TI world (or not!!!)… Well, customers are not pleased with their name change and want to get them back on our database. But which ones have been changed?

Time to use the [OUTPUT](https://docs.microsoft.com/en-us/sql/t-sql/queries/output-clause-transact-sql?view=sql-server-ver15) clause on our update queries. If you use it, you’ll get an output of all the entries that have been changed and back up that information to be reused after, if needed. See the next example of how can be used on the above example:

![](https://toolgbrmaker.files.wordpress.com/2022/02/image-3.png?w=634)

Now, you can copy, save, extract, etc., your result to backup file and use it whenever needed.

Stay safe!
Celebrate the .NET 20th Anniversary with the Community!
Tags: dotnet, csharp, fsharp
Published: 2022-02-02 19:18:32

Did you know that this month marks .NET's 20th anniversary! That's right, .NET launched 20 years ago on February 13th, 2002, alongside Visual Studio .NET. We are celebrating all month long and you can get join in on the fun. 

## 20th Anniversary Celebration.

 The .NET team is throwing a huge celebration on **February 14th at 9AM Pacific**. This 30-minute event will feature:

- Interviews with luminaries & Microsoft alumni
- Stories from customers and developers building amazing things
- Memories of building .NET with Scott Hunter, Scott Hanselman, and special guests
- …and so much ❤ from OSS contributors, MVPs, and .NET team members


Head over to [https://dotnet.microsoft.com/](dotnet.microsoft.com) for more information about the event, but it is never too early to start celebrating! And while you are there, checkout new homepage redesign and the awesome .NET timeline!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vc9ts7jbj0f4ne0ber7q.png)
 
## Digital Swag (wallpapers, cake designs, and more!)

The .NET design team has put together an awesome array of digital goodies for you to celebrate including wallpapers, Teams backgrounds, cake designs, e-mail signature images, and a whole lot more. They are high-res and customizable with SVGs, here is my current wallpaper on my ultra-wide:

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

Head over to [https://github.com/dotnet-presentations/dotNET20th](https://github.com/dotnet-presentations/dotNET20th) to grab all of the goodies and start celebrating! 


## Mod the dotnet-bot
The dotnet-bot is the mascot for the .NET community. Create your coding companion by [modding the dotnet-bot](https://mod-dotnet-bot.net/) and then share your creation with the world.

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

## Celebrate on social
Celebrate with the community throughout the month of February on social media. Have a fond memory? Still have that PDC conference badge? Did you build something amazing? Share your stories, memorabilia, favorite features, etc. in picture or video form on Twitter using the hashtag #dotNETLovesMe. Microsoft, the .NET Foundation, and ecosystem partners are joining the celebration with digital swag, trivia games and more. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9eey9lbf5dp3hgkjuup3.png)
 
Don't forget to add the 20th anniversary event to your calendar over at [https://dotnet.microsoft.com/](dotnet.microsoft.com)!
mongoDb change position of Array element
Tags: mongodb, beginners, programming, webdev
Published: 2022-02-02 19:15:29

_This post is to understand mongoDB query_
**Let's se how s$position operator works!! 🤩🥳** 

## $position

it's operator used in mongoDB woth $(dollerSign) as pre-
basically its specifies position(index) in an Array
at which `$push`  operator inserts elements/objects.

**Example**

![mongo theme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r2yuecwi7jfz4bcxzjp7.png)


let's see how to  add element at any 
position in above document using 
`$positoon` operator

       
![Queryof$position](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5k88hx6cb63wynu2e48z.png)
RecordCast Review – Best Free Online Screen Recorder
Published: 2022-02-02 08:52:44


The ever-increasing advancement in every field is it communication, technology, fashion, transportation is at peak leading to the advancement in innovation and new web technologies. Coming to the education point of impression the system is going to be online or we could say our digital revolution is at the top.

RecordCast is an excellent tool for recording video of what is happening on the screen the hassle-free experience. Simple, convenient, working hassle-free system, it can be useful to demonstrate a solution to a computer problem, keep the data safe, create video tutorials, or the functions of a program or service.


**How to record the video on RecordCast**

With RecordCast, it is very easy to record a screencast. On the main page of the service, we press the button Start recording, and then video recording starts without any registration. It is possible to record audio comments from a microphone or system audio, but the clip’s length should not exceed 10 minutes for now as the service is fast.
As a result, a special frame appears at the top of all windows, indicating a panel with control buttons. You can select one of the presets and click the “share” button.


**How to edit a screencast with RecordCast**

I believe you are good at you can record screen with RecordCast without any modification, but a few simple tricks can give your recast a great advantage to hold others’ attention and increase their understanding of better knowledge. For example, you can choose to add arrows, text, and highlights to draw attention to a particular screencast.
After you have finished your recording, feel free to edit your record with RecordCast. With RecordCast’s video editor, you are free to add animations, images, music, and more to your videos. It is also available to cut and edit unpleasant pauses and silences as per your comfort.

The key features of the app such as fast video download and edit allow extra safety and comfort to the individual. The technical advancement in the field of education making things happen easily putting lots of effort in the right way makes things go normally.


**The gateway to the modern technical world**

In the past, the fastest way to share something from your screen was with a screenshot. The old keyboards even had a key that did this function, the mythical Print Screen. Then you just had to paste the result into an image file.
But today, everything is video. If you watch on social networks like Instagram, Facebook, or Twitter, video is king, just like what on WhatsApp or Snapchat or the popularity of pages like Twitch or YouTube.
Recording video is as simple as having a smartphone. And today’s laptops have their webcam. To that, we must have a tool that allows you to record videos comfortably. In this article, I’ll share an easy-to-use tool to record your computer screen without downloading anything. It’s a RecordCast screen recorder.


**Reference Blog**
[https://www.gomahamaya.com/recordcast/](https://www.gomahamaya.com/recordcast/)
Modern authentication with Azure AD for WinForms (native) apps  - Question to Christos
Published: 2022-02-02 19:05:52

Hi Christos, 

You published a great tutorial on accessing Azure through MSAL authentication, 

https://cmatskas.com/modern-authentication-with-azure-ad-for-winforms-native-apps-2/

It would be great if you could clarify additional two points:
1. Is there an option to store user ID/pwd and to access Azure Graph in Windows Forms Desktop applicatin?

2. I tried to follow up steps that you've posted and got an issue: FirstAccount is null, even though accounts is not null:

            AuthenticationResult authResult = null;
            var accounts = await Program.PublicClientApp.GetAccountsAsync();

// AW: accounts != null was always true

            if (accounts != null)
            { label2.Text += $"GetAccountsAsync passed!"; }
            else
            { label2.Text += "PublicClientApp.GetAccountsAsync returned an empty list"; }


            var firstAccount = accounts.FirstOrDefault();

//AW: firstAccount is NULL

            if (firstAccount != null)
            { label2.Text += firstAccount.Username; }
            else
            { label2.Text += "firstAccount is null"; }


This NULL shows before the login screen to MS shows up.


Any ideas on what could go wrong?


Thank you.
Alexander