teleren/devto huggingface dataset:
Typescript for beginners: array
Tags: typescript
Published: 2020-09-15 07:51:11


In typecript we have two ways to work with arrays.

 First way:

* Define our variable ` let cities`
* Write our type to check ` : string[]`
* Give value to our variable ` = ["London", "New York", "Dubai"]`

` : string[]` this means that we want to check if our array contains `string` type values.  If the array contains only numbers we write it as ` : number[]` and so on. **If our array contains mixed types we will use `any[]`**

```javascript
let cities : string[] = ["London", "New York", "Dubai"];
let years : number[] = [1, 2, 3];
```

Second way:

* Define our variable `let cities`
* Write our type to check ` : Array<string>`
* Give value to our variable ` = ["London", "New York", "Dubai"]`

```javascript
let cities : Array<string> = ["London", "New York", "Dubai"];
let years : Array<number> = [1, 2, 3];
```

There is no difference between one way or another apart from syntax. Some might say that using the second way is a bit more clear, but that's one man's opinion.
Telegram Quote Bot 📚
Tags: python, telegrambot, books, quotes
Published: 2020-09-15 07:50:00

Hey all,

I am always interested in reading book quotes and taking inspiration from them. So for solving that problem, I have built a Telegram Bot - [QuoteBot](https://telegram.me/BookQuoteBot), which sends famous quotes (currently from all the genres). I have scraped Goodreads for getting the quotes. If you subscribe to the bot, it will send you quotes 3 times per day. Also, if you are interested in getting an instant quote, just run the "/quote" command. 

Do check out the bot and let me know your suggestions.

<a href="https://www.producthunt.com/posts/telegram-quote-bot?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-telegram-quote-bot" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=247873&theme=dark" alt="Telegram Quote Bot 📚 - Resurface the best quotes from famous books | Product Hunt Embed" style="width: 250px; height: 54px;" width="250" height="54" /></a>
Procreator-The best UI UX design company 
Tags: ux, uiuxdesign, uxuidesigncompany
Published: 2020-09-15 07:42:14

At Procreator We are UX/UI design agency with a passion for creating solutions that solve real problems of real users. Our experts learn from each project and set higher benchmarks for the next one. We are a team of dedicated individuals, trained and passionate about making the digital world better with providing excellent UI/UX designs.

We have a team of expert UX / UI designers. We understand your business goals and connect them to your users by turning complex-looking designs into beautiful, clean, and accessible designs which is user friendly. We love to brainstorm new ideas and create valuable user interfaces. You and your business are the one’s who get the benefit from our hard work. It takes a lot to be the best ux design studio agency. Our firm also provides services in Mobile app development,eCommerce portal, web, and graphic design. Our studio has high-quality tools to provide quality work to our client’s.

We Follow Collaborative Approach
 
1.	Design Workshops
2.	Daily Stand-ups
3.	Weekly Status Reports
4.	Version Control Systems

Contact Details:-

Contact number: +91 9899912234
Website: https://procreator.design
Email: hello@procreator.in
Address : E-307 7, 3rd Floor, Tower 2, Seawoods Grand Central Sector 40, Seawoods Railway Station, Navi Mumbai, Maharashtra - 400706
Paciencia, por Xavier Mitjavila
Published: 2020-09-15 07:33:55

---
title: Paciencia, por Xavier Mitjavila
published: True
description: Ya hace días que viajo y lo que veo en este aeropuerto, ya lo he visto en otros. Pocos vuelos y tiendas cerradas. Volamos poco y tardaremos en hacerlo con normalidad.
cover_image: https://secureservercdn.net/160.153.138.53/24n.cd0.myftpupload.com/wp-content/uploads/2020/09/Xavier_Mitjavila_Moix_articulo_Paciencia_covid_pandemia_xavi.jpg
---
Ya hace días que viajo y lo que veo en este aeropuerto, ya lo he visto en otros. Pocos vuelos y tiendas cerradas. Volamos poco y tardaremos en hacerlo con normalidad.

Las nuevas medidas de seguridad son omnipresentes. Distancia de seguridad al pasar bajo el arco de seguridad, al recoger la bandeja con nuestras cosas, en el momento de acceder a la sala de embarque. En los bancos, adhesivos que prohíben que estemos los unos junto con otros. Todo es diferente. O casi todo. La megafonía nos anuncia el típico retraso de verano. Paciencia.

Pasan 90 minutos y embarcamos. Sigue siendo el mismo aparato de siempre. Hoy tampoco observo metacrilatos que puedan separar las diferentes filas y proteger a los pasajeros. Tampoco hay gel desinfectante. Tengo el asiento 15B y cuando llego no encuentro nadie al lado. Rápidamente llegan dos pasajeros. Ninguna distancia de seguridad entre nosotros. Busco un lugar aislado en el resto del avión. No lo hay. «Hoy vamos casi llenos» me dice la azafata. Y justo en ese momento comienza la típica grabación: «La seguridad es muy importante para nuestra compañía …». Paciencia.

    Despegamos. Reunión de azafatas. Charlan. Las mascarillas de color negro no cubren ni nariz ni boca. Paciencia.

Dicen que de las crisis salimos más fuertes. Pero solo salen más fuertes los que tienen la capacidad de reinventarse, de adaptarse, de buscar nuevos modelos …. La industria de la aviación ha tenido seis meses para hacerlo. En estos meses, se han reinventado los supermercados, las tiendas de ropa, los taxis, los hoteles, los restaurantes, … ¿Y los aviones?

La situación me recuerda a Kodak, Blockbuster, Blackberry o Nokia. Se veía venir y no hicieron nada para evitarlo. Probablemente dentro de unos meses nos hablarán de rescatar empresas de aviación como ya nos hablaron de rescatar a la banca. Y como siempre pagaremos justos por pecadores. Paciencia.


Artículo publicado en originalmente en el [Diari Ara].  
(https://emprenem.ara.cat/opinio/Paciencia-molta-paciencia_0_2522147820.html)
Extract E-Commerce Data With Web Screen | Scraping Service Provider | Python Extraction
Tags: webdev, python, android
Published: 2020-09-15 07:29:33

E-Commerce web scraping is used to have consumers’ behaviors and product information. E-Commerce data extractor & Amazon data scraper is a wide-ranging package that can be the most helpful tool for your strategies and policies for more business planning as well as marketing. To get success in the online e-commerce business, our Amazon web scraping is the best tool!

Reviews and Ratings of the products let us understand about the options made by consumer fragments. Amazon Product scraping services allow you to generate the reports of the buyer’s choices.

Some regions are there where the shipping services are not accessible or accessible at high shipping rates. Those can be a potential segment to sell products. Amazon, Aliexpress, ebay  Product Data Scraper scrapes the shipping information like region and charges. Make them accessible to presume the finest shipping policies for your company.
Top 10 programming languages sought after by employers in the US
Tags: java, javascript, python, c
Published: 2020-09-15 07:18:17

![Top programming languages](https://dev-to-uploads.s3.amazonaws.com/i/jfvl6ljlo7s91y9h5qle.png)

ITShifting.com [analyzed job listings](https://itshifting.com/blog/top-35-programming-languages-and-frameworks-sought-after-by-employers-in-the-us) on Glassdoor to find out hiring trends to watch for in 2020 in the American tech job market. The analysis includes data for 33 IT occupations in the 25 largest US cities and surrounding towns.

The analysis showed that, by a number of occurrences, the most popular programming languages that can be spotted in job listings in the United States are Java, JavaScript, and Python. They are by a long shot far ahead of other popular programming languages such as C and Go. K, C++, R, Ruby, and PHP also make the top 10.

![Top 10 programming languages](https://itshifting.com/photos/content/top-programming-languages-2020-1.png)

Other popular hard skills (frameworks, libraries, markup and query languages, platforms, tools, etc.) sought after by US employers include SQL, AWS, Azure, CSS, HTML, Angular, and Docker.

Source: [ITShifting.com](https://itshifting.com/blog/top-35-programming-languages-and-frameworks-sought-after-by-employers-in-the-us)
hackCBS 3.0 - India's Largest Student-run Hackathon
Tags: computerscience
Published: 2020-09-15 07:16:19

**hackCBS 3.0**, the third edition of **India's Largest Student-run Hackathon** goes virtual, no matter where you are, you can participate and be a part of the most anticipated hackathon of the year. Commence all your intelligence and skills with your coffee mug and achieve the impossible.

We are focusing on the following tracks this time:
1. Productivity and Networking
2. Gaming and Entertainment
3. EdTech
4. Healthcare
5. FinTech
6. AgriTech
7. Open Innovation

Comrades, the time has come to challenge yourself and strive hard to push your limits to **LEARN . TEACH . HACK .WIN.**

So what are you waiting for?
**Register Now** at [hackcbs.tech](https://hackcbs.tech)

Stay tuned for more updates!
[Video] Using Vue 3 Beta with Ionic Firebase Authentication Flow & Composition API
Tags: vue, ionic, tutorial, webdev
Published: 2020-09-15 07:10:39

{% youtube QxUVGTL4GzY %}

## Overview
Showing authentication flow using composition api and Firebase using the new [Ionic Framework Web Components for Vue 3](https://ionicframework.com/docs/vue/quickstart)

I am using the latest beta release of the Ionic Integration with [Vuejs Beta 3](https://v3.vuejs.org/guide/introduction.html). I am using typescript in the example and relying heavily on the new pattern of [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) when creating single file components.

## Whats Covered In The Video
00:00 - Intro
00:11 - walkthrough the base code
02:15 - create the useFirebaseAuth hook
04:20 - auth check to check for user at startup
05:44 - define state for the hook 
08:26 - calling authCheck in main.ts
10:20 - seeing if authCheck works
11:00 - add router code to check for user
11:44 - implementing beforeEach
13:30 - explaining logic in beforeEach
14:50 - Adding types to state object to remove eslint errors
15:50 - set the default path
16:26 - making sure the state information is not reset which each instance
17:40 - implementing logout
20:54 - implementing login 
22:00 - v-model not working properly in this release, workaround used 
22:53 -  call login function from hook

## Source Code
{% github aaronksaunders/ionic-vue3-myapp-login-demo %}
[Video] Using Vue 3 Beta with Ionic Firebase File Upload & Capacitor Plugins
Tags: vue, ionic, tutorial, webdev
Published: 2020-09-15 07:06:30

{% youtube y2nP5OPJ6tk %}

## Overview
Showing file upload using Composition API and [Firebase Storage](https://firebase.google.com/docs/storage/web/upload-files) using the new [Ionic Framework Web Components for Vue 3](https://ionicframework.com/docs/vue/quickstart)

I am using the latest beta release of the Ionic Integration with [Vuejs Beta 3](https://v3.vuejs.org/guide/introduction.html). I am using typescript in the example and relying heavily on the new pattern of [Composition API](https://v3.vuejs.org/guide/composition-api-introduction.html) when creating single file components.

## Whats Covered In The Video
00:00 - Intro
00:10 - Overview of Application Functionality
02:35 - Focus on Firebase Storage Upload Composition API Hook
09:12 - Camera Upload Home Page 
14:47 - List Uploads Pull To Refresh
16:24 - image Detail Params
16:50 - Get list of objects from the storage bucket
17:39 - Tabs Setup 
19:41 - Image Detail Page

## Source Code
{% github aaronksaunders/ionic-vue3-sample-2 %}
ECSY is an Entity Component System for JavaScript
Tags: entitycomponentsystem, javascript, ecs
Published: 2020-09-15 06:57:36

---
title: ECSY is an Entity Component System for JavaScript
published: true
description: Brief introduction to ECSY
tags: entitycomponentsystem, javascript, ecs
//cover_image: https://direct_url_to_image.jpg
---
![](https://i.snap.as/alk4UUD.png)
[Entity Component Systems](https://en.wikipedia.org/wiki/Entity_component_system) are a way to compose complex systems in a way that is efficient, logical, and performant. ECSY is an example of one such ECS for JavaScript, and while it's still early in it's development, is already making some waves. 

You can check it out here [ECSY](https://ecsy.io/) -- with some documentation, a few examples, and a discussion group. It even has bindings to [Three.js](https://threejs.org/) , [Two.js](https://two.js.org/) and [BabylonJS](https://www.babylonjs.com/).

 This is perfect for games, simulations, and any other situation where you want to create a lot of instances of some entity and efficiently animate, or somehow transform them. 

Another example of an ECS for JavaScript is [A-Frame](https://aframe.io/docs/1.0.0/introduction/entity-component-system.html)
Dependencies in Monorepos with Manypkg ☔️
Tags: npm, javascript, typescript
Published: 2020-09-15 06:46:03

> Or: Make upgrading dependencies of your monorepo quick and easy with this one simple package*

```
yarn add @manypkg/cli
```

A common bit of wisdom in monorepos, is when you depend on external versions of a package, you should depend on the same version everywhere. This ensures more consistent behaviour across different packages, reduced install time, and reduced bundle size.

[manypkg](https://www.npmjs.com/package/@manypkg/cli#manypkg-upgrade-packagename-tag-or-version) has been able to detect when packages depend on different versions, and fix for them since it started, but there hasn’t been a good path on how to do updates. Enter our newest helper command:

```bash
manypkg upgrade react
```

This command will find every package that relies on `react` , and upgrades it to `latest`. Nice and simple.

This works with a tag, such as

```bash
manypkg upgrade react next
```

And works with a version range such as:

```bash
manypkg upgrade react ^16.3.0
```

## For packages _from_ monorepos

If you are installing packages from a monorepo, you may want to upgrade all packages from that monorepo at once, to the same point in time. For this, you can specify a scope:

```bash
manypkg upgrade @keystonejs
```

You can still specify a tag, or a version, and all packages will be upgraded the first tag

## Tagging in a monorepo

I have a theory, which is that in a monorepo, being able to install a particular *release* of all packages is useful (for when you don’t want latest), but it’s still nice if each *version* for packages can remain separate.

To allow both these things, we want to be able to name a release, and make that name meaningful on `npm`. The best way is to tag all the packages on `npm`:

```bash
manypkg npm-tag arcade
```

This will add the tag `arcade` to the current version for every package in your monorepo. Now you’re all set up to `manypkg upgrade` everything to `arcade` 😎

With these new tools under your belt, it should be even easier both to manage your monorepo, and to make it easier for consumers of your packages.

### This is neat, but I see manypkg has some other commands?

It does! `manypkg check` and `manypkg fix` are opinionated linting of your dependencies, mostly focused on your monorepos installs or links being more efficient. If you are developing in a monorepo, you might find these helpful - otherwise, you can just use manypkg for upgrading, no worries.

*_Yes I write titles like an academic ¯\\_(ツ)\_/¯_
How to Use Excel RANK Function in Office 365? – [with Examples]
Tags: excelfunctions, excelrankfunctionino
Published: 2020-09-15 08:22:39

---
title: How to Use Excel RANK Function in Office 365? – [with Examples]
published: true
date: 2020-09-15 06:43:42 UTC
tags: ExcelFunctions,ExcelRANKFunctioninO
canonical_url: https://geekexcel.com/how-to-use-excel-rank-function-in-office-365-with-examples/
---

## Excel RANK Function:

![RANK Function](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/RANK-Function.png)<figcaption id="caption-attachment-13914">RANK Function</figcaption>

In this article, we are going to see how to use the **Excel RANK Function in Office 365** with its syntax, explanation, and examples. Let’s step into this article!! Get an official version of **MS Excel** from the following link: [https://www.microsoft.com/en-in/microsoft-365/excel](https://www.microsoft.com/en-in/microsoft-365/excel)

## **RANK Function – Description:**

- This function **returns the rank of a number from a list of numerical values**.

## **Syntax:**

**=RANK(number, array, [order])**

### Arguments Explanation:

**Number –**  The number to rank.

**Array – ** It is the array that contains a set of numeric values.

**Order – ** It is an optional one. If the order is 0 or omitted, it will sort the array in descending order. If the order is a non-zero value and then it will sort the array in ascending order.

### Note:

- If either of the argument is non-numeric and then this function returns [**#VALUE! Error**](https://geekexcel.com/how-to-fix-value-error-in-excel-office-365-with-example/).
- If there are no arguments in the array, it will return [**#N/A! error**](https://geekexcel.com/how-to-replace-n-a-or-zero-in-vlookup-with-blank-or-specified-text-in-excel/).

## **Examples:**

Let’s see some examples to understand this concept easily.

### Example 1:

- In the following image, you can see the input numbers in **Column C** , and its corresponding **Rank values** in **Column E**.

![Example 1](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/1-48.png)<figcaption id="caption-attachment-13911">Example 1</figcaption>

### Example 2:

- If either of the argument is non-numeric and then this function returns [**#VALUE! Error**](https://geekexcel.com/how-to-fix-value-error-in-excel-office-365-with-example/).

![Example 2](https://eadn-wc04-371788.nxedge.io/cdn/wp-content/uploads/2020/09/2-43.png)<figcaption id="caption-attachment-13912">Example 2</figcaption>

## **Wind-Up:**

In this article, you can clearly understand the usage of **Excel RANK Function in Office 365** with its syntax, explanation, and examples. Drop your **feedback** in the below comment section. Thanks for visiting **[Geek Excel.](https://geekexcel.com/)** Keep Learning!!

### See Also:

- [How to Use Excel MODE.MULT Function in Office 365? – (with Examples)](https://geekexcel.com/how-to-use-excel-mode-mult-function-in-office-365-with-examples/)
- [How to Use Excel QUOTIENT Function in Office 365? – {with Examples}](https://geekexcel.com/how-to-use-excel-quotient-function-in-office-365-with-examples/)
10 JavaScript Projects in 1 Hour - Coding Challenge
Tags: javascript, webdev, beginners, tutorial
Published: 2020-09-15 06:32:36

---
title: 10 JavaScript Projects in 1 Hour - Coding Challenge
published: true
description: How I completed the 10 JavaScript Projects in 1 Hour Coding Challenge
tags: javascript, webdev, beginner, tutorial
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/24mwlb125taziz3dyu83.png
---

**TL;DR**: I completed a Coding Challenge in which I created: **10 JavaScript Projects in 1 Hour**, all while being live on [Twitch](https://twitch.tv/florinpop17).

You can find the recording on YouTube below:
{% youtube 8GPPJpiLqHk %}

*If you like this type of content, don't forget to give it a like* 👍 *and [subscribe](https://youtube.com/florinpop). It will help a lot! Thank you!* 🙏 

---

This is the follow-up challenge after I completed the [10 JavaScript Projects in 10 Hours Coding Challenge](https://dev.to/florinpop17/10-javascript-projects-in-10-hours-coding-challenge-316d) a week before.

After the success of the previous challenge I wanted to try something even crazier and as I mentioned at the end of the previous article, 10 Projects in 1 Hour sounded liked a good challenge.

So as usual, I planned out the project I wanted to create, I hit the "Stream" and "Record" buttons on my stream deck and... GO! 🔥

Here is the list of Projects I ended up coding:

- Hamburger Button & Hidden Menu
- Toast Notification
- Auto Write Text
- Popup / Modal
- Purple Heart Rain
- Background Changer
- Dark Mode Toggle
- Image Carousel
- Sound Board
- Zoom effect

The code is on [GitHub](https://github.com/florinpop17/10-projects-1-hour) and the projects are live [here](https://10projects1hour.netlify.app/).

As you can see, the projects aren't very sophisticated and they can't really be as I only had 6 minutes on average per project. That's not a lot of time 😅.

The good thing was that I created a "Base Project" which had the HTML, CSS and JavaScript files ready and connected so I only had to focus on actually writing the code for the projects.

Also, knowing some keyboard shortcuts was definitely very helpful.

I ended up finishing the 10 projects in about 54 minutes. I could have tried to do another project, but I didn't... 10 projects would do in an hour, right? 😆

Looking back at it, the **Sound Board** project took to longest to finish (almost 8 minutes) but I have to say that the most fun to build was the **Purple Heart Rain**. I 💜 Purple! 💜 (If you follow me on [Twitter](https://twitter.com/florinpop1705) you might already know that 😆).

All in all was a fun challenge. I could say that it was more intense than the previous one but at the same time, faster to complete so at the end it evens it out.

Next up in line: **10 Websites - Design to HTML/CSS, all in one go**.

I'll keep you posted on how that goes!

Feel free to join on [Twitch](https://twitch.tv/florinpop17) if you want to see the live action!

Thank you for reading! I hope you find it inspiring and that you'll also try this challenge one day and you'll have as much fun as I did! 

Happy Coding! 😇
Vscode 4.5 hours course for JavaScript, Python & PHP
Tags: vscode, php, javascript, python
Published: 2020-09-15 06:05:27

## Overview
Boost your coding speed up to 10x with this course.
This is the biggest course you can found on vscode ever
Most exciting part is that, it is totally FREE

{% youtube bhdD_tDXaMY %}

## Goal
We will cover each and everything of the vscode and how you can control every part of vscode with the use of keyboard only.

## Power of Keyboard
We will also see how you can maximize your speed using the vscode breadcrumbs and obviously with keyboard

Select code, toggle sidebar or activity bar, goto any line number, fold or unfold code, create snippets, running code and test, using terminal to its max and much more.
Everything I said above is with use of KEYBOARD only

## Extensions
Apart from this, we will also use various extensions that will enhance your speed and also makes various tasks easy

{% twitter 1304107930397016064 %}

## Fun part
One exciting thing is the gradient cursor.
We will dig into the vscode to change its internal css to make cursor gradient color.
{% twitter 1304413366539042816 %}


## Famous Themes I reviewed
Tokyo Night
Github Theme
Material Theme
Darcula, Dracula
Shades of Purple

## Extensions Reviewed
Python
ES6 for javascript
React extensions
BetterPHPUnit
php intelliphense
Confirm quit
chrome debuggerphp-cs-fixer
bracket pair colorizer
cdnjs
vuln
eslint
npm intellisense
colonizer
EmojiSense
Placode


Like and follow me on twitter @sarthaksavvy