teleren/devto huggingface dataset:
DngAhd! imgs
Published: 2022-08-30 21:37:57


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/83qutax050bucwxzu599.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6bhpqfxv4ov6yovman6j.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r42elhawxrq7h6w5up9f.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dwjvvmbixsn4kgv3ujvc.png)
[Desafio] - Cálculo em Estruturas Aninhadas Sem Laços
Published: 2022-08-30 21:15:58

> Conteúdo original em https://twitter.com/zanfranceschi/status/1564671754483765251

---

Ei dev,

Pega esse desafio:

Faça a soma de todos os produtos de todas as compras sem usar laços (loops - for, foreach, etc). Use apenas map, reduce, recursão, etc.

cc @sseraphini

![Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/38e90586tfpxnzifj150.png)
Git blame - How to find out who modified a line with Git
Tags: github, git, webdev
Published: 2022-08-30 20:33:43

Have you ever found a bug inducing line change in your code, and wondered who made the change to that line? **Fortunately, git has a command for that**! `git blame` lets you pick a file and show who last changed every line. If you were wondering, it's called `git blame` because it lets you assign blame for the code breaking line you're investigating.

To find out who changed a line, simply run the following command where `myfile.txt` is the file you want to check:
```shell
git blame myfile.txt
```

If you're interested in the format of `git blame`, it breaks down like this:
```
^665221a (Johnny Simpson 2022-04-30 20:58:04 +0100  10) import { v4 as uuid } from 'uuid';
^          ^                                         ^
|          |                                         |
Commit ID  |                                     Line number
           |
         Author and timestamp
```

## Using git blame on a particular line

This is really useful, but what if you want to hone in on a specific line, you can use the `-L` option. For example, if you want to see the change history between line 1 and 5, you would do the following:
```
git blame index.js -L 1,5
```

Or, if you wanted to find the change history between lines 20 and 40, you could do the following:
```
git blame index.js -L 20,40
```

## Other useful git blame options

There are also a bunch of other useful `git blame` options that you might want to use. Here are some of the ones I use the most, and what they do.

### Showing an author's email with git blame

All you have to to show the email address of an author only, is use the `-e` option:
```
git blame index.js -e
```
Producing an output like this:
```
^665221a (<some@email.com> 2022-04-30 20:58:04 +0100   8) import { fileURLToPath } from 'url'
```

### Ignoring whitepsace with git blame

You can also ignore whitespace with `git blame`, should your code contain a lot of it. To do this, you can use the `-w` option:
```
git blame index.js -w
```

### Formatting lines with color using git blame

By default, `git blame` produces a wall of white or black text. If you want to differentiate different commits and changes by color, you can use the `--color-lines` or `--color-by-age`:
- `--color-lines` colors lines if the line before was a different commit.
- `--color-by-age` colors lines by their age.

### Showing file names with git blame

To show the filename with `git blame`, use the `-f` option. This will show the file name along with the commit ID.
```
git blame index.js -f
```
Will produce an output like this:
```
^665221a index.js (Johnny Simpson 2022-04-30 20:58:04 +0100  16) import dotenv from 'dotenv'
```

### Showing line changes from the bottom up (reversed) with git blame

You can also show line changes in reverse with `git blame`, meaning starting at the bottom, and going up. Just add the `--reverse` option to your command:
```
git blame index.js --reverse
```
Why I'm Interested In Software Development
Published: 2022-08-30 20:30:58

Software development and programming has always been extremely interesting to me. I'm always fascinated anytime I see someone typing away at their keyboard while letters flowed into their text editor when I'm at school or at a cafe. Perhaps the fascination comes from my childhood, growing up obsessed with playing video games on my personal computer (since my parents refused to buy a gaming console for me and my brother). This seems like a pretty common path for many software developers and programmers that I talked with as many of us grew up with computers and phones. I would bet my money that most Millennials and Generation Z's are more familiar with the layout of a keyboard than the geography of the world.

