teleren/devto huggingface dataset:
YouTube Video | CSS3 in 10 days — Day 5
Tags: html, css, youtube, webdev
Published: 2020-08-15 08:58:06

This series contains some practical examples which you can learn and directly use CSS in your projects. We will create awesome components and other things in 10 days.

On day 5, we will start with CSS only Modal Window, then we will create CSS only Pacman with animation.

![Pacman](https://res.cloudinary.com/dxkxvfo2o/image/upload/v1597480833/css3-day5_x6cfee.gif)*Pacman*

This is the fifth part of the series.

{% youtube FzbFIMxI6nc %}

Please do like it and [Subscribe](https://www.youtube.com/channel/UCRf7mazcufqZxd2pR3oQJuQ?sub_confirmation=1) to my channel for more videos.
Cloud Firestore Nesting Update & Increment (WEB)
Tags: database, codenewbie, javascript, webdev
Published: 2020-08-15 08:41:23

Firebase offers a well-structured document for database CRUD operations in several languages. However, I feel some areas still require a more detailed explanation like updating a nested document in firebase, incrementing value without sending unnecessary API calls.

#How to update a nested key?

```js
const data = {
  carName:"BMW",
  color:"red",
  parts:{
    engine:{
    brand:"BMW",
    type:"alloy"
  },
  tyre:"MRF",
  visits:0,
}

const db = firebase.firestore();
```
So in case1, updating at level 1 is pretty straightforward. Only the key that needs to be updated is to be mentioned in the update part.

```js
// Case 1:

//updating data at the first level of object
db.collection("collection name").doc("doc").update({
    color:"white"
})
```
In Case2, in order to update the nested object, we need to concatenate the key names in the row.

```js
//case 2:

//updating data at second level

db.collection("collection name").doc("document name").update({
    [`parts.tyre`]:"Apollo"
});

//For updating nested object with dynamic key

const dynamicValue = "tyre";
db.collection("collection name").doc("document name").update({
    [`parts.${dynamicValue}`]:"Apollo"
});

// In order to update the keys of engine nested in parts of the data object, just need to concatenate. 

db.collection("collection name").doc("document name").update({
    [`parts.engine.brand`]:"Apollo"
});
```
#How to increment a key without making unnecessary API calls?

One of the most common challenges faced in firebase is correctly incrementing the value of the document or of multiple documents when the number of users is simultaneously updating data. For example, incrementing or decrementing the number of likes on-page. 

Last year, Firebase came up with a new feature *FieldValue.increment* that has reduced the overall complexity of getting the values from the doc and updating it.

```js
const db = firebase.firestore();
const increaseValue=firebase.firestore.FieldValue.increment(1);
//For the above example
db.collection('collection name').doc('document name');.update({ visits: increaseValue });
```
#Conclusion

Hopefully, this post has helped you with a better understanding on updating the nested object and firebase increment part.
Top Level Await in Node
Tags: node, javascript, webdev
Published: 2020-08-15 08:09:31

Node v14.8.0 was released this week and with it came the unlocking of a commonly requested feature that I am excited about!

{% twitter 1293229801570881537 %}

You may have run into the dreaded `await is only valid in async function` syntax error when trying to write code like this:

```jsx
const res = await fetch("https://dev.to");

// SyntaxError: await is only valid in async function
```

As a workaround, it was common to see codebases use an immediately invoked function expression:

```jsx
(async function() {
  const res = await fetch("https://dev.to");
}());
```

Ugly - but functional! Alternative options include transpiling with Babel or using the command line flag `--harmony-top-level-await`.

With v14.8.0, top level await has been unflagged and now *just works*. The only catch is that top level await is only supported in ES modules. This means either adding `"type": "module"` to your package.json file or renaming your `.js` file to `.mjs`.

If your project can work with v14.8.0, you can take advantage of this feature today. For everyone else, you will still need to await a while.
Job availability
Published: 2020-08-15 07:45:28

My contract definitely ends in 7 weeks. With the current climate I am looking to secure a new role as soon as practical. Feel free to get in touch if you have any opportunities you think might be a good fit for me.

I am a full stack developer with 21 years development experience and many years experience as an IT trainer before that. My core skills are Asp.net MVC, WebForms, Classic ASP, C#, Html, CSS, JavaScript, jQuery, WebApi, SQL Server, Entity Framework, OOP, SOLID TDD etc. 

LinkedIn: https://www.linkedin.com/in/david-amour-b51aaa1

CV: https://www.paxium.co.uk/content/cvs/daveamourcv.doc

Email: dave@paxium.co.uk
Got my 10th sponsor today, for a side project which was inspired by my dev.to article
Tags: productivity, motivation, showdev, javascript
Published: 2020-08-15 07:39:51

So one my post here called ["These free tools for developers are 🔥🔥🔥"](https://dev.to/fayaz/this-free-tools-for-developers-are-45p3) was getting a lot of views and it gave me a idea to make a website our of it & a few days later I launched [Appydev](https://appydev.co?ref=dev-article)

I put it up on Product Hunt and it was voted ~700 times & is the top voted product of the day (19th July 2020).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2h2pfsd55z0izeossowu.png)

It was also backlinked by many popular design blogs &  mentioned by some really awesome people on twitter.

## How I built it?
When I finally started building this, I had a huge list of bookmarks of great tools and resources which helped me a lot for my work. 

All I had was links and I had been saving them with the notion web clipper. Now the issue was getting the data, descriptions, images, author, pricing & open source links for these projects.

Doing this manually for ~300 links was a huge task, so I wrote a scraper in node js which did all of the heavy lifting. I just uploaded a csv file with the links and it pulled the title, description, og:images, icons etc. 

I tried pulling pricing links & github links, but it didn't work well (worked for a few links), I just ended up find this data manually along with a little help.

This site was made with vue, nuxt, nuxt content module & tailwindcss.

A month later, I have sold this template to two 2 clients for a good amount of money. They wanted something similar, but a little customised to their preference.

The best part is I got sponsored by 10 awesome people, who just liked the website and they were not even trying to get something in return & it was all because of a dev.to article.

You can find these supporters here https://appydev.co/coffee/
How to understand ProcessMaker open source code?
Published: 2020-08-15 07:27:36

Hi my name is Kaleem Ullah , first of all i want to say thanks/Appreciate  to the community for such a great platform.

The purpose of creating this post is just to disuse  the process Maker issues , i want to know from the professionals,
How can i understand the processMaker open source code ?
what are the best tools of trick I have to use to better understand the open source code?


im currently using phpStorm with Xdebuger extension to understand the code but , some things i understand , but something like functions i can't understand..

kindly suggest me what step i should have to follow for better code understanding ...

thank you <3
Building a Desktop GUI App with Ruby
Tags: ruby
Published: 2020-08-15 07:15:19

It's 2020 and just about every other blog post on software development captures experiences in web development. Desktop development is as uncommon as spotting an orangutan on a beach. In this blog post, we are going to briefly look at how we can build a desktop user interface using Ruby and the GTK3 library. Also, this post assumes that you are using Mac OS.

To get started, you would need to install the following dependencies. GTK3 is available as a brew package and so is the Glade user interface designer. We will use the gtk3 gem for Ruby.

```
brew install gtk+3
brew install glade
gem install gtk3
```

If you did any kind of programming with Windows Forms, AWT, Swing, native iOS, or native Android, then you have used a GUI library that introduces you to the basics of building desktop user interfaces - they involve adding controls/widgets into layout containers that fit into a top-level window/frame.

Within the UI heirarchy, Window is a top-level container. You can set properties such as the size, position, and border of windows and can add child widgets to it. The following code creates a new Window object, sets the size property, and adds a delete event handler.

```
require 'gtk3'

window = Gtk::Window.new("My Window")
window.set_size_request(300,200)
window.signal_connect "delete-event" do |e|
  Gtk.main_quit
end
```

Typically, you would use a layout manager within a window to help with the placement of widgets. Grid layout is pretty simple - all you would need to do is specify the column and row within which you want to place a widget, for instance a label. The code for this appears below.

```
grid = Gtk::Grid.new
label = Gtk::Label.new("Name")
grid.attach label, 0, 0, 1, 1
```

Let's do something useful by displaying IP addresses within the label:

```
require 'socket'
ips = Socket.ip_address_list
label.text = ips.map { |iter| iter.ip_address }.join ("\n")
```

Looks simple so far? We then put the grid into the window and display it on-screen.

```
window.add grid
window.show_all
Gtk.main
```

You now have a perfectly good way to see the IP addresses of the host you are running this code on. GTK includes lots of widgets from Entry (text boxes) to Notebooks (tabbed panels), which you can see on the [widget gallery](https://developer.gnome.org/gtk3/stable/ch03.html) at:
[https://developer.gnome.org/gtk3/stable/ch03.html](https://developer.gnome.org/gtk3/stable/ch03.html)

You can experiment with the code above by adding buttons:
```
button = Gtk::Button.new(:label => "Click Me")
button.signal_connect "clicked" do |e|
  puts "Hello"  # Displayed on the text console that you run the script from
end
grid.attach button, 0, 1, 1, 1
```

As the user interface gets more complex, you may want to use the Glade UI designer instead of hand-coding the interface.
react-profiles deployed !
Tags: actionshackathon, github, opensource, react
Published: 2020-08-15 06:57:54


### My Workflow
github actions makes Publishing packages to various package managers easier than ever before.
 
I am using "Node.js Package" workflow to build and publish my npm package into npm and github packages when i create a new release in my codebase.


### Submission Category: 
DIY Deployments


### Yaml File or Link to Code

{% github nateshmbhat/react-profiles %}
I created the Linux Tux in pure CSS and ond DIV only
Tags: discuss, 100daysofcode, codenewbie, codepen
Published: 2020-08-15 06:41:59

This penguin is created with only one DIV and solely CSS (no images, no tricks, only CSS):

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ma9qpl9qaisvw7dd0wb6.png)

This is an ongoing series I started some time ago. You can check out the code here:
https://codepen.io/thadeuszlay/pen/QEpXEa

I'm looking for inspiration. If you have suggestions what I can create next, then leave a line.

Happy coding!
CI & CD in React App using Github Actions.
Tags: actionshackathon, beginners, react, testing
Published: 2020-08-15 06:09:44

I am learning to write test cases for React App and for that I have built small, minimal React Login app. I thought this would be a great opportunity for me to integrate Github Actions in my project for CI pipeline.

I am using React Testing Library and Jest for testing the React App.

### My Workflow

For starter I have added unit cases to my App, and using Github Action I do a test run and if all test cases passes I let user to push or merge a pull request to master.

Action Used :

-  actions/checkout@v2
-  actions/setup-node@v1


`test.yml`

```yml

name: Unit Test Run

on:
  push:
    branches: [master]
  pull_request:
    branches: [master]

jobs:
  build:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [12.x, 14.x]
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: ${{ matrix.node-version }}
      - run: yarn install
      - run: yarn test

```


I will be adding following feature in future as I learn and develop :

- E2E testing using Cypress and Github Actions.
- CD pipeline using Netlify/Vercel and Github Actions


### Submission Category: 

Maintainer Must-Haves

In an open-source project when a good amount of PRs are being raised then automatic Test Run can be your first line of defence to avoid introduction of bugs in your project.
 

### Project Files

{% github dreamer01/react-login-mock no-readme %}


### Resources

Checkout this content rich [post](https://www.robinwieruch.de/react-testing-library) on React Testing Librarry by [Robin Wieruch](https://twitter.com/rwieruch).

Checkout this amazing [post](https://www.freecodecamp.org/news/what-are-github-actions-and-how-can-you-automate-tests-and-slack-notifications/) on getting started with Github Actions by [Colby Fayock](https://twitter.com/colbyfayock).
How to fix error- nodemon.ps1 cannot be loaded because running scripts is disabled on this system
Tags: node, nodemon, discuss, webdev
Published: 2020-08-15 06:03:23

A solution for running nodemon on local machine error on Windows :

```
nodemon.ps1 cannot be loaded because running scripts is disabled on this system. For more 
information, see about_Execution_Policies at https:/go.microsoft.com/fwlink/?LinkID=135170.
```

So if you ever get this error, simply you can follow these steps to solve the issue-

### Step 1: 
Open Windows PowerShell with Run As Administrator. 

### Step 2: 
As you see the error is about_Execution_Policies, first to see what's there in the present execution policy. Use this command on Windows PowerShell to get it
```
Get-ExecutionPolicy
```
Here you'll see 'Restricted'. So, this is the main reason- running scripts on this system is 'Restricted'.

### Step 3: 
Now we need to change this policy to allow the operation. Use this command to make it Unrestricted -
```
Set-ExecutionPolicy Unrestricted
```
Here you'll get a prompt message. Press Y to change it

That's it. To ensure, you may check the execution policy status by this command again

```
Get-ExecutionPolicy
```
You'll get the output 'Unrestricted'

The problem is solved. Now you can use nodemon on your machine.
Video: How to build a no-code application to scrape and email data from a web site
Tags: nocode, tutorial, video
Published: 2020-08-17 23:02:27

---
title: Video: How to build a no-code application to scrape and email data from a web site
published: true
date: 2020-08-15 05:58:44 UTC
tags: NoCode,Tutorial,Video,tutorial
canonical_url: https://maxkatz.org/2020/08/14/video-how-to-build-a-no-code-application-to-scrape-and-email-data-from-a-web-site/
---

In this video you will learn how to build a no-code application that scrapes data from a web site and then emails the data. The data scraped is also saved into a Google Sheets document.

This particular example shows how to get a daily Covid-19 data from a county web site. The same approach can be applied to any other web site and data.

{% youtube M19n2zTI6sQ %}

Watch other videos from my [no-code YouTube playlist](https://www.youtube.com/playlist?list=PLSAWywyhniCOpvlFSfUWVNAbclc2-1Kne).
How to Install GO? 
Tags: go, tutorial, beginners, opensource
Published: 2020-08-15 05:44:18

Go is a programming language that was developed by Google. The language is often referred to as *Golang*. It was designed to have three features available at the same time - fast compilation, ease of programming, and efficient execution in production.

This guide will help you through installing Go on your local machine and setting up a programming workspace via the command line.

Let's get started. :rocket:

#### Installing and Setting Up Homebrew
Homebrew provides macOS with a free and open-source software package managing system that simplifies the installation of software on macOS. 

```
$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```
#### Installing GO
You can use Homebrew to search for all available packages with the `brew search` command.
```
$ brew search golang
```
The terminal will output a list of what you can install.
```
golang  golang-migrate
```
Now, install golang with `brew install` command.
```
$ brew install golang
```
To check the version of Go that you installed use the following command.
```
$ go version
```
#### Creating Your Go Workspace
- `src`: The directory that contains Go source files. A source file is a file that you write using the Go programming language. Source files are used by the Go compiler to create an executable binary file.
- `bin`: The directory that contains executables built and installed by the Go tools. Executables are binary files that run on your system and execute tasks. These are typically the programs compiled by your source code or another downloaded Go source code.

The default directory for the Go workspace home directory with a go subdirectory, or $HOME/go. 

Issue the following command to create the directory structure for your Go workspace:
```
$ mkdir -p $HOME/go/{bin,src}
```
First, open `~/.bash_profile` with your preferred text editor and set up the `$GOPATH`.
```
export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin
```

Congratulations! You have a Go programming workspace set up on your local machine and can begin to write your first Go program. :rocket:

Thanks for reading. Happy Learning! :heart:
Quick and Clean Nginx dashboard
Tags: nginx, monitoring, webserver
Published: 2020-08-15 05:43:26

[Goaccess](https://github.com/allinurl/goaccess) helps you to quickly put together a dashboard based on Nginx (and many other web servers) access logs.

This solution is very neat as there is no need to run any frameworks for UI, no charting library plugin etc.

[Goaccess](https://github.com/allinurl/goaccess) can parse the access logs, calculate the HTTP stats based on every log entry and generate a self contained .html file. As a bonus it als allows csv, json exports

Docker command to generate a on-demand one time access log report

```javascript
cat access.log | docker run --rm -i -e LANG=$LANG allinurl/goaccess -a -o html --log-format COMBINED - > report.html
```

Docker command for real-time report

```javascript
cat access.log | docker run -p 7890:7890 --rm -i -e LANG=$LANG allinurl/goaccess -a -o html --log-format COMBINED --real-time-html - > report.html
```
![Sample dashboard output](https://dev-to-uploads.s3.amazonaws.com/i/1r0uhec78s9mehid1sk7.png)


There is much more to [Goaccess](https://github.com/allinurl/goaccess), In this story I just wanted to share my enthusiasm in using this cool piece of OSS.
CSS IS WORTH LEARNING OR should I SWITCH TO SVG!
Tags: css, beginners, help, webdev
Published: 2020-08-15 05:28:26

today i read about a language SVG through  tweet , I have no knowledge about that bt in a tweet i read that css is only for fun ,nd worth learning is SVG!

I m confused , can someone plz help me is css nd svg is same or different ?
Introduction to ASP.Net Core 
Tags: dotnet, csharp, webdev, beginners
Published: 2020-08-15 04:43:53

**ASP.NET Core** is a lightweight, fast and cross-platform framework for building **web and cloud applications**, built on top of the **.NET Core framework.**

.Net Core is a paradigm shift for Microsoft, a huge change from the closed world to a new community-focused open source world. Now Microsoft is competing directly with all the open-source – cross-platform competitors like Python, PHP, Ruby, Java and a lot.

ASP.NET Core is a complete redesign of ASP.NET with architectural changes that result in a leaner, more modular framework. It is a cross-platform, high-performance, open-source framework for building web apps and services, IoT apps, and mobile backends.

##Why you should learn ASP.Net Core?

The first preview release of ASP.NET came out almost 15 years ago as part of the .NET Framework and since then it has received a lot of updates and in the process, it has become a very complex web application framework. Now it's a fresh start and it doesn’t have to support all the old technologies from a decade ago so it will be slimmer by only support the modern technologies like MVC. 

Here is what the improvements ASP.NET Core brings to the table: 

- **Modular Design** -The entire ASP.NET Core is designed as a modular framework to meet the requirements of modern web and distributed as NuGet packages.  
- **Cross-Platform** - Core has been rebuilt from scratch with cross-platform as a priority so you can develop and deploy applications on Linux, Mac, and Windows.  
- **Open-Source** and community-focused- A complete open source stack with a new compiler called Roslyn (built-in C#), and a new webserver called Kestrel.  
- Provides a **Unified Programming Model** for building Web UI and API's – A Combined application model with ASP.NET MVC, Web API, SignalR and Web Pages are merged into one framework  
- **Fast** - ASP.NET Core is JIT compiled and not interpreted like most other web languages like PHP, Python, Ruby, Node.js  
- **Test-Driven Development** - Architectural changes made it more testable with a clear separation of concerns.   
- **Client-side Development** -Seamless integration with modern UI frameworks like Angular, React, etc.  
- Out of the box support for **Dependency Injection**.  
- Extremely lightweight and high-performance **configurable HTTP request/response pipeline**.  
- Introduction of [**Blazor**](https://dotnet.microsoft.com/apps/aspnet/web-apps/blazor) lets you use **C# in the browser** alongside JavaScript.  
- **Cloud-ready, host anywhere** (IIS, Apache, Nginx, Docker, or custom process) configuration system.


ASP.NET Core is a part of .NET Core SDK so you don't need to install ASP.NET Core separately. .NET Core comes under MIT or Apache 2 licenses. Visit the [.NET Core repository on Github](https://github.com/dotnet/core) to contribute or download the source code.
Assign pull request author automatically with GitHub Actions
Tags: actionshackathon, github, opensource
Published: 2020-08-15 04:08:56

### My Workflow

Who should be the assignee of Pull Request :question:

In most cases, the Pull Request author should be assigned as an assignee.

My workflow, named [Auto Author Assign](https://github.com/marketplace/actions/auto-author-assign),  assigns PR author automatically when PR is opened.

![toshimaru/auto-author-assign](https://raw.githubusercontent.com/toshimaru/auto-author-assign/master/img/auto-author-assign.jpg)

### Submission Category: 

**Maintainer Must-Haves**

[Auto Author Assign](https://github.com/marketplace/actions/auto-author-assign) makes it easy for OSS maintainer to assign someone to PR and filter PR from the list.

![Assigned Users](https://dev-to-uploads.s3.amazonaws.com/i/tpx5wmmxoi9wxz0xi7pv.png)

### Yaml File or Link to Code

`.github/workflows/auto-author-assign.yml`:

```yml
name: 'Auto Author Assign'

on:
  pull_request_target:
    types: [opened, reopened]

jobs:
  assign-author:
    runs-on: ubuntu-latest
    steps:
      - uses: toshimaru/auto-author-assign@v1.1.0
        with:
          repo-token: "${{ secrets.GITHUB_TOKEN }}"
```

Source code:

{% github https://github.com/toshimaru/auto-author-assign %}

### Additional Resources / Info

- I use this action on my project: [RailsTwitterClone](https://github.com/toshimaru/RailsTwitterClone/)