teleren/devto huggingface dataset:
Learning a New Language - C#!
Tags: csharp, productivity, webdev, devjournal
Published: 2021-03-01 03:58:21


The job search period in this industry can be very overwhelming and can lead to us losing direction on what to do next. Whether that’d be working on your previous projects, developing our knowledge on a language you’ve worked with before, or learning new languages.  
 
I took this time to dip my fingers in the basics of a couple of languages I have been interested in. I decided to start with C#, a related language to the first language I worked with, C. It was an interesting experience getting a refresher and remembering where it all started.

I took some notes during this process and would like to share them with anyone who is beginning to work with C# or is interested.
 
One major difference I was not aware of before, was the compiling process. With C and C++, when the application is compiled, the compiler translates the code into the native code of the machine. With C#, the compiler converts the Intermediate Language(IL) or Common Intermediate Language(CIL) into the machine code. This is done before the IL or CIL can be executed.
 
An easy way to understand and view the structure of a C# application is with this diagram. I often refer to this to remind myself of the pattern of containers whenever needed. A container missing in this diagram is ‘Assembly’ a container for related namespaces.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/42qzaxikv64asqgidml6.png)
 
This is another useful diagram to keep track of the ‘Bytes per Type’ which can come in useful when converting types. 
Ex: 
```javascript
int myInt = 10;
double myDouble = 5.25;
Console.WriteLine(Convert.ToInt32(myDouble));  // convert double to in
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emcphkb87gcn0phb9mt4.jpg)
 
To learn about all of this and more, I took a Udemy course that I absolutely recommend for any C# beginner:
                                                       	[CSharp Beginner Tutorial](https://www.udemy.com/course/csharp-tutorial-for-beginners/)
What is semantic HTML?
Tags: html, beginners, webdev
Published: 2021-03-01 03:45:49

When starting to learn HTML you will hear the term *semantic markup*. What does this mean and why is it important? Let's break it down and take a look at some examples.

- [What is semantic HTML?](#what-is-semantic-html)
- [Why is this important?](#why-is-this-important)
- [Examples of semantic elements](#examples-of-semantic-elements)
- [Conclusion](#conclusion)

## What is semantic HTML?

Before we dive into semantic HTML let's define *semantics*:

> **semantics** is the study of meanings. - [Merriam-Webster](https://www.merriam-webster.com/dictionary/semantics)

When we write our HTML structure we want to ensure we give it meaning. HTML provides a set of tags we can use to build the structure of our document. We want to consider the meaning of these tags so we can appropriately layout our site in such a way another developer, browser, and assistive technologies can understand.

## Why is this important?

There are two main reasons why this is important:

1. It makes it easier to read the HTML. When you are reading through the document and see the element `<nav>` right away you know that consists of some type of navigation.

2. It's a great start to providing accessible websites. Assistive technologies, specifically a screen reader, will scan the document to get information. It helps assistive technologies to better associate the content of the site. For example, screen readers allow users to skip content based on headings, so ensuring you are using the correct heading structure and not skipping heading levels is important.

## Examples of semantic elements

Below are some examples of semantic elements:

- `<form>` - used to gather user input.
- `<p>` - used for creating paragraphs.
- `<header>` - used to define the header of the document or section.
- `<section>` - used to group related content.
- `<footer>` - used to provide a footer for the main document or a section.
- `<nav>` - used as the container element for navigation links.
- `<h1-h6>` - defines the heading levels of the document.
- `<main`> - used to define the main content of the site.

## Conclusion

Semantic markup is used to give our document structure meaning. It provides developers a better understanding of the document and allows assistive technologies to do their jobs better.

If you haven't already please follow me on Twitter ([@RoccoSangllino](https://twitter.com/RoccoSangellino)) where I share more information on web development.
using reduce to calc longest range
Tags: javascript, beginners, react
Published: 2021-03-01 03:31:37

Hey all I am trying to solve this.
I have an open that contains a nested array of ranges. 
```
let test = {ranges: [[01, 10], [11, 100], [1000, 10001]]};

function characterCount(script) {
  return test.ranges.reduce((count, [from, to]) => {
    return count + (from - to);
  }, 0);
}

