teleren/devto huggingface dataset:
The curious case of flexbox gap and Safari
Tags: css
Published: 2021-02-17 18:55:17

The `gap` property was first introduced to add inner grid spacing but was extended in the spec to work with flexbox. With one line of code, you can replace something like this:

```sass
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -0.5em;
}
.flex-container > * {
  margin: 0.5em;
}
```

with this:

```sass
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}
```

That's nice, but Safari doesn't support `gap` in flexbox just yet. Normally I'd just reach for `@supports`:

```sass
.flex-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1em;
}

@supports not (gap: 1em) {
  .flex-container {
    margin: -0.5em;
  }
  .flex-container > * {
    margin: 0.5em;
  }
}
```

Unfortunately, [Safari already supports `gap` in grid](https://caniuse.com/mdn-css_properties_gap_grid_context), so this doesn't work. This is one of those weird cases where there is no easy CSS-only solution, though there have been [proposals for workarounds](https://github.com/w3c/csswg-drafts/issues/3559).

This has left me scratching my head. You could [polyfill with JavaScript](https://github.com/Modernizr/Modernizr/blob/master/feature-detects/css/flexgap.js) or [use PostCSS](https://github.com/nkt/postcss-flexboxgrid), but at this point, is it worth it? That's a question that all frontend developers have to weigh from time to time, and there's no one-size-fits-all answer.

I will probably wait until Safari supports flexbox gap in the latest two versions before using it, mainly because it doesn't take that much more CSS to achieve the same effect. The only drawback is I cannot change the margins of the flex container. This can be overcome with an extra wrapper element, but then you're starting to complicate the markup.

If you want to read more about the flexbox gap issue, [check out this post from Ahmad Shadeed](https://ishadeed.com/article/flexbox-gap/). And if you found this post helpful, please like it on Dev Community and [let me know on Twitter](https://twitter.com/therealboone).

Until tomorrow!
¿Cuál es la diferencia entre PDO y MySQLi?
Tags: php, mysql, pdo
Published: 2021-09-16 12:13:39

---
title: ¿Cuál es la diferencia entre PDO y MySQLi?
published: true
date: 2021-02-17 18:46:00 UTC
tags: PHP,mysql,PDO
canonical_url: https://academy.leewayweb.com/cual-es-la-diferencia-entre-pdo-y-mysqli/
---

Si me decís que estás desarrollando una aplicación web usando PHP y no me das más datos, cerrando los ojos diría que estás usando una base de datos MySQL y, seguro que en el 80% de los casos acertaría. Es un hecho: PHP y MySQL son un dúo muy común en este mundillo. Lo que […]

La entrada [¿Cuál es la diferencia entre PDO y MySQLi?](https://academy.leewayweb.com/cual-es-la-diferencia-entre-pdo-y-mysqli/) se publicó primero en [Leeway Academy](https://academy.leewayweb.com).
C# tutorial for beginners | 1 | Setup development environment
Tags: csharp, dotnet, programming, tutorial
Published: 2021-02-17 18:22:28

In this C# tutorial series you will learn how to get started programming with C#. You will write your own programs as well as make your own web site.
I can make you successful so you can be a programmer as well.

I've just uploaded the first episode where I show how to setup the development environment.

Please check it out and subscribe to my channel to be notified when my new videos will be released.

Thank you in advance.

Link to video: [https://youtu.be/vhG2-lIS3EE](https://youtu.be/vhG2-lIS3EE)

Link to my personal blog: [https://www.anmalkov.com](https://www.anmalkov.com)

Link to my playlist: [C# tutorial - Learn C# FAST](https://www.youtube.com/playlist?list=PLDoQ6gLAki7chhisGpuyaVzxOj5Hut3Vb)
CodePen - BauBuds - Generative Bauhaus inspired Characters
Tags: codepen, javascript, css, webdev
Published: 2021-02-17 18:17:43

<p>BauBuds are generative Bauhaus inspired characters for an upcoming project... keep an eye out for them in the future! 👀</p>

{% codepen https://codepen.io/georgedoescode/pen/VwmbxRy %}
Typewriter effect in JavaScript (video)
Tags: tutorial, javascript, codenewbie
Published: 2021-02-17 18:13:49

In this video I show you how to make a typewriter effect using if statements and timing events. This video is perfect for those of you wanting to practise your JavaScript, or for those of you who simply want to implement the effect onto your projects.

When you have finished your project I would love for you to share it with me - you can find me on YouTube or Twitter.

{% youtube mULM6KcF_mo %}


YouTube: https://youtube.com/aniakubow​
Twitter: https://twitter.com/ania_kubow​
Instagram: https://www.instagram.com/aniakubow
What is ECMAScript ?
Tags: javascript, beginners, news, webdev
Published: 2021-02-17 17:52:08

You can read it everywhere, `es2020`, `es6`, ... but what is this exactly? To fully understand what is behind the "ES" script names it is necessary to first know ECMA-262.

## ECMA-262

ECMA-262 is the specification (or technical standard) of ECMAScript. This specification is a **technical documentation which specifies what kind of requirements ECMAScript needs to satisfy**. 

It is standardized by Ecma International which is a Swiss non-profit organization based in Geneva. They are responsible for a lot of standards, including JSON, C#,... ([ECMA-262 by Ecma international](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/))

## ECMAScript

ECMAScript is the standard, specified by ECMA-262. The purpose is to make websites, build with programming languages based on it,  **function in the same way in all browsers**. ([ECMAScript, Wikipedia](https://en.wikipedia.org/wiki/ECMAScript)) 

## JavaScript and ECMAScript

**JavaScript is based on ECMAScript, and it's standards**. To make the relation clearer, JavaScript is often called "the dialect of ECMAScript".  ([ECMAScript, Wikipedia](https://en.wikipedia.org/wiki/ECMAScript)) 

Nearly all specificities of ECMAScript are available in JavaScript. Recently, a new version of ECMAScript has been released every year, with amazing new features which make coding with JavaScript easier. Unfortunately web browsers are not yet compatible with the latest ECMAScript standards. That's why a compiler, like [babeljs](https://babeljs.io/), is needed when writing with the latest standard. 

--- 

If you like my posts follow me on [dev.to](https://dev.to/basilebong) and [twitter](https://twitter.com/basilebong/)!

---

## Credits

- [ECMAScript, Wikipedia](https://en.wikipedia.org/wiki/ECMAScript) - Read on 17/02/2021
- [Specification (technical standard), Wikipedia](https://en.wikipedia.org/wiki/Specification_(technical_standard)) - Read on 17/02/2021
- [ECMA-262 by Ecma international](https://www.ecma-international.org/publications-and-standards/standards/ecma-262/) - Read on 17/02/2021
- [What’s the difference between JavaScript and ECMAScript? by Michael Aranda, freeCodeCamp](https://www.freecodecamp.org/news/whats-the-difference-between-javascript-and-ecmascript-cba48c73a2b5/) - Read on 17/02/2021
Laravel Tips (Eloquent): withMax, withMin, withAvg & withSum.
Tags: laravel, eloquent, mysql, todayilearned
Published: 2021-02-17 17:32:51

TIL: Apart from withCount, eloquent also have other aggregate functions like withMax, withMin, withAvg and withSum. 

Eg:
```php
$posts = Post::withSum('comments', 'votes')->get();

foreach ($posts as $post) {
    echo $post->comments_sum_votes;
}
```
Angular 6 NgRx Store example – Angular State Management
Published: 2021-02-17 17:20:45

https://grokonez.com/reactive-programming/angular-6-ngrx-store-example-angular-state-management

NgRx Store is a state management solution for Angular apps that helps us build applications by working around our app’s data (state). In this tutorial, we’re gonna look at how to work with NgRx Store, custom Actions, Reducers. Then we will practice to understand all of them in a simple practical Angular 6 example.

Why we need a State container
State container helps JavaScript applications to manage state.
=> Whenever we wanna read the state, look into only one single place – NgRx Store.
=> Managing the state could be simplified by dealing with simple objects and pure functions.

NgRx Store
Store holds the current state so that we can see it as a single source of truth for our data.
– access state using store.select(property) (property is defined at app.module.ts in StoreModule.forRoot()).
– update state via store.dispatch(action).

All tutorial at: https://grokonez.com/reactive-programming/angular-6-ngrx-store-example-angular-state-management

Related posts:
- https://grokonez.com/frontend/angular/django-angular-6-example-django-rest-framework-angular-crud-mysql-example-part-3-angular-client
- https://grokonez.com/django/django-angular-6-example-django-rest-framework-mysql-crud-example-part-1-overview
- https://grokonez.com/frontend/angular/error-handler-angular-6-httpclient-catcherror-retry-with-springboot-restapis-example
DEV loses selected theme on android
Tags: watercooler, bug, help, discuss
Published: 2021-02-17 17:32:32

Sometimes the android client of DEV switches to the default theme when I open it, has this happened to you? When editing a post and publishing, it should the right theme for a moment and then again goes to the default theme. It seams that something is triggering a fallback to the defaults.

I use the night theme, you?
How to restrict the number of requests from a single client in express?
Tags: node, express, javascript
Published: 2021-02-17 17:30:58

We may need to restrict some clients from using our resources quite a bit. We have a middleware handy to implement this functionality called [express-rate-limit](https://www.npmjs.com/package/express-rate-limit). In the snippet below "max: 100" means only 100 requests per (windowMs: 60 * 60 * 1000) an hour. The message will be sent if a client tries to request after 100 requests within an hour.
```javascript
const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
    max: 100,
    windowMs: 60 * 60 * 1000,
    message: 'Your hourly quota for an hour has been exhausted, 
    try again after some time !',
});

app.use('/api', limiter);
```
Once this middleware is added to your app,  if any 101st requests come to the server with any endpoint starting with **/api** will be restricted. The message **"Your hourly quota for an hour has been exhausted, try again after some time !"** will be sent as a response. If you find this useful hit that like button and share it.
Riverpod: Rewriting Provider
Tags: dart, flutter, riverpod, statemanagement
Published: 2021-02-17 17:18:57

---
title: Riverpod: Rewriting Provider
published: true
description: Understanding Riverpod and not die trying
tags: dart, flutter, riverpod, statemanagement
cover_image: https://images.unsplash.com/photo-1468221296755-1c53a9dbcd54
---

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

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)
Introduction to Linked List
Tags: programming, algorithms, computerscience
Published: 2021-02-17 17:18:34

A Linked list is a **linear data structure** used for storing collections of data and which consist of a group of nodes.

Each node contains two fields:
  **Data**: That stored at a particular address.
  **Pointer**: Which contains the address of the next node.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l3yytw3nh1n8paa59dx1.JPG)
Generally, we call the first node as **Head node** and the last node as **Tail node** in Linked List.



**There are three main linked list operations**
->Insertion
->Deletion
->Traversing

**Why Linked List Over Array?**
Array contains the following limitations:
 
->The size of an array is fixed. We must know the size of the array at the time of its creation subsequently, it is difficult to change its size at runtime. 
->Inserting a new element in an array of elements is difficult because we need to shift elements to create room for new elements to insert.
->Deleting an element in an array is also difficult as it also takes shifting of elements in the array.

**Advantages of Linked List:**
->Insertion and deletion operations can be implemented very easily and these are not costly as they do not require shifting of elements.
->They are dynamic in nature. Hence, we can change their size whenever required.

**Types Of Linked List**
->Singly Linked List
->Circular Linked List
->Doubly Linked List

**Singly Linked List:**
A singly linked list is a type of linked list that is unidirectional, that is, it can be traversed in only one direction from head to the last node (tail).

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bh2w9oicegubebovzu3.JPG)

**Circular Linked List:**
Circular Linked List is similar to singly Linked List but the last node of List has a pointer to the node which points to the head node (first node) of Linked List. We traverse a circular singly linked list until we reach the same node where we started. The circular singly liked list has no beginning and no ending.

There is no null value present in the next part of any of the nodes.

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

**Doubly Linked List:**
In Doubly Linked List each node apart from storing its data has two links. The first link points to the previous node in the list and the second link points to the next node in the list.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oxzcioddtv12qjoogmf.JPG)

The first node of the list has its previous link pointing to NULL similarly the last node of the list has its next node pointing to NULL.

The two links help us to traverse the list in both backward and forward direction.
How to Deploy Angular application on Heroku hosting with Git repository
Published: 2021-02-17 17:14:43

https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-application-on-heroku-hosting-with-git-repository

Youtube Video: https://youtu.be/4W0WN39d5YM

# Technologies
– Angular
– Git
– Heroku

# Goal
We use Heroku Hosting to deploy Angular application ->

![angular app](https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-application-on-heroku-hosting-deployment-successfully.png)

# Create Heroku App
Login to Heroku, and create an app grokonez-angular-app:

![Create Heroku App](https://grokonez.com/wp-content/uploads/2018/12/deploy-angular-application-on-heroku-hosting-create-app-step-2.png)

# Related posts:
- https://grokonez.com/frontend/angular-6-dynamic-navigation-bar-add-remove-route-dynamically
- https://grokonez.com/frontend/angular/angular-deployment/how-to-deploy-angular-on-nginx-remote-server-example-use-vultr-vps-hosting
- https://grokonez.com/spring-framework/spring-boot/deployment-spring-boot/heroku-springboot-deployment-example-how-to-deploy-springboot-postgresql-on-heroku-platform-with-heroku-cli
Display an Apple Music Playlist on Your Website
Tags: webdev, music, portfolio, programming
Published: 2021-02-17 17:13:00

We've all seen those really cool 'What I'm listening to' Spotify lists on portfolio websites. They're cool. They're sleek. It adds a bit of personality to a website. Spotify has an API that allows you to fetch data related to your profile so you can make a list of your top-played tracks, or even display the song you're currently listening to on the platform. [Lee Robinson](https://leerob.io/dashboard) has a fantastic example of this on his website, and even has [a blog article](https://leerob.io/blog/spotify-api-nextjs) showing you how to utilize Spotify's API to do a few of the things I listed above.

But what if you don't use Spotify? What if you use Apple Music?

This article isn't intended to argue which streaming platform is better than the other. Rather, I really do think that adding a favorite playlist adds some cool personality to a portfolio.

Does Apple Music allow you to access the same functionality as Spotify?

Well, not really. But we can use a workaround and embed a playlist into a webpage.

### Embedding a Playlist on a Website

First, open Apple Music on a Mac (or use the web app) and find the playlist you want to embed on the webpage.

I recently did a soft launch of my [redesigned portfolio](http://braydoncoyer.dev/) and wanted to make sure my love of Lord of the Rings was shared with the rest of the world, so I created a playlist that contained all of the music from the movie series. 

![Screen Shot 2021-01-12 at 2.48.26 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485073876/hbb1R9Ien.png)

With the playlist open, click on the three dots on the far right-side to open an options menu.

![Screen Shot 2021-01-12 at 2.50.11 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485088749/vLN_RGdKX.png)

With the menu open, go to the Share option and click on the Copy Embed Code button. This copies an iframe to your clipboard.

![Screen Shot 2021-01-12 at 2.49.55 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485099258/848UK-jvw.png)

With the embed code copied, head over to your website HTML, paste the iframe and preview your site. You should now have an embedded Apple Music playlist! Visitors can listen to previews of each track in the playlist, too! 

![Screen Shot 2021-01-12 at 2.54.15 PM.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1610485114056/bGbADJ_Ie.png)

### Conclusion

If you liked this article and want more content like this, read some of my [other articles](https://blog.braydoncoyer.dev/), [subscribe to my newsletter](https://braydoncoyer.dev/newsletter/) and make sure to follow me on [Twitter](https://twitter.com/BraydonCoyer)!
Welcome Thread - v112
Tags: welcome
Published: 2021-02-17 17:11:23

---
title: Welcome Thread - v112
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
canonical_url: 
---

![Nice to meet you](https://media.giphy.com/media/xTOiYmW2YLVZt3FUmW/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
ElasticSearch Tutorial
Published: 2021-02-17 17:07:18

https://grokonez.com/elasticsearch

Elasticsearch is a distributed, full-text search engine based on Lucene with JSON schema. It is an open source and implemented by Java.

1. Introduction
Elasticsearch uses a structure called an inverted index. It is designed for the fastest solution of full-text searches. An inverted index consists of a list of all the unique words that appear in any document, and for each word, a list of the documents in which it appears.
For example:
– “The quick brown fox jumped over the lazy dog”
– ” Quick brown foxes leap over lazy dogs in summer”

2. Problem
There are a few problems with our current inverted index:
– “Quick” and “quick” appear as separate terms, while the user probably thinks of them as the same word.
– “fox” and “foxes” are pretty similar, so are “dog” and “dogs”. They share the same root word.
– “jumped” and “leap”, while not from the same root word, are similar in meaning. They are synonyms.

3. Solution
– “Quick” can be lower-cased to become “quick”.
– “foxes” can be stemmed for reduced to its root form to become “fox”. Similarly, “dogs” could be stemmed to “dog”.
– “jumped” and “leap” are synonyms and can be indexed as just the single term “jump”.

Tutorial at: https://grokonez.com/elasticsearch

https://grokonez.com/elasticsearch/elasticsearch-character-filters
https://grokonez.com/elasticsearch/elasticsearch-tokenizers-structured-text-tokenizers
https://grokonez.com/elasticsearch/elasticsearch-tokenizers-structured-text-tokenizers
https://grokonez.com/elasticsearch/elasticsearch-tokenizers-structured-text-tokenizers
How to build an Fahrenheit to Celsius Converter in Python
Tags: python, tutorial, codenewbie, beginners
Published: 2021-02-17 16:46:06

Hey everyone, today we will be building a **Fahrenheit to Celsius Converter in Python**.

## How does it work?

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

Generally to measure the temperature we make use of one of these two popular units i.e. **Fahrenheit** & **Celsius**.

Converting one into another is usually boring and can be easily automated. Today we will be building a simple & short project which will convert Fahrenheit to Celsius for us in seconds.

## Let's Code

So the first thing we are going to do is to ask the user for the temperature in **Fahrenheit** to convert it into the **Celsius**.

```python
temp = float(input("Enter temperature in Fahrenheit: "))
```

We will convert the temperature into float using **`float()`** so that we can perform calculations on it.

Now finally let's perform calculation and convert the temperature into Celsius.

```python
celsius = (temp - 32) * 5/9
```

This expression you see above is the general formula to convert Fahrenheit into Celsius.

Now finally let's print our temperature in Celsius:

```python
print(f"{temp} in Fahrenheit is equal to {celsius} in Celsius")
```

Here we go we are done! Here we have used **`f-strings`** to directly place the variable within the print statement.

## Source Code

You can find the complete source code of this project here -

[mindninjaX/Python-Projects-for-Beginners](https://github.com/mindninjaX/Python-Projects-for-Beginners/tree/master/Fahrenheit%20to%20Celsius%20Converter)

## Support

Thank you so much for reading! I hope you found this beginner project useful. 

If you like my work please consider [Buying me a Coffee](https://buymeacoff.ee/mindninjaX) so that I can bring more projects, more articles for you.

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

Also if you have any questions or doubts feel free to contact me on [Twitter](https://twitter.com/mindninjaX), [LinkedIn](https://www.linkedin.com/in/mindninjax/) & [GitHub](https://github.com/mindninjaX). Or you can also post a comment/discussion & I will try my best to help you :D
Day 43:100DaysOfCode
Tags: 100daysofcode, productivity, programming
Published: 2021-02-17 16:41:21

good day,

cf div3 contest solved a , c and d problem..
started with striver seive,prime algos & problem (cp sheet)
practised few medium queue problems on leetcode.

learned how to make a db using sqlite package in flutter 
along with inserting and retrieving by writing sql queries in dart code :)...


EOD.


You can Follow me->
https://github.com/singhtaran1005
https://www.linkedin.com/in/taranpreet-singh-chabbra-27517918a/