teleren/devto huggingface dataset:
Web Component Considerations
Tags: webdev, a11y, javascript, programming
Published: 2021-10-10 21:39:48

I am working on a new project. Basically, I'm writing a web component that works as a car. There will be a header in a block, body, and an icon. When you are building a web component there are a lot of considerations to take into account, especially accessibility ones.

#Design consideration
When were designing you have to decide what you want the object to do. For this card I wanted to allow the user to customize it well. I want to allow for changing the header, background colors, icons, body content, and size. The body content should be able to have lists, links, and buttons.

#Accessibility Concerns
In order to account for non visual users it has to be accessible via keyboard. This means that any buttons inside of the card can be tabbed to. The icon needs alt-text so you know what the icon is. Any text inside should render for the screen reader as well as a translator for different languages. It also needs to support color contrast and dark modes for visually impaired users.

#Expected Difficulties
Even though I haven't done much with the card yet I can look forward to what I expect to happen. I don't think the changing of properties will be very hard. The title, color and body shouldn't be hard. Changing the button inside may come with complications, especially if we want it to be tabable. I am mostly concerned with the translations. I believe that will be difficult to do.

#Helpful Skills
Luckily, I have some experience in this area. I recently made a button and that was tabable. This should help with those problems in the case that they occur. I also have made dark modes for projects before and would love to implement that into the card.

Thanks for reading! Follow along with the repository [here](https://github.com/TheKodingKrab/project-two)!
Small .Net 6 Improvement 
Published: 2021-10-13 12:56:11

Nice small improvement for ArgumentNullException in .NET 6.

No need to check for null in every method before throwing an exception.

Now it is a one-liner. 🙌

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

#dotnet6 #coding #devcommunity
Track your add-on's performance: extension analytics now available on Partner Center
Tags: webdev, edgeextensions
Published: 2021-10-13 12:49:08

Extension developers can now track the in-market performance of their extension on the Partner Center. Analytics related to extensions is now publicly available, which has been a consistent top ask by our partners.

For each extension, one can track the extension’s performance under the ‘Analytics’ tab on the extension’s page. There are three types of data fields available for an extension, each with a set of various other filters such as distribution against region, OS, and language. The data fields available are: Weekly users, Daily installs, and Daily impressions.

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/58ledb1g7tjq24h5vszw.png)

If you are an extension developer, you can now track your extension’s performance data and work on improving their extension's reach to the users. If you would like to register as an Edge extension developer, you can use the guidance mentioned here.

What else would you like to see and monitor about your extensions? Do share your feedback in the comments!
Introducing Typescript `override` keyword
Tags: typescript, programming, productivity
Published: 2021-10-13 12:40:25

> When a method [on a child class] is marked with `override`, TypeScript will always make sure that a method with the same name exists in a the base class.

- [Typescript Handbook](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-3.html)

The `override` keyword has been a long running feature of languages such as Java and C++, and since version 4.3, is now implemented in Typescript! 🎉

## How Does it Work?

As the top quote explains, the `override` keyword will assert that the function it describes *is present in the parent class*. This will help cut down on typos, and can give you a heads up if you were not aware that a function was changed/removed in the parent class.

```ts
abstract class Animal {
  public sleep() {
    // some default logic
  }

  public eat() {
    // some default logic
  }
}

class Unicorn extends Animal {
  public override sleep() {
    // some new logic
  }

  // Error! The method `eats` does not
  // exist in the parent class!
  public override eats() {
    // some new logic
  }
}
```

This is an example of implementing the wrong function due to a typo, and Typescript catching it for you before runtime!

If you'd like to make marking overridden methods with `override` **required**, you can enable the `noImplicitOverride` options in your `tsconfig.json`.

```json
{
  "compilerOptions": {
    // ...
    "noImplicitOverride": true
  }
}
```

Now, Typescript will throw an error if an overridden method does *not* include the `override` keyword.

---

I hope you learned a bit about the `override` keyword! If you have any questions, corrections, or addons, I would love to hear them. Peace ✌
Dlinkap local Not Connecting

Tags: dlinkaplocalnotconnecting, dlinkaplocalnotworking
Published: 2021-10-13 12:28:53

Wondering how to resolve <a href="https://www.dllnkextset.net/dlinkap-local-not-connecting">Dlinkap local Not Connecting</a> like issues once and for all? Read through the troubleshooting steps mentioned on this website to get through the d-link extender setup wizard and modify the network settings easily. For details on the setup and login process, you can always reach out to the team at our end.
Divide and Conquer
Published: 2021-10-13 12:23:58

## Divide and Conquer
> it is a well-known recursive technique for solving problems. D&C gives a new way to think about solving problem.
To solve a problem using D&C technique, there are two steps:
1. figure out the base case(the simplest possible case).
2. divide the problem until it becomes the base case.