I remember taking a programming class in Highschool, which was probably my first time writing a line of code. The class taught python and we later tinkered with some cool stuff on the raspberry pi. However, I struggled in this class despite my initial interests. I found a lot of the readings given by my teacher complicated and dry. Often times, I would read and think I understand what the concept is, but would find myself stuck when trying to create a program from scratch, especially if it involved some sort of logical thinking. I wanted to create a simple rock, paper, and scissors game, but could not finish without a friend basically writing the logically part of the code for me. I left that class thinking that perhaps programming just wasn't for me. 

What changed for me was taking the Introduction to Programming class at Simon Fraser University. It was my last semester before I graduated with a Bachelors of Arts Degree in Criminology. I decided to bite the bullet and took this course for elective credits that I needed to graduate. One of my close friend who's a software developer/engineer essentially convinced my whole friend group to try and learn programming and Computer Science. This class really changed my perspective on programming. It helped me realize that software development and Computer Science is more about problem solving than anything else. Working on the assignments and building simple programs from scratch helped me improve my problem-solving skills and allowed me to build confidence in myself to explore my passion in programming that I lost previously.

Currently I'm continuing my learning at CICCC in the Web Development stream. I hope to learn the necessary skills to smoothly transition to my first job in web/software development, and eventually into a career in this field. I want to continuously learn new skills and languages as I travel down my path, with a strong understanding of the fundamentals of software development. I want to develop my skills and become flexible as a full-stack developer. I hope that I can improve my problem-solving skills so when I'm confronted with problems or issues while developing, I can strategically and methodologically solve it.
Masscode is closing its doors...
Tags: beginners
Published: 2022-08-30 20:30:12

