teleren/devto huggingface dataset:
Weekly web development resources #109
Tags: webdev, weekly
Published: 2022-02-16 06:40:19



______

##[SVG Text Backgrounds](https://textbgs.com/)
[![SVG Text Backgrounds](https://wweb.dev/weekly/content/109/text-bgs.jpg)](https://textbgs.com/)
A tool to easily generate text backgrounds you can use anywhere.

______

##[cccreate](https://cccreate.co/)
[![cccreate](https://wweb.dev/weekly/content/109/cccreate.jpg)](https://cccreate.co/)
A carefully curated collection of tools & resources for web creators.

______

##[ToolJet](https://tooljet.com/)
[![ToolJet](https://wweb.dev/weekly/content/109/tooljet.jpg)](https://tooljet.com/)
Open-source low-code framework to easily build & deploy internal tools.

______

##[Creating Generative SVG Grids](https://frontend.horse/articles/generative-grids/)
[![Creating Generative SVG Grids](https://wweb.dev/weekly/content/109/grids.jpg)](https://frontend.horse/articles/generative-grids/)
A nice article by Alex Trost on generative grids.

______

##[HTML Dialog](https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/)
[![HTML Dialog](https://wweb.dev/weekly/content/109/dialog.jpg)](https://css-tricks.com/replace-javascript-dialogs-html-dialog-element/)
An article on how to replace JavaScript dialogs with the new HTML dialog element.

______

##[CSSUI](https://www.cssui.dev/)
[![CSSUI](https://wweb.dev/weekly/content/109/cssui.jpg)](https://www.cssui.dev/)
A library of pure CSS interactive components without any JavaScript.

______

##[Partytown](https://partytown.builder.io/)
[![Partytown](https://wweb.dev/weekly/content/109/partytown.jpg)](https://partytown.builder.io/)
A lazy-loaded library to help relocate resource intensive scripts into a web worker.

______

##[Image to ASCII Art ](https://asciiart.pankajtanwar.in/)
[![Image to ASCII Art ](https://wweb.dev/weekly/content/109/ascii.jpg)](https://asciiart.pankajtanwar.in/)
A fun tool to turn any image int ASCII Art.

______

##[DevToysMac](https://github.com/ObuchiYuki/DevToysMac)
[![DevToysMac](https://wweb.dev/weekly/content/109/devtoysmac.jpg)](https://github.com/ObuchiYuki/DevToysMac)
A useful app for various tasks like encoding, decoding, and formatting code.

______

##[Markdown diagrams](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)
[![Markdown diagrams](https://wweb.dev/weekly/content/109/mardown-diagram.jpg)](https://github.blog/2022-02-14-include-diagrams-markdown-files-mermaid/)
An article by GitHub on how to include diagrams in your markdown files with Mermaid.

______

##[Mockover](https://mockover.com/mockups/t-shirt/)
[![Mockover](https://wweb.dev/weekly/content/109/mockover.jpg)](https://mockover.com/mockups/t-shirt/)
A tool to easiest way to warp an image online for product presentations.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
From Travel to Tech
Tags: beginners, codenewbie, watercooler, womenintech
Published: 2022-02-16 06:32:28

Hi - my name is Samantha, I'm a remote work advocate and (new) lady in tech! Before the pandemic I ran a successful online travel company, it was the first of its kind in Australia and I was (and am) incredibly proud of co-founding this business and running the company whilst traveling the world for years. 

However with borders closed and a lot more time on my hands than I had in previous years, I saw a new opportunity, that now was a great time to make a change into the tech industry. A huge component of my previous role was online, and in the travel industry, and as a business owner I spent my days solving problems, and loved it.

I began by doing some self-led courses, consuming videos and tutorials and falling down rabbit holes of cool libraries and fun projects but realised I would have to get serious if I was to really switch careers, so I found an intensive 12 week tech training course offering a tech re-training program and haven't looked back.

The course was difficult, like drinking water from a fire hose - each day felt as though I had missed a week as new concepts were poured into my brain, along with a copious amount of coffee but with the continued support of a very patient mentor and supportive cohort members I was able to complete all of my projects and a virtual client bootcamp that concluded with a presentation to over 75 attendees!

I am proud of how much I have achieved. Learning as an adult is hard, learning to code is also hard but rewarding. I love to see my code go live and I hope to secure my first tech role this month, within 12 months of my decision to switch careers.

If you are reading this and thinking about learning to code, do it. If you are on the journey, stick with it, and to all of us good luck and happy travels!
Build a Video Conference App from Scratch using WebRTC,Websocket,PHP +JS Day 41
Tags: webrtc, webdev, javascript, tutorial
Published: 2022-02-16 06:17:44

In this video we'll cover how to display Call Status

Resource File:https://github.com/learnwithchristopherglikpo/webrtc_project_files

{% youtube 4K0h47_E9oU %}
Join a new open-source community!
Tags: opensource, webdev, beginners
Published: 2022-02-16 06:04:05

Are a junior web dev? Do you want to improve your skills and meet new people while working on meaningful open-source web apps?

That was my wish when I started web development almost two years ago. At that time, I tried to contribute to existing open-source projects but finding beginner friendly issues was often time-consuming and, even then, existing code in repos are sometimes too complicated to understand or to add to. 🤯

I am dedicating a lot of my free time to side projects, and, while working on one of my small hobby projects ([Peak](https://peak.tinyappstack.com/), a web app that helps you remember faster!), I thought about how much cool and valuable it would be to work on small open-source web apps with other devs, as a community!

## The Tiny App Stack
That's the reason I am creating the **Tiny App Stack**, a community of like-minded developers, growing and learning together while creating small and meaningful open-source applications! 🥳

Joining the Tiny App Stack, not only will you meet **like-minded friendly people**, but you will also **improve your coding expertise**, **level-up your collaboration skills**, **share your struggles** and **discuss new coding patterns**!

If you are a wannabe web developer, participating in open-source projects can also **help you land your first job**! 🚀

## Join the tribe now!

Whatever is your field of interest, should it be web, design, or product development, or wether you are just curious and want to share ideas and feedback, you are welcome!

[Join now the mailing list](https://www.tinyappstack.com/) and I will invite you to join the slack when the community officially launches!

Let's have fun together while making the world a better place, one tiny app at a time! 💪
Javascript Interview Questions
Tags: javascript, programming
Published: 2022-02-16 05:11:58

1. 5 features of javascript
2. What is DOM? 
3. Data types in javascript? 
4. Difference between let, var, 
   const
5. Difference between undeclared 
   and undefined? 
6. "==" And "===" Operator
7. High order functions
8. Callback functions
9. Explain arrow functions
10. Use of promises in javascript
Angular-NGRX state management lifecycle simplified
Tags: angular, redux, ngrx
Published: 2022-02-16 04:30:37

###Introduction###

NGRX makes Angular development easier by simplifying the application's state in objects and enforcing unidirectional data flow.

---

###What is Redux!###

If you are new to NGRX, understanding Redux pattern is a must to make any progress. And this is where most of the learners feel confused. 

Let's keep this simple and straight to the point. Redux pattern is something you see in your day to day life.

I know what you might be thinking at this point... _What are you talking about?_ 

Relax! and consider your favorite restaurant system that takes orders and delivers food.


![Redux pattern in real world terms](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ztp5hs0bcz7hw753ugh.png)

---

####Step1####

- At the convenience of home, people can order food by calling restaurant workers.

####Step2####

- Restaurant workers notes down your order and then hands it off to chef. 
- They also get groceries if needed for the order. 

####Step3####
- Chef cooks the orders and places them in the store display.

####Step4####

- The delivery man picks up respective orders from store and delivers it to people like you.

> Notice that during all these steps, all you have done is just requesting which item you want. Everything else is within its eco system and each member has specific job to do.

---

###NGRX STATE MANAGEMENT CYCLE###
Alright, now lets try to relate this example to NGRX state management lifecycle which uses redux pattern.
![NGRX state management lifycycle](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6mx2ro80t8z9klrdt6x6.png)

---

> Try to relate both images
```javascript
    People = Components
    Food = State
    Workers = Actions
    Grocery store = Effects
    Farms = Services and Database
    Chef = Reducer
    Store = Store
    Delivery men = Selectors
```


####Step1####
- Components dispatch actions.

_eg: Get me all employee names._

####Step2####
- Actions hold these unique events.

_eg: All employee info requested._

####Step3####
- Reducers are just pure functions that handle actions to update store from one state to next state.

_eg: Okay, so you need all employee info. I have updated store with all employee info._

> Notice that if you have some side activities that needs to be done, like getting data from backend, this is where Effects comes into the picture.

####Step4####

- Selectors are just pure functions used to obtain data from store.

_eg Takes employee info from store and hands off to component._
 

---
###Conclusion###
At first NGRX might appear confusing and overwhelming, but the concept behind is very simple and once  you get it, you will never forget it. I took restaurant example just for beginners understanding and it might not fit in all scenarios of NGRX. This just starting point to get an idea. I would recommend  to read [NGRX docs](https://ngrx.io/docs).
Excel Formulas in C# (Code Example)
Published: 2022-02-16 04:29:45

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/excel-formulas-csharp
---

**C#:**
```
using IronXL;
 
WorkBook workbook = WorkBook.Load("test.xlsx");
WorkSheet worksheet = workbook.DefaultWorkSheet;
 
// Set Formulas
worksheet["A1"].Formula = "Sum(B8:C12)";
worksheet["B8"].Formula = "=C9/C11";
worksheet["G30"].Formula = "Max(C3:C7)";
 
// Force recalculate all formula values in all sheets.  
workbook.EvaluateAll();
 
// Get Formulas
// Get the formula's calculated value.  e.g. "52"
string formulaValue = worksheet["G30"].Value;
 
//Get the formula as a string. e.g. "Max(C3:C7)"
string formulaString = worksheet["G30"].Formula;
 
//Save your changes with updated formulas and calculated values.
workbook.Save();
```

**VB:**
```
Imports IronXL
 
Private workbook As WorkBook = WorkBook.Load("test.xlsx")
Private worksheet As WorkSheet = workbook.DefaultWorkSheet
 
' Set Formulas
Private worksheet("A1").Formula = "Sum(B8:C12)"
Private worksheet("B8").Formula = "=C9/C11"
Private worksheet("G30").Formula = "Max(C3:C7)"
 
' Force recalculate all formula values in all sheets.  
workbook.EvaluateAll()
 
' Get Formulas
' Get the formula's calculated value.  e.g. "52"
Dim formulaValue As String = worksheet("G30").Value
 
'Get the formula as a string. e.g. "Max(C3:C7)"
Dim formulaString As String = worksheet("G30").Formula
 
'Save your changes with updated formulas and calculated values.
workbook.Save()
```

Use IronXL to set ranges and retrieve desired cell values within that range. Available cell values include Sum, Avg, Max and Min)

A formula is an expression which calculates the value of a cell. Functions are predefined formulas and are already available in Excel.

IronXL is fairly unique in .Net Excel libraries in that it supports the full range of Excel formulas and can calculate formula values in real time.
Copy Excel Worksheets (Code Example)
Published: 2022-02-16 04:26:17

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/copy-an-excel-worksheet
---

**C#:**
```
using IronXL;
 
WorkBook firstBook = WorkBook.Load("test.xlsx");
WorkBook secondBook = WorkBook.Create();
 
//This is how we can get the first worksheet within the workbook
WorkSheet worksheet = firstBook.DefaultWorkSheet;
 
//This is how we can copy worksheet to the same workbook
worksheet.CopySheet("Copied Sheet");
 
//This is how we can copy worksheet to another workbook with the specified name
worksheet.CopyTo(secondBook,"Copied Sheet");
 
secondBook.SaveAs("CopyExcelWorksheet.xlsx");
```

**VB:**
```
Imports IronXL
 
Private firstBook As WorkBook = WorkBook.Load("test.xlsx")
Private secondBook As WorkBook = WorkBook.Create()
 
'This is how we can get the first worksheet within the workbook
Private worksheet As WorkSheet = firstBook.DefaultWorkSheet
 
'This is how we can copy worksheet to the same workbook
worksheet.CopySheet("Copied Sheet")
 
'This is how we can copy worksheet to another workbook with the specified name
worksheet.CopyTo(secondBook,"Copied Sheet")
 
secondBook.SaveAs("CopyExcelWorksheet.xlsx")
```

Shows how to duplicate and copy `WorkSheets` within and between Excel `WorkBooks`.

Copy and paste sheets to and from other workbooks or to new locations within your workbook. Create duplicate sheets within your workbook.

You can download a file project from this [link](https://ironsoftware.com/csharp/excel/downloads/copy-an-excel-worksheet.zip).
Using IronOCR License Keys
Published: 2022-02-16 04:23:20

---
canonical_url: https://ironsoftware.com/csharp/ocr/docs/license/license-keys/
---

IronOCR license keys allow you to deploy your project live without any watermark.

[Licenses](https://ironsoftware.com/csharp/ocr/licensing/) start at just $499 and include one free year of support and updates.

You can also try IronOCR free for 30 days with a [trial license key](https://ironsoftware.com/csharp/ocr/docs/license/license-keys/#trial-license).

---

## Step 1: Download the Latest Version of IronOCR

### Install via DLL

Download the [IronOcr DLL](https://ironsoftware.com/csharp/ocr/packages/IronOcr.zip) directly to your machine.

### Install via NuGet

Alternatively, you can install through [NuGet](https://www.nuget.org/packages/IronOcr/).

`PM > Install-Package IronOcr`

---

## Step 2: Apply Your License Key

### Set your IronOCR license key using code

Add this code to the startup of your application, your before IronOCR is used.

**C#:**
```
IronOcr.Installation.LicenseKey = "IRONOCR-MYLICENSE-KEY-1EF01";
```

**VB:**
```
IronOcr.Installation.LicenseKey = "IRONOCR-MYLICENSE-KEY-1EF01"
```

---

### Set your license key using Web.Config or App.Config

To apply a key globally to your application using Web.Config or App.Config, add the following key to your config file in appSettings.

```html
<configuration>
   ....
   <appSettings>
      <add key="IronOcr.LicenseKey" value="IRONOCR-MYLICENSE-KEY-1EF01"/>
   </appSettings>
   ....
</configuration>
```

----

## Step 3: Test your key

Test if your key has been installed correctly.

**C#:**
```
bool result = IronOcr.License.IsValidLicense("IRONOCR-MYLICENSE-KEY-1EF01");
```

**VB:**
```
Dim result As Boolean = IronOcr.License.IsValidLicense("IRONOCR-MYLICENSE-KEY-1EF01")
```

---

## Step 4: Get started with your project

Follow our tutorial on how to [Get Started with IronOCR](https://ironsoftware.com/csharp/ocr/docs/).

---

## Questions?

If you have any questions, reach out to [developers@ironsoftware.com](mailto:developers@ironsoftware.com)
Excel to SQL and Data Grid via DataTable (Code Example)
Published: 2022-02-16 04:11:05

---
canonical_url: https://ironsoftware.com/csharp/excel/examples/excel-sql-datatable/
---

**C#:**
```
using IronXL;
using System.Data 
 
//Open any Excel document.
WorkBook workbook = WorkBook.Load("test.xls");
 
 
// Work with a single WorkSheet.  Can also use workbook.DefaultWorkSheet
WorkSheet sheet = workbook.GetWorkSheet("sheet1");
 
//Convert the worksheet to System.Data.DataTable
//Boolean parameter sets the first row as column names of your table.
System.Data.DataTable dataTable = sheet.ToDataTable(true);
 
//The DataTable can populate a DataGrid for example.
 
//Enumerate by rows or columns first at your preference
foreach (DataRow row in dataTable.Rows)
{
    for (int i = 0; i < dataTable.Columns.Count; i++)
    {
        Console.Write(row[i]);
    }
}
```

**VB:**
```
Imports IronXL
Private System As using
 
 
' Work with a single WorkSheet.  Can also use workbook.DefaultWorkSheet
Private sheet As WorkSheet = workbook.GetWorkSheet("sheet1")
 
'Convert the worksheet to System.Data.DataTable
'Boolean parameter sets the first row as column names of your table.
Private dataTable As System.Data.DataTable = sheet.ToDataTable(True)
 
'The DataTable can populate a DataGrid for example.
 
'Enumerate by rows or columns first at your preference
For Each row As DataRow In dataTable.Rows
	For i As Integer = 0 To dataTable.Columns.Count - 1
		Console.Write(row(i))
	Next i
Next row
```

Convert any Excel worksheet to a `System.Data.DataTable` for full interoperability with `System.Data.SQL` or to populate a **DataGrid**.

You can download a file project from this [link](https://ironsoftware.com/csharp/excel/downloads/excel-sql-datatable.zip).
Top cloud adoption trends for cloud specialists
Tags: cloud, aws, cloudskills, devops
Published: 2022-02-16 04:00:55

We conducted a survey of 900 reliability engineers, cloud admins, and developers to gain industry insights on cloud technology adoption. Some of the key findings were: 
- 71% of respondents are unhappy with their cloud provider's monitoring capabilities
- AWS users have more concerns about monitoring gaps and the cost of monitoring than Azure users.
                                                                                                                                          Other findings included the perception respondents had of the different public cloud providers, the biggest concerns they had about their cloud provider's monitoring capabilities, and which cloud services were most popular.

[Download Free E-Book](https://www.eginnovations.com/ebooks/cloud-technology-adoption-trends?utm_source=SEO&utm_medium=organic&utm_campaign=cloud-technology-adoption-trends&utm_id=001)
RIP Tumbview
Tags: javascript, p5js, tumblr, screensaver
Published: 2022-02-16 03:32:53

So, one of my favorite sites shut down a few months ago. 
[Tumbview ](https://tumbview.com/)was an autoplay, fullscreen Tumblr image viewer that helped me get rid of distractions while giving me beautiful images on my screens.
It also helped me maintain a [twitter bot](https://twitter.com/ffffoundish_bot) with ffffoundings of amazing art.
Try it out here: [https://latostadorano.com/tumbview.html](https://latostadorano.com/tumbview.html)
WRONG DECISION
Published: 2022-02-16 03:04:10



A decision must be active. There is nothing wrong with changing a plan when the situation has changed. A man should never be ashamed to own that he has been in the wrong, which is but saying, in other words, that he is wiser today than he was yesterday. When somebody persuades me that I am wrong, I change my mind. What do you do?" Sometimes things don't go the way we believe they will. The solution is to face it and act. Scramble out of wrong decisions. I would argue that  that's a big part of having a reasonable record in life. You can't avoid wrong decisions. But if you recognize them promptly and do something about them, you can frequently turn the lemon into lemonade. 

UWABOR.
Auth0 Custom Google Social Login Connection
Tags: google, auth0, oidc, gcp
Published: 2022-02-16 02:13:57

---
title: Auth0 Custom Google Social Login Connection
published: true
description: Create a custom connection in Auth0, that will let people login with their Google account.
tags: google,auth0,oidc,gcp
//cover_image: https://direct_url_to_image.jpg
---

The Auth0 free tier only lets you have a couple social connections. If you use their Google one, then you have used up one of your connections.

We can create a custom social connection, and connect it to Google.

Head to GCP

- Click API & Services
- Click OAuth Consent Screen
- Fill out the requested info, put whatever you want for the URLs, just make sure you add the domain auth0.com
- Add the top 3 basic scopes: profile, email, openid
- Add test users
- save it all, and click "Credentials" on the left navigation menu
- Create an OAuth Client Id, for redirect URI use: https://YOUR_TENANT.us.auth0.com/login/callback

Now head over to Auth0, click "Authentication" -> "Social" -> Create

- Scroll to bottom of all the options, click "Create Custom"
- name it "GCP-whatever-you-want", might be a good idea to put your GCP project name or something
- Use the URLs they gave you on the Credentials screen in GCP
- Authorization URL: https://accounts.google.com/o/oauth2/auth
- Token: https://oauth2.googleapis.com/token

Finally, use this user info script:

```javascript
function(accessToken, ctx, cb) {
  var i = jwt.decode(ctx.id_token);
  var p = {
    user_id: i.sub,
    email: i.email,
  };
  cb(null,p);
  }
```

The ID_Token from Google has the two most important things we need: sub, and email.

the access_token wont however.

Happy developing!
(Storybook Webpack 5) Error: Cannot find module 'webpack/lib/util/makeSerializable.js'
Tags: webpack
Published: 2022-02-16 02:11:56

```properties
npx sb init --builder webpack5
```

if you get the error `Error: Cannot find module 'webpack/lib/util/makeSerializable.js'`after setting up `storybook` with above command, check whether you've installed `webpack^5.x.x` in dependencies or not.

If `webpack^5.x.x` isn't installed, install with `npm i -D webpack@^5.x.x`.
Initial Discovery - Lit
Tags: lit, javascript, webdev
Published: 2022-02-15 21:37:56

The current state of front end JavaScript development is not good.  Angular, React, Svelte, and even now Vue have become too over-engineered.

I'm trying to do something relatively simple. Assemble a collection web elements that will dynamically update as users interact with them.  Why do I need a massive toolchain to pull that off?  Is there a simpler way?

[WebComponents](https://developer.mozilla.org/en-US/docs/Web/Web_Components) have been around for quite a while but I have never directly created one.  I hadn't even read up on [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) till yesterday!  Could the use of WebComponents provide a path to a more sustainable web development workflow?

After some research I decided it would be a pain to manually compose html and css strings so I decided to use a small library called [Lit](https://lit.dev/) to help me build my first components.  Here they are in all their glory:

![Animation of Lit Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2gublolzc4nyw6aemukz.gif)

Here are the core competencies that I wanted to explore:
- Multiple components - one nested inside another
- Reactivity within a component
- Passing events up to parent component
- Passing properties down to child component

I only ran into two issues during the setup:
1) I decided to use snowpack to run my dev environment.  That worked smoothly, but blew up when I tested a "snowpack build". I got this: **error: Expected ";" but found "render"** This took a long time to resolve, but I eventually changed noImplicitOverride to false in tsconfig.json. It turns out snowpack was unable to handle the JavaScript generated from the "override" keyword.
2) I had a hard time setting the "selected" attribute within an option on my select.  Thankfully Lit has some great docs and I found how to do [boolean attributes](https://lit.dev/docs/templates/expressions/#boolean-attribute-expressions) to resolve that.

Otherwise this looks like there could be a ton of potential.  I liked the feeling of working closer to the browser.  I am going to be adding on to this in the coming weeks.

Here is my repo : [https://github.com/aaronblondeau/lit-starter](https://github.com/aaronblondeau/lit-starter)