teleren/devto huggingface dataset:
Why is using javascript “for loop” for array iteration a bad idea?
Tags: javascript, webdev
Published: 2021-06-30 17:58:09

Sometimes using loop for array iteration can be bad. Let's see how?

Let's create a `10` empty slot array using Array constructor.

```js
const array = Array(10);
console.log(array); //[empty × 10]
```

Now let's iterate over the array element using for loop. This loop will log `Hi` 10 times to the console, which we do not want to do.

But our for loop iterates over the empty slot, that is bad for our software performance.

```js
const array = Array(10);
const len = array.length;
console.log(array); //[empty × 10]

for(let i = 0; i < len; i++){
   console.log("Hi");
}
```
Let's see another example.

```js
const array = [1, 2, 3];
array[4] = 10;

const len = array.length;
for(let i = 0; i < len; i ++){
    console.log("Hi");
}
```
In the above snippet index `3` of the array is an empty slot, but the `console.log` will execute 5 times.


Now let's try using one of the array methods. 

`forEach()` method invoked the passed  callback function for each element.

But in this case our array slot is empty and our `forEach()` method is not going to invoke the `log` function for the empty slot.

So, the below code will print nothing to the console.

```js
const array = Array(10);
const log = () => console.log("Hi");

array.forEach(log); // NOT GOING TO INVOKE THE LOG FUNCTION
```

If we try our second `for...loop` example using `forEach()` method it will execute 4 times. The passed callback function not going to invoke for empty slot.

```js
const array = [1, 2, 3];
array[4] = 10;

const len = array.length;

array.forEach(() => {
    console.log("Hi");
})
```
Also you can try `.map()` method insted of `for..loop`.
How to build js library with webpack 5
Tags: webpack, javascript
Published: 2021-06-30 17:44:22

In this article, I will discuss how to set up webpack configuration for your js library in a way that:
1. works with tree shaking, for your modern users
2. is build with global scope polluting js file, that other users can directly load from their html

# Package file
First of all, let's take care of your modern users. In `package.json`, besides library info we will have following fields:
```json
{
  ...
  "main": "src/index.js",
  "type": "module",
  "scripts": {
    ....                                                                                                                                                                                                                                                                                        
    "build": "webpack"
  },                                                                                                                                                                                   
  ...
}
```

we want to keep ourself to `esmodules`, that's why there is `"type": "module"`. The `"main": "src/index.js"` informs clients' webpack what files use for imports - effectively ignoring anything build locally by us. This is as intended, because it's client's build  that knows what parts of our library to leave, and what drops.

# Source code
`src/index.js` is an entry point to our library:
```js
export { helloWorld } from "./hello-world.js";
```

it importing & exporting all methods that are meant for external use. 

`src/hello-world.js` contains a simple demo method:
```js
export function helloWorld() {
  console.log("hello world!");
}
```

# Build for legacy clients
For all the cases where the user of our library has no build on their own, we will build the library on our side. Those can be simple pages that just whose author just wants to drop some js & have methods available; or legacy pages full of this kind of js imports anyway. The `webpack.config.js` that allow us to achieve that:
```
export default {
  output: {
    library: {
      type: "umd",
      name: "sdk",
    },
    filename: "sdk.js",
  },
};
```

`output.library.type: "umd"` sets the export type to universal module definition - modules that are able to work on matter the environment, most importantly in our case - as drop-in js files. `output.library.name` sets the content of our module to be published on `window.sdk` - the same as you find jquery methods on `$`.

