teleren/devto huggingface dataset:
Don't Promise.all() everything at once
Tags: javascript, async
Published: 2020-11-26 13:46:22

In short, don't execute thousands of Promises at once. Please either,

- Do in batch
- Keep space between ones

And this applies not only to JavaScript, but also anything that are parallel, or parallel-like in nature, including Threads.

Don't just do this. You will either break your own API, or get blocked.

```ts
// const vocabs = fs.readFileSync('vocabs.txt', 'utf-8').trim().split(/\n/g)
// console.log(vocab.length) //=> 100,000
//
// const resultMap = new Map<string, Result>()
// const lookup: (v: string) => Promise<Result> = (v) => fetch(`/api?q=${encodeURIComponent(v)}`)
//   .then((r) => r.json())
//   .then((r) => resultMap.set(v, r))

await Promise.all(vocabs.map((v) => lookup(v)))
```

## Batching

```ts
const promises = vocabs.map((v) => () => lookup(v))

const batchSize = 1000
for (let i = 0; i < promises.length; i += batchSize) {
  await Promise.all(promises.slice(i, i + batchSize).map((p) => p()))
}
```

## Keeping the space in-between

```ts
const sleep = (msec: number) => new Promise((resolve) => setTimeout(resolve, msec))

await Promise.all(
  vocabs.map((v, i) => sleep(50 * i).then(() => lookup(v)))
)
```
Error: Unrecognized font family Material Design icons
Published: 2020-11-26 13:24:56

Solution:

### Podfile:
```
pod 'RNVectorIcons', :path => '../node_modules/react-native-vector-icons'
```

### info.plist
```
<key>UIAppFonts</key>
<array>
	<string>FontAwesome.ttf</string> 
	<string>MaterialIcons.ttf</string> 
	<string>MaterialCommunityIcons.ttf</string> 

	<string>your custom fonts</string>
</array>
```
react-native unlink react-native-vector-icons
npm uninstall react-native-vector-icons
react-native install react-native-vector-icons  
cd ios && pod install && pod update
npm i
yarn ios
Daily Developer Jokes - Thursday, Nov 26, 2020
Tags: jokes, dailydeveloperjokes
Published: 2020-11-26 13:00:03

---
title: "Daily Developer Jokes - Thursday, Nov 26, 2020"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Nov%2026%2C%202020"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12596ec99e0.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ What sits on a pirate's shoulder and calls, "Pieces of seven, Pieces of seven"?

___A:___ Parroty error.
 -->
Black Friday & Cyber Monday: Grab UI Bakery Plan with 50% OFF
Tags: webdev, showdev, productivity, beginners
Published: 2020-11-26 12:58:27

Hey all, 
Black Friday's almost here!

Grab a 50% discount for any #UIBakery plan. Choose the one that meets your web app development needs.
BF2k20 – use this code in your UI Bakery account to get your discount now.

-> https://uibakery.io/?utm_campaign=ui_bakery%20-%20xx%20-%20BF_CM%20-%20cacq%20-%20xx%20-%20purchases&utm_source=DevTo&utm_medium=webdev&utm_content=BF_deal
Careful with dates in Javascript
Tags: programming, javascript
Published: 2020-11-26 12:59:52

---
title: Careful with dates in Javascript
published: true
date: 2020-11-26 12:58:19 UTC
tags: programming,javascript
canonical_url: https://siderite.dev/blog/careful-with-dates-in-javascript/
---

  Original post at: https://siderite.dev/blog/careful-with-dates-in-javascript/

  I was working on a grid display and I had to properly sort date columns. The value provided was not a datetime, but instead a string like "20 Jan 2017" or "01 Feb 2020". Obviously sorting them alphabetically would not be very useful. So what I did was implement a custom sorting function that first parsed the strings as dates, then compared them. Easy enough, particularly since the Date object in Javascript has a Parse function that understands this format.

  The problem came with a string with the value "01 Jan 0001" which appeared randomly among the existing values. I first thought it was an error being thrown somewhere, or that it would not parse this string or even that it would be an overflow. It was none of that. Instead, it was about handling the year part.

  A little context first:

