teleren/devto huggingface dataset:
Front-end Challenge #1
Tags: html, boostrap, webdev
Published: 2020-11-14 12:06:49

Recently, some of my friends approached me inquiring for a recommendation on a way to start as a front-end developer. With dynamic technologies and frameworks, it will be quite tough and overwhelming beginning within the field of front-end development. 

**So I decided to start a front-end challenge**, so Every week I will be providing a design and all the Assets needed.
So Feel free to Participate and improve your frontend Skills

**Preview site :** [Vpn Landing Page] (https://vpn-landing-page.netlify.app/)

##Challenge : SmartVpn Landing Page
i couldn't post full design in Dev.to due to size limit
You can Preview the design [Preview](https://www.figma.com/file/Pxiku3dcGuyBmUcSovrqu9/Vpn-Landing-Page?node-id=0%3A1)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/12cdbb9v6c8c6prw3tfa.jpg)

**View Full Design** [Preview](https://www.figma.com/file/Pxiku3dcGuyBmUcSovrqu9/Vpn-Landing-Page?node-id=0%3A1)

##Brief
So this Week's Challenge is to build out this landing page and get it looking as close to the design as possible.

You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a Go

##Getting Started
All the files are included in the Github repo so the project-files folder is where all the Assets are ie: Images, Figma design file 

1. Go to Github and [clone the repo](https://github.com/kelvinconrad/smart-vpn-landing-page)
2. Create a new folder on your pc and copy the Project-File folder to your new created folder
3. Start the project & share it 

##Ideas to test yourself
Not a must but if you can try it will be good for you
1.  Write your styles using a pre-processor, such as Sass, Less, or Stylus
2.  Train your eye for detail by getting your solution as close to the design as you can
3.  Use a JavaScript framework/library to practice templating and/or building using components
4.  Try estimating the time it will take for you to build the project. Then see if the time taken matches up to your estimate.

If you guys think this is a good idea please let me know so that I can keep posting new design and challenge every Saturday
Deploy your React app using Netlify
Tags: react, webdev, beginners, vscode
Published: 2020-11-14 11:49:29

Now that you have built your very first web application using React, it's time to deploy it. I will be using Netlify as it's just simple and straight forward. This blog is for apps that only contain frontend or client side. So before you follow along, please make sure that your app doesn't have a server side or backend.

First, make sure you have the Netlify command line tool. If not, in your terminal run: `npm install netlify-cli -g` 

You may now login to your netlify account using your terminal: `netlify login`

Next, create a file: `netlify.toml` in the root directory of your project in the code editor and insert the following:
```javascript
[build]
    command = "npm run build" 
    publish = "/dist" 

[[redirects]]
    from = "/*" 
    to = "/index.html" 
    status = 200 
```
If you're unsure about the name of your publish folder, you can check that in your `webpack.config.js` file.
```javascript
output: {
    path: path.resolve("dist"), //THIS ONE!!!
    filename: "bundle.js", 
    publicPath: "/",
},
```
Now, in your terminal use the following commands:
`netlify init`
You may deploy your app manually or using your git repository. You may name your site (this can be changed later)!
`npm run build`
`netlify deploy`
`netlify deploy --prod`

Your site is now live and ready to go! :)
DOM basics(The why and the what)
Tags: webdev, productivity
Published: 2020-11-14 11:19:38

## Note:
Please note that I am a beginner in this and I found that sharing what I learn keeps me motivated in learning to code and helps me learn better and you can read about this technique called[ learning in public here](https://www.swyx.io/learn-in-public/)

If you're an expert and you did find some mistake please comment it below as they say when you point the mistake the person never forgets that😂. Also note that I will keep updating it as and when I learn new things.

## Introduction

Rules: Just listen: below you will get the complete article on it then you have to teach it to somebody else. 
DOM= document object model.

Know that it's built due to pain in something [[business#Pain points]] as everything else: 


Okay so suppose you're on Instagram.com and it does give you personalised notifications right and instagram doesn't keep changing their websites to just help you 

THis is where [[DOM]] comes into play they break your html website into objects and just change the the small object which needs to be changed. 

Let's say somebody spills milk on your socks, do you change the entire dress or only the *socks*?

You can change the change 

Every object has a property and methods. 

Property: colour, nos of shoes and doors. 

methods: break(), stop, 

## How to download or start using java Script

### Inline 
Inline basically means we are using opening up a html tag and basically changing the attributes of it. 
`<body> </body`  = Normal html docs

`<body onload="alert('hello');"`  = inline boys.
### Internal 

Basically puting all your websites java code between the script tag like this. And this is inside the `<body>` tag.

`<script type="text/javascript">
  alert("hello");
</script>`

### External

`<script src="index.js" charset="utf-8"></script>
"`

#### Positioning 

Now where will you position or place the above code? 

Unlike [[CSS]] (which you want the computer to know   at the beginning ) you have to place this at the end after all your content is displayed cause you computer should run the elements like `<h1>` first before doing any changes to the behaviour.

It makes sence right you can't make the dog stand if you don't have a dog in the first place.😂

### Changing text with JS
`document.querySelector("input").click();`

### How to select any document and provide a hands off free

`document.firstElementChild.lastElementChild.etc;`

`document.element`


### What are selectors

In [[CSS]] you probably know the syntax i.e 
`h1{color:red}` here the `h1` is the selector. 

#### Popular

`document.QuerySelectorALL("#list .item)"`
Why You Should Migrate to .NET 5 (and why you shouldn't)
Tags: csharp, dotnet, tutorial
Published: 2020-11-14 11:09:10

.NET 5 is the latest and greatest version of .NET from the folks over at Microsoft, and it's better than ever. *Almost* everyone should migrate.

## What's all the fuss?

Up until now, .NET has been fragmented into 4 different platforms:

 - Framework
 - Core
 - Standard
 - Xamarin

As you can imagine, this leads to issues with code compatibility, especially when developing cross-platform applications. .NET 5 is an evolution of Core which replaces the need for Standard. It provides a unified platform on which you can build any application.

 ![dotnet_new](https://dev-to-uploads.s3.amazonaws.com/i/gf33dzppdwjqq7azxdyo.png)

## Why should I care?

There are three main reasons you should switch over:
1. Unified platform helps with code reuse across multiple platforms
2. Language updates to C#, F#, and VB
3. Performance improvements across the board

## Is migrating my applications difficult?

In most cases, migrating to .NET 5 can be done in two steps:
1. Update to the latest version of the SDK (this can be done by updating VS)
2. Change the target framework in your project file (.csproj for C#).
{% gist https://gist.github.com/mileswatson/85517f59ee3fe7473ba6a8ad6c76a854 %}

Make sure to check any breaking issues before updating - [here are breaking changes for .NET Core 3.1 to .NET 5.0](https://docs.microsoft.com/en-us/dotnet/core/compatibility/3.1-5.0).

## Why shouldn't I migrate?

There are some older technologies that are no longer supported in .NET 5:
 - Web Forms
 - Windows Communication Foundation
 - Windows Workflow

Newer alternatives to these can be found on [Microsoft Docs](https://docs.microsoft.com/en-us/dotnet/core/dotnet-five#net-50-doesnt-replace-net-framework), but they may take time to implement.

#### Footnote

If you enjoyed reading this, then consider dropping a like or following me:
 - [DEV](https://dev.to/mileswatson)
 - [LinkedIn](https://www.linkedin.com/in/watsonmiles)
 - [Twitter](https://twitter.com/miles__watson)
 - [Github](https://github.com/mileswatson)

I'm just starting out, so the support is greatly appreciated!

*Disclaimer - I'm a (mostly) self-taught programmer, and I use my blog to share things that I've learnt on my journey to becoming a better developer. Because of this, I apologise in advance for any inaccuracies I might have made - criticism and corrections are welcome!*
Building Forms The Angular Way ( Part 2 )
Tags: webdev, angular, typescript, html
Published: 2020-11-14 10:58:48

In the previous post, we discovered the template-driven approach for building forms. Here is a link to the post: <a href="https://dev.to/eldrige/building-forms-the-angular-way-1j7k">Building Forms The Angular Way</a>.

In this tutorial, we will discover how to build forms using the reactive approach.
In contrast to template-driven forms, reactive forms are entirely controlled through the logic (ts component). Also, they are more robust and testable.

## 👩👨‍🍳Recipe 

👉 Head to app.module, and import the ReactiveForms module from angular/forms, and equally add it to the imports array.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/e6acht44vgu7wy3nlf61.png)
Doing this gives us access to the following directives, formGroup,
formControlName, formControl, formBuilder and formArray.

Quick recap: form-controls represent a single input, and a formGroup is a collection of formControls.

The FormGroup object has the following properties errors, dirty, valid, value. The errors hold the validation errors, the touch value is boolean indicating if an input has received focused, the dirty property is equally boolean, it indicates if an input has been filled.


👉 Head to your logic and  import formGroup, formControl from angular/forms
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/39n67x7p881nl8ljwt1n.png)


In our logic, we will create a studentForm property to keep track of students. Create it, then define its type to be of type formGroup.

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

Then in the ngOnInit method, we will initialize it to a new FormGroup instance, and define its form controls. That is the email and name.

👉 Head to your view, and add the following code.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/cz8duu7dnc9r9ucyf2ps.png)

In the template, we use property binding to bind the form, to our studentForm property.

For each input, we attribute the formControlName directive, which we assign to the form control defined in our logic.


👉 Head to your browser. Initially, you should see something like this
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/avbxmlrz0av66vu9lq6w.png)

Now, when we modify our form, we realize the formGroup properties change.

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

🎊🎉🍾Congratulations. You have just built a form using the reactive approach.
Closures and Lexical Scoping in JavaScript
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-11-14 10:42:27

Variables in JavaScript have two types of scoping i.e. Local and Global scope. If any variable is declared inside a function, then it is a local variable and if the variable is declared outside the function then it is global variable. The scope of variables is defined by their position in the code.

##Lexical Scope
JavaScript follows Lexical scoping for functions. Lexical scope means any child’s scope has access to the variables defined in parent’s scope i.e. inner functions can access the global variables.

```javascript
var a = 5;

function sum() {
    return a + 6;
}

console.log(sum()); // 11
```
In the above example, function `sum()` is using global variable `"a"` to perform the addition.

##Closure

```javascript
var a = 5;

function sum() {
    return a + 6;
}

console.log(sum()); // 11
```
A Closure is a function which has access to the parent scope variables. The above function has access to global variable `“a”`, so it is a closure. If you will do `console.dir(sum)`, then you can see inside `[[scopes]]` property, the global variable `“a”` is present.

![closure-javascript-jscurious](https://dev-to-uploads.s3.amazonaws.com/i/9o8xg6lamb4breh21o84.png)

Now let’s see another example of Closure with respect to inner function.

```javascript
function sum(outerValue) {
    return function(innerValue) {
        return outerValue + innerValue;
    }
}

const findSum = sum(5);

console.log(findSum(10)); // 15
```
When you call `sum(5)`, it returns a function which holds the variable `outerValue`. So when you call `findSum(10)`, it adds the `outerValue` value with `innerValue`. The inner function holds the `outerValue` even after the outer function is closed, this is called closure. If you will do `console.dir(findSum)`, you can see inside `[[scopes]]` property, the `outerValue` is present.

![closure-javascript-jscurious](https://dev-to-uploads.s3.amazonaws.com/i/5xhw6g9r10wtvx19z1ma.png)

##You may also like
* [20 JavaScript Shorthand Techniques that will save your time](https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/)
* [What are call(), apply() and bind() in JavaScript](https://jscurious.com/what-are-call-apply-and-bind-in-javascript/)
* [What is ES6 Destructuring Assignment in JavaScript](https://jscurious.com/es6-destructuring-assignment/)



***Thanks for your time***
Find more Web dev blogs on [jscurious.com](https://jscurious.com)
As time goes by
Tags: android, programming
Published: 2020-11-14 10:28:05

It is inevitable that operating systems and platforms change over time, mostly through gaining new features, but certainly also through changing existing ones. Loosing functionality should in my opinion be the exception. Still, Android seems to make a habbit of it. In this short article I will take a look at some widgets that came and went. The screenshots were taken with a small sample app of mine. You can find the source code [at GitHub](https://github.com/tkuenneth/begleitmaterialien-zu-android-11/tree/master/kapitel_05/WidgetDemoViewBinding). The idea is to enter a fully qualified class name and the app will try to instantiate this class in a view hierarchy.

### android.widget.AnalogClock

This widget displays an analog clock with two hands for hours and minutes. It was added in API level 1 and deprecated in 23 with no further explanation. The docs just say

> This widget is no longer supported.

Fortunately the widget still works, so here is what it looks like on Android Q:

![The AnalogClock widget](https://dev-to-uploads.s3.amazonaws.com/i/4q6gvf1k5pqg44x24px0.png)

If your app needs an analog clock, best of luck. You are on your own. `sin()` and `cos()` will be waiting for you... Let's move on. As there used to be `AnalogClock`, there surely is `DigitalClock`, right?

### android.widget.DigitalClock

Yes there is. The docs introduce it like this:

> Like AnalogClock, but digital.

Now, please read between the lines... 😀

![The DigitalClock widget](https://dev-to-uploads.s3.amazonaws.com/i/cxefbgo33rwofoevtw4c.png)

In fact, the class has been present since API level 1 and was deprecated in 17. The docs say:

> It is recommended you use TextClock instead.

Very well, let's take a look at this fellow.

### android.widget.TextClock

The look has not changed much, if at all:

![The TextClock widget](https://dev-to-uploads.s3.amazonaws.com/i/s4yun1fbqoax2mlu1xxw.png)

The widget unsurprisingly was introduced in API level 17. It can display the current date and time as a formatted string and honors the 24-hour format system setting. The class used to have two constants `DEFAULT_FORMAT_12_HOUR` and `DEFAULT_FORMAT_24_HOUR`; both were deprecated in API level 18 (just one version later):

> This field was deprecated in API level 18. Let the system use locale-appropriate defaults instead.

## Conclusion

Designing long living and stable APIs is hard, no doubt. Unfortunately Android has seen quite a few changes that did not last too long. If you target recent Android versions and need a simple text-style clock, use `TextClock`. If you want a more visual representation of time you need to implement it on your own. 

Material Design has the concept of date and time **pickers** but does not detail how to visualize, or present both. If I have not overlooked something, Jetpack Compose (which will become the new technology for building Android user interfaces) has no special composables to show date or time. Am I wrong? Please feel free to correct me in the comments.
Connecting to postgres with standard sql package in golang
Tags: go, postgres, certificate, programming
Published: 2020-11-14 10:24:55

Quick steps connecting to postgres DB using the stand library with postgres driver,

Import the packages

```go
import (
    "database/sql"
    _ "github.com/lib/pq" //postgres drivers for initialization
)
```

A simple get method to run a select statement. In example we will the connection string from the environment variables.

```go
var connStr = os.Getenv("CONNSTR")

//GetSomeDummyData ...
func (r *Repo) GetSomeDummyData() {

	db, _ := sql.Open("postgres", connStr)
	defer db.Close()

	id := "34940574"
	row := db.QueryRow("SELECT column1, column2 FROM dummytable where id=$1", id)

	rows, err := db.Query(query, qteNum, limit)
	defer rows.Close()
	if err != nil {
		log.Println(err)
	}

	var result []*model.DummyData

	for rows.Next() {
		d := &model.DummyData{}
		err = rows.Scan(&d.Prop1, &d.Prop2)

		if err != nil {
			log.Println(err)
			return nil, err
		}
		result = append(result, q)
	}
	return result, nil

}
```

Now the connection string looks something like this in the environment variable

```bash
EXPORT CONNSTR="user=username password=password host=dbname.host.com port=5433 dbname=dbname connect_timeout=20 sslmode=disable"
```

Lets now enable ssl mode with the ca cert in your project. In which case we need to set the path of the PEM file. Can be relative path of the absolute path. Postgres expects this in a [environment variable](https://www.postgresql.org/docs/9.3/libpq-envars.html) PGSSLROOTCERT=pathof.pem and connection string will specify `sslmode=verify-full`

```bash
EXPORT PGSSLROOTCERT=pathof.pem
EXPORT CONNSTR="user=username password=password host=dbname.host.com port=5433 dbname=dbname connect_timeout=20 sslmode=verify-full"
```

Photo by [Ron Whitaker](https://unsplash.com/?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText)

Originally posted on [Bitsmonkey](http://bitsmonkey.in/blog/2020/11/03/golang-pq-postgre-cert)
Beauty Cosmetics App Free
Tags: uiweekly
Published: 2020-11-14 09:37:10

Beauty Cosmetics App UI Kit is designed with modern design trends. Small or large scale, suitable for all businesses that provide accommodation services. Modifying the template is quite simple.

This modern design template is easy to customize, making it even easier for you to design your next app, projects, and speed up your design workflow.

The skin-colored beauty cosmetic app design will definitely influence the end user’s mood and will capture the attention of the visitors. We have designed an attractive and functional app screen that invites the customer to discover and subsequently purchase the products by various brands.

Download Here:
https://uifreebies.net/ui-kits/beauty-cosmetics-app-free
Core Design System
Tags: design, uiweekly, ux
Published: 2020-11-14 09:35:45

Core Design System help supercharge your workflow with this design system UI Kit for Sketch, Figma, Adobe XD and Studio. Fit for projects of any scale, keep visual consistency and work faster.

Smart Layout, Auto-Updating Symbols, and nested Components. Setup once, apply everywhere. Revisions made easy.

Well Organized Text & Layers Style. A pre-defined set of styles that works on all screen sizes. Made for design consistency.

Download Here:
https://uifreebies.net/ui-kits/core-design-system
Letting bots crawl your dynamically rendered page
Tags: python, vue, seo, staticserver
Published: 2020-11-14 09:23:54

Meta tags are one of the most important aspects of a blog. In the recent years, crawlers such as from Google and Bing etc have advanced a lot, they are able to crawl pages that render content dynamically.

One important role meta plays is to give the page an identity to all the crawlers from social share sites like Twitter etc. These crawlers are not yet that advanced as to recognize dynamically rendered content.

# How do they work?

Whenever you share a post on Twitter, Facebook etc, you'll see a nice little card showing you the title of the post, some description and the cover image (possibly). Ever wondered how they are able to show that? Yep, they use the meta tags from the posts URL.

# Technically, how do they work?

All right, let's get a bit technical here, how does it actually get all that data?

Well, when you share an URL, the crawlers basically send a **GET** request to that URL and the server sends back the HTML content of the page. Once the page is received, the crawlers extract all the content from it and accordingly you see those data on your Twitter feed.

# What is dynamic rendering of content

Okay, so what is this dynamic rendering I'm talking about? In order to understand how dynamic rendering works, you need to know how the static pages work.

**You can read the full article on [here](https://blog.deepjyoti30.dev/let-bots-crawl-dynamic-page)**
How online IT certification become popular?
Published: 2020-11-14 09:16:26

IT has now become an evergreen industry and with innovations adding to this industry, every single day has also impacted the demand of IT professionals. According to surveys, a single IT professional can make up to 56000 USD in terms of salaries. These IT individuals are now required in every aspect of the business. Every new business and the existing businesses have now completely shifted to online services these days because of the pandemic. So the IT related field has become more popular and flourishes than ever.
Most of the companies have shifted workers to work remotely either from the ease of their home because of social distancing issues. This also involves the involvement of IT experts as they were required to configure and move the resources from one place to another. That's why IT certification become more in focus and many new individuals from other fields took time to take benefit by taking <a href="https://www.spoto.info/">IT certification</a> online.