> `D&C isn't a simple algorithm that is applied to a problem. it is a way of thinking about the problem.`

_Example_
> If we want to know the sum of numbers in an array... let's think of the simplest base case we can have.
The simplest case is to have an array of 0 or 1 item. so in each step we need to take our array closer to an empty array.
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1xp9v0sd0o9opj7xmoqg.png">

## Quicksort
> Quicksort is one of the algorithms that is built on divide and conquer technique. It is a sorting algorithm faster than selection sort and it is frequently used in real life.
let's say we want to sort an array using quicksort what are the steps we shall do to have a sorted array.
1. pick an element from the array, this element is called the *pivot*.
2. find the elements smaller than the pivot then the elements greater than the pivot. `this process is called partitioning`

>`[33, 10]` `(33)` `[50, 34]`
3. if sub-arrays are sorted we just need to combine them together.
4. if sub-arrays are not sorted then repeat the first 2 steps until having a sorted array.
Open AI Codex - React
Tags: openai, react, codex, javascript
Published: 2021-10-13 12:18:23

i tried generating code using openai codex. You can access the application at :

http://bhagvank.pythonanywhere.com/

Demo: https://youtu.be/NcSr71kB17E

You can try the input below:
//React component to show sentiment text inside a div

const
Handling Stress, Svelte Mania, Web 3.0
Tags: svelte, web3, blockchain, podcast
Published: 2021-10-13 11:56:56

{% spotify spotify:episode:6pS61dOOkL8eZbxYB1zq54 %}

## What is HTML All The Things

