teleren/devto huggingface dataset:
Effective use of Array.prototype Methods.
Tags: javascript, webdev
Published: 2021-09-07 16:06:33

Array methods are some of the most usefull concepts to master but also quite tricky in what each returns, what it takes as parameters and exactly what does it do to the array.

First defining a prototype. A prototype is a global constructor available for all JavaScript objects and allows the user to add new properties and methods to the array. We can create a new method that provides the sum for an array as follows:

```JS 
Array.prototype.myArraySum = function () {
     let sum = 0
     for (let i = 0; i < this.length; i++){
         sum += this[i]
        }
         return sum
    }
const array = [1,2,3,5]
console.log(array.myArraySum()) //11
```
From the example above, we can deduce what a prototype is. It models something, and tells it how to look or behave. A method, is therefore simply a function that is defined on an object. In the example above, the object would be `array` and the method is `myArraySum`. It should be noted that `myArraySum` doesn't take any argument. However most inbuilt JavaScript Array methods take callbacks and other parameters.

A callback function is a function that is applied in another function as an argument, which is then invoked inside the outer function. Let us try to use a callback inside a prototype method:

```JS
Array.prototype.someMethod = function (callback) 
    {
       //Do something
       //Return the result
    }
const array = [1,2,3,4]
console.log(array.someMethod(function (a) => { 
  return a*2))
```
From the example of myArrySum above, we can apply a callback to understand a better on the inner mechanism of prototype methods.

```JS
Array.prototype.myArraySum =  function (callback) {
  let bound = callback.bind(this);
    bound();
     let sum = 0
     for (let i = 0; i < this.length; i++){
         sum += this[i]
        }
  	
         return bound(sum)
    }
const array = [1,2,3,5]
console.log(array.myAarraySum((a) => a**2 - 2*a + 7)) //106
```
Applying a callback to `myArraySum` gives it more power. The callback does not change what the function does, which is giving a sum of an array, but it can definitely give us flexibility to do something to the sum without extra lines of code. In this case, we have applied a polynomial to indicate the power of callbacks. `myArraySum` will always return a number, **NOT** another array. We need to understand what the method returns. That, in my book, is most important when choosing what method to use.

