teleren/devto huggingface dataset:
How to copy data in Google Sheets as HTML table
Tags: showdev, tutorial, appscript, javascript
Published: 2021-07-13 16:39:58

I often need to extract some sample data in Google Sheets and present it in my blog as an HTML table. However, when copying a selected range in Google Sheets and paste it outside the Google Sheets, I only get plain text. In this post, I explain how to copy data in Google Sheets as an HTML table by writing a small Apps Script program.

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-H4_aIGJEO34/YK6k6YX103I/AAAAAAAAAPA/52vt1x8LtdU_i5u-IhIUcVjpNAWJv3MawCPcBGAsYHg/s2524/Screenshot%2B2021-05-26%2Bat%2B21.39.54.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="Copy sheets as HTML table" border="0" data-original-height="1298" data-original-width="2524" height="330" src="https://1.bp.blogspot.com/-H4_aIGJEO34/YK6k6YX103I/AAAAAAAAAPA/52vt1x8LtdU_i5u-IhIUcVjpNAWJv3MawCPcBGAsYHg/w640-h330/Screenshot%2B2021-05-26%2Bat%2B21.39.54.png" title="Copy sheets as HTML table" width="640" /></a></div>

## Concept

- Write a small Apps Script program `copyAsHTMLTable()` to transform the selected range in the active sheet into a HTML code for table
- According to Apps Script documentation, [getActiveRange()](https://developers.google.com/apps-script/reference/spreadsheet/spreadsheet-app#getactiverange) returns the selected range in the active sheet.
- According to Apps Script documentation, [getDisplayValues()](https://developers.google.com/apps-script/reference/spreadsheet/range#getDisplayValues()) returns the rectangular grid of values for a range.
- From the rectangular grid of values: 
  - Use 2 `for` loops to iterate row by row and then column by column
  - Each row is wrapped in a HTML row tag `<tr></tr>`
  - Each column is wrapped in a HTML column tag `<td></td>`
- Present the HTML table code in a dialog so that user can copy it manually
- Add the program `copyAsHTMLTable()` to a menu on the toolbar to easily run it

## Source Code

https://gist.github.com/allstacksdeveloper/834d0dabec494e08d9719473fd15bc87.js

## LION Stock Portfolio Tracker

If you want to learn more how to use Google Sheets and Google Apps Script to manage stock portfolio investment, please check out [LION stock portfolio tracker guide](https://www.allstacksdeveloper.com/p/lion-stock-portfolio-tracker.html)

<div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-fJaQmukBW40/YHdGI2pc67I/AAAAAAAAALI/x27ehQa3IDo7xHlCF6xlo2EPOSu8RfcPwCPcBGAsYHg/s1910/Screenshot%2B2021-04-14%2Bat%2B21.42.39.png"><img alt="LION stock portfolio tracker dashboard in Google Data Studio" border="0" data-original-height="1910" data-original-width="1802" height="640" src="https://1.bp.blogspot.com/-fJaQmukBW40/YHdGI2pc67I/AAAAAAAAALI/x27ehQa3IDo7xHlCF6xlo2EPOSu8RfcPwCPcBGAsYHg/w605-h640/Screenshot%2B2021-04-14%2Bat%2B21.42.39.png" title="LION stock portfolio tracker dashboard in Google Data Studio" width="605" /></a></div>

https://www.allstacksdeveloper.com/p/lion-stock-portfolio-tracker.html
Bubble Sort (JS Example)
Tags: bubblesort, algorithms, faang, javascript
Published: 2021-07-13 16:24:27

[![Twitter Follow](https://img.shields.io/twitter/follow/cleancodestudio.svg?style=social)](https://twitter.com/cleancodestudio) 


> _Note: This is not a "professionally written" post. This is a post sharing personal notes I wrote down while preparing for FAANG interviews._

[See all of my Google, Amazon, & Facebook interview study notes](https://www.cleancode.studio/notes/faang-interview-notes)


## Bubble Sort Overview

- Worst Complexity: n^2
- Average Complexity: n^2
- Best Complexity: n
- Space Complexity: 1
- Method: Exchanging
- Stable: Yes
- Class: Comparison Sort


## Bubble Sort Notes

Bubble sort, sometimes referred to as sinking sort, is a simple sorting algorithm that repeatedly steps through the list, compares adjacent elements and swaps them if they are in the wrong order. The pass through the list is repeated until the list is sorted. 

## Bubble Sort JS Implementation

```js
const BubbleSort = (items = []) => {
  for (let i = 0; i < items.length; i++)
  {
    for (let j = 0; j < items.length; j++)
    {
      if (items[j] > items[j + 1])
      {
         let temporary = items[j]
         items[j] = items[j + 1]
         items[j + 1] = temporary
      }
    }
  }

  return items
}


module.exports = BubbleSort
```

--- 
> **FAANG Study Resource: Cracking the Coding Interview**
> (Google Recommended)

<a target="_blank"  href="https://www.amazon.com/gp/product/0984782850/ref=as_li_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=0984782850&linkCode=as2&tag=ccs0cc-20&linkId=4e21ded6a61b9a202cdc2b9c0bd14025"><img border="0" src="//ws-na.amazon-adsystem.com/widgets/q?_encoding=UTF8&MarketPlace=US&ASIN=0984782850&ServiceVersion=20070822&ID=AsinImage&WS=1&Format=_SL250_&tag=ccs0cc-20" ></a>


---

[My FAANG interview study notes](https://www.cleancode.studio/notes/faang-interview-notes)

[Bubble Sort Github](https://github.com/zhorton34/data-structures-algorithms-101/blob/master/src/sorts/BubbleSort.js)

[Clean Code](https://cleancode.studio/clean-code)
Firebase Auth | Understanding The Auth
Tags: firebase, security, webdev, javascript
Published: 2021-07-13 16:21:54

> NOTE: This blog post assumes that you are at-least familiar with setting up firebase SDK
If you don't I'd recommend reading my blog on [firebase firestore](https://dev.to/lucidmach/the-20-firebase-that-ll-do-80-of-the-task-a-firestore-cheatsheet-304p) first

If you've built an application, you've probably had to deal with authentication and authorization

Contrary to Popular Belief
`authentication !== authorization`

## Difference Between Authentication and Authorization
Consider A School
![School](http://www.pngall.com/wp-content/uploads/2018/04/School-PNG-Pic.png)

The School has a Principal
![Principal](https://image.flaticon.com/icons/png/512/1999/1999321.png)
He Decides
1. If a Student Joins the School
2. If a Student Gets Debarred
3. If a Student Gets Promoted (Despite Failing Tests)
4. If a Student Gets Demoted
...

The School also has a Security Guard
![Security](https://image.flaticon.com/icons/png/512/2124/2124268.png)
He Decides
1. If/When a Person can Enter the Campus
2. If/When a Person can Leave the Campus
...

Now as an Analogy
`Authentication: Principal`
`Authorization: Security Guard`

## Authentication


### What is Authentication
The Process of Verifying the Identity of a User


### Steps in Authentication
3. Creating An Account
2. Verifying An Account Email Address
4. Login/Sign-In
5. Password Recovery
6. Sign Out

### Firebase Authentication


#### 1. Creating An Account 
```
firebase.auth().createUserWithEmailAndPassword(
  email,
  password
);
```
> NOTE: You Receive a Promise from any Function from Firebase 

#### 2. SignOut
```
firebase.auth().signOut()
```
> NOTE: Firebase removes the token stored on the client's localStorage (indexdb to be precise). It'll talk about it in detail in `Authorization`

#### 3. Login
```
firebase.auth().signInWithEmailAndPassword(
  email, 
  password
)
```

#### 4. Verifying An Account Email
```
// sends a pre-templated message to a specified email address
firebase.auth().sendEmailVerification(
  email,
);
```

#### 5. Password Recovery
```
firebase.auth().sendPasswordResetEmail(
  email
);
```

## Authorization


### What is Authorization
The Process of Controlling Access to an Asset 

### How Does Firebase Authorize
1. When Ever A User's Auth State Changes
  1. It Updates A User Token
  > Very Similar To JWT but not restricted to web application
  2. It Stores the Token in the browser's indexDB (and not in the cookies) so it has a more controllable timeline
2. If A Valid User Token is Present, A User is allowed to Access the Resource
 
#### Accessing User Token / Checking Auth State
```
firebase.auth().onAuthStateChanged((user) => {
  if (user) {
    // User is signed in, see docs for a list of available properties
    // https://firebase.google.com/docs/reference/js/firebase.User
    var uid = user.uid;
  }
});
```
Deploy Docker image to Heroku with CicleCI
Tags: heroku, docker, circleci
Published: 2021-07-13 16:11:36

Heroku is a functional PaaS that can deploy the Docker image, and CircleCI is also useful SaaS for CI/CD.

In this post, I show an example of CircleCI config which deploys the Docker image to Heroku.

Actually, I had trouble when setting it up. 🤣

## Prerequisite

* Code repository and CircleCI had already connected
* Created Heroku app for deploying the Docker image
* Generated Heroku API Key in Manage Account view on Heroku

## Set up

### Environment Variable

Set environment variables on your project settings in CircleCI.

Name | Value
--- | ---
HEROKU_API_KEY | Your Heroku API Key
HEROKU_APP_NAME | Heroku app name for deploying the Docker image

### config.yml

Modify config.yml below.

```yaml
jobs:
  # Build the docker image and run tests.
  build_and_test:
    docker:
      - image: cimg/base:2021.07
    steps:
      # For using docker commands.
      - setup_remote_docker:
          version: 19.03.13

      # Build the docker image
      - checkout
      - run: docker build -t webapp .

      # Run tests.
      - run:
          command: docker run webapp python3 tests.py

  # Build the docker image and deploy it to Heroku.
  build_and_deploy:
    docker:
      - image: cimg/base:2021.07
    steps:
      # For using docker commands.
      - setup_remote_docker:
          version: 19.03.13

      # Build the docker image
      - checkout
      - run: docker build .

      # Deploy to Heroku
      - heroku/install
      - run: heroku container:login
      - heroku/push-docker-image:
          process-types: web
      - heroku/release-docker-image:
          process-types: web

orbs:
  # For using Heroku CLI commandｓ.
  heroku: circleci/heroku@1.2.6

version: 2.1
workflows:
  heroku_deploy:
    jobs:
      - build_and_test
      - build_and_deploy:
          requires:
            # Deploy after testing.
            - build_and_test
```

## Test

Example codes are in [this repository](https://github.com/takakd/example-heroku-circleci-alpinehelloworld).

## Refs.
* [Retrieving the API token](https://devcenter.heroku.com/articles/authentication#retrieving-the-api-token)
* [Using Environment Variables](https://circleci.com/docs/2.0/env-vars/)
* [heroku/alpinehelloworld](https://github.com/heroku/alpinehelloworld)
* [Deploying with Docker](https://devcenter.heroku.com/categories/deploying-with-docker)

Thanks!😆
4 UI Resources All Devs Should Look Out For
Tags: webdev, uiweekly, productivity, tooling
Published: 2021-07-13 15:55:25

Today I decided to create a list with some UI features I like to use. I see many friends of mine constantly using the same tools/resources, which ends up bringing some repetition in their personal projects.

Exactly because of this I decided to share some of the resources I use almost daily, from illustrations, shapes, tools, among others.

Many of the things I'm going to share here may have paid plans, however to be honest, I only use the free plan and I'm more than satisfied for what I need.

# 1 - [Tabbied](https://tabbied.com/)

![tabbied website](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626189039/Kapture_2021-07-13_at_16.09.07-min_tq1l7u.gif)

If you are a big fan of patterns and mainly like generative tools to help in the process of creating them, this platform is ideal for you. 

It has several variants of patterns of great quality, you can choose the color palette and the size of the pattern.

# 2 - [Shapefest](https://www.shapefest.com/)

![shapefest website](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626189968/Screenshot_2021-07-13_at_16-25-12_Shapefest_-_A_massive_library_of_free_3D_shapes-min_sexrb1.png)

I think we've all gotten to the point where we thought we were fed up with using 2D illustrations over and over again. This website has several 3D illustrations that we can use on our website. 

All of high quality and with a large number of angles, shapes and textures. I recommend everyone to take a look, in my opinion it's all worth it.

# 3 - [Sapiens](https://sapiens.ui8.net)

![sapiens character builder](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626190652/Kapture_2021-07-13_at_16.35.22-min_fkq8jj.gif)

The only illustrations that I have used in the last ones we have in my personal projects come from this platform. I think it's the most interesting and complete one out there. 

Besides we can customize the characters we can change the scenery and we still have three design variants to choose from (Colorful, Duotone, Outline).

# 4 - [SocialSizes](https://socialsizes.io/)

![SocialSizes website](https://res.cloudinary.com/dj5iihhqv/image/upload/v1626191236/Kapture_2021-07-13_at_16.45.24-min_oq941v.gif)

This platform is different from all the others mentioned above. If you have an online presence on platforms such as LinkedIn and Instagram, you can check the ideal dimensions for the publications you will make. 

You also have the possibility to download templates with the correct dimensions for any kind of publications with compatibility with some of the most famous tools (Figma, Photoshop, etc).

# Conclusion

I hope this article has helped you in any way, from giving your applications a new look, to improving your visual consistency on social media.

Please mention in the comments other platforms that you use on a daily basis and that would be interesting to share with the community. I'm really curious to know.
Eip that would allow recover stuck tokens in smart contracts
Tags: ethereum
Published: 2021-07-13 15:45:47

Hello. Recently I sent erc20 based tokens by mistake to another token contract adress (yes, I'm an idiot). The team of that token (erc20 based too) says those tokens are stuck and can't be recovered. Some guy told me there was an eip in developement that would allow to redeem those tokens. I was wondering if you guys knew something about this, or any other way to recover those tokens (besides destroying the contract, which seems unlikely). Thank you very much for your replies
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-07-13 15:18:50

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week._ 


## Security in the cloud is a shared responsibility 

In the words of a community member [Matt Irby](https://dev.to/irby/comment/1g812), this is a fantastic explanation of the shared responsibility model. 

Great work, @adityagaur!

{% link https://dev.to/aws-builders/10-steps-to-secure-your-cloud-2mhn %}

## A very important numeronym

... "A11y" that is. Thank you for this thorough and clear breakdown of the term, @ashleemboyer. It's definitely a critical one to me familiar with in this field!

{% link https://dev.to/ashleemboyer/what-the-heck-is-web-a11y-blp %}

## Notes on inheriting code

"There will always be a time in your life when you inherit code that was written by another developer," writes @towernter. In their guide on the subject, you'll learn what to do in this inevitable situation. 

{% link https://dev.to/towernter/getting-started-with-a-project-written-by-another-developer-1l61 %}

## Pedro's research is your gain!

@arantespp created this guide because they needed to work on a project that uses MongoDB. Completing the steps outlined in this guide gave them an overview of how MongoDB works. Their research is your gain ✨ 

{% link https://dev.to/arantespp/mongodb-shell-commands-running-on-docker-101-1l73 %}

## On Scrubs and Robots

This is such a powerful career-change story, @winnekes. Thank you for sharing it with us on DEV!

{% link https://dev.to/winnekes/why-i-hung-up-my-stethoscope-and-became-a-web-developer-oa6 %}

## Be Genuine, Build Trust, Have Fun

Those are some pretty great Developer Relations tenets, @kimmaida. This post explains just how cross-functional DevRel is — and why understanding that matters! 

{% link https://dev.to/kimmaida/which-department-does-devrel-belong-in-3om %}

## Decoding cryptography

@0xjepsen has done a massive service in breaking down cryptography as it relates to distributed ledger tech. They also shared some seriously helpful resources if you're interested in this field (including respected open source cryptography libraries)!

{% link https://dev.to/0xjepsen/an-introduction-to-cryptography-in-distributed-ledger-technology-268l %}



_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Tuesday!_
C# For Beginners - Lesson 2: Comments
Tags: csharp, dotnet, beginners, programming
Published: 2021-07-13 15:13:52

> At the end of this lesson, you should be able to answer the following:
>
> * What are comments? Why should I use them?
> * How do I write comments in C\#?

---

Programs are written for computers, but sometimes we need to add more context to help other programmers read and understand our code. \(Sometimes that programmer is ourselves!\)

To do this, we can write comments in our program. Comments are lines of text that are ignored by C\# when the program is run.

Good code is usually self-explanatory, but comments are useful to explain **why** a program has been written a certain way.

To write a comment, type `//`, followed by the comment. Everything after the `//` is ignored until the next line.

```csharp
// My first program
Console.WriteLine("Hello, World!");
```

Run the code above after typing it inside the code box. `My first program` won't show up on the displayed output.

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

You can also write comments inline using `//`.

```csharp
// My first program
Console.WriteLine("Hello, World!"); // this prints out a message
```

Comments are also useful to take out bits of code you don't want to run. For example, if you're trying to find the cause of an error in your code \(also called _debugging_\), you can comment out the code that you want to make sure is not causing the error.

```csharp
Console.WriteLine("Yesterday it worked.");
Console.WriteLine("Today it is not working.");
// Console.WriteLine("This line will not print.");
Console.WriteLine("Coding is like that.");
```

Another way to write comments is the multi-line comment. As the name suggests, you can use it to write comments that span multiple lines.

The multi-line comment starts with `/*` and ends with `*/`. Everything between these two elements is ignored.

```csharp
Console.WriteLine("My favourite dinosaurs:");
Console.WriteLine("Triceratops");
Console.WriteLine("Velociraptor");
/*
Console.WriteLine("Mosasaurus");
Console.WriteLine("Dimetrodon");
Console.WriteLine("Pteranodon");
*/
Console.WriteLine("Apatosaurus");
Console.WriteLine("Tyrannosaurus Rex");
```

---

> **Challenge**
>
> Add some comments to your answers to the Lesson 1 challenges!
It's your birthday, now cut cake virtually !
Tags: webdev, productivity, showdev, opensource
Published: 2021-07-13 15:08:16

---
title: It's your birthday, now cut cake virtually !
published: true
description: 
tags: #webdev #productivity #showdev #opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6ipelxjqeiqlp1cz9wg.png
---

Here's a hack that me and my colleague have been working on.

[BirthdayCovid](https://birthdaycovid.com)

![Virtual Cake Cutting](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj2szfwe2c5pr5vk1wze.png)

Working remotely these days, we wanted to bring back that good old birthday environment during the pre-covid office days.

Having failed to find anything on the internet, we created this web project that creates that cake cutting experience **virtually**.

Birthday person now can share their screen and everyone in the meeting room can just clap ! :) 

And it's also [open sourced](https://github.com/briashta/birthday-celebrator)

*All ideas & contributions are welcome.*

Hope you like it !
Installing Erlang Graphical Drawer
Tags: elixir
Published: 2021-07-13 14:50:49

I was following an `identicon` generation tutorial using Elixir.

The project was a bit older and used `egd` as if it was available by default in the project.

{% github erlang/egd %}

I discovered `egd` is not part of the standard library anymore. One needs to install it separately in Elixir.

## Step 1: Refresh rebar

```shell
mix local.rebar --force
```

## Step 2: Add egd to the dependencies

```elixir
defp deps do
  [
    {:egd, github: "erlang/egd"}
    # ...
  ]
end
```

## Step 3: Install dependencies

```shell
mix deps.get
```

I hope that helps.
SDLC: WaterFall Model
Tags: beginners, waterfall, sdlc, devops
Published: 2021-07-13 14:46:29

The Waterfall Model was the first Process Model to be introduced. It was widely used as it was easy to understand & implement . 

WaterFall Model is also known as **Linear-Sequential Life Cycle Model** because work is done linearly - the next stage begins after completion of the previous stage . Output of the previous stage is the input of the next stage . 

The name **“WaterFall Model”**  is because the process looks like flowing steadily downwards - as shown below just like a waterfall .
![WaterFall Model diagram](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/or69elssvz9oewm97byd.jpg)

The Phases are:-
- **Requirement Analysis:** In this phase all the requirements about the project are gathered . For eg features in projects , etc . All these requirements are well documented in the SRS ( Software Requirement Specifications ) document.

- **System Design:** The SRS document is then used to design the system . Defining system requirements like hardware, modules (any),etc.

- **Implementation:** After the System design phase is completely over . Implementation phase starts . Here each unit is individually developed . This stage goes on until all the requirements in the SRS document are not developed . 

- **Testing & Integration:** Each individual unit is tested for potential bugs or errors . After testing is successful , individual units are integrated together.

- **Deployment:** Once the integration is done, the software is deployed to production servers.

_Note: Before deploying to production , the project is tested again (we are not going into much details)._

- **Maintenance:** Project is continuously being monitored for any user inconvenience or bugs . Time to time new patches are released as a result of any bug fixes.

**Projects best fit for WaterFall Model:**
- Requirements are clear
- Technology used is not dynamic
- Project is short

**Advantages of WaterFall Model:**
- Model is simple & easy to understand
- Clear defined milestones & deadlines
- Properly documented , hence team is focused towards one common goal
- Clearly defined stages
- Easy to arrange tasks

**Disadvantages of WaterFall Model:**
- No working software is made till end of life cycle
- Client feedback is not taken at any stage.
- Not good fit for changing project requirements
- Not suitable for OOPs & long-on going projects
- Difficult to track progress within a stage
- Includes high amount of risk & uncertainty

So far, we have discussed the WaterFall model, it’s use cases, advantages & disadvantages.

Feel free to comment if you have any questions. All comments are greatly appreciated. If you like the blog , don’t forget to like it & share with your friends/colleagues.

To see my projects or to get in personal touch , follow me on:
**Linkedin:** https://www.linkedin.com/in/rishabh-sde/
**GitHub:** https://github.com/Rishabhraghwendra18

Thanks for reading,
Written with ❤️ & passion 🔥 by Rishabh Raghwendra