HTML All The Things is a [web development podcast](https://podcast.htmlallthethings.com/) and [discord community](https://discord.com/invite/jweMCx9) which was started by Matt and Mike, developers based in Ontario, Canada. 

The podcast speaks to web development topics as well as running a small business, self-employment and time management. You can join them for both their successes and their struggles as they try to manage expanding their Web Development business without stretching themselves too thin.

## What's This One About?

In this episode Matt and Mike discuss a bunch of different topics that they've been working with recently including managing stress, learning + teaching Svelte, and crypto with Web 3.0. During these uncertain times stress can certainly take a toll on personal and business actions, the duo discuss how they're dealing with (or lack thereof) the stress of today. With a new Udemy course on the way, the guys are working on learning, using, and teaching Svelte - alongside learning how to make a good Udemy course as it's their first one. Cryptocurrencies and blockchain has been a hot topic lately and with that Web 3.0 is also a hot topic, Mike discusses his exposure to it and confuses Matt with that explanation.

## Show Notes

1:30 - Introduction
2:20 - When it rains it pours (handling stress) 
33:00 - Svelte All The Things
43:20 - Web 3.0

## Thank you!

If you're enjoying the podcast consider giving us a review on [Apple Podcasts](https://podcasts.apple.com/us/podcast/html-all-things-web-development-web-design-small-business/id1412209136) or checking out our Patreon to get a shoutout on the podcast. 

**[Support us on Patreon](https://www.patreon.com/htmlallthethings)**

You can find us on all the podcast platforms out there as well as

[Instagram (@htmlallthethings)](https://www.instagram.com/htmlallthethings/)
[Twitter (@htmleverything)](https://twitter.com/htmleverything)
[TikTok (Html All The Things)](https://www.tiktok.com/@htmlallthethings)
Hackerrank-Circular Array Rotation
Tags: python, leetcode, hackerrank
Published: 2021-10-13 12:07:31

John Watson knows of an operation called a right circular rotation on an array of integers. One rotation operation moves the last array element to the first position and shifts all remaining elements right one. To test Sherlock’s abilities, Watson provides Sherlock with an array of integers. Sherlock is to perform the rotation operation a number of times then determine the value of the element at a given position. For each array, perform a number of right circular rotations and return the values of the elements at the given indices.
https://paragnaik2019.medium.com/circular-array-rotation-94267efaf348
What Is The Difference Between Laptop and Desktop Processor
Tags: performance
Published: 2021-10-13 12:04:54

When it comes to performance everyone has their thought on what processor do we have on our laptop or desktop computer. But do you know that even the same processors are different for a laptop and desktop?  

Also read- [Why is desktop computer better than laptop?](https://goscreen.in/advantages-of-desktop/)

Yes, they are very different. how? let me tell you. 
#Processor Size Is Sacrificed
![Laptop Processor Size vs desktop Processor size](https://goscreen.in/wp-content/uploads/2021/10/Screenshot-112.png#main)
Firstly laptops are designed to be compact and more mobile. This means the hardware inside a laptop is also made more compact or smaller. This is exactly what happens with our processor too. To make it fit inside a laptop. The processor is designed in a very specific way that makes it much smaller and under-performing. 

#Heating Problem
Secondly, because we have to fit it inside a laptop the heat sink on the laptop's processor is also very small which often results in fast heating of the component and decreased performance. 

#Battery Dependent
Finally, there is the issue of battery. Since we have to carry our laptop along with us. Obviously, we cannot call it a laptop if it is not mobile. There is a fixed battery which gives us a fixed battery life. When we run a laptop in its performance mode. It might drain all the battery in minutes to run at its full potential. To solve this problem processor is often under cloaked. By doing this they restrict the performance of the processor on the battery. But as soon as you plug in the charger All functions start running very smoothly.

Was this information helpful for you? If yes then I must tell you that publish regular such content at [goscreen.in](https://goscreen.in). Hop on the site to know more about us. 
With that said see you later, And Goodbye!
A Fun Programming Joke To Start Your Day
Tags: jokes, dailydeveloperjokes
Published: 2021-10-13 12:00:23

---
title: "A Fun Programming Joke To Start Your Day"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e3bbae5.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_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:___ Why don't bachelors like Git?

___A:___ Because they are afraid to commit.
 -->
Building a Web Component
Tags: ist402, webdev
Published: 2021-10-10 19:48:43

A lot goes into building a web component, so it's important to plan beforehand. Thinking about each aspect of the component, as well as security, accessibility to those with disabilities, and stylization of it are all important to consider. 

###The Comp + Breakdown
For this assignment, we are working on information cards (shown below).

 ![Info Card Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2w5mn19ny9k4kvk42tam.png)

These cards are made up of 4 main elements:
1. Banner
2. Icon
3. Header
4. Body

Each one of these elements will be customizable, as shown in the image. The banner will go across the top of the card and will allow for color customization. This banner will server simply as a background for the icon and header. The icon will use an SVG, which makes it easily interchangeable. The icon will be placed on the left side of the banner. The header will be composed of a header and sub-header, placed on the banner next to the icon. The body will be placed under the banner. 

###Expected difficulties and What may be manageable
Coming into this class, I have never touched CSS or HTML. I've done the most basic use of JavaScript, and using NodeJS is a whole new beast that I am still getting used it.
So trying to learn then instantly apply what I've learned with little practice will be the hardest thing for me to overcome. Having the button project before this will help, as that provided me with some practice in those languages.
RSpec: request specs vs feature specs
Tags: rails, testing, ruby, tutorial
Published: 2021-10-13 11:33:58

In this screencast I introduce a rather small feature to [Happi](https://happi.team), setting the reply-to address for new threads.

The main point of it is to cover writing request specs that give me confidence my code is working and I also explore and write a feature spec and give some thoughts as to why I wouldn’t normally write an end-to-end test for this type of product feature.

You can find a higher quality version on [Youtube](https://youtu.be/AnHjW033WtM), please subscribe there if you like the content.

---

_P.s. I got a new microphone and am still trying to figure out how to use it properly, so apologies for any breathing or weird noises :)_
Javascript : Async & Await with Practical Examples
Tags: javascript, beginners, programming, tutorial
Published: 2021-10-13 11:33:08

<b>Explained in detail about</b>
* Async
* Await
* Fetching country data using Async & Await
* How Async & Await better than promise
* Javascript Interview questions
{%youtube pJbsd2vAqdI%}
Instagram clone
Tags: javascript, css, html, hacktoberfest
Published: 2021-10-13 10:50:52

Build a frontend clone for Instagram using HTML, CSS, and JavaScript skills.

![logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1ng9pd71jvt2sco2fds.png)

 
__Source code__ - https://github.com/mayankchaudhary26/Instagram-Clone-Project
<br>
You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
View the optimal layout for the site depending on their device's screen size See hover states for all interactive elements on the page Download the starter code and go through the README.md file. This will provide further details about the project. The style-guide.md file is where you'll find colors, fonts, etc.

The designs are in image formats (sketch and figma designs coming soon).

You will find all the required assets in the /assets folder. These include images, fonts, etc.

There is also a style-guide.html file containing the information you'll need, such as color palette and font names. Make sure to open this in the browser to see the contents.
Submit your solution on the platform for the rest of the community to see. Find this project on codedamn projects page for tips on how to do this.
You will find all the required assets in the /assets folder. These include images, fonts, etc.

Remember, if you're looking for feedback on your solution, be sure to ask questions when submitting it. The more specific and detailed you are with your questions, the higher the chance you'll get valuable feedback from the community.
<br>
Your project should:

<li> Be responsive for desktop and mobile phones
<li> Have minimum functionalities and effects working
Style guide :
<br>
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efttp0k1zp6mffmcm73s.png)
 

<br>
__Body__
FONT FAMILY -apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif

<li> FONT SIZE
16px

<li> FONT STYLE
normal

<li> FONT HEIGHT
normal
<br>

__Final Output__ - 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4obmleyvgcscru9b0x86.png)
Creating A Web Component 
Published: 2021-10-10 19:47:58

There are many factors to consider when making a web component. In this blog, we will be identifying these factors. 

First, we have to keep in mind the functionality and states of the card, accessibility concerns, security concerns, and design considerations.

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

As seen in the image of learning cards, our project consists of creating a icon, HTML text body, and header that includes the header and sub header for the card. When creating these learning cards, be mindful of the font size, card colors, font, shape of the card, and padding of the card. A key feature to note is for your card to be responsive with the website. We have to make sure that when the user zooms in and out of the website, the card will adjust to fix the window size. 

##Project Gauge
As an outside view, creating this card component seems pretty manageable. One of our criteria is to implement the slot feature and we already have experience with that in our button project. My main concern is working with HAX. I don't have experience with HAX so there may be a learning curve for me there.
JS Number extensions with Metho
Tags: javascript, webdev, programming, discuss
Published: 2021-10-13 10:36:23

Following on from the previous introduction to Metho, I decided to throw together `metho-number` as a real example of what it allows you to make.

Ruby developers may well recognise some of these number methods:
```jsx
import {
  hex, bin, base, even, odd, ceil, floor, round,
  next, pred, gcd, chr, to, of, times, abs
} from 'metho-number'

254[hex]         // 'fe'
23[bin]          // '10111'
45[base(13)]     // '36'
12[even]         // true
218[odd]         // false
36.2[ceil]       // 37
18.9[floor]      // 18
41.5[round]      // 42
3[next]          // 4
8[pred]          // 7
36[gcd(81)]      // 9 (greatest common divisor)
65[chr]          // 'A'
(-8)[abs]        // 8

5[to(2)]             // [5, 4, 3, 2]
2[to(8, {step: 2})]  // [2, 4, 6, 8]

3[of('x')]              // ['x', 'x', 'x']
3[of(<div>text</div>)]  // Works just fine in JSX

3[times('Go!')]  // 'Go!Go!Go!'
10[times(()=>alert('Hello'))]  // run the function 10 times
```
All of these extensions to the native `Number` type *should* be safe to use in any project.

What do you think? What would you add? Useful library or interesting toy? Would you like to see perhaps `metho-string` and `metho-array`?
{% github jonrandy/metho no-readme %}
{% github jonrandy/metho-number no-readme %}
What Is Forex VPS? How is Forex Related to VPS!
Published: 2021-10-13 06:26:17

Another type of Forex exchanging has arisen somewhat recently. Empowered by the Internet, alongside the expanding utilization of PCs and cell phones, between bank and retail foreign exchange markets have been overwhelmed by electronic exchanging. Alongside e-Forex exchanging, computerized Forex exchanging goes on. 

Utilizing uninhibitedly accessible retail Forex stages, common people and little organizations can exchange Forex. Be that as it may, it needs proficient information and can be tedious to follow the business sectors and gather data on which exchanging choices are based. Computerized exchanging permits people with brief period or experience to take part in the forex market.

<h2><strong>What Is the Forex Market?</strong><h2>

Forex is a portmanteau of foreign money and exchange. Foreign exchange is the method involved with transforming one cash into one more for an assortment of reasons, generally for business, exchanging, or the travel industry. As indicated by a 2019 third report from the Bank for International Settlements (a worldwide bank for public national banks), the day by day exchanging volume for forex came to $6.6 trillion April 2019.1 

<strong>KEY TAKEAWAYS</strong>

The foreign exchange (otherwise called FX or forex) market is a worldwide commercial center for trading public monetary forms. 

As a result of the overall reach of exchange, business, and money, forex markets will in general be the biggest and most fluid resource markets on the planet. 

Monetary forms exchange against one another as exchange rate sets. For instance, EUR/USD is a cash pair for exchanging the euro against the U.S. dollar. 

Forex markets exist as spot (cash) showcases just as subordinates markets, offering advances, prospects, choices, and money trades. 

Market members use <a href="https://www.routerhosting.com/forex-vps/">forex VPS</a> to fence against worldwide money and loan fee hazard, to conjecture on international occasions, and to broaden portfolios, among different reasons. 

What Is the Forex Market? 

The foreign exchange market is the place where monetary standards are exchanged. Monetary standards are significant in light of the fact that they empower acquisition of labor and products locally and across borders. Global monetary standards should be exchanged to lead foreign exchange and business. 

In case you are living in the United States and need to purchase cheddar from France, then, at that point, possibly you or the organization from which you purchase the cheddar needs to pay the French for the cheddar in euros (EUR). This implies that the U.S. merchant would need to exchange the same worth of U.S. dollars (USD) into euros. 

The equivalent goes for voyaging. A French traveler in Egypt can't pay in euros to see the pyramids since it's not the privately acknowledged money. The vacationer needs to exchange the euros for the nearby cash, for this situation the Egyptian pound, at the current exchange rate.