teleren/devto huggingface dataset:
Building a simple landing page with Glassmorphism
Tags: html, css, design, firstpost
Published: 2020-12-12 06:44:35

Recently, there was a competition between my colleague in my workspace to design a food menu with your own ideas and creativity. Though the wirefire was given by my team lead to us. 

![Wireframe of the food menu](https://dev-to-uploads.s3.amazonaws.com/i/rvrf7x9nlucpgof667lw.png)*Wireframe of the food menu*

I am a guy which usually only code or slice the site and have no knowledge of design. So I was thinking of doing some research and learn new things from this task so I surf the internet and found about glassmorphism and decided to implement glassmorphism design style. The most defining characteristics of glassmorphism are:
* Transparency 
* Vivid colors to highlight the blurred transparency.
* Light border

Glassmorphism design style is pretty easy to achieve for front-end developers. You only need to know about the CSS property `backdrop-filter`. To create the glassmorphism effect, you should use `backdrop-filter: blur()`.
```
// HTML code
<div class="wrapper">
 <div class="card"></div>
</div>

//CSS code
* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  height: 100vh;
  background: linear-gradient(90deg, #ffda3a 6%, #f68b1e 25%, #F14444 45%, #D53567 55%, #9A109A 94%);
  display: flex;
  align-items: center;
  justify-content: center; 
}

.card {
  width: 300px;
  height: 300px;
  background: rgba(255,255,255,0.4);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.2);  
}
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/75j3rcadgovhvmlwf6al.png)*The above code output*

The landing page that I designed is shown in the image below and I have also provided the source code of my project below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w32q89w1872cudsa1ckk.png)*The food menu landing design using glassmorphism design style*

Link for source code: (https://github.com/sagarmaharjan/hantey/)
Link for github page: (https://sagarmaharjan.github.io/hantey/)

Since this is my first blog post, this post might sound boring. For those who had completed reading this post thank you very much. For those who are out there just thinking that I want to do that blah blah ..... I just wanna say *Just do it!!!!* hahaha.

Thank you!!!!!!!!!!!!!!!!
FlutterGen: Good-bye Typos!
Tags: flutter, dart
Published: 2020-12-12 06:43:52

---
title: FlutterGen: Good-bye Typos!
published: true
description: Generating boring code in Flutter
tags: flutter, dart
cover_image: https://images.unsplash.com/photo-1590637726187-edd57b196a53
---

> ⚠️ This article was deprecated. ⚠️
>
> Check out the updated full article on my personal [blog](https://marcossevilla.dev/flutter-gen).

You can find even more and keep in contact with me on my socials:

- [GitHub](https://github.com/marcossevilla)
- [LinkedIn](https://www.linkedin.com/in/marcossevilla)
- [Twitch](https://www.twitch.tv/noscopedevs)
- [Twitter](https://twitter.com/MarcosJSevilla)
- [YouTube](https://www.youtube.com/noscopedevs)
Advent of Code 2020: Python Solution Day 12
Tags: adventofcode, challenge, python, algorithms
Published: 2020-12-12 06:35:12

This is not that much hard challenge than previous day's but still it took my plenty of time. I wrote solution for part one by myself and I had to take help for part 2 from [here](https://github.com/vesche/adventofcode-2020/blob/master/day12.py), so credit goes to the author. I have updated my [Notebook]( https://github.com/q-viper/Adevent-Of-Code-2020) also.

## Part 1
```python
with open("day12.txt", "r") as fp:
    lines = [(line.rstrip()[0], int(line.rstrip()[1:]))  for line in fp.readlines()]
dirs = ["E", "S", "W", "N", "L", "R", "F"]
curr_dir = "E"

curr_state = {"E":0, "W":0, "N":0, "S":0}

for line in lines:
    if line[0] == "F":
        curr_state[curr_dir] += line[1]
    
    if line[0] == "R":
        av = ["E", "S", "W", "N"]
        angle = line[1]
        v = int(angle/90)
        ndir = (av.index(curr_dir)+v) % len(av)
        ndir = av[ndir]
        curr_dir = ndir
        
    if line[0] == "L":
        av = ["E", "N", "W", "S"]
        angle = line[1]
        v = int(angle/90)
        ndir = (av.index(curr_dir)+v) % len(av)
        ndir = av[ndir]
        curr_dir = ndir
        
    
    if line[0] == "N":
        curr_state["N"] += line[1]
    if line[0] == "S":
        curr_state["S"] += line[1]
    if line[0] == "W":
        curr_state["W"] += line[1]
    if line[0] == "E":
        curr_state["E"] += line[1]
        
d = curr_state["E"]-curr_state["W"], curr_state["S"]-curr_state["N"]
print(f"Manhattan Distance of current positions from starting i.e. {curr_state} = {d[0]+d[1]}")    
```

## Part 2
```python
# ref https://github.com/vesche/adventofcode-2020/blob/master/day12.py
import math

def rotate(origin, point, angle):
    # source: https://stackoverflow.com/a/34374437
    ox, oy = origin
    px, py = point
    qx = ox + math.cos(angle) * (px - ox) - math.sin(angle) * (py - oy)
    qy = oy + math.sin(angle) * (px - ox) + math.cos(angle) * (py - oy)
    return int(round(qx)), int(round(qy))

coord = {'x': 0, 'y': 0}
waypoint = {'x': 10, 'y': 1}
for line in lines:
    instruction, n = line
    if instruction == 'N':
        waypoint['y'] += n
    elif instruction == 'S':
        waypoint['y'] -= n
    elif instruction == 'E':
        waypoint['x'] += n
    elif instruction == 'W':
        waypoint['x'] -= n
    elif instruction == 'F':
        coord['y'] += waypoint['y'] * n
        coord['x'] += waypoint['x'] * n
    elif instruction in ['L', 'R']:
        if instruction == 'R':
            n = -n
        waypoint['x'], waypoint['y'] = rotate(
            (0, 0), (waypoint['x'], waypoint['y']), math.radians(n)
        )
abs(coord['x']) + abs(coord['y'])

```
**Lets share yours too.**
Convert console.log() to print() in javascript
Tags: print, console, javascript, python
Published: 2020-12-12 06:28:27

---
title: Convert console.log() to print() in javascript
published: true
description: 
tags: print, console, javascript, python
//cover_image: https://direct_url_to_image.jpg
---

###So, this is just tiny post about javascript  convert console.log() to print().

**As a python developer it is easy to see output by doing print() so we also using print() instance of console.log() so that we don't need to write console.log() again and again.
below the codepen `click JS to see the code and console for demo`.**
{% codepen https://codepen.io/nikhilroy2/pen/PoGbMOE %}

stay with me to get more post like this.
Thanks.
Let's support each other
Tags: programming, python, csharp, javascript
Published: 2020-12-12 06:02:32

Hello, My name is Nima. I am a programmer. I have an idea, let's support each other on social platforms! Everybody wants to gain followers and gain likes, even programmers. But what should we do? We should follow each other on social platforms and like each other tweets. You can leave your Twitter handle in a comment and I will follow you or follow me on Twitter, @nima_owji. I will follow you back! Let's support each other!

{% twitter 1337638751384776706 %}
Best Course on Statistics for Data Science to Master in Statistics-2021
Tags: datascience, machinelearning, career
Published: 2020-12-12 06:02:04

Are you looking for **Best Course on Statistics for Data Science?**, but unable to find a good resource of learning, then Don’t worry! I have chosen some of the best courses on Statistics for Data Science after filtering out hundreds of courses. 

So, give your few minutes to this article and find out the Best Course on Statistics for Data Science.

In order to become a successful data scientist or data analyst, you should have a good understanding of Statistics. Knowledge of statistics will give you an ability to decide **which algorithm is good for a certain problem.**

Statistics knowledge includes **statistical tests, distributions, and maximum likelihood estimators.** All are essential in data science.

As a Data Scientist or Analyst, you have to find **useful insights from the data**, that’s why statistics knowledge is crucial for you. Now, you may be thinking, OK fine! Statistics knowledge is required, but from where to learn?

So, if you are thinking the same, then don’t worry. I have chosen some best courses on statistics for data science. These courses will give you in-depth knowledge of statistics.

I have filtered these courses on following **criteria**-

##**Criteria-**

1. Rating of these Courses.
2. Coverage of Topics.
3. Engaging trainer and Interesting lectures.
4. Number of Students Benefitted.
5. Good Reviews from various aggregators and forums.

So, without wasting your time, let’s start finding the best statistics course for you.
**[Click to continue reading...](https://www.mltut.com/best-course-on-statistics-for-data-science/#1-statistics-with-r-specialization-coursera)**
|RESTful| RESTful: Routes
Tags: javascript, html, css, webdev
Published: 2020-12-12 05:25:15

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


           

              -Get vs. Post Request 
              -Intro to REST
              -RESTful Comments Overview

        
       

###Get vs. Post Request 
GET vs. POST 

Get is used to retrieve information, data is sent via query string, information is plainly visible in the URL, and limited amount of data can be sent. 

POST is used to post data to the server, to write, create, and update. Data is sent via request body, not a query string. Can send any sort of data (JSON). 

###Intro to REST
REST stands for representational state transfer. REST is a set of guidelines for how a client/sever should communicate and perform CRUD operations on a given resource. 

The main idea of REST is treating data on the server side as resources than be CRUDed. 

The most common way of approaching REST is in formatting the URLs and HTTP verbs in your applications. 

CRUD = Create, Read, Update and Delete 


###RESTful Comments Overview
This is the pattern of REST 


```javascript 

GET /comments - list all comments 
POST /comments - Create a new comment 
GET /comments/:id - Get one comment (using ID)
Patch /comments/:id - Update one comment 
Delete /comments/:id - Destroy one comment 

```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/g5bq70bfkby56p8m8shq.png)
Release 0.43
Tags: opensource
Published: 2020-12-12 05:19:11

# The Final

When I still work on the second issue, I found another issue to work with [https://github.com/eupn/macrotest/issues/54](https://github.com/eupn/macrotest/issues/54). This is the pull request I made. [https://github.com/eupn/macrotest/pull/57](https://github.com/eupn/macrotest/pull/57)

# Migrate from Travis CI to Github Actions

This is a rust project wants move to Github Actions. This is the draft I made. 
```yaml
name: Rust

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

jobs:
  build:

    runs-on: ${{matrix.os}}

    strategy: 
      matrix:
        rust: [stable]
        os: [ubuntu-latest, macos-latest, windows-latest]

    steps:
      - name: Checkout
        uses: actions/checkout@v2

      - name: Use stable rust toolchain
        uses: actions-rs/toolchain@v1
        with:
          profile: minimal
          toolchain: stable
          override: true

      - name: install
        if: matrix.os == 'windows-latest'
        run: |
          rustup target add x86_64-pc-windows-msvc
      - name: before script
        run: |
          rustup toolchain install nightly
          rustup component add rustfmt
          cargo install $TARGET cargo-expand
      - name: script
        run: |
          cargo build $TARGET --verbose --all
          cargo test
          cd test-project
          cargo test -- --nocapture
          cd ../test-procmacro-project
          cargo test -- --nocapture
```

There are some problems. The author wants a minimal version of rust being tested. When they use `export MSRV=1.34.0`, but it not working on windows in github action. I am working on something similar to handle this issue. The potential solution could be use `set MSRV=1.34.0` in windows.
Don't worry guy's ! I got a mail . 
Tags: swage
Published: 2020-12-12 04:50:31

Hi  ,
Thank you for reaching out!  Your order has not shipped out yet; we are continuing to ship swag out as quickly as possible over these next few weeks.  Once your swag has been shipped you’ll receive a new email from us that will include the tracking information.  Please keep in mind that the swag is being shipped in a random order so you may get yours before others, or they may get theirs before you get yours.  Swag can take a month or more to arrive for international orders, in part due to delays caused by the ongoing pandemic and the extreme increase in shipments going out worldwide due to the holidays.  

Due to COVID-19 there are an extremely large number of shipments moving through India customs at this time which may further delay delivery on your Hacktoberfest 2020 order by several weeks. Unfortunately it will be difficult to pinpoint an exact delivery date due to the pandemic and supply chain disruptions. Thank you for your patience!

Best,
Win10: disable devices that wake PC
Published: 2020-12-12 04:09:03

Open powershell as admin

Enter command: 
`powercfg /devicequery wake_armed | ForEach{ powercfg /devicedisablewake $_ }`

You will get back: 
`Invalid Parameters -- try "/?" for help`

To verify, enter command: 
`powercfg /devicequery wake_armed`

You will get back (it means all devices have been disabled): 
`NONE`

You're all set!

Source:
https://superuser.com/questions/1320578/prevent-all-devices-from-waking-my-computer

You can disable all devices from waking your computer with powershell -Command "powercfg /devicequery wake_armed | ForEach{ powercfg /devicedisablewake $_ }".
In cmd, you can run powercfg /devicequery wake_armed to get a list of the devices that are currently allowed to wake up your computer.
Functions in Python
Tags: python
Published: 2020-12-12 04:06:45

When we are coding usually see many task repited, that is not a problem but we will have a long code in the future, that can be not readeable or pretty.

For this reason the programing languages include functions, a function is a block of code that perform a especific task, this can receive one or more arguments and work with these for internal operations, all functions return a value.

Example :

```python
user1_name = 'Juan'
user1_age = 23

user2_name = 'Pepe'
user2_age = 18

#Define function and parameters
def gretting(name, age): 
 	#Task to perform
	print (f'Hi, your name is {name}')
	print (f'Hi, your age is {age}')

# call the function with 2 arguments (user1)
gretting(user1_name, user1_age) 
# call the function with 2 arguments (user2)
gretting(user2_name, user2_age) 


output : 

Hi, your name is Juan
Hi, your age is 23
Hi, your name is Pepe
Hi, your age is 18
```
Know your goals
Tags: gamedev
Published: 2020-12-11 21:51:38

Know your goals 
IN our life aim is one thing for whom we are trying to reach, and it is the only final destination of our life’s travel.
IF we don’t know where we are going then surely believe that we will vanish in this dark world which is full of monsters, because if we travel without knowing the destination (Ending point)
We go nowhere.
“Philip MC Grew” 
		  : Says in his book “life strategies ” that if you are unable to explain your destination then believe me you can’t achieve it.
No dream will become true until we go for it Until we don’t know what we want to do? What is the purpose of our life?
EX:
	A writer finds any topic/title actually it the half story that he makes in his mind, he makes a purpose in his mind for thinking and collecting ideas and thoughts for it than that single thought will be the complete story or book.
The same way other tasks can’t be completed without working for them.
That’s why it is necessary to have a purpose in life, so as soon as we can achieve it.
It is necessary to courage the children as they can know their aim of life, as before going to school or college they should have any special purpose of their life as they start collecting ideas and related thing to their aims.

“Allah Talla has nothing done specially for that person he who don’t think for success or he is unaware about his aim of life because aim/dream is the initial point for being the successful person. (T.T. Munger)

Think for a while that there is a student who has recently completed his secondary and about to go to college and he doesn’t know that what will he be? Or what he wanted to be?
Means Doctor, Teacher, Engineer, Judge, Lawer or any other professional person, etc.
Does he work hard without knowing the purpose of his life what will he do?
It is big success to set a goal for life. Look at successful peoples around yourself and notice how they had set their goals, how they worked hard, and know-how they are living their life.
There is no doubt if you work hard you will be successful in your life.

Some Key Point
Being a successful person it is necessary for you to set the goals for your life.
Making the decision of goals should be part of your planning.
Think about high achievements and there is no doubt that you will be successful.
As soon as you make the decision on a goal it will save your time and power for achieving it.
Work hard to achieve your goals, for achieving your goals you should remember your goals.
Selecting targets will help you to achieve your goals.
media attribute in link tag
Published: 2020-12-12 03:32:07

Why is media attribute written inside the link tag in html markup? Is it necessary to use media attribute in link tag to create a responsive website? Isn't CSS written using @media (max-width: 1100px) in a CSS file without writing the media attribute? Is it necessary to use @media (max-width: 1100px) in CSS file even after writing media attribute in link tag?
What Are Truthy and Falsy in JavaScript?
Tags: javascript
Published: 2020-12-12 03:03:55

If you write JavaScript, you've probably heard values called truthy and falsy before. But what do truthy and falsy mean and what values are considered each?

## Definitions
**Truthy** values are values that can be [coerced](https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion) to `true` in a Boolean context, like an `if` statement. **Falsy** values are considered `false` in a Boolean context. That means that a value is truthy if it causes an `if` block or `while` loop to execute, for example.

## Truthy and Falsy Values

### Falsy

There are eight falsy values in JavaScript: `false`, `0`, `-0`, `0n`, `""`, `null`, `undefined`, and `NaN`.

### Truthy

Truthy values are a little easier to remember: all values that are not falsy are truthy.

Here are some examples of truthy values: `true`, `42`, `-42`, `{}`, `"false"`, "0", and `new Date()`.

If you're ever curious if a value is truthy or falsy, here's a short and simple function to help you out:

```javascript
const isTruthyOrFalsy = (value)  => value ? 'truthy' : 'falsy'
```

## Conclusion

Simply put, truthy values are `true` in a Boolean context and falsy values are `false` in a Boolean context. Hopefully this post helps you understand JavaScript values a little better. 

## References and Further Reading

* [MDN | Truthy]()
* [MDN | Falsy]()
* [MDN | Type coercsion](https://developer.mozilla.org/en-US/docs/Glossary/Type_Conversion)

<hr>

## Let's connect

Thanks for reading! If you found this post helpful, come connect with me on [Twitter](https://twitter.com/zach_snoek), [LinkedIn](https://www.linkedin.com/in/zach-snoek-5b327b179/), and [GitHub](https://github.com/zachsnoek)! You can also [subscribe to my mailing list](https://mailchi.mp/2df4b6d5458f/signup-page) and get the latest content and news from me.
Why is my title shrink when I put it in a div?
Tags: css, html, webdev, help
Published: 2020-12-12 02:58:47

I have:
```html
<!-- Header -->
<h1 style="/*positioning*/">
    Test.
</h1>
<!-- Subheader -->
<h2 style="/*ditto*/">
    Subheader.
</h2>
```
But, instead of wanting to use separate `body`-level elements, I want to use a `div`, since I'm guessing that's better (in terms of design).
So I try:
```html
<div style="/*positioning*/">
    <h1>
        Test.
    </h1>
    <!-- etc... -->
</div>
```
but, my header that says "`Test`" is smaller inside of my div(???).

This is my CSS:
```css
/* Set default properties for the page style. */
html {
	font-family:"Arial", "Roboto", "Comic Sans", "Comic Sans MS";
	font-weight:bold;
}
button {cursor:pointer, default; cursor:pointer;}
			
			
/* Make elements fit their content. */
body, body * {
	/** Height. **/
	/* Maximum. */
	max-height:fit-to-content;
	max-height:-webkit-fit-to-content;
	max-height:-apple-fit-to-content;
	max-height:-moz-fit-to-content;
	max-height:-ms-fit-to-content;
	max-height:-o-fit-to-content;
	
	/* Minimum. */
	min-height:fit-to-content;
	min-height:-webkit-fit-to-content;
	min-height:-apple-fit-to-content;
	min-height:-moz-fit-to-content;
	min-height:-ms-fit-to-content;
	min-height:-o-fit-to-content;
	/** /Height. **/
	
	
	
	/** Width. **/
	/* Maximum. */
	max-width:fit-to-content;
	max-width:-webkit-fit-to-content;
	max-width:-apple-fit-to-content;
	max-width:-moz-fit-to-content;
	max-width:-ms-fit-to-content;
	max-width:-o-fit-to-content;
	
	/* Minimum. */
	min-width:fit-to-content;
	min-width:-webkit-fit-to-content;
	min-width:-apple-fit-to-content;
	min-width:-moz-fit-to-content;
	min-width:-ms-fit-to-content;
	min-width:-o-fit-to-content;
	/** /Width. **/
	
	
	
	white-space:nowrap;
	position:absolute;
	display:inline-block;
}
body * * {
	position:relative;
}
	

/* Set font sizes. */
h1 {font-size:1.75vw;} h2 {font-size:1.25vw;} h3 {font-size:1vw;}


/* Make hyperlinks flush with other text. */
a {
	text-decoration:none;
	color:inherit;
}



/* Dark mode. */
.dark-mode {
	background:#0f0f0f;
	color:#fefefe;
}

/* Light mode. */
.light-mode {
	background:#fefefe;
	color:#000000;
}
```



Thanks!
Cheers!