console.log(test.ranges.reduce((a, b) => {
  // console.log("a", a, "b", b);
  console.log("a", a, "b", b);
  return characterCount(a) < characterCount(b) ? b : a;
}));

```
the result should be [1000, 10001];
Any help appreciated I finding this very tricky.
Beginning of an Endeavor: Why Software Engineering
Published: 2021-03-01 03:28:56

The story I tell everyone who asks me why I want to become a Software Engineer is that I saw a video on TikTok of a girl who took a coding bootcamp directly out of high school, at Flatiron, and has been wildly successful (and genuinely happy) since then. 

The story I don’t tell everyone is that I found that video in a moment of absolute despair. I found myself deeply dissatisfied with my current job and position and lack of advancement opportunities, but also lack of better options. I spent time job-searching to no avail, felt hopelessly stuck, and knew I needed a change, but that idea alone was too broad and overwhelming. 

Then I saw the video on TikTok. 

So while it sounds funny that a video on social media led me to want to become a Software Engineer, at Flatiron School in particular, I can’t help but feel utterly grateful that this opportunity has found me. At one point I couldn't see any additional time in my full-time work schedule to take on anything additional, turns out I simply hadn't encountered something I was truly interested in. I now want to become a Software Engineer for the endless possibilities that opens up. The technology industry is virtually bullet-proof in the sense that it will be around and growing forever. Having been alive long enough to see different economic conditions and now with the COVID-19 pandemic, I understand more truly the value of a stable and reliable career. 

I am always seeking a challenge; I am an avid problem-solver. I am ready to build a lasting future for myself, and am confident that this challenging journey is exactly what my life has been missing. The concept of coding fascinates me to the point that I need to learn that language to further understand that computers don’t run on magic, but that it is truly a machine that is executing what it has been told to do. 

I am writing this having just completed a week’s worth of assignments, and luckily that desire for a greater understanding only runs deeper now.
Show Off Your Mechanical Keyboard
Tags: discuss, productivity, keyboard, watercooler
Published: 2021-03-01 03:26:44

Mechanical keyboards have become extremely popular during the last few years.
Many people find the experience of typing on a mechanical keyboard highly enjoyable compared to that of typing on the common membrane keyboard.
Mechanical keyboards come in all shapes, sizes, and colors and some of the mechanical keyboards are customizable. Some people are even building their own mechanical keyboards. I have seen people that have gone to great lengths to customize their keyboards with stunning results.

![typing-cat2.gif](https://i.postimg.cc/Z52HpZ4n/typing-cat2.gif)

Even cats are fans of mechanical keyboards.

---

# My mechanical keyboard

Here is an image my mechanical keyboard. When I was searching for a mechanical keyboard my only requirements were blank keys and to have the escape key be red. Blank keys really assist a person in becoming a touch typist (with the blank keys actually I have no issues typing passwords.)

![my-blank-keyboard-1500x880.jpg](https://i.postimg.cc/CKnvQ5mb/my-blank-keyboard-1500x880.jpg)

Specifications:

* Size: 100% Full size 104 keys (445 x 142 x 30mm)
* Switches: Cherry MX Brown switches
* Cable: Braided non-removable USB cable
* Weight: 1088g (2.4lbs)
* Backlighting: none

---

Tell us:

* How has your experience been typing on a mechanical keyboard?
* What kind of switches do you have?
* What keyboard layout do you use?
* What size keyboard do you prefer?
How to use Adapter Pattern with express.js
Tags: typescript
Published: 2021-03-01 03:26:43

The article will answer 3 following questions for you to start using the Adapter Pattern in your projects and the last one topic i will tell about my own experiences with Adapter Pattern.

1. What is an Adapter Pattern?
2. How to implement?
3. When is it recommended?
4. how i use Adapter Pattern with express.js (personal opinion)




1.. What is an Adapter Pattern?.
Adapter is a structural design pattern, which allows incompatible objects to collaborate. The Adapter acts as a wrapper between two objects. It catches calls for one object and transforms them to format and interface recognizable by the second object.

[fonts] - https://refactoring.guru/design-patterns/adapter/typescript/example


2.. How to implement Adapter Pattern?.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qzb66a3b7ccybuvo6ok8.png)
[fonts] - https://www.youtube.com/watch?v=beU4i949YXU
3.. When is it recommended?
     it's very often used in systems based on some legacy code. In such cases,
Adapters make legacy code work with modern classes.

4.. How i use Adapter Pattern with express.js (personal opinion).
I started to use Adapter Pattern 3 months ago in all my projects with express.js, flask(Python) and fiber(go).
My motivation to use Adapters.
	i want to isolate my code from frameworks, it means i don’t wanna make a project that depends totally from one single framework. a framework can get old, can be replaced by one better and I can adapt my project to a new framework without having to rewrite all the code again. 
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h2268uskn3fu5x4ofrea.png)
How to apply UX to your website?
Tags: webdev, design, ux, codenewbie
Published: 2021-03-01 02:50:07

User Experience is a must on the website as that is the thing people experience first. There are 99% chances that the visitor will go whether you have amazing content but if you don't have good UX. Let's see how we can apply UX to our website. 

---

### Make use of convention

- Logo placed on the **top-left corner**
- Main navigation menu places **highest up on the page, on the right side or centred**
- Contact included in the **navigation menu**
- Call to Action button at the **top**
- The search feature in the **header**
- Social media links (as icons) in the footer
- Sign-up form in the **footer**

---

### Maintain visual & Typography Hierarchies

##### Typography Hierarchies

- Title (h1)
- Heading (h2) 
- Sub-heading(h3)
- Paragraph / Body texts

##### Visual Hierarchy

- Size
- Weight
- Color
- Position
- Type Contrast

---

### Format text for the kids

- Use as **sens-serif font** for better readability
- Use plenty of **headings**
- Keep paragraphs **short**
- Use **bulleted lists**
- Highlight **key terms**

---

### Don't let your website shout

- Use **white-space**
- You don't need too many **popups**. Popups should **notify**, not **annoy**. 
- A simple, clean design always wins

---

### If it should be clicked. make it obvious

##### Links & Buttons

- A link is usually **underlined** and coloured. which changes on **hover**, **focus** and **visited**. Make sure the colours are set different for all of these different actions. 
- A button can be easily identified when they have **shadow**, different( darker), background-colour or **bold text**. The shadows can increase or colours can change on hover and click. 

---

### Omit needless words

> People never read content, they scan !!

- Remove everything that doesn't directly affect people's decisions 
- Don't want to overwhelm people with too much content

> The deal is, people are **visual**

- Use images, info-graphics, slideshows, videos and Gifs  🤩

---

### Extra TIPS

- Optimize your **page speed**
- Use images (wisely
- Keep your website pages consistent
- Catch your 404s
- Be **responsive** and mobile-friendly
- Use main navigation - **secondary(mega)** navigation
- Use footer navigation, Mobile navigation (Side Drawer), Bottom navigation bar, Tabs

---

🤩Thanks For Reading | Happy Coding ⌚


Get weekly newsletter of amazing articles I posted this week and some offers or announcement. Subscribe from <a href="https://mailchi.mp/9f73b65b9c38/rahulism" target="_blank">Here</a>

<a href="https://www.buymeacoffee.com/rahxuls" target="_blank"> <img src="https://res.cloudinary.com/rahulism1/image/upload/v1608182430/bmc_nbxakd.png"></a>
vscode scrubbing
Published: 2021-03-01 02:49:12

![scrubbing experiment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/52txgcwxz5wizs20rm3j.gif)

_the cursor is locked during drag operation and is hidden_

This is a small proof-of-concept for the VSCode extension. Scrubbing is a required part of live shader coding and it was important to have this part working with the current VSCode API and WebView limitations.

```ts
// This is the code that computes the new value
// from the scrubbing distance. It is meant to allow
// very small and very large changes in value.
// (POW: 5, BIG: 100, FAR: 400, MAX_RES: 6, POW_RES: 3, FAR_RES: 100)
const big = isFloat ? BIG : BIG * 10
const delta = Math.pow(dist / FAR, POW)
const value = base + delta * big
const resol = MAX_RES / Math.max(1, Math.abs(Math.pow(dist / FAR_RES, POW_RES)))
const [a,b] = value.toString().split('.')
element.innerHTML = isFloat ? `${a}.${(b || '0').slice(0, resol)}` : a
```

Source: [vscode-tuitui](https://github.com/maia-tae/vscode-tuitui)
Kafka introducción & implementación en Nodejs (node+express)
Tags: tutorial, beginners, node, javascript
Published: 2021-03-01 02:33:09

En este ejemplo veremos como implementar kafka y como podemos escribir y leer mensajes con nodejs. Puedes ver el video para tener información más detallada.

### Código del ejemplo

{% github ronnymedina/kafka-nodejs %}

### Tutorial
{% youtube HxxBM_xZA8E %}
High Performance NodeJS Powered by Rust and WebAssembly
Published: 2021-03-01 02:26:20

In the post Moore’s Law era, we need to squeeze more performance from existing hardware. Native code provides the best performance. However, the prevalence of native code on the server-side presents challenges to application safety and manageability. The advent of Rust and WebAssembly offers new ways for developers to write high performance yet safe Node.js applications. The Rust programming language is Stackoverflow’s most beloved programming language for the past 4 years. WebAssembly, on the other hand, provides a fast and lightweight virtual machine for running and managing Rust programs. Through open source bridges between Node.js and WebAssembly / Rust, we can now create JavaScript and Rust hybrid applications for Node.js, and shift computing loads to Rust functions. In this talk, I will go over the basics of Rust and WebAssembly, as well as their integration into Node.js. You will learn when and how to design a hybrid web application, how to code the high performance functions in Rust, and how to tie everything together in a Node.js JavaScript application. At the end of this talk, you will have all the open source tools and resources you need to get started on your own. 

{% youtube 9GMU5vT866I %}
Changing SwiftUI Modifiers Based on State
Tags: swiftui, swift
Published: 2021-03-05 08:03:21

---
title: Changing SwiftUI Modifiers Based on State
published: true
date: 2021-03-01 02:20:29 UTC
tags: SwiftUI, Swift
canonical_url: 
---

{% youtube aJTi-GEaVos %}

In this video, I show you have to add/change modifiers on a SwiftUI view based on a condition in your application. There are times you want to change the look of something based on view state, this is one way to do it.

The repository for the project in this video can be found here.

{% github GrfxGuru/SwiftUIConditionalModifiers no-readme %}
JS Objects: adding & updating key value pairs
Published: 2021-03-01 02:19:09

Hello lovely devs, recently I was working on an algorithm. The task was to take a nested array and keep track of how many times an element appears and keep count.

Here is an array of arrays that we will be using to create a data obj to show an example of how to add and update key vlues

    const listOfStrings = [
      ["n","a","s","h"],
      ["l","o","o","k","s"],
      ["h","o","t"]
    ]

Our goal is to have a JavaScript Object that looks something like this

    {
      "a":0,
      "b":3,
      "c":1
    }

the first step that I think is simpler to do is since we have an array of arrays, we can us a js method and flatten them.

    let stringData = listOfStrings.flat()
    // --> ["n","a","s","h","l","o","o","k","s","h","o","t"]

Now that we have that done, we can create a loop and have conditionals to determine if we already encountered a letter or not. If we did then we add one to the count. 

    const objCountforStringArrays = () =>{
      let stringData = listOfStrings.flat()

      let stringDataCount = {}

      for(let i = 0; i < stringData.length; i++){
        if(stringDataCount.hasOwnProperty(stringData[i])){
          // updating value for key stringData[i] by 1
          stringDataCount[stringData[i]]++ ;
        }else{
          // adding a new key/value in the obj
          stringDataCount[stringData[i]] = 1;
        }
      }
      return stringDataCount
    }

I hope this made sense, let me know if there is anything that needs extra clarification. Byee!!
Simplify your browser fetch() calls
Tags: javascript
Published: 2021-02-19 21:52:47

This one is going to be short and sweet :). We are going to simplify using browser [fetch](https://developer.mozilla.org/en-
US/docs/Web/API/Fetch_API) function by creating a wrapper function (330 bytes gzipped) around fetch.

So after writing the fetch code probably hundreds of times, I've decided it's time to simplify it a little bit. 

So instead of this:
```js
try {
  const response = await fetch('https://example.com')
  // ok is true only for 200-299 response codes 
  if (response.ok) { 
    const data = await response.json()
  } else {
    throw response
  }
} catch (e) {
  console.log(e)
}
```
I can do this:

```js
import fetch from 'nice-fetch'