# Link
* [webpack video course](https://bit.ly/WebpackCourse)

# Summary

In this article, we have seen simple set up for building js library. If you are interested in the code, you can find it here: https://github.com/marcin-wosinek/webpack-sdk

And an example of how it's working is here: https://marcin-wosinek.github.io/webpack-sdk/
Before you decide on adding a Gem
Published: 2021-06-30 16:25:05


2 things to remember when searching for gems to execute your projects are...

   1. Security
       To me this is probably the most important. As Im working on a project and doing my best to write efficient re-usable code I don’t want to waste time with ineffective gems! If a gem is not kept up to date with security features or has bugs those issues will be reflected in projects. you could potentially spend more time than anticipated restructuring or de-bugging simply because of a gem hasn't been kept up to date. There are plenty of resources on google to figure out what issues a gem might have as well as solutions from others on how they managed to fix gem issues.It’s always a good idea to check on how maintained a gem is before adding it to your project.
         
2. Is it really needed?
     I think about the concept that "gems are shiny"... there are plenty of gems that have amazing abilities and its easy to get caught up in the "bells" and "whistles" of dynamic gems. When faced with a problem it's sometimes so much easier to search for gems that can bundle and execute what you’re trying to accomplish, when really all it would take is a little extra effort to figure out a way to write better code. Part of the fun of creating dynamic applications or projects is the tinkering and re-writing and collaborating with others to solve an issue. Sometimes those gems are absolutely needed and the functionaries have been created for a reason, that doesn’t mean certain gems need to always be depended on.
Azure Computer Vision
Tags: ai, computervision, azure, dotnet
Published: 2021-06-30 17:37:12

Hello everybody!!! Azure Computer Vision is the artificial intelligence service that analyzes the content of images and videos.

We share this repository so that in simple steps with this .NET console example in C # and you can take it as a guide for your future projects. We leave the link: https://github.com/ppiova/ComputerVisionExample

Happy Coding!
Free design resources for Web Developers...
Published: 2021-06-30 17:30:42

#Pexels
The best free stock photos & videos shared by talented creators
Website : https://www.pexels.com/
#Landing Stock
Landing Stock is a niche site providing free stock photos that are suitable for your website landing page. Created by London-based product designer Craig Barber, it features only high-quality, clean, and minimalistic photos
Website : https://www.landingstock.com/
#StockSnap
With a large selection of free high-definition stock photos, StockSnap offers a valuable resource to web designers, bloggers, and content curators
Website : https://stocksnap.io/
#Photo Creator
CREATE YOUR REALISTIC PHOTOS IN MINUTES. Choose from thousands of models, objects, and backgrounds to perfectly tell any story
Website : https://icons8.com/mega-creator
#Drawkit
DrawKit is a collection of free, beautiful, customizable MIT licensed SVG illustrations in two styles, to use on your next website, app, or project
Website : https://www.drawkit.io/
#Ionicons
Ionicons are premium icons for use by designers in web, iOS, Android, and desktop apps. Built by the Ionic Framework team, they're all free and open source
Website : https://ionic.io/ionicons
#Pixlr
The Pixlr Editor is similar to Photoshop, Pixlr Express is perfect for quick fixes, and Pixler O-Matic features easy-to-use pre-made filters that can be applied to photos
Website : https://pixlr.com/
#Coolors
The super fast color schemes generator!
Create the perfect palette or get inspired by thousands of beautiful color schemes
Website : https://coolors.co/
#Dribbble
Discover the world’s top designers & creatives
Dribbble is the leading destination to find & showcase creative work and home to the world's best design professionals
Website : https://dribbble.com/
#Type Genius
The site makes it simple to find the perfect font combination, offering multiple suggested pairings for any typeface selected. It also provides real-world examples of combos used on other websites
Website : https://webdesignledger.com/type-genius-webapp/
Seeing code in everyday life
Published: 2021-06-30 16:24:29


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y32txcswdqxn0s3i4d0p.png)
“Once you know some things, you can't unknow them. It's a burden that can never be given away.” -Alice Hoffman

This concept has never felt so true since learning to program. Once you know how things work, you will always see whats going on "behind the scenes".  Being interested in what makes the applications and technology I use in my everyday  life is in no way a burden but very exciting and pushes me to want to expand my knowledge and learn how to create robust tech. 

I find myself always curious about if I could create the functionalities Im using on a website or a mobile app and if I can't think of it right away, I find myself running over potential solutions in my head and pushing myself to figure out how to create it or maybe spending some time searching stack overflow or other dev blogs about how they created something similar.

