teleren/devto huggingface dataset:
Lists/array
Published: 2021-02-28 15:10:46

I am going to writing about the most used data structure list/array's. if you don't know what is a data structure, don't worry, I will explain.

we know that on the computer we just play with data. we can not think without data. we can not do anything without data. 
watching movie? these are data. text is a data, image is data even number or string are also a data.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21v8co8tpp6o2rzt896z.jpg)

The programmer's duty is to solve the problem by using data. to easily solve the problem programmers need to structure their data in many ways.
list/array one of them.

previously we had known, how to assign data in a variable.
in python language we assign data 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/teiwdiz9m7z8gv1qucfl.png)
like this.
suppose we have a country variable and have to assign all the city's names under the country. what we're gonna do.

in this situation, we have to use the list/array's structure.

example:
country = ['city1','city2','city3'] --> this is list's.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9jni5hnc8hw63tycefwa.png)

you can see in the picture the index starts at 0.
remember this in the list count from zero 0.
if you want to print city1 from the country list. you should define index number 0.

print(country[0])

the result will print city1.

there have some methods on the list.
 these are --> append,pop,reverse,sort etc.
if you want to add another city to the country list you can do this by using the append method.
example:
 country.append('city4')
print(country)

city4 will be added to the last of the country list.

if you want to delete the last index of the country you can do this by using the pop() method.
example:
 country.pop()
print(country)

in python language, there have many list methods. and these are easy to use. that's why I don't explain all.
go google and search to write list method in python. you will get lots of resources.

whatever, don't forget to do googling...

this is for today. 
thanks for reading.
Distort Text (BlotterJS)
Tags: javascript, 100daysofcode, css, html
Published: 2021-02-28 15:09:11

The day 70 of challenge #100DaysOfcode 

Distor Text Using BlotterJS

Demo : https://distort-textjs.netlify.app/

Code : https://github.com/saidMounaim/100DaysOfCode/tree/main/Day70
Using Google Fonts in a Tailwind project
Tags: tailwindcss, css
Published: 2021-02-28 14:58:02