```
Date.parse('01 Jan 0001') //978300000000
new Date(0) //Thu Jan 01 1970 00:00:00

Date.parse('01 Jan 1950') //-631159200000
new Date(Date.parse('01 Jan 1950')) //Sun Jan 01 1950 00:00:00

Date.parse('31 Dec 49 23:59:59.999') //2524600799999
Date.parse('1 Jan 50 00:00:00.000') //-631159200000

new Date(Date.parse('01 Jan 0001')) //Mon Jan 01 2001 00:00:00

```

  The first two lines almost had me convinced Javascript does not handle dates lower than 1970. The next two lines disproved that and made me think it was a case of numerical overflow. The next two demonstrated it was not so. Now look closely at the last line. What? 2001?

  The problem was with the handling of years that are **numerically** smaller than 50. The parser assumes we used a two digit year and translates it into Date.parse('01 Jan 01') which would be 2001. We get a glimpse into how it works, too, because everything between 50 and 99 would be translated into 19xx and everything between 00 and 49 is considered 20xx.

  Note that .NET does not have this problem, correctly making the difference between a 2 digit and 4 digit year.

  Hope it helps people.
Vue: Pros & Cons
Tags: vue, javascript
Published: 2020-11-26 11:52:14

Pros of Vue Native

    Syntactic code-

The code that is used by Vue Native is easy to grasp as it is read, and written simply. Since a single command can have multiple expressions, it becomes more efficient to work with. This is what is known as the syntactic sugar code.

The reason for having this kind of code in JavaScript is to make it easy and dynamic for everyone, especially the newcomers. It should also be taken care that it does not become too syntactic as well. This runs the danger of making the code ineligible.

    Beautiful ecosystem-

The number of tools in the library of the Vue ecosystem with all the necessary tools needed to deal with problems faced by the developers. The solutions that are recommended are itself again so well-directed that you don’t have to spend much time looking for it. The number of plugins and the Graphic User Interface also makes the speed of Vue Native even better.

    Appropriate documentation-

The type of in-depth documentation that is done, including the descriptions and steps can be useful for beginners as well as expert developers.

    Presents a good learning experience-

JavaScript is a good coding language for Vue Native and other frameworks as well. Therefore, it presents a nice learning curve.
Cons of Vue Native

    To access all the libraries of Vue Native, a developer must know about the functioning of React Native as well.

    Even if you want information that has a lot of depth, you ideally need to look into the documentation of React Native first.

    Customization of the platform is not that easy. It needs expertise in this particular aspect for hassle-free functioning.

    There could have been an improvement in the smoothness of navigation as well.

    If heavy animations and creating games is the priority, Vue Native might not be the cross-platform framework of choice for many.

    The approach is not completely single-coded.

Learn more about here: https://www.rlogical.com/blog/comparison-between-vue-native-and-flutter/
A Front-end Designer's Favourite Online Tools & Resources
Published: 2020-11-26 12:38:45

## Prototype
#### [Figma](https://www.figma.com)

## Fonts
#### [Google Fonts](https://fonts.google.com)

## App Icons Set Generator
#### [Appicon](https://appicon.co)
#### [Favicon](https://realfavicongenerator.net) (Thanks, @maxivanov, for sharing this cool site!)

## Flow Charts
#### [Diagrams](https://app.diagrams.net)

## SVG Code Generator
#### [SVGOMG](https://jakearchibald.github.io/svgomg/)

## Color, Icon, Palettes
#### [Material Palette](https://www.materialpalette.com)

## Coding Playground
#### [Code Pen](http://codepen.io)
#### [Code Sandbox](https://codesandbox.io)

## Key Generator
#### [WordPress Salts](https://api.wordpress.org/secret-key/1.1/salt/)
#### [UUID Generator](https://www.uuidgenerator.net)

## Knowledge Base
#### [Lynda](https://www.lynda.com)
#### [Mozilla](https://developer.mozilla.org)
#### [CSS-TRICKS](https://css-tricks.com)

## Images, Vectors, Icons Stock
#### [Icons8 OUCH](https://icons8.com/illustrations)
#### [Unsplash](https://unsplash.com)
#### [Pexels](https://www.pexels.com)
#### [IcoMoon](https://icomoon.io/)
CSS Smiley 🙂
Tags: codepen
Published: 2020-11-26 12:22:45