As of 2022, [Masscode](https://masscode.io/download/) will no longer be updating its popular code snippet software. I gather its lack of popularity must be because Github gist is free and integrated into github. I really like this tool however because it makes saving snippets from VSCode very simplistic— just highlight and create snippet. It's likely I don't know what alternatives there are, but I'm currently using only freeware so maybe the Pro devs use a commercial program (or none at all?) Either way, sort of sad to see it go and wondering if I should just switch to using gists. 

Do you use a code snippet organizer?

If so, which one?
You should not be testing implementation details
Tags: javascript, testing, react, node
Published: 2022-08-30 20:15:23

I see developers testing implementation details in the frontend very frequently. **Why is this a bad idea?**

In this post I'm referring to _unit tests in the frontend_. There are other specific cases where it can make sense to test the implementation details, check the resources at the bottom to read more about this.

## It makes it harder to maintain tests

Imagine that you have the following function:

```js
function multiply(x, y) {
  let total = 0;
  for (let i = 0; i < y; i++) {
    total = add(total, x);
  }
  return total;
}

function add(total, quantity) {
  return total + quantity;
}
```

And then you have the following tests:

```js
test("returns the correct result", () => {
  expect(multiply(5, 3)).toEqual(15);
});

test("calls the add function the correct number of times", () => {
  multiply(5, 3);
  expect(add).toHaveBeenCalledTimes(3);
});
```

In the first test we are checking that the **output** of the method is correct. But in the second test we are testing **implementation details**. If someone later comes and updates our function to the following:

```js
function multiply(x, y) {
  return x * y;
}
```

The first test will still pass but the second will fail. The function is **still working fine**, the output is the expected one. But still, we have to go and update the tests because one of them is returning a **false negative**.

Because of this **we cannot rely on our tests**. We cannot have confidence on them to know if the refactor was correct or not.

**We should be testing our code as how other users are going to use it**. If we are testing a React component, we should check what the user will get. If it is a library, our tests should resemble how other apps will use it.

By testing the output of our code we improve the developer experience with the consequence of improving the code quality of our software.

**It should be easy to know if, after a refactor, our code still works or not.**

## Resources

- [Testing Implementation Details](https://kentcdodds.com/blog/testing-implementation-details)
- [Why You Should Sometimes Test "Implementation Details"](https://codingitwrong.com/2018/12/03/why-you-should-sometimes-test-implementation-details.html)
How I learned OOP, when I was a beginner.
Tags: php, oop, programming, resource
Published: 2022-08-30 20:10:12

This is a link to one of my favorite resource back in the day that someone put together based off the original site. 

https://ss23.github.io/php-tutorial/objects.html

It's a great way to learn Object oriented programming for those who have never tried it before.
Come Build on Concordium
Tags: rust, blockchain, webdev, bounties
Published: 2022-08-30 19:57:03

Concordium Blockchain is the only public blockchain with a privacy based ID-layer at the protocol level built using RUST. It is the only blockchain with user attributes accessible from Smart Contracts built to be enterprise grade and compliant by nature. 

We welcome all #rustdevs to test us out and help us build out our bounties as we look to create new tools for integrations, interoperability, and Dapps. 

The blockchain for the future has arrived!
The Top 5 iPhone14 Pro Features
Tags: iphone14, appl, features
Published: 2022-08-30 19:49:11

Apple has been hard at work over the past year gearing up to release some pretty impressive new features for their upcoming iPhone 14 Pro. We’ve seen that the iPhone 14 Pro will be a significant upgrade from earlier models. It will be filled with features for [creative](https://mustaphaelhajj.com/how-to-overcome-mental-block-for-creativity/) users. We have been through the top 5 iPhone 14 Pro features expected when Apple announces their iPhone 14 Pro. Here are the main take aways:

=>Some highlights include a longer-lasting battery, an improved front-facing camera with auto-focus and a larger aperture, and a considerable megapixel jump for the rear camera. The iPhone 14 Pro will also be able to record 8K videos!

=>Apple fans are in for a real treat this year when the company unveils its latest and greatest smartphone model at their upcoming event on September 7th. So mark your calendars now and get ready to be blown away by all the iPhone 14 Pro offers!

[Top 5 iPhone 14 Pro Features](https://mustaphaelhajj.com/top-5-iphone-14-pro-features/)
Angular PWA to Google Play store, using Trusted Web Activity
Tags: webdev, javascript, beginners
Published: 2022-08-30 19:33:03


Original: https://codingcat.dev/post/angular-pwa-to-google-play-store-using-trusted-web-activity

{% youtube https://youtu.be/db9Y5jyparA %}

> PWA’s are still changing rapidly. This tutorial may not be as up to date, so I have removed the content and left the video for history
Using Gitlab CI/CD and Pages to Render and Host Your Markdown Resumé/CV
Tags: devops, career, beginners
Published: 2022-08-30 19:32:53

Wrote my first blog post on my personal site. Links to the blog post and the repository:
[Blog Post](tab:https://vbh.ai/gitlab-cv/)
[Gitlab Repository](tab:https://gitlab.com/lazydragon/dynamic-resume)
I was experimenting with Gitlab CI/CD and Pages for the first time and figured I'd use it for my resume. Gitlab allows me to use a pandoc/latex image to render my markdown resume to PDF defined by a latex format and host it on Gitlab pages.
Would love to hear some feedback about the post and the repo. If there are any suggestions for the repo, do let me know.
Continuous learning!
Looking for a Junior dev for straightforward React/Next js development. Stipend offered.
Tags: job, webdev, react, startup
Published: 2022-08-30 19:26:40

Hello, my team and i (https://bookingbucket.com) are looking for a junior dev to help build out some features for the next 3 months while i spend some time on another project. You will have support from a senior software engineer to guide, mentor and do code reviews. You will also gain knowledge on how to work in a small startup with mentorship from an experienced product developer and a business lead. 

If you like us and we like you, there is opportunity to continue with equity or pay or both.

The stipend is small as we are looking to vet someone for long term and teach them valuable frontend development skills that they can add to their portfolio or carry forward to another project.

Skills needed are: Html, css, Javascript, React, NextJs. The last two are not required but nice to have and desire to learn

Contact me at rishi@bookingbucket.com
How to bring back Uncommited Changes in VSCode timeline
Tags: vscode, git
Published: 2022-08-30 19:08:58

---
title: How to bring back Uncommited Changes in VSCode timeline
published: true
description: Get rid of annoying File Saved and use the good old "Uncommited Changes" in VSCode timeline. 
tags: vscode, git
cover_image: https://i.imgur.com/VJ3xfry.png
# Use a ratio of 100:42 for best results.
---
If you are using VSCode a lot for development like me, you may have noticed for some months they have got rid of "Uncommited Changes" from Timeline section. This might be a good change as the uncommitted changes are not really a historical data. 

While this is a logical change, but a lot of us are very much used to see unstaged commit in timeline. Because, it does not make sense a list like this for lot of us: 

![image](https://i.imgur.com/lLWfM9r.png)


So, here is a simple guide to show you how to get back to the previous state. 

First click on filter icon on timeline and untick "Local History" 
![image](https://i.imgur.com/WIMRXYr.png)

Then, go to Preference > Settings page and search for "git timeline" 
![image](https://i.imgur.com/Bo5r2p8.png)
Look for Show committed option on timeline and enable the setting. 

And that's how you have the old "Uncommited Changes" back in your timeline. Cheers.
NPM Tips and Tricks
Tags: webdev, javascript, beginners
Published: 2022-08-30 19:08:10


Original: https://codingcat.dev/post/npm-tips-and-tricks

{% youtube https://youtu.be/eWc0bg9KMQQ %}

## NPM Global install fail

Ever get the dreaded EACCES error after running npm install -g? You're not alone!

You will notice that npm is trying to install its packages to this path:

Missing write access to /usr/local/lib/node_modules

We need to change this to a better path that you have the rights to upate.

## .npmrc update

using vim or nano update your local .npmrc file

`vim ~/.npmrc`

Update this file with the below, this will tell npm to install packages locally to .npm-packages

```
prefix=${HOME}/.npm-packages

```

## NPM Global install success

Once you change the .npmrc file, you will begin to install packages to ~/.npm-packages. No more issues

![](https://media.codingcat.dev/image/upload/v1657636635/main-codingcatdev-photo/85977596-b94f-4bce-b13e-4dda85cdc944.jpg)

# NPM init defaults

If you start projects using npm often enough you will want to default some of the authoring items. The basic syntax is `npm config set init.*`

> Don't stress out if you are updating using npm config set while in a different directory this will still update in ~/.npmrc

```bash
npm config set init.author.name "Alex Patterson"
npm config set init.author.email "developer@ajonp.com"
npm config set init.author.url "https://ajonp.com/"
npm config set init.license "MIT"
npm config set init.version "0.0.1"

```

Now our full .npmrc will look like:

```
prefix=/Users/ajonp/.npm-packages init.author.name=Alex Patterson init.author.email=developer@ajonp.com init.author.url=https://ajonp.com/ init.license=MIT init.version=0.0.1


```

Executing npm init will produce the following just by hitting enter.

```json
{
	"name": "npm-sample",
	"version": "0.0.1",
	"description": "Sample NPM",
	"main": "index.js",
	"scripts": {
		"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "Alex Patterson <developer@ajonp.com> (https://ajonp.com/)",
	"license": "MIT"
}

```

# Setting NPM registry

At work we have a VSTS (aka Visual Studio aka DevOps) private npm registry so it becomes important to use `npm config set registry`

```
https://<company>.pkgs.visualstudio.com/_packaging/<company>/npm/registry/


```

Which will result in updating .npmrc with

```
registry=https://<company>.pkgs.visualstudio.com/_packaging/<company>/npm/registry/


```

There is a great [medium article](https://medium.com/@shemseddine/private-npm-package-deployment-using-vsts-92e19668f7d3) on setting up VSTS npm.

# Setting NPM loglevel

Probably my favorite setting of all is `npm config set loglevel="warn"`, this allows me to see any output and only the warnings. There are several different levels in the [npm docs](https://docs.npmjs.com/misc/config), you execute any of them by running something like below:

```
npm i -g ionic -s --silent: --loglevel silent -q, --quiet: --loglevel warn -d: --loglevel info -dd, --verbose: --loglevel verbose -ddd: --loglevel silly


```
Debug Angular 9 in Chrome Console
Tags: podcast, webdev, javascript, beginners
Published: 2022-08-30 18:58:03


> These functions are exposed via the global `ng` "namespace" variable automatically when you import from `@angular/core` and run your application in development mode. These functions are not exposed when the application runs in a production mode.

## Chrome Console Utilities

The great part about using the Chrome console is that it gives you access any DOM element that you have selected. For the last item you can get the reference by typing `$0` in the console. Below you will see that you can use the selection tool to easily find the element. Once this is selected you can then use `$0` as it will be the latest in your selection history. You can read further about this in [Console Utilities API Reference](https://developers.google.com/web/tools/chrome-devtools/console/utilities).

![](https://media.codingcat.dev/image/upload/v1657636833/main-codingcatdev-photo/4364bc2c-d750-4827-8fa1-0fb96af36555.png)

## Getting the Angular Component reference

Now that we know how to get a DOM reference we can use the Angular [code>@angular/core/global</code](mailto:code%3E@angular/core/global%3C/code) utilities, you can find more details here: [https://angular.io/api/core/global#entry-point-exports](https://angular.io/api/core/global#entry-point-exports).Using `ng.getContext($0)` we can access the angular component instance.

```javascript
// Get this component
let dialogComponent = ng.getContext($0)

// Get parent component
let dialogParentComponent = ng.getOwningComponent($0)
```

## Changing values in the Component

Now that you have a reference to the component using `let dialogComponent = ng.getContext($0)` we can now update the properties within the component. For this example we will change the qty in our recipeIngredient object.

```javascript
dialogComponent.data.recipeIngredient.qty = 5
```

You should also note that you can display the entire component as well incase you are unaware of the structure.

![](https://media.codingcat.dev/image/upload/v1657636833/main-codingcatdev-photo/0620068a-7f3b-4289-ac1d-4f492743e6e5.png)

## Making Component Update

In order to get the value change to show within the component you must trigger change detection.

```javascript
// Apply change detection
ng.applyChanges(dialogComponent)
```
Gatsby Cloud with Sanity CMS
Tags: podcast, webdev, javascript, beginners
Published: 2022-08-30 18:48:04


As a developer have you ever wanted to use a website builder like Squarespace, Wix or IM Creator because of their live previews? Then you realize I cannot add all the wonderful features of a ReactJS based environment! Gatsby Cloud just solved this for you!

## Useful Links

[https://www.gatsbyjs.com/docs/sanity/getting-started/](https://www.gatsbyjs.com/docs/sanity/getting-started/)[https://www.gatsbyjs.com/docs/sanity/adding-extension/](https://www.gatsbyjs.com/docs/sanity/adding-extension/)

## Gatsby

[https://www.gatsbyjs.com/](https://www.gatsbyjs.com/)Gatsby is an open source, modern website framework that builds performance into every site by leveraging the latest web technologies such as React and GraphQL. Create blazing fast apps and websites without needing to become a performance expert.

## Gatsby Cloud

![](https://media.codingcat.dev/image/upload/v1657636760/main-codingcatdev-photo/394d1639-6c58-4ff5-a0e1-8ddb63e51379.png)

### Real-time Preview

### Content collaboration just got easier

Preview is like a private playground for developers, designers, and content creators. It provides a shareable temporary URL for viewing changes immediately and in context—so you can make sure that new header plays nicely with the rest of the page before hitting “publish.”

- Instant updates triggered by your CMS or webhooks

- Shareable Preview URL for easy collaboration

- Popular CMS integrations with more coming soon

- Support for many headless CMSs out-of-the-box

### Builds (coming soon)

### The fastest way to build a Gatsby site

Tailored to Gatsby applications, Builds provide all the automation and infrastructure you need for instant continous deployment. On top of that, we include Lighthouse performance checks (coming soon) and Gatsby image processing in the Cloud.

- Fastest build times for Gatsby sites

- Build every branch automatically

- Push to deploy with GitHub

- Show and share previews of deploys (status checks on PRs, shareable URLs, etc)

- Automated Lighthouse performance checks

## Sanity

[https://www.sanity.io/](https://www.sanity.io/)Sanity is the fastest, most flexible platform for delivering content to digital devices and products.

![](https://media.codingcat.dev/image/upload/v1657636760/main-codingcatdev-photo/97b737b6-8712-4deb-b430-738bea943c1f.png)

### Move faster

Sketch with data. Start content work before even selecting a presentation framework. Move right to production.

### A single source of truth

Advanced data modeling and custom user interfaces let you decouple content from presentation.

### Treat content as data

Sanity treats your all content as data – even rich text – so you can transform and reuse it across channels.