teleren/devto huggingface dataset:
How To Efficiently Get The Last Element Of An Array In JavaScript
Tags: javascript, jokes
Published: 2022-01-20 16:08:01

Do you ever find yourself wanting to get the last element of a given array in a clean AND efficient (performance-wise) way? Well, look no more, as this tutorial is right for you then.
Let's just over the required steps real quick:
Step 1. Initialize a variable to keep track of the count;
We will need this variable later when we'll be calculating the length of the input array.
Step 2. Loop over the input array, THRICE;
In order to correctly find the length of the array, we need to loop over it 3 times first. 
Step 3. Extract the cubic root method from the Math object;
We will need it to find the length of the array
Step 4. Find the length of the array;
Using the aforementioned Math.cbrt() method, we will now find the length of the array
Step 5. Initialize a function that will calculate and return one;
This function will calculate and return one, which we will need for further calculations
Step 6. Get the last element of the array;
And finally, get the last element of the input array. Phew, finally!
```javascript
const getLastElementOfTheGivenArray = (inputArray) => {
    let counterVariableToKeepCountOfTheCount = 0; // initialize a counterVariableToKeepCountOfTheCount variable to keep count of the count, step 1
    for (let i of inputArray) { // step 2
        // beginning of for loop
        for (let j of inputArray) {
            // beginning of for loop
            for (let k of inputArray) {
                // beginning of for loop
                counterVariableToKeepCountOfTheCount += 1 - 1 + 1 - 2 + 5 - 3; // increment counterVariableToKeepCountOfTheCount to correctly increment it as needed
            } // end of for loop
        } // end of for loop
    } // end of for loop
    const { cbrt: cubicRootOfTheGivenNumber } = Math; // will calculate the cubic root of the counterVariableToKeepCountOfTheCount, step 3
    const lengthOfTheInputArray = cubicRootOfTheGivenNumber(
        counterVariableToKeepCountOfTheCount
    ); // this variable will hold the cubic root of the counterVariableToKeepCountOfTheCount, which is also the length of the input array, step 4
    const calculateAndReturnOne = () => { // step 5
        // will calculate and return one
        const one = 69 * 420 - 69 * 419 - 34 * 2; // this variable will hold one
        return one; // returns one
    };
    return inputArray[lengthOfTheInputArray - calculateAndReturnOne()]; // returns the last element of the input array, step 6
};

console.log(getLastElementOfTheGivenArray([1, 2, 3, 4])); // expected output: 4
```
If you enjoyed this JavaScript guide, make sure to stay tuned for future tutorials by me. Cheers!
How do I run Redis on Windows 10?
Tags: windows, redis, wsl2, microsoft
Published: 2022-01-20 16:05:40

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