---
title: CSS Smiley 🙂
published: true
tags: codepen
---
Attempting to recreate an emoji with CSS using flexbox, gradient, border radius & CSS variables.


{% codepen https://codepen.io/kopijunkie/pen/ZEpEWEY %}
How to prevent software’s top issues before they eat your revenue?
Tags: management, agile, productivity, programming
Published: 2020-11-26 12:18:45

We live in a fast-paced world, and it requires a tremendous effort to build truly unique and genuine software products that serve customers’ needs and create value. The challenge is to build software rapidly in a fast-changing environment.

We wanted to create a comprehensive CTO’s guide to reducing tech debt using agile software development, avoiding the pitfalls of legacy modernization projects, and effectively managing software developers. So, we carried out research on tech leaders’ most commonly faced software development challenges and wrapped it up in a whitepaper, with the goal of helping software leaders and CXOs at startups and enterprises make better decisions concerning software development needs and requirements.

The paper strives to convey the necessary steps that should be taken to prevent and resolve issues in software development. Our research also reveals the primary blockers to growth for tech startups and the biggest software development challenge that tech leaders face.

[Get your guide here.](https://evrone.com/fast-development)
❎❓Quiz: Web Performance #26
Tags: challenge, webperf, webdev, quiz
Published: 2020-11-26 12:07:24

Quiz time! Today it's about CSS.

What is critical CSS?

- CSS that is deprecated.
- CSS that is unused.
- Critical CSS is a technique that extracts the CSS for above-the-fold content in order to render content to the user as fast as possible.
- CSS bug that is hard to find.

---
<center>[Answer the question](https://marcradziwill.com/web-performance-quiz/what-is-critical-css/)</center>
---
❎❓Quiz: Web Performance #25
Tags: challenge, webperf, webdev, quiz
Published: 2020-11-26 12:07:15

Quiz time, folks! 

What is code-splitting?

- Splitting the codebase into smaller parts that are loaded on demand.
- Doing code-review by more than 2 people
- Share code parts with a developer colleague
- Split a task in frontend and backend development.

---
<center>[Answer the question](https://marcradziwill.com/web-performance-quiz/what-is-code-splitting/)</center>
---
Understanding Manual Testing in brief
Tags: testing, test
Published: 2020-11-26 11:58:52

Q1: What is manual testing?
Q2: Importance?
Q3: Types?
Q4: How to perform Manual Testing?
Q5: Advantages?
Q6: Disadvantages?
Q7: Tools?
Q8: Effect of manual testing/conclusion?

**What is manual testing?**
-type of software testing which involves manually executed test cases by tester without using any automated tools.
-it is a process of verifying and validating the functionality of an application to find whether it satisties the specified requirements.
-here you compare the expected behaviour with the behaviour of a developed piece of code.

**Importance**
-purpose is to identify the bugs, issues and defects in the particular software application.
-any new application must be always manually tested before automation testing.
-manual testing does not require knowledge of any testing tool.
-this process plays vital importance in testing, because according to one of the testing fundamentals which states that "pure automation testing is never possible"
-manual testing also makes sure that reported defects are fixed by developers and re-testing has been performed by testers on them.

**Types**
1. Black Box Testing
2. White Box Testing
3. Unit Testing
4. System Testing
5. Integration Testing
6. Acceptance Testing

(types will be explained in upcoming post)


**How to perform Manual Testing**
1. read and understand the software project documentation/AUT i.e. Application Under Test
2. draft test cases that cover all the requirements mentioned in the first step.
3. review the baseline
4. execute test cases on the AUT
5. report bugs if any
6. if step 5 is executed then, perform testing on failing test cases to verify they pass

**Advantages**
-does not require knowledge of coding
-used to test dynamically changing GUI designs
-since the tester interacts with the software as a real user, they are able to discover usability and user interface issues.
-it ensures pure i.e. bug-free software.
-cost-effective

**Disadvantages**
-time-consuming
-require a large number of human resources
-can't reuse test cases for a different software

**Tools**
-since manual testing involves many other types of testing, there are some tools that can be used to test the software depending on the type of testing.
-For example Jira, LoadRunner, Bugzilla, Mantis, Zap, NUnit, Tessy, Citrus, SonarQube, etc.

**Effect of manual testing/conclusion?**
-to perform testing, one needs to be creative, patient and open-minded.
-effective user interface is majorly acquired in manual testing.
-to perform manual testing, one should think like end-user.
Tool for Scraping Recipes
Published: 2020-11-26 11:49:55

Hey everyone, I have a health and fitness blog <a href="https://fitnessunicorn">https://fitnessunicorn.com which answers user queries about whether a particular food is keto or not. I am trying to incorporate a function in which the users can input and ingredient and my website would scrape all the low carb recipes from the web and present to the user. 

Any inputs or insights about how to implement this would be very helpful.
Thank you
Intro to HTML5
Tags: html, webdev, tutorial, programming
Published: 2020-11-26 11:47:04

> This is a continuation of the intro to web dev series,
 
Html means Hyper Text Markup Language it is used to design the structure of the page, and collect user inputs.


html deals with tags e.g
<pre>
&lt;!DOCTYPE html>
</pre>
this is a simple html tag that is used for declaration of html5 , there are different versions of html , that's why a declaration is needed.

an example of a simple html5 structure:

<pre>
 &lt;!DOCTYPE html>
 &lt;html>
   &lt;head>
     &lt;meta charset="utf-8" />
   &lt;/head>
   &lt;body>
     &lt;h1>hi there</h1>
   &lt;/body>
 &lt;/html> 
</pre>
we will go through most tags in this series

the first tag we will be looking at is the :
<pre> &lt;!DOCTYPE html> </pre>

as explained above it is used for declaration of html5

the next tag is the:
<pre> &lt;html> &lt;/html> </pre>

- this tag is used to indicate the starting pointer of your html document
- it is also used to declare the language to use e.g
   <pre> &lt;html lang="en"></pre>

the next tag is the:
<pre>  &lt;head> &lt;/head> </pre>

- this tag is the head tag, it is used to contain data for the metadata which is the data for the about the html document, which will not usually be displayed, it is used to set the properties of the html document such as the style, view-port, character set, scripts e.t.c 
<pre> 
  &lt;head> 
    &lt;meta charset="utf-8" />
    &lt;meta name="author" content="faith james" />
    &lt;script src="./index.js" />
    &lt;link type="text/css" rel="stylesheet"  href="./main.css" />
  &lt;/head> </pre>

the next tag is the :
<pre>  &lt;body>  &lt;/body> </pre>

- this tag is used to contain the content of the html document e.g paragraphs, headings, images, tables e.t.c
- most of the content of this tags are visible in the browser.
- example
<pre>
   &lt;body>
     &lt;h1>This is the first Heading &lt;/h1>
     &lt;p> this is a paragraph &lt;/p>
     &lt;img src="./sample.jpg" alt="this is a simple image" />
   &lt/body>
</pre> 


> we will discuss about more about tags in the next article in this series

> <span>Cover Photo by <a href="https://unsplash.com/@vishnurnair?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Vishnu R Nair</a> on <a href="https://unsplash.com/s/photos/html?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>

> <span>Photo by <a href="https://unsplash.com/@jstrippa?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">James Harrison</a> on <a href="https://unsplash.com/s/photos/html?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
The Ghost that Hunts New Developers
Tags: codenewbie, beginners
Published: 2020-11-26 11:31:31

"I'm not ready to do it yet, or I still have more to learn, then I will start it."

I bet one of these sentences echoes in your mind whenever you want to build a project. Because of it you end up not starting thinking that your current skill is not good enough, or is not to that level. 

It's right that you have a lot to learn, but it's also farthest from the truth. You don't need a vast knowledge in a particular technology to build projects in it. What you have to know is the core basics of technology. 

When you start building your first, second and third, your skills will build up with each project. To be good with technology, you have to give a lot of time for practice. And what the best way than building a project that utilises most of its core features.

It was a paradox to me when I started programming. I use to doubt myself with questions such as "What feature to use if I don't know the technology well enough?" or "How can I know is the right way of solving this problem?". These questions won't fade in the background of your mind. they will keep popping up whether you're an expert or a beginner. It has nothing to do with a particular technology you're learning, but with the way we think as humans. We are doubtful by nature, everything we do we question it and worry about trivial details that hold us back.

The skill won't build up by its own and become enough. It's you who will build it up by deliberate practice, learning and building projects.

Take away
- Learn the core basics.
- Practice, Practice and Practice.
- It's alright to know little.
- Build a lot of projects as much as you can.
Fix Terminal Lags In VsCode 1.15.1
Tags: vscode
Published: 2020-11-26 11:18:38

*Currently, I'm using macOS Big Sur (11.0) and VsCode 1.15.1*

Recently when I'm typing a command in VsCode integrated terminal, it become very laggy. It needs 2-3 seconds to complete. 

This happen when I'm trying to run `git commit -m`. It's really annoying because I need to wait the command to appear in the terminal before I write the commit message.

After googling, I finally found out how to fix it in [VsCode Github Issue](https://github.com/microsoft/vscode/issues/105446). In your terminal, please run:

```sh
// For Visual Studio Code
codesign --remove-signature /Applications/Visual\ Studio\ Code.app/Contents/Frameworks/Code\ Helper\ \(Renderer\).app

// For Visual Studio Code - Insiders
codesign --remove-signature /Applications/Visual\ Studio\ Code\ -\ Insiders.app/Contents/Frameworks/Code\ -\ Insiders\ Helper\ \(Renderer\).app
```

Then restart VsCode or VsCode - Insiders. 

## Source
[VsCode Github Issue - Integrated Terminal Lags Intermittently](https://github.com/microsoft/vscode/issues/105446)
How to get hired: CV and interview tips for the post-covid job market
Tags: career, resume, inthirtyseconds
Published: 2020-11-26 10:54:05

The job market seems to be picking up in most sectors again now, but jobseekers still generally outnumber the positions available. So how do you make sure your application stands out?

I put together a list of common stumbling blocks to help you focus your efforts where they count. 

Are you already doing any / all of these? I know number 3 can be a bit controversial but honestly it's more important than ever!

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

View as a PowerPoint here - https://www.linkedin.com/posts/ashleighlroberts_how-to-get-hired-post-covid-activity-6737677214474633216-GPjw
How to access Secure Properties in DataWeave 2.0
Tags: mulesoft, dataweave
Published: 2020-11-26 10:35:26

In this little blog, I will walk you thru how to access secure properties in dataweave 2.0.

I assume you have [created](https://vanchiv.com/dev/create-application-properties-in-mule-4/) and [encrypted](https://vanchiv.com/dev/secure-properties-in-mule-4/) your properties. Once you configure the properties, you can read secure properties within mule component such as database, file, etc,

**Accessing in Mule Components**

For example, to read the secure properties in set payload - you can write xml like below,
```
<flow name="sample">
    <set-payload value="${secure::encrypted.key}"/>
</flow>
```
**Accessing in DataWeave**

To access secure properties in dataweave script, you need to use **p()** as shown below:
```
%dw 2.0
output application/json
---
{
	password: p('secure::encrypted.key')
}
```
That's simple. I hope you learned something from this little blog. For more MuleSoft article, news and support - visit [Vanchiv](https://vanchiv.com).
link a with line
Published: 2020-11-26 10:00:51


## 紀錄

> html elm 
> a.linkline span 


需要這效果的className 
命名為linkline
a tag包一層span這樣就可以很彈性不用管字數多少
span記得要下相對位置 position: relative;

利用偽元數after來建立這個

+ 1.先設定他的原始位置在右邊寬度0;（呈現的樣貌=最後的結果）

+ 2.滑鼠移過去時線條需要動態
    接者在a:hover span:after 設定
    寬度width:100% ; 從左邊跑出來 left:0

+ 3.加上動態transition 
  線條就會從0跑到寬度100%

完成~~

scss 
```
.linkline{
  text-decoration: none;
    span{position: relative;color: #333;
      &:after{display: block; content: '';height: 1px ; background: navy; width:0;
        -webkit-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
                transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        position: absolute; bottom:0;
        right:0;
      }
    }
    &:hover{
      span{color: red;
        &:after{
          width:100%;
          left:0;right:auto;
        }
      }
    }
}
```
## 成果


{% codepen https://codepen.io/voskaul/pen/qBVKrpG %}