teleren/devto huggingface dataset:
Tailwind CSS Window Mockup Light/Dark
Tags: css, html, webdev, tailwindcss
Published: 2020-12-27 08:54:25

Hey there, 👋
Here is a Window Mockup built with **[tailwind CSS](https://tailwindcss.com/)**

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

> ⭐ I've also included the new *Dark Mode* feature in Tailwind, so you only need to add the `dark` class to the parent element or the `HTML tag of your document to turn the dark mode on, you can also move the transition classes to your `HTML tag.

⚠ This behavior is triggered by using the `class` option in your tailwind config file, other methods are described in [Documentation](https://tailwindcss.com/docs/dark-mode)

```js
// tailwind.config.js
module.exports = {
  darkMode: 'class',
  // ...
}
```

```html
<div class="max-w-2xl transition-colors ease-linear shadow-md">
    <div class="w-full h-12 rounded-t-lg bg-gray-200 dark:bg-gray-900 flex justify-start items-center space-x-1.5 px-4">
        <span class="w-3 h-3 border-2 border-transparent dark:border-red-400 rounded-full bg-red-400 dark:bg-transparent "></span>
        <span class="w-3 h-3 border-2 border-transparent dark:border-yellow-400 rounded-full bg-yellow-400 dark:bg-transparent"></span>
        <span class="w-3 h-3 border-2 border-transparent dark:border-green-400 rounded-full bg-green-400 dark:bg-transparent"></span>
    </div>
    <div class="bg-gray-100 dark:bg-gray-700 border-t-0 w-full h-96 rounded-b-lg"></div>
</div>
```

## **Thank You** ❤️
I wish my posts to be useful to anyone who's new to the world of web development, programming, or anybody who's curious 🧐!

If you find the content useful to you, please comment your thoughts, I would love to learn from you all.

Thank you for your loving directions.
Using Image background Over Text
Tags: css, html
Published: 2020-12-27 07:21:05

Learning and understanding the myth about the webDeveloping is the way to upgrade the skills in the web and as we use our tech skills to improve and let others to understand how the things are organized in a way can help who has not explored yet.

Today we'll be learning about CSS property which will help us with ease. We might have heard the therm but haven't used yet. 'Background-Clip-text, which can be very useful with the text, we use text-shadow often but using the background-clip can make text even more beautiful. For chrome users instead of using background-clip use -webkit-background-clip and play through the text.

Code: 

<html>
  <head>
    <title>Adding Image to background over Text </title>

    <style>

    	h1{
      background-image:url('https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg');

      -webkit-background-clip: text;
      color:transparent;

      padding:10px;
      }
    </style>

  </head>

  <body>

    <h1>
     Learning and sharing knowledge is the best thing in the world

    </h1>

  </body>

</html>


As this is my first article if found any mistake please help me to improve it. I hope you found this article useful.
Nullish Coalescing Operator ??
Tags: javascript
Published: 2020-12-27 06:30:44

Have you ever seen the double question mark operator in javascript??

It can be used like this

```javascript
const firstName = null;
const lastName = null;
const nickname = null;

console.log(firstName ?? lastName ?? nickname ?? "anonymous")
// => "anonymous"
```

The console did not log null from the first 3 variables, but the last one. This is because the Nullish Coalescing Operator will output the first defined value. The 3 variables we defined are set null so they are all faulty and have no value. 

This looks like it is similar to another operator we have that looks like this "||". The OR operator almost does the same thing but the first TRUTHY value. As opposed to the Nullish Coalescing Operator returns the first DEFINED value. 

Review our list of Falsy Values:
1. false
2. 0
3. -0
4. 0n
5. ""
6. null
7. undefined
8. NaN

When looking at `a ?? b` if a is defined with a value, then we will get "a", otherwise we will return b.

```javascript
const a = 0;
const b = 1;
console.log(a ?? b)
// => 0
```
The value of a is returned here since we defined a with the value 0. If this was using the OR operator
```javascript
const a = 0;
const b = 1;
console.log(a || b)
// => 1
```
a is defined with a faulsy value so we will get retrned the value of b.
Publish Latest Dev.To Post to Portfolio Site
Tags: portfolio, graphql, webdev, netlify
Published: 2020-12-27 06:21:47

"*We are one*", says [wizlee.dev](https://wizlee.dev) to [dev.to/wizlee](https://dev.to/wizlee).

That's 'humanification' of my portfolio site after gaining the ability to list my posts from dev.to ;)

Due to the ground work done in Ema Suriano's [gatsby-starter-mate](https://github.com/EmaSuriano/gatsby-starter-mate), after the work done in the previous post only the following are needed:
1. Get data from GraphQL query using Gatsby's [useStaticQuery](https://www.gatsbyjs.com/blog/2019-02-20-introducing-use-static-query/). 
2. Add empty response in case there's no user defined in Contentful CMS. 
3. Replace the original Medium posts integration with Dev posts mainly by modifying `src/sections/Writing.ts` & `src/components/Post.ts`

Next up, figuring out how to trigger Netlify deploy when a new dev article is posted!
Stupid but common security vulnerability in web app 
Tags: api, rest, security
Published: 2020-12-27 05:02:54

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w2t51lq0s8y6g9o52b3a.png)
###### Image from https://www.irasutoya.com/

I can't remember how many times I see this security vulnerability. When we design REST API, we usually put some IDs in URL. For example, we have a REST API returning user profile.

```
GET /users/1234
```

There is nothing wrong with the design. The problem is people forgetting to check the ID in the URL against the ID in the cookie or JWT. It means that even I log in as user `1234`, I am able to get the profile of user `7890`.

There is another case when we have multiple IDs in URL. Just like a REST API returning transaction details.

```
GET /users/1234/transactions/123-456-789
```

It is not enough to check user ID only. I can do something like this. 

```
GET /users/1234/transactions/987-654-321
```

`987-654-321` is the transaction ID not belonging to user `1234`. We must check the ownership or access permission of the item.

Things can go further complicated if we allow some users (e.g. staff, admin) to access other users' information. But I don't want to talk about it here.

I heard people arguing that user is not able to access URL containing other user ID through the **FRONTEND**, so it is safe not to check. But of course, we all know a simple curl command can do it.

**CHECK ANYTHING FROM FRONTEND**

To be more defensive, we can simply not putting user ID in URL and let the backend to get the ID from the cookie.

```
GET /users
```

But for the item ownership case, we can't use this trick.

Of course, if you want to apply load balancing or analysis based on URL, this design is not good for you too.

This vulnerability is really stupid you may think. I think so too. But we can also see this problem from another point of view.

Usually we have multiple layers in our system. It is common to have a web layer handling traffic from internet and a service layer handling the business logic and talking with the database.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/85sb57emruo93fxdbz6m.png)
###### Image created with https://excalidraw.com/

So who should check the permission? Web layer? Service layer? There is no standard answer.

Reviewing design is also important because you may start from a single team to multiple teams or system design is changed.
Changing domain name? Ultimate Checklist is here. 
Published: 2020-12-27 04:57:17

If you are changing the domain name for your website, here is the ultimate checklist to follow.


  [ ] Buy Domain name early
  [ ] Setup DNS to direct to your host.
  [ ] Setup MX record if your sending emails.
  [ ] Change the links in your website.
  [ ] Change links in your emails.
  [ ] Setup 301 redirect for your old domain name.
Firefox clip-path editor
Tags: css
Published: 2020-12-27 04:48:01

Something my default browser Chrome doesn't have is a cool clip-path editor.
Something Firefox does come with, and it can be super helpful to guide you through making cool shapes with clip-path CSS.

The tool can be used to create new clip-paths from scratch or modify existing ones.

It looks like this:

![Using Firefox clip-path editor](https://cdn.hashnode.com/res/hashnode/image/upload/v1608660230167/Q01xs05jh.gif)

## Firefox clip-path editor

To find the clip-path editor we simply have to open the developer tools:

- **Mac**: `Shift` + `⌘` + `J`
- **Windows/Linux**: `Shift` + `CTRL` + `J`

Then you can inspect an element that has a clip-path and click the little square image.
This will highlight the clipping points on your element.

![Firefox finding the clip-path editor](https://cdn.hashnode.com/res/hashnode/image/upload/v1608659804268/iVrS_29uP.gif)

## Firefox adding a new clip-path

The editor can not only edit existing clip-paths but also create ones from scratch which can be helpful!

To do so, click the element and add the clip-path code to it.

![Firefox new clip-path](https://cdn.hashnode.com/res/hashnode/image/upload/v1608660078587/BFwoUgyvE.gif)

As you can see it can be super useful to generate or modify clip-path.

Let's hope Chrome decides to build this in soon!

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Golang basic: how to use array and implement it
Tags: go, tutorial
Published: 2020-12-27 04:36:14

Train to busan, run from zombie in the train. you have 11 wagon and it is an array. Array is a data type but is have more than one values but have maximum space.

Imagine you're in a train looking for your seat suit to your ticket and then "Yiaaah" you get the it and sit on.
Yeah like the illustration, array is similar, have maximum seat and have order of seat. array order is start from ``0`` to ~~hero~~ ``maximum space``.

``{0,1,3,4,...,100,1001}`` is order of array, so if a seat that anyone person not there, the seat is still be there not disappear.   

## How to declare array
``` golang
package main

import "fmt"

func main() {
    var values [10]int
    values = [10]int{0,1,2,3,4,5,6,7,8,9}
    fmt.Println(values)

    // Or
    values2 := [10]int{0,1,2,3,4,5,6,7,8,9}
    fmt.Println(values)
}
```
``[10]int``, ``10`` is space maximum of array and ``int`` is data type in the array.
but what will be happen if we assign value more than 10?
``` golang
package main

import "fmt"

func main() {
    values := [10]int{0,1,2,3,4,5,6,7,8,9,10} 
    // array index 10 out of bounds [0:10]
    fmt.Println(values)
}
```
Yeah you get the answer.
## Assign data to array
How we assign data to array? there is a simple way to do that, lets we write code below.
```golang
package main

import "fmt"

func main() {
    var values [20]int

    values[4] = 5
    values[19] = 10

    fmt.Println(values)
}
```
You can see in console the result is 
``[0 0 0 0 5 0 0 0 0 0 0 0 0 0 0 0 0 0 0 10]`` it will just store in the index, so if you want to place it in index 5, it will be there.
## Multidimensional Array
Yeah train have row and column but what if we want to convert it to an array? we can write it as.
``` golang
package main

import "fmt"

func main() {
    seats := [4][4]string{
        {"A1","A2","A3","A4"},
        {"B1","B2","B3","B4"},
        {"C1","C2","C3","C4"},
        {"D1","D2","D3","D4"},
    }

    for i, item := range seats {
        for j, it := range item {
            fmt.Printf("[%d,%d]:%s ",i,j,it)
        }
        fmt.Println()
    }
}
```
## Conclusion
Now you can write array type. array is not just int but you can write it as string, bool, or array inside array.

Question: can we change value of array?
A few Python Definitions 
Tags: python
Published: 2020-12-27 04:22:26

As you begin on your Python journey, some of the jargon can be overwhelming, especially if Python is your first foray into the programming world. Here you'll find a few terms and definitions you'll encounter as your Python career progresses.

**Data type:** You'll hear this term commonly; Used to refer to different different types of data (hard not to use the word to describe itself), some examples include **str, int, list, tuple, set, dict, bool**.

**Variable:** Used to store different data types. Variables are case sensitive, uses "snake_case" or "camelCase" when naming the variable (though this is debated, feel free to use what you're comfortable with and use it consistently). There are restrictions when naming a variable, such as variables cannot start with a number, use one of the reserved keywords, or contain spaces to name a few.

**Object:** A collection of data and methods.

**Function:** A block of code that can perform an action as many times as necessary. Able to interact with different variables and user input. Needs to be called. 

**Method:** A Function that "belongs" to an object and is used to interact with said object in some way.

**str:** String, a piece of text. Written with quotations, single dash (' ') or double dash (" "). Rule of thumb with quotations - pick a style and be consistent with it.

**int:** Integer, a number data type. int will return whole numbers.

**float:** Floating point number, will return numbers as decimal.
![Whole vs Decimal](https://dev-to-uploads.s3.amazonaws.com/i/ou75hs5rxdqyhv29or6i.png)

**list:** Ordered sequence of objects. Written with brackets [ ]. Able to store different data types. List are mutable, meaning the objects can be modified/replaced, and their order to changed. Closest to an array as you can get with Python.
![Lists](https://dev-to-uploads.s3.amazonaws.com/i/085uqqxdhjeztdrozrhn.png)

**bool:** Boolean, simplify meaning True or False. Important to remember that False == 0 and True == 1 (note the 0 and 1 are NOT strings). 
![Booleans](https://dev-to-uploads.s3.amazonaws.com/i/tnrtrhlk06x7xxreylcb.png)

These are only a *fraction* of terms you'll come across in your Python career. You'll notice there are some terms that I listed earlier but didn't give a definition, even in the list screenshot there are some terms used I didn't even mention (class, type(), print).

Take this time to practice your Google-Fu and hunt down the meaning of those terms and even expand on the terms above. Searching for issues/problems while coding comes with the territory, because nine times out of ten someone else had the same problem you're having.

Happy coding!
|Express| Session
Tags: javascript, html, css, webdev
Published: 2020-12-27 04:08:59

---
title: |Express| Session 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                      -Introduction to Sessions 
                      -Express Session
          


###Introduction to Sessions 

https://www.npmjs.com/package/express-session

at the terminal
```javascript

npm install express-session

```
Sessions are server-side data storage that is used to make HTTP stateful. Instead of storing data using cookies, data is stored on the server-side and then send the browser a cookie that is used to retrieve the data. 


HTTP is a stateless protocol, therefore cookies and sessions are used to make HTTP stateful. 


###Express Session

```javascript 

const express = require('express'); 
const app = express(); 
const session = require('express-session'); 

app.use(session({ secret: 'thisisthesecret' })); 

app.get('/viewcount', (req, res) => {
  if (req.session.count) {
      req.session.count += 1; 
  } else {
      req.session.count = 1;
}
  res.send(`You have viewed the page ${req.session.count} times`)
})

app.listen(3000, () => {
   console.log('Listening on port 3000'); 
})

```


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/k2rs8kkw7rqd1oegvbiw.png)
|Express| Router and Cookies
Tags: javascript, html, css, webdev
Published: 2020-12-27 04:08:09

---
title: |Express| Router and Cookies
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---

                       -Express Router Intro 
                       -Express Router and Middleware
                       -Introducing Cookies
                       -Sending Cookies
                       -Cookies Parser Middleware
                       -Signing Cookies


###Express Router Intro 


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

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




###Express Router and Middleware


```javascript 

const express = require('express'); 
const router = express.Router(); 

router.get('/', (req, res) => {
   res.send("All dogs")
})
router.get('/:id', (req, res) => {
   res.send("Viewing one dogs")
})
router.get('/:id/edit', (req, res) => {
   res.send("Editing one dogs")
})
module.exports = router; 

```

express router is used to break up the code into separate files, like little pieces. It may be easier to put middleware between the smaller routes as well. 


###Introducing Cookies

Cookies are bits of information that are stored in a users browser when browsing a website. 
Once a cookie is set, a user browser will send the cookie on every request to the site. 
Cookies allow use to make HTTP stateful. It is just a key and a value pair. 
Cookies are used to remember information about some user and to show relevant content to a user. Cookies are a unique identifier for a specific user. 


###Sending Cookies

Using express to set a cookie or to retrieve cookies from an incoming request 

```javascript 

const express = require('express'); 
const app = express(); 

app.get('/greet', (req, res) => {
  res.send("welcome")
 }

app.get('/setname', (req, res) => {
   res.cookie('name', 'stevie chicks');
   res.send('Cookie sent'); 
})

app.listen(3000, () => {
  console.log("Serving"); 

```

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



###Cookies Parser Middleware
This will parse cookies within express. 

https://www.npmjs.com/package/cookie-parser

to install at the terminal

```javascript 

npm i cookie-parser 

```
then add this line of code 

```javascript
const cookieParser = require('cookie-parser');
app.use(cookieParser()); 

```


###Signing Cookies

Signing cookies is about making sure that the original data that was sent to the client browser is still the data that is being sent back to the server. Cryptography is used to ensure the integrity of the signed cookie data.
|YelpCamp| Adding The Reviews Model
Tags: javascript, html, css, webdev
Published: 2020-12-27 04:07:10

---
title: |YelpCamp| Adding The Reviews Model 
published: true
description: 
tags: javascript, html, css, webdev
//cover_image: https://direct_url_to_image.jpg
---
                    -Defining The Review Model 
                    -Adding The Review Form 
                    -Creating Reviews 
                    -Validating Reviews 
                    -Displaying Reviews
                    -Styling Reviews
             

###Defining The Review Model
This is the ability to add in a form for a new review. 


Basic schema for review form 
```javascript 

const mongoose = require('mongoose'); 
const Schema = mongoose.Schema; 

const reviewSchema = new Schema({
   body: String, 
   rating: Number
 }); 

module.exports = mongoose.model('Review' reviewSchema); 

```


###Adding The Review Form 
Modifiy the show.ejs file 

add 

```html 
<form action="">
<div class="mb-3">
  <label class="form-label" for="rating">Rating</label>
  <input type="range" min="1" max="5" name="review[rating]" id="rating">
  <textarea class="form-control" name="review[body]" id="body" cols="30" rows="10"></textarea>


```
Leave a review 



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


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


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





###Creating Reviews 
Creating the reviews route 

```javascript 
 app.post('/campgrounds/:id/reviews', catchAsync(async(req, res) => {
  const campground = await Campground.findById(req.params.id);
  const review = new Review(req.body.review); 
  campground.reviews.push(reviews);
  await review.save();
  await campground.save(); 
  res.redirect(`/campgrounds/${campground._id`);
}
)); 

```


###Validating Reviews 
Adding in client-side validation 

within the schemas.js 
add 

```javascript 
module.exports.reviewSchema = Joi.object({
   review: Joi.object({
      rating: Joi.number().required(), 
      body:  Joi.string().required()
  })

 })

```

###Displaying Reviews

Within show.ejs 
add 

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

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

###Styling Reviews
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/779zz7oxtaa9mggwjf8v.png)
GCP — Migrating Teradata to BigQuery
Tags: database, googlecloud
Published: 2020-12-27 03:36:41

* Create a Teradata source system running on a Compute Engine instance
* Prepare the Teradata source system for the schema and data transfer
* Configure the schema and data transfer service
* Migrate the schema and data from Teradata to BigQuery
* Translate Teradata SQL queries into compliant BigQuery Standard SQL

More Details: 

https://iamvigneshc.medium.com/gcp-migrating-teradata-to-bigquery-a655c44b2dbd

{% github https://github.com/IamVigneshC/GCP-Migrating-Teradata-to-BigQuery %}

<BR/>
<BR/>
<BR/>
<BR/>
PS: Sorry, couldn't repost here since there are some incompatible MD codes. Thank you!
GCP-BigQueryML ForecastingModel
Tags: machinelearning, googlecloud
Published: 2020-12-27 03:23:46


• Use BigQuery to find public datasets

• Query and explore the public taxi cab dataset

• Create a training and evaluation dataset to be used for batch prediction

• Create a forecasting (linear regression) model in BigQuery ML

• Evaluate the performance of your machine learning model.


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


More Details: 

{% github https://github.com/IamVigneshC/GCP-BigQueryML-ForecastingModel %}


<BR/>
<BR/>
<BR/>
PS: Sorry, couldn't repost here since there are some incompatible MD codes. Thank you!
Automate EVERYTHING with Ansible!
Published: 2020-12-27 02:58:15

Ansible.  Need I say more?  Well, maybe, if you've never heard of it. Ansible is a simple IT / DevOps automation that anyone can use.  You can Automate anything with an SSH connection and WITHOUT installing any agents or clients. Join me as we set up, configure and start automating with Ansible!

{% youtube w9eCU4bGgjQ%}