teleren/devto huggingface dataset:
What is the size impact of importing multiple methods from date-fns
Tags: javascript
Published: 2021-08-05 06:59:02

In this article, I'll look at application size with multiple methods imported from [date-fns](https://date-fns.org/). In the previous benchmark attempt, I was only using 1 method from each library. date-fns, as the only one built with tree-shaking in mind, enjoyed an advantage in this comparison that it will not have in real-world applications. 

# Dependencies & build scripts
All project details are as before. You can check the [previous article](https://how-to.dev/what-is-the-size-impact-of-importing-one-method-from-date-fns) to find out more.

# The test idea
To make a more fair comparison, I want to add more date operations. Such as:
* finding a start of a period
* counting difference between dates
* formatting

# Naive code

First, let's try all-purpose formatting:

```js
import { sub, startOfQuarter, format, differenceInDays } from "date-fns";

const today = new Date(),
  quarterStart = startOfQuarter(today),
  diffDays = differenceInDays(today, quarterStart);

console.log("Yesterday was", sub(today, { days: 1 }));

console.log(
  "The quarter started on",
  format(monthStart, "yyyy-mm-dd"),
  "and today, it is",
  diffDays,
  "days since then"
);
```

The first downside, the formatting tokens are different than in Moment.js & other libraries. It means we will have to map all the values as we migrate.

The other downside is the build size:
* webpack - **22.2 KiB**
* esbuild - **23.0 KiB**

Which is more than what I got in [Day.js](https://how-to.dev/what-is-the-size-impact-of-importing-dayjs) benchmark.

# Formatting optimization
Ok, we use a library optimized for tree-shaking. Maybe we shouldn't import the most complex method from it. We can make some effort to optimize the format, especially as they provide many methods for it:

![date-fns-format.png](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qyw7f496d5tn27jonhyw.png)

## Updated code
```js
import { sub, startOfQuarter, formatISO9075, differenceInDays } from "date-fns";

const today = new Date(),
  quarterStart = startOfQuarter(today),
  diffDays = differenceInDays(today, quarterStart);

console.log("Yesterday was", sub(today, { days: 1 }));

console.log(
  "The quarter started on",
  formatISO9075(quarterStart, { representation: "date" }),
  "and today, it is",
  diffDays,
  "days since then"
);
```

The build size:
* webpack - **3.63 KiB**
* esbuild - **3.6 KiB**

This is much better and about half of what adds Day.js.

# Links
The examples used here have their own branches - the [naive formatting](https://github.com/marcin-wosinek/date-fns-bundle-size/tree/naive-format) & the [final code](https://github.com/marcin-wosinek/date-fns-bundle-size/tree/second-round)

# Summary
It looks like date-fns is indeed the smallest option, as long as we are willing to invest the effort to find alternatives to use the all-purpose [format method](https://date-fns.org/v2.23.0/docs/format).
Animating a photo across screens in Flutter
Tags: flutter, dart
Published: 2021-08-05 06:56:06

We already made a [photo grid to photo detail app in Flutter](https://daily-dev-tips.com/posts/building-a-photo-grid-view-in-flutter/), and today we are building further on that application.

We'll be adding an animation so that the photo will expand to the new screen. Hero widgets are a very cool feature that Flutter gives us out of the box!

The Flutter hero animation looks like the example you see below:

![Animating a photo across screens in Flutter](https://cdn.hashnode.com/res/hashnode/image/upload/v1628146550733/PoZwYapuo.png)

## Animating a photo between screens in Flutter

Feel free to follow along and take [this branch](https://github.com/rebelchris/flutter/tree/grid-view) as the starting point.

The animation can be done through a Hero widget. This is a widget that takes content and a tag. This tag is what defines the animation between the two screens.

So sketch this out for you:

- Screen 1 <Hero tag="image_1" />
- Screen 2 <Hero tag="image_1" />

Flutter can then identify these two tags for you and animate between them.

![Flutter hero example](https://cdn.hashnode.com/res/hashnode/image/upload/v1627626971395/3HCo2NDbf.png)

The first thing we need to do is add the hero wrapper on the ScreenOne grid images.

Before this was the container widget, so we wrapped that in a hero widget and add a unique tag for this image (The actual image name).

```dart
child: Hero(
	tag: _items[index].image,
	child: Container(
		decoration: BoxDecoration(
			image: DecorationImage(
			fit: BoxFit.cover,
			image: NetworkImage(_items[index].image),
			),
		),
	),
),
```

We also need to wrap the image in a receiving hero widget on the second screen widget.

```dart
child: Hero(
	tag: image,
	child: Image(
		image: NetworkImage(image),
	),
),
```

And now Flutter can identify these two images and will do all the animation for us, which is fantastic!

And that's how easy Hero animations in Flutter are.
If you want to see the complete code example, check it out on [GitHub](https://github.com/rebelchris/flutter/tree/hero-animation).

### 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)
Control desktop YouTube with your mobile phone as remote
Tags: python
Published: 2021-08-05 06:47:26

{% github Raunasur/mobile-yt-controller %}
It happened yesterday, that we were watching a really boring movie. My laptop was at a distance and me and my family were sitting relaxed. But when some intolerable scenes came, I had no option but to standup, go to the laptop, and either forward the scene or change the speed. During that time I wished I had a remote control for YouTube and today I made it.

Usage:
```
git clone https://github.com/Raunasur/mobile-yt-controller.git
cd mobile-yt-controller
pip install qrcode[pil]
pip install flask
pip install pyautogui
python mobile-yt-controller.py
``` 
Now scan the qrcode with a smartphone connected to the same network (simply put, with the same router or hotspot). Open the web page, use the buttons and if you liked it. Drop a star on github.
忘了添加允许外网访问的 firewall rule 导致的问题
Tags: troubleshoooting
Published: 2021-08-05 06:36:50

在使用 kubespray 在 gcloud 上部署 k8s 时，发现网络问题，SSH debug 居然html代码，怀疑是tencent-wifi网络有限制，就改到一台云服务器上执行部署任务，又因为在安装python3.7时遇到云服务器无法访问github的问题，后来又打算找一台gcloud上另一台服务器作为部署机，编译安装python3特别慢。这时候才发现从本机其实也无法访问新建的gcloud的3台服务器。删除服务器，打算迁移到另一个zone才发现忘了添加开放外网访问的防火墙规则
Native google video ads render issue
Tags: reactnative, android
Published: 2021-08-05 06:14:04

Hi all, I'm having a weird issue using Googles Ad manager sdk and implementing native video ads. The video does not auto play consistently and when it does, it shows a blank space instead of a video but when scrolling away and back to the ad, it will show the video. 

It seems that the video only is able to render on the 2nd render pass. 

Anyone else ran into this issue?
HTML tags | cite
Tags: html, tags, cite
Published: 2021-08-05 06:13:57

It is used to **cite the title of a creative work** (book, song, painting, movie, site, post, tweet...) and **must contain the title of the work**.

**It should not include the name of the author**, although some specifications say that it can.

It is usually rendered in italics, although it can be modified with CSS.

- Type: *inline*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite) | [Support](https://caniuse.com/mdn-html_elements_cite)
How to make cutout corner in CSS
Tags: html, css, beginners, material
Published: 2021-08-05 06:05:22

#let's just get to the point shall we

first we need to make container and some boxes
```
<div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
</div>
```

then in the CSS we need to copy the following code
```
.container {
    display: flex;
    flex-direction: row;

.box {
    margin: 10px;

    /* Simple trick to center content */
    display: flex;
    justify-content: center;
    align-items: center;

    width: 64px;
    height: 64px;
    padding: 4px;
    background: #f00;

    /*This is the meat of the cutout */
    clip-path: polygon(
       15% 0%,
       85% 0%, 
       100% 15%, 
       100% 85%, 
       85% 100%, 
       15% 100%, 
       0% 85%, 
       0% 15%);
}
```

if you want to add like box-shadow you first need to make container for each box
```
...
        <div class="box-container">
            <div class="box">1</div>
        </div>

...
```
then in the css
```
.box-container {
    filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 1));
}
```
the result:
![box cutout with drop shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t5cmgsgjpognlm1md3bb.png)

and that's it, the clip-path is can do more than just a cut out i found this tool that'll prolly help you with clip-path in general [https://bennettfeely.com/](https://bennettfeely.com/clippy/)
firefox has tool too to help you with by opening dev tools `ctrl+shift+c`(then click the element you want to edit)
![Firefox dev tools](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hkde6s3wtwtah7g3mqd2.jpg)
Implement custom Promise.all()
Tags: javascript, programming, codenewbie
Published: 2021-08-05 05:47:46

```
Promise.myAll = function (values) {
  return new Promise((resolve, reject) => {
    let results = [];
    let completed = 0;
    values.forEach((singlePromise, index) => {
      singlePromise
        .then((res) => {
          results[index] = res;
          completed++;
          if (completed === values.length) resolve(results);
        })
        .catch((e) => {
          reject(e);
        });
    });
  });
};

function task(time) {
  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(time), time);
  });
}

const taskList = [task(1000), task(5000), task(3000)];

Promise.myAll(taskList)
  .then((results) => {
    console.log("got results", results);
  })
  .catch(console.error);

```
Generate dynamic ID's using JavaScript
Tags: javascript, uuid
Published: 2021-08-05 05:14:47

## Create simple ID generator with math random

```javascript

const generateID = ()=> {
   return Math.random().toString(36).slice(2)
}


// How to use

const UID = generateID() 


```


## Generate dynamic ID's with length control

```javascript

const generateID = (length)=> {
   const id = Math.random().toString(36).slice(2);
   const uid = [...Array(length)].reduce((r)=> {
           return r+id[~~(Math.random()*id.length)]
   }, '')
}


// How to use

const UID = generateID(8) 


```


## Generate UUID with RFc standard 
RFc standard UUIDs must be of the form `xxxxxxxx-Mxxx-Nxxx-xxxxxxxxxxxx` , where `x` is one of [0-9, a-f] `M` is one of [1-5] and `N` is [8,9,a or b ]

```javascript

const generateUUID= ()=> {
   const placeholder = [1e7]+-1e3+-4e3+-8e3+-1e11;
   const uid = () => {
     const id = crypto.getRandomValues(new Uint8Array(1));
     return (uid ^ id[0] & 15 >> uid / 4).toString(16)
   }
   return placeholder.replace(/[018]/g, uid)
}


// How to use

const UUID = generateUUID() 


```
Announcing the Build with Astra DB Series!
Tags: hackathon, cassandra, datastax, astradb
Published: 2021-08-05 04:49:06



Build a Modern Data App is a virtual  [hackathon](https://buildamoderndataapp.com/?utm_source=AHBlog&utm_medium=website&utm_campaign=bamdaa&utm_id=buildamoderndataapp&utm_content=article#source=AHBlog)  powered by DataStax. To help the participants and enthusiasts understand the technology behind Astra DB we’re launching a series of workshops for 5 weekends.

Your takeaways are going to be:

- Quickly learn the basics of Apache Cassandra and Astra DB
- To show case how easy it is to get started with Astra DB
- Learn to build highly available and scalable apps

**Why should I attend these workshops?**

If you are not familiar about Apache Cassandra and Astra DB, here is your opportunity to learn how companies like Netflix, Yelp, Venmo are using Cassandra and NoSQL as their back-end. You can also learn how to quickly take a database to production and access it using any programming language that you are familiar with using a REST APIs.

***Below is the complete schedule of these workshops***

**Workshop 1**

Build with Astra DB: Intro to Cassandra and Astra DB by DataStax 
Date & Time: July 31, 2021 09:30 AM ET | 7pm UTC +5.30 | 9.30pm UTC +8
Register: https://us02web.zoom.us/webinar/register/WN_6EYzPaRvRTm-2pJ7Z0XxSQ

**Workshop 2**

Build with Astra DB: Fireside Chat, Getting Started & Learn to create a Netflix Clone
Date & Time: August 7, 2021 09:30 AM ET | 7pm UTC +5.30 | 9.30pm UTC +8
Register: https://us02web.zoom.us/webinar/register/WN_vQAC_amFRI-KaePLJeEkiQ

**Workshop 3**

Build with Astra DB: Fireside Chat, Getting Started & Learn to create a TikTok Clone Date & Time: August 14, 2021 09:30 AM ET | 7pm UTC +5.30 | 9.30pm UTC +8
Register: https://us02web.zoom.us/webinar/register/WN_fECMWQ_TQEm-okSr_ax0gg

**Workshop 4**

Build with Astra DB: How to scale with DataStax’s Astra DB with Apache Cassandra 
Date & Time: August 21, 2021 09:30 AM ET | 7pm UTC +5.30 | 9.30pm UTC +8
Register: https://us02web.zoom.us/webinar/register/WN_ejzFGempQna4-uyfWsQ5mg

**Workshop 5**

Build with Astra DB: How to Create an Award-wining Startup 
Date & Time: August 27, 2021 09:30 AM ET | 7pm UTC +5.30 | 9.30pm UTC +8
Register: https://us02web.zoom.us/webinar/register/WN_qNF-DCdgTo-SLsA8lrsHIA

**Familiar with Apache Cassandra & NoSQL?**

Great! Join us at the Build a Modern Data App – Powered by DataStax hackathon happening from September 3-5, 2021.  [Click here](https://buildamoderndataapp.com/?utm_source=AHBlog&utm_medium=website&utm_campaign=bamdaa&utm_id=buildamoderndataapp&utm_content=article#source=AHBlog)  to know more and register. This virtual hackathon also has 26,000 USD worth prizes up for grabs!
Git Workflow
Published: 2021-08-05 04:42:55

In this post:
- [Enjoying my git workflow](#my-git-workflow)
- [The Workflow](#the-workflow)
- [The Magic](#the-magic)


###My Git Workflow
I've started using git as a tool, and not just something that I have to do. In this way it's turned from a liability into an asset. There's nothing crazy going on - although there is just maaaybe a little bit of magic happening.

####The Workflow
Here are fragments of how I approach git and incorporate it into my work:

- Am I starting a new feature? 
  - Ok, checkout a new branch.
- Have I produced any work that is:
  1. Complete?
  2. Incomplete but is substantial/meaningful **and** hasn't broken anything else?
      - Commit that branch with an appropriate message.
- Can I merge complete work on a side branch into my main branch?
  - Merge into main.

- Have I gone too far down the wrong path?
  - Checkout an earlier commit.
    - I'm now in the DETACHED HEAD state.

  - Have I completed work on the detached head that I'd like to preserve?
    - Merge it! (So far i've only done that by creating a new branch out of it and then merging that new branch. But there are ways of merging it directly.)

- Am I curious about some feature of an earlier commit?
  - Look it up and investigate based on a clearly written commit message!

####The Magic

I might have noticed that writing with committing in mind has changed how I approach code. I have always enjoyed writing code that is runnable/testable as possible. That means moving incrementally, starting with the fundamental kernel of what I'm trying to achieve and then building with subsequent rounds of code here. Git reinforces that. 

I want to commit often. I also want to commit working code. A synergy exists between these two forces.

I've long been comfortable operating with a starting vision, and writing code, switching between files as I put those varied pieces together, and often layering additional, non-elemental (for that stage), functionality on top as I go. Working with git has given me a greater discipline for keeping stages (those pieces of work between commits) simpler, and functional.
My new CLI rpg
Published: 2021-08-05 04:38:57

https://github.com/picardcharlie/python101/blob/master/projects/clirpg.py

Recently finished my first "game".  Although simple, it helped me to write a larger program than I have before with python.

I explored using input() as a way to control flow and although there isn't much use of the f string formatting, I have been enjoying learning to use it.
Message is empty error on Outlook Node.js sendMail API request on pipedream
Tags: node, api, outlook, pipedream
Published: 2021-08-05 04:14:58

I am sending this node.js request through Pipedream:

```
   async(event, steps, auths) => {
      return await require("@pipedreamhq/platform").axios(this, {
        "url": `https://graph.microsoft.com/v1.0/me/sendMail`,
        "headers": {
          "Authorization": `Bearer ${auths.microsoft_outlook.oauth_access_token}`,
          "Content-Type": 'application/json'
        },
        "method": 'POST',
        "message": {
          "subject": 'Hey there, your whatbuylists product details are attached',
          "body": `Thank you for your purchase of this whatbuylists product list. The details of the list are available here: ${steps.get_product.$return_value.metadata.successURL}`,
          "toRecipients": `${steps.trigger.event.data.object.customer_details.email}`
          }
        }
      
      )
      }
```
And getting this error. How can I resolve it?:

```
{
  "error": {
    "code": "ErrorInvalidParameter",
    "message": "The value of the parameter 'Message' is empty."
  }
}
at null.createError (/tmp/ee/node_modules/@pipedreamhq/platform/node_modules/axios/lib/core/createError.js:16:15)
at null.settle (/tmp/ee/node_modules/@pipedreamhq/platform/node_modules/axios/lib/core/settle.js:17:12)
at IncomingMessage.handleStreamEnd (/tmp/ee/node_modules/@pipedreamhq/platform/node_modules/axios/lib/adapters/http.js:236:11)
at IncomingMessage.emit (events.js:387:35)
at null.endReadableNT (internal/streams/readable.js:1317:12)
at process.processTicksAndRejections (internal/process/task_queues.js:82:21)
```

How can I resolve this issue? I am new to coding and trying to automate a workflow in pipedream.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 10
Tags: php, javascript, webdev, tutorial
Published: 2021-08-05 04:08:39

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.

In this video,we will be testing for form submission

{% youtube S4zaNOn7OW8 %}

In this video,we will be creating users table

{% youtube bKt24AqImLw %}

If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Free JavaScript Learning Resources


Tags: javascript, programming, codenewbie, 100daysofcode
Published: 2021-08-05 03:46:30

Learning Platforms:

 http://freeCodeCamp.org
 http://JavaScript.info
 http://theodinproject.com
 http://scrimba.com 
 http://jsforcats.com
 http://codecademy.com
 http://JavaScript30.com
 http://sololearn.com

Text Guides/Documentation:

http://developer.mozilla.org/en-US/docs/Web/JavaScript
 http://JavaScript.info
 http://wesbos.com/javascript
 http://w3schools.com/js/
http://w3docs.com

Free E-Books:

Collection of E-books http://jsbooks.revolunet.com
 http://eloquentjavascript.net
 http://github.com/getify/You-Dont-Know-JS
 http://github.com/getify/Functional-Light-JS
Chttp://github.com/thejsway/thejsway

Guides (Worth Reading) :

 http://github.com/ryanmcdermott/clean-code-javascript
 http://github.com/leonardomso/33-js-concepts
 http://github.com/bevacqua/js
 http://github.com/mbeaudru/modern-js-cheatsheet

YouTube Channels:

Traversy Media (The goat)
 The Net Ninja
 freeCodeCamp
 Florin Pop
Clever Programmer
 Ania Kubow
 Coder Coder
 Kent C. Dodds
 Dev Ed
 Programming with Mosh
Web Dev Simplified
 Academind
Fireship

Podcasts:

 Modern Web
 ShopTalk
 Full-stack radio
 Syntax
 JavaScript Jabber
 Codepen Radio
 JAMstack Radio

Interview Prep:

 http://github.com/sudheerj/javascript-interview-questions
 http://github.com/leonardomso/33-js-concepts
 http://github.com/lydiahallie/javascript-questions
http://github.com/trekhleb/javascript-algorithms
http://github.com/getify/You-Dont-Know-JS
http://github.com/DrkSephy/es6-cheatsheet
https://t.co/SC6DYekGwp?amp=1

Data Structures and Algorithms:

http://github.com/mgechev/javascript-algorithms
computerhttp://github.com/TheAlgorithms/Javascript
computerhttp://github.com/trekhleb/javascript-algorithms
 http://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript
computerhttp://github.com/amejiarosario/dsa.js-data-structures-algorithms-javascript
 http://github.com/humanwhocodes/computer-science-in-javascript
New CSS Features You Might Not Know About
Published: 2021-08-05 02:42:01

###☑ Scroll snapping 
It gives you the option to lock the user’s viewport to a certain parts or element of your site. It is very useful to create cool transitions and help users focus on the most important page elements while scrolling down the page. 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l25a73aublfnxb69akx.png)
 

You can find a simple demo of it here.This effect is visible in mobile apps a lot, yet, with scroll snapping, you can bring it to websites as well.
https://codepen.io/tutsplus/pen/qpJYaK


Usage is also relatively simple on the most basic level. You simply apply the type of scroll snapping to a container and define where its children should snap to.


Of course, there is more to it. If you want to learn about it, CSS Tricks have great write up.
https://css-tricks.com/practical-css-scroll-snapping/


That only leaves a look at browser compatibility, which is pretty good.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dawuscww6btl7obgqb45.png)
 


### ☑ :is and :where
They allow you to reduce repetition in CSS markup by shortening lists of CSS selectors.


For example, compare this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lgt8mfupyn52bku9gbe.png)
 

To this:
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bqm6fag9x7wl4nw43f66.png)
 

The same thing works with :where :
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/16l8161kbv59b4fvxs6n.png)
 

If the markup is the same, what’s the difference?
 The difference is that :is is a lot more specific. It takes the level of specificity of the most specific element in the parentheses.


In contrast to that, the specificity of :where is always zero. Consequently, it is a lot easier to override further down the line.


- Would love to hear your take on this. Do share your views.
- A lot more interesting CSS properties are on the way.