teleren/devto huggingface dataset:
Developers needed – Help getting to SvelteKit 1.0
Tags: svelte, opensource
Published: 2021-08-06 06:36:50

As per https://github.com/sveltejs/kit/issues/2100 SvelteKit team member Ben McCann calls for help:

We're actively working towards getting SvelteKit 1.0 out! But there's a lot to do. Just reviewing incoming PRs, prioritizing issues for 1.0, suggesting solutions for important issues, etc. is nearly a fulltime job.

We've knocked out over 100 issues that were on the 1.0 milestone. There's only a couple dozen left and we'd love a hand making that list a bit shorter

If you'd like to help, please consider working on any of these issues:

https://github.com/sveltejs/kit/issues?q=is%3Aopen+is%3Aissue+milestone%3A1.0

We're happy to help get to consensus on what the solution should be. If it's unclear, feel free to ping the ticket or find me on Discord under this same username.
How to use quarters in Day.js
Tags: javascript
Published: 2021-08-06 06:15:36

This article will show how to work around a small gotcha in [Day.js](https://day.js.org/) and show the library's code for the second round of the build size benchmark.

# Backstory
As I explained in the [second article about date-fns](https://how-to.dev/what-is-the-size-impact-of-importing-multiple-methods-from-date-fns), comparing the use of only one method skews our benchmark. Especially as one library is full-on tree-shaking and the other doesn't support it. So I developed a bit more complex example, and the article linked before shows it in date-fns.

# First try
My first try was straightforward, same code as I would use with Moment.js:
```js
import dayjs from "dayjs";

const today = dayjs(),
  quarterStart = dayjs().startOf("quarter"),
  diffDays = today.diff(quarterStart, "days");

console.log("Yesterday was", dayjs().subtract(1, "day").toDate());

console.log(
  "The quarter started on",
  quarterStart.format("YYYY-MM-DD"),
  "and today, it is",
  diffDays,
  "days since then"
);
```

To my surprise, the log I've got is:
```
The quarter started on 2021-08-06, and today, it is 0 days since then.
```

The quarter didn't start on the 6th of august.

# Gotcha

Via GitHub [issue](https://github.com/iamkun/dayjs/issues/537), I found in the [documentation](https://github.com/iamkun/dayjs/blob/dev/docs/en/Plugin.md#quarterofyear) `QuarterOfYear` plugin:
```js
import quarterOfYear from 'dayjs/plugin/quarterOfYear'

dayjs.extend(quarterOfYear)

dayjs('2010-04-01').quarter() // 2
dayjs('2010-04-01').quarter(2)
```

## Fix

So in my example, I just needed to add 2 lines to have everything work as expected:
```
 import dayjs from "dayjs";
+import quarterOfYear from "dayjs/plugin/quarterOfYear";
+
+dayjs.extend(quarterOfYear);
 
 const today = dayjs(),
   quarterStart = dayjs().startOf("quarter"),
```

## Impression

For sure, the first encounter with plugins in this library wasn't smooth. It looked more like a library bug than an incomplete import. I wonder if throwing an error or logging something in the consoles would be a better dev experience. Maybe now, knowing Day.js is not such a monolith, I'll expect some plugins import?

# Benchmark

The final code builds:
* webpack - **7.39 KiB**
* esbuild - **8KiB**

# Links

The final code is available [here](https://github.com/marcin-wosinek/day-js-bundle-size/tree/second-round), and here the [first try](https://github.com/marcin-wosinek/day-js-bundle-size/tree/first-try).

# Summary
In this article, we have walked through an update to Day.js code for the second round of the build size benchmark. Besides, we discussed the quarter plugin gotcha the library has.
8 Projects you should make to take your React Game to the next level
Tags: react, firebase, webdev
Published: 2021-08-06 06:10:52

We all want to show off our skills in front of others.. Why not make some cool projects so that we also have evidence for our words!!

Let's dive into these 8 projects that will help you improve your react skills...


###☑ Build a Photo Gallery with React and Firebase

This tutorial teaches you how to create a photo gallery. The tutorial not only covers the basics and fundamentals of React but also shows you how to create your own custom hooks. Yes, custom hooks!

###☑ Build an Expense Tracker using React Hooks and Context API

In this tutorial, create an Expense Tracker Application using React Hooks and Context API. Use this to track your expenses and never go broke again.
https://www.youtube.com/watch?v=XuFDcZABiDQ


###☑ Build Hangman with React by CodeSTACK

In this tutorial, Brad builds a hangman game using codeStackr. A must watch for those looking to learn React basics, fundamentals and Hooks.
https://www.youtube.com/watch?v=jj0W8tYX_q8


###☑ Build an Exercise Tracker using React.js and Hooks

In this video, You will be building a exercise tracker and you'll get to learn Hooks and React Router. Build this and go hang your own man😂😂😂
https://www.youtube.com/watch?v=iqewbHLKkQk


###☑ React.js Full Crash Course with a Meetups Project

A crash course by Maximilian Schwarzmuller (Academind) that teaches you all the fundamentals of React.js. This tutorial also includes a project that uses Firebase as a database.
https://www.youtube.com/watch?v=Dorf8i6lCuk


###☑ Build a Weather Application

This tutorial uses the Open Weather Map API to make calls to a restful api to return the current weather data. This uses the Modern Javascript Fetch AP along with React hooks and conditonals.
https://www.youtube.com/watch?v=GuA0_Z1llYU


###☑ Build a Todo Application in React.js

DevEd shows you how to create a Todo Application in React.js
https://www.youtube.com/watch?v=pCA4qpQDZD8


###☑ How To Build A Better Spotify With React

Spotify is pretty cool, but what if you could make a better version? In this video, you will create a Spotify clone that not only has many of Spotify's features but also includes lyric lookup.
https://www.youtube.com/watch?v=Xcet6msf3eE
HTML tags | meter
Tags: html, tags, meter
Published: 2021-08-06 06:05:02

It is used to **define a scalar measure within a known range or fractional value**, for example the percentage of use of a hard disk or the fuel level of a vehicle.

It has several attributes:

* `value` specifies the value of the `<meter>` and **is the only required attribute**. It must be between `min` and `max` (if they are defined). If it has no value or is incorrectly formatted, its value is 0. If it is specified but not within the range of `min` and `max`, it takes the value of the closest extreme.
* `min` specifies the minimum value it can take. It must be less than `max` and by default it is 0.
* `max` specifies the maximum value it can take. It must be greater than `min` and by default it is 1.
* `low` specifies the value beyond which the metric is considered to have a low value. It must be greater than `min` and less than `high` and `max`. If it is not specified or its value is less than `min`, it takes the value of `min`.
* `high` specifies the value beyond which the metric is considered to have a high value. It must be less than `max` and greater than `low` and `min`. If it is not specified or its value is greater than `max`, it takes the value of `max`.
* `optimum` specifies the value that is considered optimal for the metric. It must be contained between `min` and `max`. The browser can choose to color the bar differently if the value is above or equal to optimal.
* `form` specifies the form to which the `<meter>` is associated and its value will be the `id` of the `<form>` that is in the same document. If not specified, the `<meter>` will look for a `<form>` among its parents to associate with. This attribute should only be used when the `<meter>` is used to represent the value of some form field, such as an `<input type="number" />`.

Between its opening or closing tags, a text will be put that represents the value that it is showing.

**It should be used with an associated tag** using `for`-`id` for better accessibility.

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

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meter) | [Support](https://caniuse.com/meter)
Javascript File Download Monitoring Help?
Published: 2021-08-06 05:37:49

/*
I am testing this fragment of html5 and javascript on Firefox 64 bit 90.02 on 64 bit Windows 10.  There is no web server software
serving this page, and it is just a local file being opened by the test web browser.  This code has no syntax errors so far, its just that the request.onprogress does not catch every fetch iteration of the file download, when triggered and given a save destination, via the mouse on the href tag in the web browser.  This code doesn't catch each iteragioin of the file download, and populate event.loaded and event.total each time, with a bytes number, to ultimately all be used to update the progress bar.  Can someone 
get this code to behave as I wish so far, so that I can continue with the rest, plase?
*/

<script>
var fileName = document.getElementsByName("download1")[0]
.getAttribute("href").toString(); 
 
var request = new XMLHttpRequest();

request.responseType = "blob";

request.onprogress = function(event) 
{
//alert("request.onprogress has fired.");

if(event.lengthComputable)
{
alert("Progress so far: " + event.loaded + ". Total file size: " +      
       event.total + ".");
}
};

request.open("GET", fileName, true);

request.send();

/*
The following turns off the local file, non-webbrowser, firefox XMLHttpRequest error.

about:config security.fileuri.strict_origin_policy true stops, false allows through.
*/

document.getElementsByName("progress1")[0].value = 0; 
//number as a percentage, 0-100.

</script>
Dev.to API's which can be used to view posts on your web page / portfolio
Tags: devrel, api, portfolio, webdev
Published: 2021-08-06 05:35:51

#Steps:
1. Create a API key from your dev.to account, [here](https://dev.to/settings/account)
2. Save your API key, in postman or .env file of your project.

> Used this API in my [portfolio](https://senthil-v.herokuapp.com/posts/), which works great. Do check it out.

#API:
##### Your Published Article
```
curl --location --request GET 'https://dev.to/api/articles/me/published' \
--header 'api-key: API_KEY'
```

##### Your Unpublished Article
```
curl --location --request GET 'https://dev.to/api/articles/me/unpublished' \
--header 'api-key: API_KEY'
```

##### Update an Article
```
curl --location --request PUT 'https://dev.to/api/articles/{id}' \
-d '{
      "article": {
              "title": "Hello, World!",
              "published": true,
              "body_markdown": "Hello DEV, this is my first 
                   post",
              "tags": [
                  "discuss",
                  "help"
              ],
              "series": "Hello series"
              }
    }' \
--header 'api-key: API_KEY'
```

##### Create a new post
```
curl --location --request POST 
'https://dev.to/api/articles' \
-d '{
           "article": {
              "title": "Hello, World!",
              "published": true,
              "body_markdown": "Hello DEV, this is my first 
                    post",
              "tags": [
                  "discuss",
                  "help"
               ],
               "series": "Hello series"
              }
    }' \
--header 'api-key: API_KEY'
```

##### List of followers
```
curl --location --request GET 'https://dev.to/api/followers/users' \
--header 'api-key: API_KEY'
```

##### List of tags you follow
```
curl --location --request GET 'https://dev.to/api/follows/tags' \
--header 'api-key: API_KEY'
```

##### Get your Profile Photo
```
curl --location --request GET 'https://dev.to/api/profile_images/{user_name}' \
--header 'api-key: API_KEY'
```
Video Conferencing Solutions
Tags: videoconferencingsolutions
Published: 2021-08-06 05:25:53

Video conferencing Solutions is live, visual connection between two or more remote parties over the internet that simulates a face-to-face meeting. Video conferencing is important because it joins people who would not normally be able to form a face-to-face connection.At its simplest, video conferencing Solutions provides transmission of static images and text between two locations. At its most sophisticated, it provides transmission of full-motion video images and high-quality audio between multiple locations.
<a href="https://www.gladwingroup.com/video-conferencing-solutions">
   Video Conferencing Solutions</a>
https://www.gladwingroup.com/video-conferencing-solutions
Connect Customer to Developer with OneDev Service Desk
Tags: devops, git
Published: 2021-08-06 05:14:24

# Introduction

[OneDev](https://onedev.io) is a performant open source git server, with customizable issue workflow and built-in CI/CD.

Version 4.9 comes with the service desk feature, which allows your customers to submit tickets via email without the need to have a OneDev account. These tickets can then be created in desired projects, and assigned to appropriate staffs in your team. All further discussions over the tickets can take place completely in email, with  discussion contents posted to ticket as comments. Customer will also get notifications when there are any ticket activities, for instance, when a relevant release is created or deployed.

# Feature Highlights

Before diving into service desk setup, let’s check what the service desk can do for you:

1. Customer can either send ticket to a uniformed email address, for instance *support@yourcomany.com*, or send to project specific one like *support+yourproject@yourcompany.com*. Tickets sent to uniformed email address will be created in default project of the customer, and you can move them to other projects later if desired.
2. Customer can only create tickets in authorized projects. Authorization is done by checking customer email address.
3. All recipients of the email will be added to watch list of created ticket, so that they can be notified of ticket activities and join the discussions.
4. Html format and attachments of the email are carefully handled to achieve same experience at Email side and web UI side.
5. For different customers, you may configure different ticket properties such as priorities and assignees.
6. All emails relating to a particular ticket will be organized into a single thread to track discussion context, as well as reduce notification noises. Users can also unsubscribe from the ticket.
7. Content of the ticket notification email can be customized.

# How to Set Up

First of all, you need to enable mail setting and its check incoming email option:

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

Also [subaddressing](https://en.wikipedia.org/wiki/Email_address#Subaddressing) needs to be enabled at your mail server for system email address. Test mail sending and receiving at bottom of the page to make sure it works. 

Now OneDev is capable to send ticket notifications via email. Users receiving notification email can also add comments to the ticket by replying the email. Content of the notification email can be customized via notification templates below the mail setting.

However to be able to create tickets via email, you should also enable the service desk setting like below:

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

All done! Now authorized users can send email to system email address to create tickets!
Git and Middleware
Published: 2021-08-06 05:03:40

In this post:
- [git](#git)
- [Express Middleware](#express-middleware)

##git
*This is actually a piece that I shared first with my teammates and then again with my cohort-mates over Slack.*

####A small problem-solve of mine today:
 - **The problem**
  - Remote branch has one whole directory that I’d like to pull into clean main branch.
 - **Bad Solution**
  - `git merge <BRANCH>`
  - Why? Merge conflicts! Why deal with conflicts when I know my target directory to be pulled in is 100% clean.
 - **Good Solution**
 - 'git checkout <BRANCH> <path-to-target-directory/file>'
  - Why? This will merge/overwrite/import (whatever you want to call it) anything standing in the way of moving exactly what you want, exactly where you want it. It’s brute force and this is a time that calls for force.
 - **Further Reading:**
https://jasonrudolph.com/blog/2009/02/25/git-tip-how-to-merge-specific-files-from-another-branch/

##Express Middleware:

I have a little bit of experience with middleware from working with Django. Seeing it again in Express has been very consonant. The way I see it from each tool is that middleware concerns attaching processing to requests as the request travels from the user, through the server and its middleware chain, and then back to the user in the form of the response.

**In Django**, middleware is applied to the `request` object, which natively contains a ton of information including user data.

I've been using openId to manage authentication for these very early stages of my blog project. **Express applies middleware** app-wide via the `app.use()` function. To attach user data to requests, you call `.use` on some authentication config data and then Express tracks that data across the application. 

To login-protect a route in express you can apply the requiresAuth() function as a parameter to the http request function like so:
```javascript
app.get('/profile', requiresAuth(), (req, res) => {
  res.send(JSON.stringify(req.oidc.user));
});
```

I never wrote custom middleware for Django. As I grow as a developer, I'll look to leverage middleware to make my request handling more dynamic.

In the same way I look forward to applying methods to models on Mongoose to make code both DRYer and more flexible.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 11
Tags: php, javascript, webdev, tutorial
Published: 2021-08-06 04:59:54

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 sanitize user email

{% youtube h2As2ufcHjo %}

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)
ASP.NET Core Blazor Custom Data Sorting
Tags: blazor, dotnet, csharp, webdev
Published: 2021-08-06 04:30:44

In this video, we will discuss how to perform sorting in Blazor DataGrid. We discussed paging in our previous video. Click here for the complete course page.

We are using Syncfusion DataGrid component and it's free to use. [Click here to claim the free license](https://www.syncfusion.com/products/communitylicense).

{% youtube oqEhu0-jSz8 %}
Step-by-Step Guide To Build  Porfolio Apps with Vue.js [ Series - Portfolio Apps ]
Tags: guide, portfolio, vue, challenge
Published: 2021-08-06 04:19:13

Are you going to build apps for your portfolio ? 

Awesome ! 

Have you choosing the Framework Vue.js ?

You are in the good place.

For next weeks, I decided to challenge myself. My AIM coding seven apps and including them in my portfolio.

The first app is a mediation app inspired by the YouTuber Dev Ed.

{% youtube oMBXdZzYqEk %}

His tutorial used Vanilla Javascript HTML & CSS. Let's build it with my favorite Framework Vue.js ❤️.

See you in next post 😉

1 / Meditation App

http://vibe-meditation.me/

{% link https://dev.to/sithcode/how-to-build-a-vue-meditation-app-with-vue-js-series-portfolio-apps-278n %}

2 / Shopping Cart

https://shopping-cart-demo-sith.netlify.app/

{% link https://dev.to/sithcode/how-to-build-a-shopping-cart-app-with-vue-js-series-portfolio-apps-4164 %}

3 / Trello Clone

https://trello-clone-sith.netlify.app/

{% link https://dev.to/sithcode/how-to-build-a-trello-clone-app-with-vue-js-series-portfolio-apps-3fn9 %}

4 / Tesla's Home Page Clone

https://tesla-clone-home-page.netlify.app/

{% link https://dev.to/sithcode/how-build-tesla-s-home-page-clone-with-vue-js-series-portfolio-apps-36fd %}
Azure Fundamentals AZ-900 Module 1
Published: 2021-08-06 04:10:22

## AZ-900 Module 1

{% youtube WzJ_r1Q77fQ %}

## Resources

Email Notification - https://groups.google.com/g/techtalks-wriju
Google Group - https://groups.google.com/g/techtalks-wriju/
Youtube Channel - https://youtube.com/c/TechTalksWriju
Dev.io Blog - https://dev.to/wrijugh
LinkedIn - https://linkedin.com/in/wrijughosh/
Twitter - https://twitter.com/wrijugh
Facebook Page - https://www.facebook.com/groups/azureforall
Blog - https://wriju.wordpress.com
Trigger your E2E tests from another repo's Bitbucket Pipeline build
Tags: e2e, cypress, bitbucket, pipeline
Published: 2021-08-06 03:50:33

There are two school of thoughts on whether End-to-end (E2E) tests should be on same repository or on a separate repository. If its taking you weeks or months to debate on that with your team, then there could be a middle-ground 🤠.

If there is a separate team / resource working on the E2E tests and another team / resources working on the source code, then how about a compromise to make it work? This is by simply triggering the E2E tests on any changes made in the source code. 

This is highly possible by using Atlassian's [Pipe - trigger pipeline](https://bitbucket.org/product/features/pipelines/integrations?p=atlassian/trigger-pipeline).

On the application / source code's `bitbucket-pipeline.yml` file, simply add the following as a step:
```yml
    - step: &run-automated-tests
        name: Run E2E and API automated tests
        script:
          - pipe: atlassian/trigger-pipeline:4.2.1 # https://bitbucket.org/product/features/pipelines/integrations?p=atlassian/trigger-pipeline
            variables:
              BITBUCKET_USERNAME: $BITBUCKET_USERNAME
              BITBUCKET_APP_PASSWORD: $BITBUCKET_APP_PASSWORD
              REPOSITORY: 'my-cypress-tests'
              # ACCOUNT: '<string>' # Optional
              BRANCH_NAME: 'master' # Optional
              # CUSTOM_PIPELINE_NAME: '<string>' # Optional
              # PIPELINE_VARIABLES: '<json>' # Optional
              # WAIT: 'true' # Optional - if set to true, it waits for the triggered pipeline to complete. If the triggered pipeline fails, this pipe will also fail.
              # WAIT_MAX_TIMEOUT: '<string>' # Optional
              # DEBUG: '<boolean>' # Optional
```
`BITBUCKET_USERNAME` can be hard-coded to your Atlassian username or this can be set under the ***Repository settings > Repository variables*** section of Bitbucket to encrypt secrets.
`BITBUCKET_APP_PASSWORD` would need to be generated via ***Personal settings > App passwords*** then creating a new app password.
![Screen Shot 2021-08-01 at 4.59.52 pm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tq79a4z4p2xeatggnse3.png)
 

Alternatively, a shared account can be created by your Atlassian administrator that can be used across CI/CD pipeline and would not need dependency on resources going in and out of the team / company. 

To add alerting, simply integrate the tests with Slack (include as many stakeholders as possible 😂
![Screen Shot 2021-07-30 at 8.32.16 pm](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sl8rcp24q1dl8dzfbpml.png)
This is a good opportunity to say *"Sorry Mr. Software Engineer, you can't proceed until you fix your breaking changes (and no, I'm not fixing my tests either!)* Just kidding! Collaborate with your developers as much as possible to resolve the issues 😇