Many websites leverage Google Fonts to introduce cool and unique fonts to a website.
And fonts can make or break you're website. Let's take a look at how we can introduce a Google Font into the [plain HTML Tailwind starter](https://daily-dev-tips.com/posts/plain-html-starter-with-tailwind-css/)
we made yesterday.

> If you're looking for any project, check out my article on [how to use Google Fonts](https://daily-dev-tips.com/posts/how-to-use-google-fonts/)

For Tailwind, the process is similar, but we'll use some handy features of the Tailwind config.

The end result will look like this:

![Custom Google Font in Tailwind CSS](https://cdn.hashnode.com/res/hashnode/image/upload/v1614061248074/YW0J-X1g2.png)

## Loading a Google font

First of all, head over to [Google Fonts](https://fonts.google.com/) and find a cool font you want to use.

Open up the font and click the "Select this style" button for each style you like.

![Select Google Font style](https://cdn.hashnode.com/res/hashnode/image/upload/v1614060531226/KCKUtaP8N.png)

With it selected, you'll get a sidebar on the right showing the `<link>` attribute for it.
Copy this link method.

Now head back to your project and open the `index.html` file. We'll place this import above our styles.css file.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- other stuff -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
</html>
```

> Note: The second link is specific to the font you picked.

## Making the Google font available in Tailwind

Now let's extend our Tailwind theme to have it know about this font.

Open the `tailwind.config.js` file and extend the theme's fontFamily option.

```js
module.exports = {
  theme: {
    extend: {
      fontFamily: {
        'press-start': ['"Press Start 2P"', 'cursive']
      }
    }
  }
};
```

If your font like this example uses spaces, it's best to use the double escape `'"` it will make sure it's used in the right way.

Our font will now be available as `font-press-start` we can add this to our heading on the homepage like this:

```html
<h1 class="text-6xl font-press-start">Welcome</h1>
```

And that will render the following:

![Google font loaded in Tailwind](https://cdn.hashnode.com/res/hashnode/image/upload/v1614061094307/2RwZtsAH_.png)

You can find this full code on the following [GitHub repo](https://github.com/rebelchris/HTML-Tailwind-Starter/tree/google-fonts).

### 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)
How I went from 12HR+ of Screen Time to less than 4HR!
Tags: mentalhealth, productivity, javascript, career
Published: 2021-02-28 14:48:33

## Backstory
Last year I was on my phone all-day. I could not be with my phone for just 5 mins. 

12HR+ Just imagine half of my day. I was so much addicted to it.

I was waking up and the first thing I would do is pick up my phone and scroll for hours before getting up from the bed. 

This is was the highest daily average. I was on my phone. 13HR+ in a day!!
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7mcbutzye2zxgaqp4jip.jpg)
91HR+ in a week!

All I was doing is playing games, scrolling through Instagram, YouTube, and stuff like that. I was so depressed. There was not a single thing I was doing productive on the phone.

I wanted to change myself and get rid of this addiction.

## How I got rid of this addiction
I was/am a big fan of  [Matt D'Avella](https://www.youtube.com/c/MattDAvella/featured). He is a YouTuber. You might have watched some of his videos.

He posted this video  [Why I'm downgrading to a flip phone.](https://youtu.be/4nX5jwa2QTs) just when I was ready to make a move to get rid of this addiction. 

It was about downgrading to a flip phone for 30 days and not using a smartphone.

I started the challenge on November 1st, 2020 but I wasn't gonna use even a flip phone. I thought how could I go without a phone for 30 days straight I am so dependent on my phone.

But I somehow gave it go. 

## How did I spent those 30 days without the phone
So, 1st day in and I was so bored. I had so much time. I somehow had to spend those 12HR+ on other things.

As 1st week went I was doing pretty good. I was surprised that I wasn't getting any urges of using my phone.

I started doing more productive things. 

Sharpened my HTML/CSS skills with all the time I had.

## After 30 days
I finally completed 30 days without using the phone. I could not believe myself. From more than half of the day on phone to 0 hours.

1st day after the challenge I used my phone. But I couldn't use it for too long. 

It's hard to explain but my brain was like pushing me to not use my phone. 

I was so proud of myself.😍

Now, I just have an average screen time of less than 4HRS in a day
![Screenshot_20210228_172552.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1614516151841/ehAPQfU5u.jpeg)
 
Now, I'm learning a ton of stuff with the free time I have every day. So happy I took that challenge. 

Everyone should do this challenge once if they feel addicted to their phone. I bet you'll get rid of this addiction too.

I hope this was helpful to everyone♥
Day 62 Of 100DaysOfCode: Add a Subquery To The SELECT Clause
Tags: womenintech, codenewbie, 100daysofcode, beginners
Published: 2021-02-28 14:42:53

This is my 62th day of #100daysofcode and #Python learned. Like yesterday today also continued to learned SQL's properties from [Datacamp](https://campus.datacamp.com/courses/intermediate-sql/short-and-simple-subqueries?ex=9). Also learned more about algorithm from Algorithmic Toolbox.
#Add a subquery to the SELECT clause
Subqueries in SELECT statements generate a single value that allow to pass an aggregate value down a data frame. This is useful for performing calculations on data within our database. In the following code, we will construct a query that calculates the average number of goals per match in each country's league.
```python
SELECT 
	l.name AS league,
    -- Select and round the league's total goals
    ROUND(AVG(m.home_goal + m.away_goal),2) AS avg_goals,
    -- Select and round the average total goals
    (SELECT ROUND(AVG(home_goal + away_goal),2) 
     FROM match
     WHERE season = '2013/2014') AS overall_avg
FROM league AS l
LEFT JOIN match AS m
ON l.country_id = m.country_id
-- Filter for the 2013/2014 season
WHERE m.season = '2013/2014'
GROUP BY l.name;
```
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Day 62 Of <a href="https://twitter.com/hashtag/100DaysOfCode?src=hash&amp;ref_src=twsrc%5Etfw">#100DaysOfCode</a> and <a href="https://twitter.com/hashtag/Python?src=hash&amp;ref_src=twsrc%5Etfw">#Python</a> <br>* Algorithmic Toolbox<br>* SQL(Add a subquery to the SELECT clause) from [Datacamp](<a href="https://t.co/RHm2OCSMY9">https://t.co/RHm2OCSMY9</a>)<a href="https://twitter.com/hashtag/WomenWhoCode?src=hash&amp;ref_src=twsrc%5Etfw">#WomenWhoCode</a> <a href="https://twitter.com/hashtag/CodeNewbie?src=hash&amp;ref_src=twsrc%5Etfw">#CodeNewbie</a> <a href="https://twitter.com/hashtag/beginner?src=hash&amp;ref_src=twsrc%5Etfw">#beginner</a> <a href="https://twitter.com/hashtag/DEVCommunity?src=hash&amp;ref_src=twsrc%5Etfw">#DEVCommunity</a> <a href="https://t.co/foe5s469ye">pic.twitter.com/foe5s469ye</a></p>&mdash; Durga Pokharel (@mathdurga) <a href="https://twitter.com/mathdurga/status/1366033834379124748?ref_src=twsrc%5Etfw">February 28, 2021</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Glassmorphism - what's so interesting about it?
Tags: webdev, design, glassmorphism
Published: 2021-02-28 14:35:50

Design isn't something that stays the same forever. Old trends go, new trends replace them. It's constantly evolving.

A relatively new trend on the web is **Glassmorphism**. You can imagine it as taking a glass panel and putting it in front of a background. Give the glass a little bit of colour and a blur effect which result in the background changing completely when you're looking through the glass piece. Now add the information that you want to transmit to your user on top and voilà, you've got yourself a pretty looking glassmorphism UI.

Is it all about pretty looking? Or is there more to it? Let's find out.

### 1) Minimalist design 🐁
Minimalist design took over a while ago. We don't stuff the websites full of information anymore, instead we build in more white space, add more margin and sprinkle in some padding. This way the user doesn't feel attacked or pressured with information which could be very overwhelming.

Glassmorphism gives you the possibility to do the same by spreading your information on a glass pane, leaving more space in between to see through the glass into an interesting background. 

### 2) Focus user's attention 🔎
By spreading your information on the glass pane, it would differentiate itself from your other content. So it can easily catch user's attention.

The information on the glass pane would stand out even more because of the blur the background receives. The text, images or icons look even more sharpen and clear on a blurred background that's why they would be more attractive for the user than on a plain background.

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

### 3) Wow effect ✨
Although we talked about some interesting points before which help you provide the information to the user in the best possible way, "pretty looking" could also bring its value to the table. Would a simple circle attract your attention? Probably not, but what about a circle that slowly fades away? Probably yes...

That's why geometric forms are very beloved by glassmorphism enthusiasts. They are very strict but when you put them behind a glass pane they fade away. You can often see a part of a triangle behind the glass pane and a part stretching out of it. This gives the whole thing an antithesis of strict and lenient which gives it this **Wow effect** ✨.

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

### How to create a glassmorphism design?
I could share a code snippet right here of the CSS. But there are plenty of websites which help you generate a glassmorphism design which suits you the best. Here are some resources:

▶ [Glassmorphism CSS Generator](https://glassmorphism.com/)
▶ [CSS Masks & Glassmorphism Generator](https://mdbootstrap.com/docs/standard/tools/design/masks/)

###### ------------
###### The images are from my latest project 👉 [Holo Weather](https://holo-weather.netlify.app/)
Btech percentage doesn't matter is a myth. Let me explain with 3 reasons!

Published: 2021-02-28 14:29:22

Let's say 2 students, Ram and Shyam go for placements, Ram has 86% and Shyam has 65%. (#Reason1 if you don't have at least 65% you won't be able to appear even for written)

Ram-Shyam both clear written and reach the interview round, whom will the interviewer appreciate more? (#Reason2 higher percentage gives you edge in interviews)

Shyam's low percentage will not matter only if he has a solid coding profile (Codechef, Codeforces etc) or he has a solid dev profile (GitHUB, Full Stack).

Or if Shyam is able to give satisfactory explanation when interviews asks why he has low percentage?

Net net, in on-campus you can get selected with low percentages as well but having higher grade will not harm either!

Reason3 

For off campus, surely percentage is a key criteria for companies to shortlist/prioritize among thousands of applicants.

I know its not a perfect criteria, but it is not going to change at least by the time you appear for placements. So morals are good but you need to be practical as well.

Let me know what you think
No matching adjacent chars
Published: 2021-02-28 14:11:23


**This may or may not be the optimal solution, DO NOT blindly memorize my solutions**

From [Cassidy's](https://twitter.com/cassidoo) weekly [newsletter](https://buttondown.email/cassidoo/archive/2c66408b-dffb-4767-b754-0aad2d289226).

Target audience: beginners in js (please feedback!)

> Given a string str containing only the characters x and y, change it into a string such that there are no matching adjacent characters. You’re allowed to delete zero or more characters in the string. Find the minimum number of required deletions.

Example:
```js
$ everyOther('xxyxxy')
$ 2 // str becomes ‘xyxy’

$ everyOther('yyyyy')
$ 4 // str becomes ‘y’
```

This one came to me very quick. I would think that a optimal solution would not be any faster than O(n). If we look at the problem, we notice that essentially, the `matching adjacent characters` would mean looking at both side of all the characters. eg. in `123` we would look at the right of `1`, check that `2` is not the same and then do the same for `2`. We don't have to check `2` back with `1` again as that would be a double count. This means that every character needs to be accessed at least once.

Let's write a loop, were we start from 0 and end at str.length - 2

```js
const everyOther = (str) => {
  for (let i = 0; i < str.length - 1; i++) {
  }
};
```

we then need to check the current letter with the next

```js
const everyOther = (str) => {
  for (let i = 0; i < str.length - 1; i++) {
    const curr = str[i];
    const next = str[i + 1];
    if (curr === next) {
      // do something here
    }
  }
};
```

And if we look at the question again, notice that it only asks for a count, not the string after we're done with it. So let's add a counter.

```js
const everyOther = (str) => {
  let count = 0;
  for (let i = 0; i < str.length - 1; i++) {
    const curr = str[i];
    const next = str[i + 1];
    if (curr === next) {
      count++;
    }
  }
  return count;
};
```

And that's it! Short one this week, but there's no short of amazing solutions, particularly [the one by Sophie](https://twitter.com/sophiebits/status/1363939556119048192) stands out to me, I never would have thought of using regex, and there are plenty of interesting solutions which actually make use of the fact that the question specified that the entire expected input is only 2 different types of characters. It's interesting to look at all the different ways people "brand" their code in in [the thread](https://twitter.com/cassidoo/status/1363745457361592320).
How to Make Automatically Reply to Emails in Gmail
Published: 2021-02-28 14:08:23



 Today almost everyone is using email services in daily life. And that is why we are here with How To Reply Common Emails Automatically In Gmail.

 In this article we will discuss about automated emails that you can send automatically through your account.

 As sometime you are on a position in which you have to reply an email with same text every time.

 So in this method you will be setting a fix message for some certain queries and Gmail will work for you and will send the reply back as set by you earlier.

 So have a look in this cool method that can reduce your boring work of sending same mails to common queries.

Steps To Make Your Gmail Automatic Replier To Common Emails You Receive :-

 1. First of all login into your gmail account where you want to set up Gmail Automatic Reply.

  2. Now click on the down arrow button near the Gmail search box there.

  3. Now there you will see a form that instantly appears when you click on that arrow button.1

  4. Now fill up the form completely and in the field Have the word and Does not Have the word there you can set the words that you commonly received in you emails and you want to set them accordingly.

  5. Now after completely filling the form click on Create filter with this search at the bottom right corner of the form.

  6. Now on next box you will see option there mark on Send canned response and there you will specify the canned reply from previous conversations.

  7. After completing these all just click on Create Filter there and the filter will get created.

  8. That's it you are done. Now gmail will send automatic response to the mails received with the matched details.

**Hey Guys we just dropped our 1st video on YouTube .Please hit that subscribe button and make sure you smash that like button .Hotstar+Disney is a very famous streaming and entertainment service in India with more than 27 millon paid viewers and 300 millon monthly active users . We would love to hear your response .**

https://www.youtube.com/watch?v=4pjpHUN28kk

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

Be a part of us 🚀 🚀
Telegram https://t.me/forthecommunity
Discord https://discord.com/invite/QsAqC4yKkm
Facebook https://www.facebook.com/forcommunity.tech
Youtube https://www.youtube.com/channel/UCP33irJmpa60rIuztDP2itQ
أسرار التسويق الالكتروني
Published: 2021-02-28 13:55:13

https://ar.alaanak.com/%d8%a3%d8%b3%d8%b1%d8%a7%d8%b1-%d8%a7%d9%84%d8%aa%d8%b3%d9%88%d9%8a%d9%82-%d8%a7%d9%84%d8%a7%d9%84%d9%83%d8%aa%d8%b1%d9%88%d9%86%d9%8a/
Avoiding unintended undefined values while using TypeScript Record
Tags: typescript, javascript
Published: 2021-02-28 13:42:58

If you are already familiar with TypeScript, you must know that it provides different ways to type objects. You can use a `type` or an `interface` to strongly type your objects:
```typescript
type MyObject = {
  foo: string;
  bar: boolean;
};

interface MyObject {
  foo: string;
  bar: boolean;
}
```

Sometimes we also use objects as key-value stores where we don't know their properties beforehand. In such cases `Record` utility type provided by TypeScript comes in handy:
```typescript
type Record<K extends keyof any, T> = {
    [P in K]: T;
};
```

There's a catch though. If you use `string` as its key, TypeScript will assume that your object holds a value for every possible `string`. Consider the following example for clarity:
```typescript
type Colors = Record<string, string>;

const colors: Colors = {
  red: "#FF0000",
  green: "#00FF00",
  blue: "#0000FF"
};

console.log(colors.red); // "#FF0000"
console.log(colors.yellow); // undefined
```
![TypeScript treats value as string and does not detect undefined values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y1m2kzil0cqp9zggjig9.png)

As you can see, TypeScript gives no error for `colors.yellow` and expects that it is a `string`. However it is not. We don't have a value for `yellow` in our object. This is especially dangerous if you try to reach to a property of value. In such case we may have `Uncaught TypeError` exception and our application may crush.

```typescript
console.log(colors.red.toLowerCase()); // "#ff0000"
console.log(colors.yellow.toLowerCase()); // Uncaught TypeError: can't access property "toLowerCase" of undefined
```

## Solution: Use `Partial`
To avoid such cases, we can combine `Record` with another utility type, `Partial`:

```typescript
type Colors = Partial<Record<string, string>>;
```
![TypeScript can now warn us about undefined values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/reikyom3kdikt36ojdgg.png) 

Now we can use our `Colors` type safely and let TypScript to warn us about possible type errors.
Spiral iteration algorithm
Tags: javascript, algorithms, computerscience, career
Published: 2021-02-28 13:25:37

---
title: Spiral iteration algorithm
published: true
description: 
tags: javascript, algorithms, computerscience, career
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9kol0egrrwcdtda8e1a8.png
---


 
Solution for [complex](https://github.com/vvscode/js--interview-questions/blob/master/topics/complex.md#complex) js interview questions


```js
const directions = {
  x: [1, 0, -1, 0],
  y: [0, 1, 0, -1],
};

function spiral(matrix) {
  const rowCount = matrix.length;
  const colCount = matrix[0].length;
  const size = rowCount * colCount;
  const visited = new Array(rowCount).fill(0).map(() => new Array());
  const result = [];

  let x = y = direction = 0;

  for (let i = 0; i < size; i++) {
    result.push(matrix[y][x]);
    visited[y][x] = true;

    const diffX = x + directions.x[direction];
    const diffY = y + directions.y[direction];

    if (
      diffX >= 0 &&
      diffX < colCount &&
      diffY >= 0 &&
      diffY < rowCount &&
      !visited[diffY][diffX]
    ) {
      x = diffX;
      y = diffY;
    } else {
      direction = (direction + 1) % 4;

      x += directions.x[direction];
      y += directions.y[direction];
    }
  }

  return result;
}

spiral([
  [0,   1,  2,  3,  4],
  [5,   6,  7,  8,  9],
  [10, 11, 12, 13, 14],
  [15, 16, 17, 18, 19],
]); 

// [0, 1, 2, 3, 4, 9, 14, 19, 18, 17, 16, 15, 10, 5, 6, 7, 8, 13, 12, 11]

```