try {
  const [data, response] = await fetch('https://example.com')
} catch (e) {
  console.log(e)
}
```

A small improvement I know, but it adds up over time :)

## Usage

`nice-fetch` accepts the same arguments as regular [fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) with one additional argument which is the `type` of the body from the response that you expect to be returned, the default value is `json`. This determines how the response body content should be handled.

```js
// if (response.ok)
const data = await response.json() // <- json is the default
// } else {
```

Other parameters are all available methods on the [Body mixin](https://developer.mozilla.org/en-US/docs/Web/API/Body)

for example:

```js
import fetch from 'nice-fetch'

// data is JSON (default)
const [data, response] = await fetch('https://example.com')

// data is JSON
const [data, response] = await fetch(
  'https://example.com',
  { method: 'GET' },
  'json' // <- explicit
)

// data is Blob
const [data, response] = await fetch(
  'https://example.com',
  { method: 'GET' },
  'blob'
)

// data is string
const [data, response] = await fetch(
  'https://example.com',
  undefined // <-- pass undefined for RequestInit
  'text'
)
```

## Return values

The function returns a tuple of `data`, which is already handled response content (no need for `response.json()` call) and the original [`response`](https://developer.mozilla.org/en-US/docs/Web/API/Response) object.

## Error handling

When you write code like this, all errors can be handled in the `catch` block.

```js
try {
  const [data, response] = await fetch('https://example.com')
} catch (e) {
  console.log(e)
}
```

In case that the `response.ok` is not true (status is **not** in the range 200–299) `fetch` will throw with the full [`Response` object](https://developer.mozilla.org/en-US/docs/Web/API/Response)

In case that the response body content can't be properly handled e.g. invalid JSON, the function will rethrow the error.

In case there is an error from the `fetch` call itself ( Network request failed, timeout) function will also rethrow that error.

You can install it with:
```
npm i nice-fetch
```
repository: [nice-fetch](https://github.com/ivandotv/nice-fetch)
I hope you find it useful.
Why I want to Become a Software Engineer
Tags: softwareengineer, flatironschool, computerscience
Published: 2021-03-01 01:57:33

It has been a goal of mine to work in the computer science field for a few years now. I love the ever growing technology of the field and the challenge that comes with being a software engineer. I took a few years off from working towards my goal and did construction work, but now I am extremely motivated to follow my dreams with the birth of my son around the corner. I want my son to know that his dad is a hard worker not just physically but also mentally and that no matter what life presented I made a way to prosper in life and go after the things I wanted.
WPF DataGrid in 2 minutes
Published: 2021-03-01 01:39:18

- Create a folder named Models, then create a class definition like this:

```csharp
class IWebElementList : ObservableCollection<IWebElement> {}
```
The ObservableCollection is a part of this library:

```csharp
using System.Collections.Generic;
```
We are modeling a collection Selenium IWebElements. That class is defined here:
```
using OpenQA.Selenium;
```
- Create a new UserControl and name it ElementGrid.
- Click on View/Other Window/Data Sources

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

- Click on Add New
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4dgm063rkkj3edn8wi54.png)

- Click on Object
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rc2lwyb7q8rywmq7hr5e.png)
- Select the Model
 ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdmxrmg8x1t1ykovjqdr.png)
- Once imported...
You should be able to select the presentation layout, note it defaults to a datagrid
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uper66j0iw8ay1lggsvf.png)
- Drag the DataSource to the UserControl.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i34ccuts6bernsemsx95.png)
- Instant Data Grid
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xdmxrmg8x1t1ykovjqdr.png)
- Auto Generated XAML
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imh02mxsmhcirxm3w25u.png)
- Auto Generated Code
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdv7o0h21usv8t0n0q9f.png)

Uncomment the code parts, and notice there are two areas requiring our attention.

"your data" will be an instance of an ObservableCollection<IWebElement> . This will come directly from Selenium.

"Resource Key..." will be found in the User Control pages, Resources area as shown here.

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

Congratulations, you've just created a GUI interface to Selenium in literally 2 minutes.

This same technique works for any model. In a future article we'll discuss the benefits of the CollectionViewSource.

JWP2021 Instant DataGrid