Even something as mundane as driving from my home to the carwash can challenge my programming knowledge in multiple ways like the code behind...
    1. The tech in my car
    2. The stoplights regulating traffic (and a red-light cam I probably triggered)
    3. Selecting the type of carwash I want on an automated screen when I arrive. 
    4. promptings on the screens around me telling me when to "stop", "go","place car in park"
    5. The automated functions in the carwash controlling lights and other various functions

In just 10 minutes out of my day Ive challenged myself to think about many functionalities I would have never previously in life even thought about existing.
Simple Server With Iris Framework
Tags: go, irisframework, api
Published: 2021-06-30 17:01:31

In this tutorial we will create simple server using Iris Framework.

###Some features of Iris framework:

1. MVC Pattern
2. Powerful Routing
3. Logging
4. gRPC support
5. API Versioning

```golang
package main

import (
  "github.com/kataras/iris/v12"
)

func main() {
  app := iris.New()
  app.Get("/", func(ctx iris.Context) {
    ctx.JSON(iris.Map{"Hello": "Welcome"})
  })
  err := app.Listen(":8080")
  if err != nil {
    return
  }
}
```

Run program using `go run main.go`

Open `http://localhost:8080` into browser to see the result.
Inkwyl: A Social Network for Sharing Stories (and my experiences building it)
Tags: showdev, socialmedia, startup
Published: 2021-06-30 16:54:14

Over the past few days, I had started using Next.js (a React framework by Vercel) to build a new project, called Inkwyl.
Let me tell you what Inkwyl is and let me tell you my experiences.

https://inkwyl.vercel.app/
Inkwyl is a social network where you can write and share stories, or read others' stories.

It has:
A fully-functioning (and secure) account system
A story editor (through Quill.js)
A user profile system
Story-sharing and commenting for signed in users
Discovery pages (Users page for finding users, home page for finding stories)

My plan is to build up a community and then to start interacting with the community more, through writing contests and more.

The dream would be for it to be a place where publishers can scout for talent, like how a director does.

But first, we need a community.
I'm going to run a contest at 100 users, so if you want to join in, consider signing up!

Let's talk about my experiences making it.

I started Inkwyl a few days back when I had no other projects to work on (or no motivation to work on abandoned ones). I hadn't used Next.js before, but I had used React at a basic level before, so I decided to give it a try since it has serverless functionality and Vercel supports serverless (and I really like Vercel). I created a new Next.js app and called it Inkwyl. I made a basic layout and messed around with styling and stuff. Hadn't gotten too deep yet. 

The next day, I did some research on routing and APIs in Next.js. I had made failed attempts at social medias before, so I had some knowledge on the structure of how to make them. I started out by making the account system. I hacked around a bit until I got something I liked and that was properly secured. 

Security measures:
Password salting/hashing
Proper authorization on login
Shadowban implementation
And some more smaller things

I added JWT to the account system as well. 

That day, I also added the editor (but not sharing).

The next day, I worked on a user profile system. 
It took a while for the API route to get working properly, but I got it after a while.

Then was sharing stories. It was also a bit tricky but I eventually got that working. 

I wanted to display the stories a user wrote on their profile, and it was surprisingly easy. I just find the stories with their user ID in the database and map it. 

The comments were also easy to implement. It finds the comments with the story ID and maps them. Posting comments was also easy to do.

Then I made a users page (maps out usernames).

And besides some other small fixes, that's where we stand right now. 