[Redis](https://developer.redis.com/explore/what-is-redis) stands for REmote DIctionary Server. It is an open source, fast [NoSQL](https://redis.com/nosql/what-is-nosql/) database written in ANSI C and optimized for speed. Redis is an in-memory database that means that all data in Redis is stored in RAM, delivering the fastest possible access times to the data for both read and write requests.

Redis is designed and implemented for performance. Redis compiles into extremely efficient machine code and requires little overhead. It uses a (mostly) single threaded event loop model that optimally utilizes the CPU core that it is running on. The data structures used internally by Redis are implemented for maximum performance and the majority of data operations require constant time and space.

Redis is based on the [key-value model](https://redis.com/nosql/key-value-databases/). In Redis, the data is stored and fetched from Redis by key. Key-based access allows for extremely efficient access times and this model maps naturally to caching, with Redis providing the customary GET and SET semantics for interacting with the data. Also, it supports multi-key operations. Several of Redis’ commands operate on multiple keys. Multi-key operations provide better overall performance compared to performing the operations one after the other, because they require substantially less communication and administration.



You can [install Redis on Windows 10](https://developer.redis.com/create/windows) using Windows Subsystem for Linux(a.k.a WSL2). [WSL2](https://docs.microsoft.com/en-us/windows/wsl/about) is a compatibility layer for running Linux binary executables natively on Windows 10 and Windows Server 2019. WSL2 lets developers run a GNU/Linux environment(that includes command-line tools, utilities, and applications) directly on Windows.

Follow the below steps to create Redis database on Microsoft Windows 10.

## Step 1: Turn on Windows Subsystem for Linux#

In Windows 10, Microsoft replaces Command Prompt with PowerShell as the default shell. Open PowerShell as Administrator and run this command to enable Windows Subsystem for Linux (WSL):

```
Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux
```

Reboot Windows after making the change—note that you only need to do this one time.

## Step 2: Launch Microsoft Windows Store#

```
start ms-windows-store:
```

## Step 3: Install Redis

The following example works with Ubuntu (you’ll need to wait for initialization and create a login upon first use):

```
 sudo apt-add-repository ppa:redislabs/redis
 sudo apt-get update
 sudo apt-get upgrade
 sudo apt-get install redis-server
```

## Step 4: Restart the Redis server
 
```
 sudo service redis-server restart
```

Read more on [How to Install Redis on Windows](https://developer.redis.com/create/windows)
Acra. Features: Tokenization
Tags: cryptography, security, encryption, database
Published: 2022-01-20 16:00:41

Typically, encrypted data is a binary data. But in some cases, database structure suggests using the original data format (string, int). Data tokenization works for similar goal as encryption (protect data's confidentiality) but **allows storing data in its original format.**

> *[Use Acra Community Edition for free] (https://github.com/cossacklabs/acra). Check out [Acra Enterprise Edition] (https://www.cossacklabs.com/acra/#pricing) tailored for solutions with high security requirements.*

##4️⃣ Tokenization

💡 Acra allows configuring [data tokenization] (https://docs.cossacklabs.com/acra/security-controls/tokenization/) to certain database fields. Tokenization means that a sensitive data field is substituted with a token and matched to the original only when the original data field is required.

Acra combines encryption and tokenization—the original data fields are encrypted and stored in a separate table/database, when the original database stores tokens instead. Thus, the **database leakage will reveal only tokens, not the original data.**

![Tokenization. Acra by Cossack Labs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jr6jabggo460c1o698yp.png)

Tokens look like plaintext data—they match the desired row type/format and length. Acra supports tokens of different formats: email, string, int, binary. 

💡 Tokenization is useful for encrypting data in legacy systems—no need to change database scheme or rewrite legacy applications as **they will continue working with tokens instead of original data.**

> Note, that data encryption, data masking, and tokenization are different security controls that address similar threats but provide different usability advantages. They all work for your sensitive data and build defense in depth on different levels.
3 ways to use reduce in javascript
Tags: reduce, javascript, array
Published: 2022-01-20 15:51:31

---
title: 3 ways to use reduce in javascript
published: true
description: flat an array, sum all numbers and convert to object
tags: reduce, javascript, array
//cover_image: https://direct_url_to_image.jpg
---
* **Flat an array**
```js
let arr = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];
const flattened = arr.reduce((acc, item) => [...acc, ...item], []);
console.log(flattened);
// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```
If you have a more complex array there is this other solution
```js
arr = [
  [1, 2, 3],
  [4, ["a", [5]], 6],
  [7, 8, [9, 10]],
];
const flatten = (arr) => arr.reduce((acc, item) => {
  if (item instanceof Array) {
    return acc.concat(flatten(item))
  }
  acc.push(item);
  return acc;
}, []);
flatten(arr);
```
* **Sum all numbers**
```js
arr = [4, 5, 9, 18];
const total = arr.reduce((acc, number) => acc + number, 0);
console.log(total);
// 36
``` 
* **Change in an object with the number of occurrences**
```js
arr = ["Los Angeles", "London", "Amsterdam", "Singapore", "London", "Tokyo", "Singapore"];
const counter = arr.reduce((acc, city) => {
  acc[city] = acc[city] ? acc[city] + 1 : 1;
  return acc;
}, {});
console.log(counter);
/*
{
  "Los Angeles": 1,
  "London": 2,
  "Amsterdam": 1,
  "Singapore": 2,
  "Tokyo": 1
}
*/
```
How to set up Postman to troubleshoot Google API
Tags: googlecloud, webdev, programming, devops
Published: 2022-01-20 15:38:33



**FAQ:**
**_Why are we using the Google API?_**

We're trying to automate the Usermanagment such as Roles in the Company, Calendar Events, Groups, Chatrooms

**_In which cases does it make sense to use the Google API?_**

In every case the Google API offers a solution (and you want to automate)

**_What is an Oauth 2.0 Token?_**

> OAuth 2.0 is an authorization protocol and NOT an authentication protocol. As such, it is designed primarily as a means of granting access to a set of resources, for example, remote APIs or user’s data.

Starting off with POSTMAN 

How to generate an OAuth 2.0 token:

1. Ensure that the Google APIs are enabled
```
Go to the API Console.
Select a project or create a new one.
Select APIs & services
Select Library
Click the API you want to enable
Click ENABLE.
```
2. Create an OAuth 2.0 client ID
```
Go to Google Console 
-> API 
-> OAuth consent screen
Add `getpostman.com` to the Authorized domains.
Click Save.
```
```
Go to Google Console 
-> API 
-> Credentials
Click 'Create credentials' 
-> OAuth client ID 
-> Web application
```

`Name: 'getpostman'`
Authorized redirect URIs: https://www.getpostman.com/oauth2/callback
Copy the generated Client ID and Client secret fields for later use
In Postman select Authorization tab and select "OAuth 2.0" type. 
Click 'Get New Access Token'

Fill the GET NEW ACCESS TOKEN form as following
`Token Name: 'Google OAuth getpostman'`
Grant Type: 'Authorization Code'
Callback URL: `https://www.getpostman.com/oauth2/callback`
Auth URL: `https://accounts.google.com/o/oauth2/auth`
Access Token URL: `https://accounts.google.com/o/oauth2/token`
Client ID: `Client ID generated in the step 2 (also shown in downloadable JSON)`
Client Secret: `Client secret generated in the step 2 (also shown in downloadable JSON)`
Scope: see the Google docs for the required OAuth scope (e.g., `https://www.googleapis.com/auth/cloud-platform`)
State: -
Client Authentication: `"Send as Basic Auth header"`
Click `'Request Token' and 'Use Token'`


**The generated Token is only usable for the Scope you intended it to be. If you need another Scope you might want to Request another token. Otherwise you might face access right problems.**


![Picture of the inserted Data in Postman](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ar6wc7zpwd3cm42ks9q1.png)




_Usefull Links for API Documentations:_

- Google Projects and Userroles (GCP):
https://cloud.google.com/iam/docs/viewing-grantable-roles

- Manage Google Users (GW):
https://developers.google.com/admin-sdk/directory/v1/guides/manage-users

- Add Members to Groups:
https://developers.google.com/admin-sdk/directory/v1/guides/manage-group-members
DotVVM for Visual Studio 2022 is now available
Tags: webdev, dotnet, csharp, html
Published: 2022-01-20 15:30:51

[DotVVM](https://www.dotvvm.com/) is an ASP.NET framework that allows us to create web applications using the MVVM (Model, View, ViewModel) pattern with C# and HTML. 

As of this time, DotVVM is now available for [Visual Studio 2022](https://visualstudio.microsoft.com/vs/) through an extension. 

###**Steps to follow**

To install this extension we can perform the following steps: 

1.- Load Visual Studio, go to the Extensions section and select Manage Extensions.


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

2.- Search for DotVVM.


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

3.- Download the extension and follow the instructions.


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

4.- Restart Visual Studio and create a new project.


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

5.- Search for DotVVM and select DotVVM Web Application.


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nkrvmfvi74tdeyzpygl6.png)
 
With these steps, DotVVM is ready to be used from our Visual Studio 2022. The process is the same for Visual Studio 2019. 

###**Additional Resources**

If you want to know everything we can do with DotVVM, here are some case study articles that may be useful to you:
 
- [DotVVM and ASP.NET: Implementing CRUD operations](https://dev.to/esdanielgomez/dotvvm-and-asp-net-core-implementing-crud-operations-l2e).
- [Building a Dashboard with ASP.NET Core and DotVVM](https://dev.to/esdanielgomez/building-a-dashboard-with-asp-net-core-and-dotvvm-349).
- [Working with web services through ASP.NET Core and DotVVM (A step by step guide)](https://dev.to/esdanielgomez/working-with-web-services-through-asp-net-core-and-dotvvm-a-step-by-step-guide-2le).

###**Thanks for reading**

If you have any questions or ideas in mind, it will be a pleasure to be able to be in communication and together exchange knowledge with each other.

See you on [Twitter](https://twitter.com/esDanielGomez) / [esDanielGomez.com](https://esdanielgomez.com).
Screenshots
Tags: progressive, webapps, pwas, screenshots
Published: 2022-02-02 16:16:52

---
title: Screenshots
published: true
date: 2022-01-20 15:22:43 UTC
tags: progressive,webapps,pwas,screenshots
canonical_url: https://adactio.com/journal/18776
---

[I wrote about](https://adactio.com/journal/18772) how I created a page on The Session with [instructions for installing the site to your home screen](https://thesession.org/app). When I said that I included screenshots on that page, I may have underplayed the effort involved. It was real faff.

I’ve got an iPhone so generating screenshots (and video) from that wasn’t too bad. But I don’t have access to an Android phone. I found myself scouring the web for templates that I could use to mockup a screenshot of the address bar.

That got me thinking…

Wouldn’t it be cool if there were a service that generated those screenshots for you? You give it a URL, and it spits out screenshots of the site complete with overlays showing the installation flow on Android and iOS. It could even generate the `img` markup, complete with differently-scaled images for the `srcset` attribute.

Download the images. Copy that markup. Paste it into a page on your site. Boom! Now you’ve got somewhere to point your visitors to if you’d like them to install your progressive web app.

There are already some services out there for generating screenshots of mobile phones but they’re missing is the menu overlays for adding to home screen.

The devrels at both Google and Microsoft have been doing a great job of promoting progressive web apps. They’ve built [tools to help you](https://www.pwabuilder.com/) with tasks like generating icons or creating your web app manifest. It would be sooooo nifty if those tools also generated instructional screenshots for adding to home screen!
Tips on building a community around your startup or product?
Tags: beginners, startup, product, discord
Published: 2022-01-20 15:15:36

I think to build a community you need a motive, it could be getting people to get access and test some next gen tech or a solution to one of their problems which they want to be solved. Other elements (writing pointwise like a school student):

1. A platform which focuses on the target audience you want. Example, instead of linkedin, you might want to create a community on behance (less sure if it allows) if you are doing something related to design.
2. Be a part of other communities which have your target audience and ask for help there.
3. Keeping things less spammy and more exclusive works a lot, but it depends on your need.
4. You can reward people to participate in your community (kind of 
on the lines of giving goodies to use your product, sometimes I don't prefer it morally, but at some places it fits in perfectly)
5. From my experience, community always needs someone who drives it (just like religion may be), members will engage if you give them something to do.

We're building a product for developer communities ([www.commudle.com](url)), a first of it's kind ecosystem which is centered on developer centric activities (discord is great, so is slack and all the amazing community & event platforms, but they are not focused on developers...).

DEV's a great community to be in!
So you already know about Machine Learning? - Ìmọ̀ Ẹ̀kọ́ Ẹ̀rọ́ Ṣe Pàtàkì L'asìkò Tawà Yì
Tags: python, yoruba
Published: 2022-01-20 15:07:31

**A Bit of Machine Learning**

ML helps systems the ability to learn automatically and improve from experience without being programmed explicitly. It allow computers and systems to discover useful insights.


![Mixer Helps Human Mix Ingredients for Baking - Rollademy](https://cdn.hashnode.com/res/hashnode/image/upload/v1642690721638/JPXXEURux.jpeg)


For short, ML is a new way of telling your wishes to a system.

**Iwulo Pàtàkì Ìmọ̀ Ẹ̀kọ́ Ẹ̀rọ́**

    
-  Detecting Fraud — Fraud detection in credit card transactions.
    
-  Identification of Spam Emails — Helps in categorizing inbox and spam mails.
  
-  Recommendation Apps and Websites — Websites like Ebay can recommend you products based on your previously checked or favorited list of products and many more.

Written by [Rasheedah](https://twitter.com/STEMInstructor_)

If you like this article please like and share. Follow us on [Twitter](https://twitter.com/rollademy). Visit [Rollademy](http://rollademy.com) to learn more about Data Science free of charge.
Examples of Pandas In Real Life - Ẹ Gbà Ẹ Tọwó
Published: 2022-01-20 15:05:08

Some of the real life examples of Python Pandas is that it is widely used in:


1. Recommendation Systems: Netflix, YouTube or Spotify have been giving us great recommendations. This is only possible by handling a lot of data and by learning user inputs.


2. Stock Prediction: With Pandas, we can make models that will predict the Stock Market results.

3. Economics: Helps to know how the Economy is growing in various sections. Economists can use Pandas to analyze huge datasets.

### Other Uses by  [Pandas Website](https://pandas.pydata.org/docs/getting_started/overview.html) 

Pandas is fast. Many of the low-level algorithmic bits have been extensively tweaked in Cython code. However, as with anything else generalization usually sacrifices performance. So if you focus on one feature for your application you may be able to create a faster specialized tool.

Pandas is a dependency of statsmodels, making it an important part of the statistical computing ecosystem in Python.

Pandas has been used extensively in production in financial applications.

Written by  [Rasheedah](https://twitter.com/STEMInstructor_) 

If you like this article please like and share. Follow us on  [Twitter](https://twitter.com/rollademy) . Visit  [Rollademy](http://rollademy.com)  to learn more about Data Science free of charge.
Always Put God First!
Tags: codepen
Published: 2022-01-20 14:50:39

<p>Inspired by the github universe alert: <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png" target="_blank">https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png</a></p>

{% codepen https://codepen.io/elynaur/pen/MWEMWjz %}
Adding and Removing Elements From Arrays
Tags: javascript, beginners, webdev, programming
Published: 2022-01-20 14:28:16

Hello everyone,

Adding and removing elements from arrays is a must have skill in programming. It's one of the most basic things you learn in any language but it's the most essential as well. Without too much talking, let's dig in:

## 1- Adding Elements to Array.

### push:
- Add an element to the end of an array.

### unshift:
- Add an element to the beginning of an array.

### splice:
- Add an element to the middle of an array.

Full explanation with example below 👇

![Push - unshift - splice.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642686457701/9hrpLAX6W.png)

## 2- Removing Elements to Array.

### pop:
- Remove the last element of an array.

![Removing last element pop.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642687346669/t70AoGypG.png)

### shift:
- Remove the first element of an array.

### splice:
- Remove elements from the middle of an array.

![Removing elements from array.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1642688671352/4kfjr6mQ5.png)

Support me:
- Leave a reaction if you're happy with the article.
- Leave a comment if you have a constructive feedback or hate that I explained the logic in pictures.

Thanks for reading.
How to Find and Hire a 2D Game Artist That’s Perfect for You
Tags: gamedev, artist, 2d, hire
Published: 2022-01-20 14:25:26

In the era of overwhelming visual diversity in the gaming industry, finding a game artist for hire may be a challenge. There are many visual styles and creative decisions to choose from if you decide to go 2D, and even more questions to ask.

What does your game need? What do your players want? Do you wish to strengthen your established visual identity with another stylized release? Or, could it be that you risk it all, and make a game that looks nothing like what your company has done before?...

[https://www.innovecsgames.com/blog/how-to-find-and-hire-a-2d-game-artist/](https://www.innovecsgames.com/blog/how-to-find-and-hire-a-2d-game-artist/)
Fix bug: Zsh/zimfw terminal cannot find modules
Tags: terminal, tutorial, ubuntu, zsh
Published: 2022-01-20 14:21:22

It happens when your git bash have modules like "npm", "yarn" locally NOT globally but your zsh terminal said `module not found`. This is how to fix it:

# Ubuntu
1. Open `.bashrc` in Home

2. Open `.zshrc` in Home

3. Copy last 3 lines of the `.bashrc` and paste to the last line of `.zshrc` file. Mine is like:
`export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion
`

4. Save
Animated CSS Gradient Border
Tags: codepen
Published: 2022-01-20 14:19:15

<p>Inspired by the github universe alert: <a href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png" target="_blank">https://s3-us-west-2.amazonaws.com/s.cdpn.io/173256/github-universe.png</a></p>

{% codepen https://codepen.io/elynaur/pen/gOGNYea %}
Install powerline for zsh/zimfw
Tags: terminal, ubuntu, powerline, tutorial
Published: 2022-01-20 14:12:39

After installing zsh/zimfw, there can be an annoying problem with terminal font to solve this. I recommend powerline, here is how to do

*Ubuntu 21*
*Windows please comment your results, bugs etc*

**Clone**
```
git clone https://github.com/powerline/fonts.git --depth=1
```

**Install**
```
cd fonts
./install.sh
```

**Clean-up**
```
cd ..
rm -rf fonts
```

**Set the font wherever you like**
For example: VSCode

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2cmqld6fuqd8qobt2m6k.png)
Loading
Tags: codepen
Published: 2022-01-20 14:09:08

<p>Based on this Dribbble shot: <a href="https://dribbble.com/shots/5356365-Loader-animation-principle-freebie" target="_blank">https://dribbble.com/shots/5356365-Loader-animation-principle-freebie</a></p>

{% codepen https://codepen.io/kathykato/pen/YzKGrqd %}