teleren/devto huggingface dataset:
Learn blockchain, apps that make your life easier, SEO, freelancing, and more
Tags: programming, webdev, javascript, beginners
Published: 2021-09-29 06:36:50

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

Always make health the main priority

By shrutibalasa 

{% twitter 1440683268525813777 %}

Thread for learning everything you need about blockchain

By codingyuri 

{% twitter 1441003819777896452 %}

Building an online presence is the best thing you can do as a developer

By Insharamin

{% twitter 1440547192859594764 %}

Learn SEO

By VittoStack 

{% twitter 1441066749676380162 %}

Developing on the blockchain is a lot easier than you think

By PrasoonPratham 

{% twitter 1441415183369261056 %}

10 awesome apps that can make your life a lot easier

By georgemoller 

{% twitter 1441472918563610633 %}

JavaScript in the industry

By SimonHoiberg 

{% twitter 1439852233563197440 %}

Simple way to start your web development journey

By Prathkum 

{% twitter 1440786262495940611 %}

Freelancing is not all about programming

By study_web_dev 

{% twitter 1440592781165019142 %}

Great thread about the fundamentals of Blockchain

By FrancescoCiull4 

{% twitter 1441353130629816321 %}

_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
Add chapter markers to podcast/audio using FFmpeg
Published: 2021-09-29 06:26:03