It would be greatly appreciated if you could check it out (again, at https://inkwyl.vercel.app/)
and if you want to check out my profile it's at https://inkwyl.vercel.app/user/b348b17c-f723-4835-9231-8a7e23cd4cf8

Thank you all and have a great day!
HTML exam. How much do you know?
Tags: html, beginners, webdev, codenewbie
Published: 2021-06-30 16:38:03

![codigo html](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocd9l6fap1z170nunqs7.jpg)

I thought I knew a lot of HTML because I didn´t use DIV for everything... accesability matters. I used ASIDE, HEADER, MAIN, ,SECTION,FOOTER... yeah that's fine, but there are a ton of other tags or attribs that I didn't know about.


I challenge you to an exam to see how many you know of these ten points. Are you ready? Let´s go!
&nbsp;
##1. - Details and Summary tags
It will show you a dropdown click menu without JavaScript, only HTML.
```html
<details>
  <summary>Click for info</summary>
  <p>Show more info about it</p>
</details>
```
 &nbsp;
##2. - Datalist 
The <datalist> tag is used to provide an "autocomplete" feature for <input> elements. Users will see a drop-down list of pre-defined options as they input data.
```html
<input list="animals">

<datalist id="animals">
  <option value="pig">
  <option value="hen">
  <option value="cow">
  <option value="dog">
  <option value="cat">
</datalist>
```
&nbsp;
##3. - Input type range
You can use it to create input sliders
```html
<label for="volume">Volume: </label>
<input type="range" id="volume" name="volume" min="0" max="20">
```
&nbsp;
##4. - Mark
the text will be marked as if you had used a highlighter pen
```html
<p> this is <mark>really</mark> interesting</p>
```
&nbsp;
##5. - Meter
Use the meter element to measure and show data within a given range.

```html
<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="2" min="0" max="10">2 out of 10</meter><br>
```
&nbsp;
##6.- Download attribute
You can use the download attribute in your links to download the file instead of navigating to it.
```html
<a href='path/to/file' download>
  Download file!
</a> 
```
&nbsp;
##7.- Favicon doesn´t update?
Sometimes favicon doesn´t change because is in cache. You can force browsers to get a new version of icon adding ?v=2
```html
<link rel="icon" href="/favicon.ico?v=2" /> 
```
&nbsp;
##8.- Figure and Figcaption
Use a <figure> element to mark up a photo in a document, and a figcaption element to define a caption for the photo.
```html
<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>
```
&nbsp;
##9.- BDO tag
It will change the text direction (it will shows in this case: `.tfel ot thgir morF` )
```html
<p><bdo dir="rtl">From right to left.</bdo></p>
```
&nbsp;
##10.- Video Poster Attribute
Use the poster attribute to specify an image to be shown while the video is downloading, or until the user hits the play button
```html
<video poster="/path/to/image" controls>
   <source src="movie.mp4" type="video/mp4">
</video>
```
&nbsp;


How did the test go? How many did you know? 
&nbsp;

Do you miss any? Please comment!
Testing Patterns And Strategies
Tags: node, testing
Published: 2021-06-30 16:33:11

Our goal at [Knock](https://knock.com) is to empower people to move freely. A large part of achieving that goal is to make real estate transactions as easy and seamless as possible for our customers. Real estate transactions are very complicated. Calling them a ["big ball of mud"](https://en.wikipedia.org/wiki/Big_ball_of_mud) is being gracious. If we could sum up such transactions up in one image, it would be the image of Charlie Day explaining how a person named [Pepe Silvia doesn't exist](https://www.youtube.com/watch?v=_nTpsv9PNqo):

![Pepe Silvia does not exist](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkuc7tna9qsshthwh2dl.png)

For us as an engineering team, this translates into a lot of complex business logic. And we want to do our best to make sure that logic is sound. If our logic is faulty it can lead to thousands of dollars of disappointment. We do not want that. Thus, we thoroughly test our code via [unit testing](https://en.wikipedia.org/wiki/Unit_testing).

We are in a growth stage at Knock so we are regularly bringing on new engineers. During this process we have learned that it can be difficult for new engineers to come to grips with our testing code base while at the same time recognizing the patterns and strategies used in our unit tests. As a result, we have started a new open repository that provides lessons for any engineer to learn from and reference. We think this repository fills a gap in the community and are thus making it available for anyone to reference and contribute to: [https://github.com/knockaway/unit-test-patterns-and-strategies](https://github.com/knockaway/unit-test-patterns-and-strategies).

Have we missed any patterns or strategies? We welcome pull requests to add more. And if you're looking to join a team that cares about the quality of their code, [we're hiring](https://grnh.se/a8c6cec74us)!
React: easy as "create-react-app"
Published: 2021-06-30 16:25:37

Developers who have used React know how strong of a framework it is because of its flexibility and simplicity to 
improve performance. React is capable of handling DOM updates by grouping efficiently to provide less rendering and more specifically what needs to update and how.

One of the most impressive features to me about React is its ability to behave so efficiently with minimal coding.
 The reusable components can really keep even the most dynamic projects lightweight. To use React in its full entirety making sure you’re working in the most up to date version is the first and most important step. Of course this has been made easy for devs with the simple command of "create-react-app". Even though its tempting to just re-use old code for functionalities you may want to have in new projects it can work against you when trying to use newer react features. 

Another reason I think working in React is so enjoyable is the fact that for the most part we as people think in more "declarative programing" terms. 

when ordering a coffee you easily could say to the barista,

> grab a cup

> place the cup under the coffee spout

> Fill the cup

> add milk and sugar

> hand me the cup of coffee

This isn’t how we tend to think though! 
instead you just say, "Coffee with milk and sugar!"; a simple declarative world! 

React offers a declarative approach which makes  it easy to use. When code is simple, elegant and easy to read it makes it easier to maintain with less to de-bug. Listing all the steps will work, but there is no need to with React, just like a barista, it’s capable of all the steps in between without explicitly specifying.
Data structures
Published: 2021-06-30 16:22:01


what is it?

Data structure at its most basic concept is just organization and storing information.
However, there are a lot of ways to organize and not everyone prefers to organize the same.
 
 For my personal approach on grasping these concepts early on, I read blogs on how others developed concepts I was trying to accomplish. I quickly learned there was different approaches to storing data in efficient and easy to modify code. 
 
 
 To familiarize myself with different data structures I read different source material and took notes in way that helped me understand and remember basic terms. The best way to learn was to actual "do".  I had a better understanding of effective data structures in one of the first projects at flatiron which was to build a CLI tic-tac-toe game. The curriculum of flatiron was easy to understand and very "user-friendly" for a beginner. However, I was interested in other ways to accomplish organizing different structures. From there going back and forth with refactoring and changing how to store arrays and objects really helped me understand how versatile data structures can be.
LaTeX & Maths: Equations and Environments
Tags: codenewbie, latex
Published: 2021-06-30 16:21:51

Hello :) How are you today? 

We are going to talk about an important environment in LaTeX, the `equation` environment and one alternative to this. 

But before, a suggestion 

> In [this](https://dev.to/latexteada/latex-maths-amsmath-and-amssymb-packages-1733) article I talk about two important packages. It is a good idea to import these packages, in the preamble, to avoid mistakes of symbols and environments, because, remember that these packages give us the most of them.

Do you remember, in [this](https://dev.to/latexteada/latex-maths-inline-and-displayed-formulas-90m) post I talked about the *inline* and *displayed* formulas, well today we are going to talk about other environment, the `equation` environment 

## What is an *equation*

Well, in the LaTeX world, an *equation* is a numbered displayed formula. 

> Yes, a **numbered** formula, and for that we need an special environment


## The `equation` Environment 

This environment assigns a number to the displayed formula. Its structure is 

```LaTeX

\begin{equation}
    My Equation
\end{equation}

```

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

Produces

![Screenshot from 2021-06-28 09-42-28](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wis5e6cdit7thw5a31wt.png)

**WARNING** You must NOT left blank lines within this environment
 
![Screenshot from 2021-06-28 09-52-37](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u853oirx5x82gu758om6.png)
 
But, what if I do not want to enumerate my equations?

Do you remember that once I wrote about non-numbered environments? Well, to avoid numbering the environments just add a `*`

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

Produces

![Screenshot from 2021-06-28 09-54-31](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8o4g2e2np5ustxkd9ya1.png)

**But, wait**, that is what we checked last post, do you remember? The *displayed* formulas, let's compare 

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

Produces 

![Screenshot from 2021-06-28 09-57-24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/28qaxkf5hrubrt83rdea.png)

Then, what is the difference between them?

That is something for the next post.

Thanks. Do not forget to follow me on Twitter `@latexteada`