JavaScript has inbuilt Array.prototype methods, which can be accessed on this [link](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array#instance_methods).

A deeper dive of these array methods will be explored in these series.
Video Box Hover
Tags: html, css, devops, webdev
Published: 2021-09-07 16:02:15

<h2>Video Sources</h2>

<ul>
<li><a href="https://youtu.be/8gToIyAlYgg">Ami and Yumi cries</a></li>
<li><a href="https://youtu.be/2eXCKFMzg2w">How To Make a Big Mac</a></li>
<li><a href="https://youtu.be/QcBkDYlVbF0">QToons! Intro in Radioup V23.15</a></li>
</ul>

{% codepen https://codepen.io/cloneableteam/pen/BaZQYNO %}

Today we’re gonna be showing How to Code a Video Box with any hover on it.

So here is the example:
```html
<div class=“vvh-kit”><img src=“https://img.youtube.com/vi/QcBkDYlVbF0/maxresdefault.jpg” width=“224”><span class=“title”>
<div style=“font-family: ‘Gotham Bold’; margin-top: 3px;”>(REMAKE) QToons! Intro in Radioup V23.15</div></span>
<font size=“1.6” color=“gray”> 117 views • 4 months ago</font>
<br><font size=“1.6” color=“gray”><i class=“material-icons calendar”>calendar_today</i> May 01, 2021</font>
</div>
```

## Setup VVH-Kit
```scss 
.vvh-kit {
   background: white;
   display: inline-block;
   text-align: left;
   box-shadow: 4.2px 4.2px 7px darkslategray;
   padding: 9px;
   border-radius: 6px;
   max-inline-size: 225px;
   filter: brightness(100%);
   transition: filter 0.07s ease-in;
}

.vvh-kit:hover {
   filter: brightness(80%);
}
```
EF Core Update Model on Database First Project
Tags: programming, database, csharp, dotnet
Published: 2021-09-07 15:59:23

---
title: EF Core Update Model on Database First Project
published: true
description: Developing a project using .NET Core and Entity Framework, using an existing database, does not come with a Model update wizard. But still, it doesn't have to be a daunting task.
tags: 
- programming
- database
- csharp
- dotnet
cover_image: https://www.ozzie.eu/post/ef-core-update-model-db-first/db-1st-illustration.webp
---
Started on a software project that will run using an existing database. Went with a minimalistic structure and used the [EF Core Tools](https://docs.microsoft.com/en-us/ef/core/cli/powershell), from the Package Manager Console in Visual Studio, to generate the database context and table model classes. Namely [scaffold-dbcontext](https://docs.microsoft.com/en-us/ef/core/cli/powershell#scaffold-dbcontext). Used the '-t' option to create just the model classes I would use. It went very well and development went on, business as usual.

As it turned out, I missed a table, so I had to add the model class for that and update the database context. Of course I thought that Visual Studio should have some tool our wizard like it had when using [EDMX files](https://docs.microsoft.com/en-us/ef/ef6/modeling/designer/workflows/database-first). I was wrong, Entity Framework Core has not added support for EDMX generation. 

As I had no business related code inside the model classes, or any special customization, the simplest scenario was to reverse engineer the model from the database again using scaffold-dbcontext with the '-Force' option. Mind that if you reverse engineer the model from the database again, any changes you've made to the files will be lost.

Nevertheless, if you're more into GUI than CLI, you should try out EF [Core Power Tools](https://marketplace.visualstudio.com/items?itemName=ErikEJ.EFCorePowerTools). Check out the demo from .NET Conf 2020 on [youtube](https://www.youtube.com/watch?v=uph-AGyOd8c).

Original post can be found [here](https://www.ozzie.eu/post/ef-core-update-model-db-first/)

###### Image created by vectorjuice - www.freepik.com
Letter Grade Converter Function
Tags: python, programming, computerscience, functional
Published: 2021-09-07 15:59:05

```python
# letter_grade_converter_function.py
#   This program accepts an exam score as input and prints out
#   the corresponding grade using a function.
# by: Scott Gordon

def main():
    # Write welcome message.
    print("***** Welcome to The Letter Grade Calculator *****")

    # Get input from user and assign it to score variable.

    score = int(input("Enter your exam score: "))

    def letter_grade_converter(score):

        # Use branching control statements to associate the score
        #       with the letter grade.
        letter_grade = ""
        if score < 60:
            letter_grade = "F"
        elif score < 70:
            letter_grade = "D"
        elif score < 80:
            letter_grade = "C"
        elif score < 90:
            letter_grade = "B"
        elif score < 100:
            letter_grade = "A"

        # Print out the corresponding grade.
        return f"Your letter grade is {letter_grade}."

    print(letter_grade_converter(score))


main()
```
Photo by <a href="https://unsplash.com/@kimberlyfarmer?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kimberly Farmer</a> on <a href="https://unsplash.com/s/photos/school-grade?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Fibonacci Sequence Function
Tags: python, programming, computerscience, functional
Published: 2021-09-07 15:49:45

```python
# fibonacci_sequence.py
#   This program computes the nth Fibonacci number where n is a value input
#   by the user using a function.
# by: Scott Gordon

def main():
    print("***** Welcome to the Fibonacci Sequencer *****")

    nterms = int(
        input("Enter a number to represent the number of passes through the"
              "Fibonacci Sequence you want: "))

    def fibonacci_sequence(nterms):

        counter = 0
        first = 0
        second = 1
        temp = 0

        while counter <= nterms:
            print(first)
            temp = first + second
            first = second
            second = temp
            counter += 1

    fibonacci_sequence(nterms)


main()

```
Photo by <a href="https://unsplash.com/@luddelorentz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ludde Lorentz</a> on <a href="https://unsplash.com/s/photos/fibonacci?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Build an App Using HarperDB's New Custom Functions 🚀
Tags: database, javascript, node, tutorial
Published: 2021-09-07 15:41:54

###Don't miss this opportunity to see HarperDB 3.1 in action!
 
Code along with HarperDB's VP of Product, Jaxon Repp, [in this livestream](https://www.youtube.com/watch?v=rz6prItVJZU) to code along and build your own app, while utilizing new (and super exciting) functionality with the HarperDB 3.1 release! Jaxon will build out an API and UI that utilizes HarperDB and our new Custom Functions, which enable developers to code their own custom functions, utilizing core HarperDB methods to define a custom API endpoint, resulting in a simplified tech stack and improved performance. Custom Functions are written in Node.js and the UI will be in React.

###[Watch livestream here](https://www.youtube.com/watch?v=rz6prItVJZU)


__To Code Along You Will Need__:
* [Sign up / log in to the HarperDB Studio](https://studio.harperdb.io/sign-up)

* [Have a local instance of HarperDB installed and running](https://harperdb.io/docs/install-harperdb/)

* [Register your user-installed instance in the Studio](https://harperdb.io/docs/harperdb-studio/instances/)

* [Custom Functions docs](https://harperdb.io/docs/custom-functions/)

* [GitHub Repo](https://github.com/HarperDB/harperdb_custom_functions_demo)


<enter>

This event is for developers and tech leaders of any skill level, and will help you strengthen your app development skills, as well as general database / data management knowledge.

![Let's do this meme](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/256z1xp9qde94pg33mh7.jpg)

---


###More on [HarperDB Custom Functions](https://harperdb.io/docs/custom-functions/?utm_source=devto):

* Add your own API endpoints to a standalone API server inside HarperDB
* Use HarperDB Core methods to interact with your data at lightning speed
* Custom Functions are powered by Fastify, so they’re extremely flexible
* Manage in HarperDB Studio, or use your own IDE and Version Management System
* Distribute your Custom Functions to all your HarperDB instances with a single click

You can learn more about Custom Functions including potential use cases in [Jake's blog here](https://dev.to/harperdb/harperdb-is-collapsing-the-stack-introducing-custom-functions-3j4k).

---
###Meet Jaxon Repp, VP of Product at HarperDB

Jaxon has 25 years of experience architecting, designing, and developing enterprise software. He has served as founder of three technology startups, run Technology, Product, and Solution Architecture at several others, and consulted with multiple Fortune 500 companies on IoT and Digital Transformation initiatives. A partially-reformed developer, he understands what it’s like to wrestle with technology instead of benefiting from it, and believes passionately that if the Jetsons never had an episode where a config file error brought down the food-o-matic, it surely should not be a problem now.
Hello Word!
Tags: opensource
Published: 2021-09-07 15:34:37

I hope you get the title's joke, as this is my first time writing a blog.

My name is Gustavo Tavares, I am 29 years old, and I am a Brazilian.
I am a former professional in Advertising and Propaganda, and now I am entering the world of programming and in love with it.

As for September 05, I am in Brazil as Canada opened the border, before that I was stuck in Canada for almost 2 years without seen my family or friends, without leaving my room as we had online classes and quarantines. 
But my location doesn’t really matter, as Open-Source Community is scattered around the globe I can work from here, at the time I want without any problem.

I am taking OSD600 because I believe to be one of the most useful courses that Seneca can offer, that will give me experience on working in big projects, working with Git, and preparing us for the market. Also, I really like how David is willing to help students to achieve their goals.

My goal this term is to improve my portfolio, improve my confidence working with others, as for now every assignment I did was by myself, and improve my coding skills.

For my forked repo, I picked the 30-seconds-of-code (https://github.com/30-seconds/30-seconds-of-code).
It’s a repo with short snippets of JavaScript code to help people coding in JavaScript.
Very useful for people like me that are always learning something and trying different things.

I hope you enjoyed my introduction!
Leave me a message if you want to talk or have any questions about me.

Thank you so much and see you next post.
Random Hex Color (semi-golfed)
Tags: javascript, colors, hex
Published: 2021-09-07 15:28:09

```js
document.body.innerHTML += 'click anywhere...'
 
onclick = () =>
  document.body.style.background = 
    `#${Math.random().toString(16).substr(-6)}`
```

{% codepen https://codepen.io/ZevanRosser/pen/LYLbwjE %}

I golfed this snippet slightly for no reason in particular. I <a href="https://snippet.zone/2021/09/03/easy-random-color/" target="blank" rel="noopener">recently posted</a> a nice readable way to make random <code>hsl</code> colors. This snippet generates a random <code>hexidecimal</code> color.

### How it works

```js
Math.random() // random number between 0 and 1
 
.toString(16) // convert to hex string (something like "0.2d6bcee4198d4")
 
.substr(-6) // grab the last 6 characters
```

Here is a non-golfed version:

```js
const instructionsEl = document.createElement('p');
instructionsEl.innerHTML = 'click anywhere...';
document.body.appendChild(instructionsEl);
 
const randomHexColor = () => 
  `#${Math.random().toString(16).substr(-6)}`;
 
document.addEventListener('click', () => {
  document.body.style.background = randomHexColor();
});
```

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Proxies and Dynamic Methods
Tags: javascript, hacks, proxies
Published: 2021-09-07 15:22:50

{% codepen https://codepen.io/ZevanRosser/pen/oNwYKZg default-tab=js,result %}

Proxies can be used for all manner of strange “magic”. I can actually see some uses for this, might post in the next few days…

_See more stuff like this over @ [Snippet Zone](https://snippet.zone/)_
Simple way to increase site accessibility
Tags: html, webdev, beginners, discuss
Published: 2021-09-07 15:09:49

**Disclaimer: I am not an expert, this is more like a note to self kind of thing. I am merely [learning in public](https://www.swyx.io/learn-in-public/)**

When you make a website with different links, here is how your html file might look like:

```html
<p>If you want an html tutorial, click <a href=tutorial.link>here</a></p>

<p>if you want an example html, click <a href=example.com>here</a></p>
```

If the user is accessing your website visually, they are not going to have a problem when visiting your website. However, if someone is accessing your website using a voice reader and they want to navigate all the links on your website, **all they are going to here is a bunch of 'here's because that is the name embedded in your link tags.**

One simple fix is to restructure your sentence so that the text within the a tag tells the person what it is:
```html
<p>Here are <a href=tutorial.link>my html tutorials</a></p>

<p>Here are <a href=example.com>a list of example html scripts</a></p>
```

For someone who visually visits your website they are not going to see much difference. However, this way of writing your html dramatically improves the user experience for someone using a voice reader. So bare this in mind when you are cleaning up/making your website :)

Happy coding!
How to pin a post to profile
Tags: help, post, profile, pin
Published: 2021-09-07 15:00:17

How do I pin a post to my Profile on dev.to ??

Here is a example profile which have pinned posts :-
https://dev.to/blender

Thanks for reading my post please press the like and the unicorn button while going.
Thank you.
Darsh kulthia.
VS Code Increase Productivity: Maximize The Editor Panel
Tags: productivity, vscode, shortcuts, code
Published: 2021-09-07 14:58:46

VS Code Shortcuts: Increase productivity by closing the side and bottom panels. Focusing in the editor panel.
Toggle Side Panel: ⌘ B
Toggle Bottom Panel: Ctrl `
Toggle Zen Mode (Maximize Editor Panel): ⌘ + Shift + P, type Zen and select
Learn React and Redux Toolkit from my YouTube free course
Tags: showdev, webdev, codenewbie, react
Published: 2021-09-07 14:58:14

Hey Devs, I'm happy to announce that I completed my `React` and 
`Redux toolkit` course on my [YouTube channel](https://youtube.com/c/chaoocharles). In this course I will show you how you can create a `complete shopping cart` using React and Redux toolkit (now the standard way of working with redux). 

You will learn:
**- React-router**
**- Redux toolkit**
**- Async thunk in redux toolkit**
**- RTK Query**
**- Node API**
**- Redux hooks**
**- CSS**
**- JavaScript array methods (map, filter, reduce)**
**- Cloudinary**
**- React and more**

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

Here is the link to the playlist: https://youtube.com/playlist?list=PL63c_Ws9ecIRnNHCSqmIzfsMAYZrN71L6

You can also subscribe to my channel for more: https://youtube.com/c/chaoocharles

Follow me on twitter: https://twitter.com/ChaooCharles

Always stay awesome 💙
Coffementation: Documenting Virtual Coffee
Tags: opensource, documentation, community
Published: 2021-09-07 14:58:10

I got to give back recently, I wrote some documentation for Virtual Coffee.io. Virtual Coffee is a developer peer support group that began about a year and a half ago. 

It's grown large enough that the maintainers felt people didn't know everything the community had to offer. So a Guide to Getting the Most out of VC was proposed. Bekah, one of cofounders, asked if I wanted to lead the process. I jumped at the chance. 

As we discussed it with VC maintainers, it was decided also we needed a member resources section to add FAQs and other things to help our members. The Guide to VC was to be part of the resources. 

I got into the code base and created the member resources folder then made an index page and the place-holder VC guide page. Then learned that using the collection keys would add my basic page to the home page. 
I use ipsum loreum generator for [Coffee] ( https://fungenerators.com/lorem-ipsum/coffee/) and [Cheese] (http://www.cheeseipsum.co.uk/) to layout the content. I followed a general outline created by a VC maintainer.

Started with Zoom and Slack as those are the most active parts of Virtual Coffee. I used descriptions from VC and general info on slack. [Ayu Adiati] (https://dev.to/adiatiayu) expanded on that and wrote how to find channel and join channels and brief description on some most popular ones. She's also working on a master list of our slack channels. 

The next task was to describe our member's only events like our lunch and learns, lighting talks, and monthly challenges. All these events are a great part of our community. The challenges are one of the best places to get the community feel of Virtual Coffee. 

I wrapped up the outline with 'How to keep up with us". This is a list of our podcast, newsletter, YouTube, and Twitter. Ayu again expanded on these.

## Wrap up

The guide highlighting important areas. We will expand on it, there's more to VC. Also it was good to work with 11ty and find illustration using Undraw.

Please checkout the [Guide to Virtual Coffee](https://virtualcoffee.io/member-resources/guide-to-vc/) the join us on Tuesday or Thursdays.

Thanks to [Ayu Adiati] (https://dev.to/adiatiayu),  [Bekah](https://dev.to/bekahhw),  [Kirk](https://dev.to/kirkcodes), and [Dan](https://dev.to/danieltott).
Good URI Practices: nouns and verbs, ID types and requesting data formats
Published: 2021-09-07 14:56:09

by Vicente Martinez – July 6, 2020

Modeling Actions: Nouns vs Verbs. AKA “How to model actions?”

The URI Structure of an API should be as meaningful and predictable as possible. The idea is to have something that the user can understand.

An API is resource-centric: it deals with resources and with operations on those resources.

Operations (verbs) should be represented via HTTP verbs on resources. This way we work with the HTTP protocol and its semantics.

    A verb in the URI is – always, always, always – a design smell

BAD: …/account/pay

When it comes down to a single verb, the URI semantic means that there is only 1 operation available to do in this URI, which is to “pay”. Since it is a verb, it also means that it is not the actual resource of the API. There is not a table in our database named “pay”. So, this entire URI is render useless for anything else than “pay”

BETTER: …/account/payment

When using a noun, it makes a representation of a relation in the URI. It means we can work with the resource instead of the action. We can set more than just 1 operation like the verb in this UIR, which is a better approach and makes more sense to the user. All operations related to this entity, can be done in a noun URI.

EVEN BETTER …/accounts/payments

Although both are simply fine, plurals over singulars are widely accepted.

To keep consistency, do not mix them in your URI architecture once you have made up your mind.

 
IDs vs UUIDs in URIs

IDS

PROS
	

CONS
Smaller 	IDs are less flexible than UUIDs (exposes underlying technology used)
No brainer, already available 	IDs are guessable (susceptible to web crawlers and bots)

 

UUIDs

PROS
	

CONS
More flexible. (Migrating databases is less of a pain and won’t compromise URI architecture) 	Require more space in memory
Can’t be simply guessed. (Resistance to crawlers) 	Requires an initial setup

 
Representing DATA formats in a URL

Adding data representation in the URL is a terrible idea.

BAD: …/users/vicentem.json

EVEN WORSE: …/users/vicentem?format=json

The HTTP protocol already defines the semantics to ask different types of representation.

BETTER: Use the Accept (Accept-Language) headers

 
Further good URI practices

    If there are 2 URIs for the same resource, send the canonical URI to the client.
    Hyphens ( – ) are more usable than underlines ( _ ).
    Use always lowercase
Compact() vs With() in Laravel
Published: 2021-09-07 14:46:41

with() is a Laravel function and compact() is a PHP function and have totally different purposes.

with() allows you to pass variables to a view and compact() creates an array from existing variables given as string arguments to it

#or 
compact() takes a variable number of parameters. Each parameter can be either a string containing the name of the variable, or an array of variable names. The array can contain other arrays of variable names inside it; compact() handles it recursively.

Method with() on Eloquent model enables for you eager loading.

src=
1/ https://www.php.net/manual/en/function.compact.php
2/ https://stackoverflow.com/questions/44963889/with-vs-compact-inlaravel