Chapter markers are an easier way for listeners to navigate your podcast, see what's coming up, or skip over spoilers they don't want to hear. So I want to add the support for users to add chapter markers on [JustCast](https://justcast.com/).  To do this, I turn to my weapons of choice, FFmpeg (v4.4).

## Add chapter markers

FFmpeg can take metadata from a file and save it to the audio file.

```
ffmpeg -i "input-ep1-hello-world.mp3" -i "ep1-hello-world-metadata.txt" -map_metadata 1 -codec copy "output-ep1-hello-world.mp3"
```

### ep1-hello-world-metadata.txt

```
;FFMETADATA1

[CHAPTER]
TIMEBASE=1/1000
START=0
END=60000
title=chapter 1

[CHAPTER]
TIMEBASE=1/1
START=60
END=90
title=chapter 2
```

We need to ensure two things: 1. end time needs to be greater than the start time, 2. the chapter start time needs to be greater than the last chapter end time.

[https://ffmpeg.org/ffmpeg-formats.html#Metadata-1](https://ffmpeg.org/ffmpeg-formats.html#Metadata-1)

### fluent-ffmpeg

[Fluent-FFmpeg](https://github.com/fluent-ffmpeg/node-fluent-ffmpeg)

```
ffmpeg(url)
      .input(metafile)
      .audioCodec('copy')
      // .outputOptions('-metadata', 'title=song x')
      .outputOptions([
        "-map_metadata 0" // # 0 means copy whatever in the existing meta, 1 means ignore the existing
      ])
      .toFormat('mp3')
      .saveToFile(this.outputFilePath)   
      .on('codecData', (audioData) => {
        // console.log(getSecondsFromHHMMSS(audioData.duration))
        this.duration = getSecondsFromHHMMSS(audioData.duration);
      })   
```
Weekly web development resources #89
Tags: weekly, webdev
Published: 2021-09-29 06:23:53



______

##[Burdy](https://burdy.io/)
[![Burdy](https://wweb.dev/weekly/content/89/burdy.jpg)](https://burdy.io/)
An open-source headless CMS, which integrates well with Next.js.

______

##[Basic Pattern Repository](https://patterns.helloyes.dev/)
[![Basic Pattern Repository](https://wweb.dev/weekly/content/89/patterns.jpg)](https://patterns.helloyes.dev/)
A collection of hand-coded SVG <pattern>'s, ready to be used in inline SVG or however you like.

______

##[How I Make CSS Art](https://yosracodes.hashnode.dev/how-i-make-css-art)
[![How I Make CSS Art](https://wweb.dev/weekly/content/89/css-art.jpg)](https://yosracodes.hashnode.dev/how-i-make-css-art)
A nice article by Yosra Emad on how she approaches CSS Art.

______

##[cccreate](https://cccreate.co/)
[![cccreate](https://wweb.dev/weekly/content/89/cccreate.jpg)](https://cccreate.co/)
A carefully curated collection of tools & resources for web creators.

______

##[Saveddit](https://saveddit4reddit.herokuapp.com/)
[![Saveddit](https://wweb.dev/weekly/content/89/saveddit.jpg)](https://saveddit4reddit.herokuapp.com/)
A tool to search and filter your saved Reddit posts and comments.

______

##[Today's 28 Best React Blogs](https://bloggingfordevs.com/react-blogs/)
[![Today's 28 Best React Blogs](https://wweb.dev/weekly/content/89/react-blogs.jpg)](https://bloggingfordevs.com/react-blogs/)
A list of React blogs, where you'll find news and tutorials about React.js, Gatsby, Next.js, and React Native.

______

##[#launchin30HTML](https://launchin30html.carrd.co/)
[![#launchin30HTML](https://wweb.dev/weekly/content/89/build-product.jpg)](https://launchin30html.carrd.co/)
A project by Lucian Tartea, where he builds and launches a product in 30 days with just HTML and CSS.

______

##[Animated Backgrounds](https://animatedbackgrounds.me/)
[![Animated Backgrounds](https://wweb.dev/weekly/content/89/backgrounds.jpg)](https://animatedbackgrounds.me/)
A collection of 30+ animated backgrounds for websites and blogs.

______

##[Guide to browser cookies](https://prateeksurana.me/blog/javascript-developer-guide-to-browser-cookies/)
[![Guide to browser cookies](https://wweb.dev/weekly/content/89/browser-cookies.jpg)](https://prateeksurana.me/blog/javascript-developer-guide-to-browser-cookies/)
Learn how browser cookies work and how you can access, manipulate and control their visibility across browser with JavaScript.

______

##[Partytown](https://github.com/BuilderIO/partytown)
[![Partytown](https://wweb.dev/weekly/content/89/partytown.jpg)](https://github.com/BuilderIO/partytown)
A lazy-loaded 6kb library to help relocate resource intensive scripts into a web worker.

______

To see all the weeklies check: [wweb.dev/weekly](https://wweb.dev/weekly)
Best Mobile Phones under 15000
Tags: mobile, phone, bestcheck
Published: 2021-09-29 06:22:27

If you are not a technophile then the first question that arises in your head while purchasing a new phone is: 

‘What features should I look for while purchasing a smartphone?’

Don’t worry!

You can easily find the answer in this article. 

Moreover, we also have in-budget as well as premium phones for you!

<a href="https://www.bestcheck.in/best-mobile-phones-under-15000/">Click here</a> to find the best phones under 15000 for you!

It also includes information like the best brands of smartphones, how to choose a smartphone, FAQs on smartphones, and much more.

You will also find your favorite phone’s gadgets there.
Solidity Gas Optimizations pt.2 - Constants
Tags: blockchain
Published: 2021-09-29 06:21:22

## Variables in the blockchain
Storing variables in memory, on a normal computer, is easy and cheap. However, blockchains are distributed systems, in which every node - or computer - has to store the data locally. That makes storing data expensive, this behavior is discouraged except where necessary.

## SSTORE and SLOAD
These are two of the more expensive OPCOs in the EVM for the reason outlined above. [In my previous post](https://dev.to/javier123454321/solidity-gas-optimization-pt1-4271) I talk a bit about the gas cost of loading from storage using `SLOAD`, and why it is better to use `MLOAD` instead when possible.

However, there are times that you need to instantiate a variable on creation or deployment and do not expect that variable to change. In these cases, you can use a `constant` or `immutable` modifier which will let the solidity compiler know about the future of that variable. Let's take an example simplified contract:
```ts
contract Token {
    uint8 VERSION = 1;
    uint256 decimals;
    constructor(uint256 val) {
      decimals = val;
    }
}
```
The `decimals` variable in the contract is only there for display purposes in the frontend, ERC20 tokens don't actually have a concept of 'decimals'. This means that it does not use it, it is only for users of the contract to know how to format outputs. This also means that the variable should not change. To indicate that it should not change, we have two options, `constant` or `immutable`. According to the docs:

> The compiler does not reserve a storage slot for these variables, and every occurrence is replaced by the respective value.

Constant variables are replaced at compile time by their values, while immutable variables are replaced at deployment time. Either way, we avoid the annoying fees required with doing an `SLOAD` operation.

One simple fix looks like :
```ts
contract Token {
    uint8 constant VERSION = 1;
    uint256 immutable decimals;
    constructor(uint256 val) {
      decimals = val;
    }
}
```
One small caveat to note is that constant variables cannot make reference to the state of the blockchain. You cannot do something like:
```ts
uint256 constant VERSION = block.number
```
or things to do with context generally, like `block.timestamp`, `address(this).balance` or block.number `msg.value` or `gasleft()` nor call external contracts.

Immutable variables however, are fine to do so.

We'll leave it here, and stay tuned for part 3!
Alexander Zingman Абмяркуйце здзелку па сельскай гаспадарцы
Published: 2021-09-29 06:09:55

Ганаровы консул Зімбабвэ ў Беларусі Аляксандр Зінгман заявіў, што амбіцыйная здзелка паміж дзвюма краінамі ў памеры 58 мільёнаў долараў дазволіць рэвалюцыяналізаваць сельскагаспадарчую галіну Зімбабвэ. Першая партыя сучаснай сельскагаспадарчай тэхнікі была адпраўлена ў Харарэ, у тым ліку 20 збожжаўборачных камбайнаў для збожжа і кукурузы, 100 трактароў і 52 сеялкі, другая партыя чакаецца да снежня.

"Гэтая здзелка прыносіць у Зімбабвэ беларускі вопыт у галіне сельскай гаспадаркі і машынабудавання. Абедзве краіны пашыраюць адносіны з 2015 года, і гэтая здзелка з'яўляецца бяспройгрышнай для абодвух",-сказаў Аляксандр Зінгман.

To Read full article visit here : 

http://news.myquest.in/alexander-zingman-says-belarus-agriculture-deal-will-boost-zimbabwes-food-security/
HTML tags | th
Tags: html, tags, th
Published: 2021-09-29 06:07:38

It is used to **define a cell as the header of a group of cells in a table**. The exact nature of this group is defined by the `scope` and `headers` attributes.

With the `scope` attribute we define the cells of which `<th>` is the header, and it can have the following values:

* `row`: the `<th>` is the header of **all the cells of the row** to which it belongs.
* `col`: the `<th>` is the header of **all the cells of the column** to which it belongs.
* `rowgroup`: the `<th>` is the header of **all the cells of the** `rowgroup` to which it belongs.
* `colgroup`: the `<th>` is the header of **all the cells of the** `colgroup` to which it belongs.

If `scope` is not specified or does not have a correct value, the browser will automatically choose the set of cells to which the `<th>` applies.

In the `headers` attribute you can put a list of IDs of other `<th>` with which the cell is related. Example:

```
<table>
  <tr>
    <th id="name" colspan="2">Name</th>
  </tr>
  <tr>
    <th headers="name">Firsname</th>
    <th headers="name">Lastname</th>
  </tr>
</table>
```

Neither of these two attributes, `scope` and `headers`, have visual translation in browsers but can be used by screen readers.

There are two other attributes that are similar to each other and related to table layout: `colspan` and `rowspan`.

* `colspan` contains a positive integer between `0` and `1000`, with `1` being its default value, **which indicates how many columns the cell extends over**. If set to `0`, the cell is extended to the last element of the `<colgroup>`.
* `rowspan` contains a positive integer between `0` and `65534`, with `1` being its default value, **which indicates how many rows a cell extends over**. If set to `0`, the cell extends to the last element of `<thead>`, `<tbody>`, or `<tfoot>`.

The text of a `<th>` appears by default in bold and centered, **to change this and other presentation properties you should not use attributes in the tag**, but CSS properties such as `background-color`, `font-weight`, `text-align`, `vertical-align` or `width`.

Its parent must be a `<tr>` element.

Has an **implicit ARIA role** `columnheader` or `rowheader`.

- Type: *table-cell*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th) | [Support](https://caniuse.com/mdn-html_elements_th)
How teaching others helped me learn GitHub?
Tags: github, opensource, webdev, beginners
Published: 2021-09-29 06:01:15

Currently, I am doing a web development internship at my college, under which I am leading a team of 6 people. As a part of this internship, we have to develop a website for Department of Mechanical Engineering at our college.

Recently, I experienced how teaching others helped me learn GitHub better than ever before as I was helping my teammates with pushing changes to GitHub and do other similar things like fetch, pull, merge, commit, merging conflicts etc. on it.

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

Earlier, using it was really a challenging task for me. I would always refer to the documentation for the commands and to see how to use them. 

But now, it seems so easy and my interest in using GitHub for doing team projects really got boosted.

In the past, I had watched 2-3 tutorial videos on "How to use Git and GitHub?" But nothing helped much.

Instead, teaching others and resolving their errors really helped me learn using it.

I would suggest everyone learn things by doing it practically rather than hunting for a new tutorial on YouTube every time. 

Also, teaching others really helps you learn the skill better.
View Switch: Last Buttom View Choice (Grid or Line) not Change When Refresh/change page
Tags: tutorial, javascript, bootstrap, jquery
Published: 2021-09-29 05:55:36

When creating two views i.e. grid and view I also include a button to switch from one to the other. The problem is when you go to a new page/refresh the page, the display is returned to the initial mode, not the view that has been selected. The following script wants to solve this problem.

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

## Purpose
Creates view parameters that are saved and checked every time a new page is opened, and immediately activates the view button according to the saved view parameters

## Prerequire
- Bootstrap classes; `d-none`
- Jquery; selection, on click
- Javascripts; `localStore`, `function`

## Script
``` js
function createItem(typeView) {
  localStorage.myview = typeView;
}


function switchView(options){
    $('#view-option .button-view').addClass('off-view');
    if (options == 'grid'){
      $('#book-view-list').addClass('d-none');
      $('#book-view-grid').removeClass('d-none');
      $('#view-option .button-view[view="grid"]').removeClass('off-view');
      
    } else {
      $('#book-view-grid').addClass('d-none');
      $('#book-view-list').removeClass('d-none');
      $('#view-option .button-view[view="list"]').removeClass('off-view');
    }
}


$('#view-option .button-view').on('click', function() {
  var option = $(this).attr('view');
  createItem(option);
  switchView(option);

});

// Crosscheck parameter page begin here!
let myView = localStorage.getItem("myview");

if (myView != null){
  switchView(myView);
}

```

## The principle of this script
The script function consists of two, namely the `createItem` function to store view parameters, besides that there is a `switchView` function which is a parameter to change the view with  _if logic_ script, which acts to change the css view to show/hide the grid/list view.

The active script requires an active click trigger, which executes the `createItem` and `switchView` functions; it should be noted that the button view html section has been given a parameter `view=grid` or `view=list`, so by taking one of these parameters to be stored and passed to the view switch.

The last script to check the parameters that have been saved and run the switch based on the parameters.
Top 10 Windows keyboard Shortcut Keys 🚀🚀
Tags: webdev, beginners
Published: 2021-09-29 05:54:39

 Hello Guys, Today in this article I am showing top 10 windows shortcut key for beginners. 
  So, Let's start today's article... 

• Top 10 Windows Keyboard 
  Shortcut key 👇
  ( "Win" mean Windows Key )

👉 Win + E :- 
   This shortcut key quickly open your file manager.

👉 Win + UP/DOWN Arrow :- 
   Win + Down arrow key minimize working window and Win + Up arrow used to full screen working window. 

👉 Win + Left/Right Arrow :- 
   This short cut key used to split screen in two parts when you press Win + Left arrow keys working window take place in left side of screen and when you press Win + Right arrow working window in right side of screen. 

👉 Win + D :- 
   This keys use for minimize all open tabs or window in your pc.

👉 Ctrl + N :- 
   Quick creating new file in your desktop. 

👉 Ctrl + Shift + N :- 
   This keys create quick new folder in your desktop. 

👉 Win + ";" :- 
   How to open emoji panel in your desktop?? Then press Win + ";" and see your emoji panel. 

👉 Win + Shift + S :- 
   Take a advance screenshot in your pc by using Win + Shift + S. You can take rectangle, square and free-form screen shots.

👉 Win + V :- 
   You need copied text which you copy 5-6 hours before then press Win + V and see your clipboard history. 

👉 Win + L :- 
   Lock your pc quickly by pressing Win + L keys. 


🙏 Thanks for reading....
Branching and Merging 
Tags: opensource
Published: 2021-09-29 05:31:07

In this week, our weekly assignment is adding more feature to previous Static Site Generator and practicing branching and merging. 

I choose two features for [application](https://github.com/mkim219/kimchi-ssg):
- Converting `---` horizontal line in Markdown into HTML `<hr>` tag [issue#14](https://github.com/mkim219/kimchi-ssg/issues/14)
- Coverting inline code block in Makrdown into HTML `<code>` tag [issue#15](https://github.com/mkim219/kimchi-ssg/issues/15)

For the adding the feature, I have created two regex to grab the Markdown syntax and replace to HTML tag with contents. This process has been done very smoothly because I only have to alter the code that my lab 2 partner had been made. However, I have created two separate branches and write the code in same line which I expect to merge conflict.

I had change to work with my friend to run the website and other developers in co-op experience. Usually I have merge in GitHub instead of using Git bash or terminal. Dealing with merge conflict in terminal or Git bash is new experience for me. 

The first branch merged with `fast-forward` merge with no conflict. But the merging second branch has merge conflict. The error message like 
``` 
Auto-merging kimchi-ssg/helpers.cs
CONFLICT (content): Merge conflict in kimchi-ssg/helpers.cs
Automatic merge failed; fix conflicts and then commit the result.
```
I can identify where the merge conflict is happened with `git diff`. Also Git provides very convenience feature to identify the conflict in the file. 3 sets of indicator `<<<<<< head`, `======`, `>>>>>>` help me to identify the conflict and allows me to fix the error on IDE. After that I add the file and [commit with message](https://github.com/mkim219/kimchi-ssg/commit/3e290db4b552c3d4c30ad8c76fdcc9dc3b5b6c19). Then I have pushed fully merged into the Github and pull the `main` branch to test the features.  

This weekly assignment allows me to practice in situation that merge conflict is happened. Next time I can easily deal with merge conflict than this weekly assignment.
Sorting an 2D-Array as a whole. @Medium
Tags: algorithms, programming
Published: 2021-09-29 05:26:18

Wrote an Article Explaining how to sort a 2D-Array as a whole Without Row-Column Order. Check it out here
[@Medium](https://medium.com/@it_it_ayush/sorting-a-2d-array-without-row-or-column-order-in-java-466acb9b2cf0)
Protractor for AngularJS in Automation Testing
Tags: softwaretestingcompany
Published: 2021-09-29 05:26:16

Protractor is an end-to-end testing framework, is an open source automation for Angular and AngularJS applications. It is designed by Google developers on the top of webdriverJS for node.js program. It tests your application running in a real world browser that interacts with its users. It extends webdriverJS functionalities on web applications to enable automation of useractions.

“End-to-End Testing” is a methodology which is used to test the flow of application from start to end or verify the use-cases and user scenario of the application.

“AngularJS” is an open-source framework to build for front-end applications for the web. It is a javascript based framework maintained by Google. It is referred to as Angular 1.

“Node.js” is an open source application to develop networking applications on the server-side. It is written in javascript and allows you to run on a server.

“WebdriverJS” is an implementation of selenium javascript binding for selenium webdriver API and interacts with browser elements. Protractor is a wrapper over WebdriverJS. It has more functionalities so it will handle angularJS elements.

To read more, please click on link below-
https://www.fleekitsolutions.com/protractor-angularjs-automation-testing/
Create Blazor Polar and Radar Charts in Just 10 Minutes
Tags: blazor, webdev, csharp, dotnet
Published: 2021-09-29 05:23:20

Learn how easily you can create and configure [Syncfusion Blazor polar and radar charts](https://www.syncfusion.com/blazor-components/blazor-charts) in a Blazor WebAssembly app using Visual Studio 2019. 

In this video, you will learn how to add simple Blazor polar and radar charts to a Blazor WebAssembly app. You will see how to render the Blazor radar and polar charts with basic features like data markers, series plotting types, and tooltips. 

Explore our tutorial videos: https://bit.ly/3zOI1l3 

Download example from GitHub link: https://bit.ly/2XZnAFk

{% youtube -Y90SKMpot8 %}