teleren/devto huggingface dataset:
Get and Save Website Images with Puppeteer
Tags: node, tutorial
Published: 2021-01-03 18:05:51

At [Scarce City](https://scarce.city), we sell a t-shirt whose main image is the piece of graffiti displayed at [Satoshi's Place](https://satoshis.place/), an internet graffiti wall powered by Bitcoin Lightning, at the time of purchase. That means that we need to programmatically grab and save the image that is currently on the graffiti wall at that point in time. Since Scarce City runs on node, I chose puppeteer for this job.

With puppeteer, I was able to:
1. Open a headless browser
2. Go to a webpage (in this case Satoshi's Place)
3. Intercept the responses to the requests made by the browser when visiting Satoshi's Place
4. Save the image response with the correct name

At Scarce City, we save the image to [Google Cloud Storage](https://cloud.google.com/storage) but, for this code snippet, we'll save it to the local disk (and tackle the Google Cloud Storage part in another blog post).

```javascript
import fs from 'fs';
import util from 'util';
// don't forget to npm install this
import puppeteer from 'puppeteer';

// fs.writeFile expects a callback
// I've forgotten the trauma of callbacks and choose to use promises
// util.promisify is a nifty library that "promisifies" old Node functions
const save = util.promisify(fs.writeFile);

async function main() {
  // some standard boiler plate to open a new browser and a page
  const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // intercept responses of the requests made by this page
  page.on('response', async (response) => {
    // if a response is an image whose url has `data:image`
    if (response.request().resourceType() === 'image' && response.url().includes('data:image')) {
      const data = await response.buffer();
      // save the raw data to a local file
      await save('something.bmp', data);
    }
  });

  // go to Satoshi's place and let the event handler above work its magic
  await page.goto('https://satoshis.place', { waitUntil: 'networkidle0' });
  await browser.close();
}

main();
```

Try this code in your local environment. If you get stuck, feel free to give me a shout on [Twitter](https://twitter.com/AryanJabbari). Good luck!
9 Projects Ideas for Beginner JavaScript Developers
Tags: javascript, codenewbie
Published: 2021-01-03 17:53:28

When learning a new language it is important to apply the knowledge. Sometimes you are stuck not knowing how to apply the new found knowledge. In this article I will suggest you 9 ideas on beginner level for you to implement in JavaScript. The skill you will train is not only JavaScript but also HTML and CSS.

At the end of each idea I have also added an “advance” note that takes things to a more advance level if any of you feel that the idea is a little bit too easy. Hope you have fun implementing them. :)

https://medium.com/javascript-in-plain-english/9-project-ideas-for-beginners-and-intermediate-javascript-developers-a4afe88514d6
Crack The Coding Interview With Me
Published: 2021-01-03 17:52:39

## 🎃 About me
> I'm a recent graduate in Software Engineering from Israel.
> Looking for my first Junior dev role to start my high-tech career.
> [LinkedIn](https://www.linkedin.com/in/olga-lapovsky/)

## 👩‍💻 Who this blog posts for?
Those who are in the process of finding a job and repeating study materials.

## 🎯 The Plan
In the following weeks I'll share summary's and code implantation for DSA (Data Structures & Algorithms),Interview Q&A and more relevant subjects for technical interview, I'll share the code in JavaScript.

### 💾 This list of subjects I'll blog post (will be updated)

Data Structures| Algorithms | Concepts
----|------------ |----------------------
Linked Lists | Breadth-First Search |Bit manipulation
Trees,Tries & Graphs | [Depth-First Search](https://dev.to/ifelseolga/crack-the-coding-interview-with-me-dfs-229l) | Memory (Stack Vs. Heap)
Stacks & Queues | [Binary Search](https://dev.to/ifelseolga/crack-the-coding-interview-with-me-binary-search-29ei) | Recursion
Heaps | [Merge Sort](https://dev.to/ifelseolga/crack-the-coding-interview-with-me-merge-sort-1fp6) |Dynamic Programming
Vectors / ArrayLists | [Quick Sort](https://dev.to/ifelseolga/crack-the-coding-interview-with-me-quick-sort-1p18) | Big O Time & Space
Hash Tables| |

## See you in the coming weeks...👋
DEV iOS can't open links from other apps.
Tags: meta, help
Published: 2021-01-03 17:51:18

Whenever I click on the DEV article links from anywhere in browser or email newsletters, it tries to open in DEV iOS app. But instead of opening the article it always opens the home page.

Can someone please tell me if this is a bug? How do I disable the DEV app to open article links. It's very annoying I have to copy the link and then open the link in a browser, even then it asks me to open in Dev which I have to cancel because it won't work.
Story about an inspiring 3 days - Clone of Sparkpeople.com
Tags: html, css, javascript, webdev
Published: 2021-01-03 17:49:54



Hey there! My fellow Techie's✌, I'm Manish Raghavan, a passionate full-Stack web developer who loves to share a story about how I made a website clone in 3 days for [Masai School](https://www.masaischool.com/)👈 project week with my peers Ranjith and Rabia.

### For the next few minutes, I will walk you through the clone I have developed with my team


![original website (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609671755789/ZPFF0Zwfz.png)


>  [Sparkpeople.com](https://www.sparkpeople.com/myspark/start-now-sp5.asp) offers nutrition advice, health-and-fitness tools, a highly engaged and supportive community. It also has some pages for tracking the food calories we eat and the weight we need to reduce. In simple words, it's a daily tracker for our personal use.

## Problem Statement✍
To develop a pixel-perfect clone of [Sparkpeople.com](https://www.sparkpeople.com/myspark/start-now-sp5.asp) 

# Tech Stack

1. Html       ✔

2. CSS        ✔

3. JavaScript ✔

Cool enough to develop and UI of the website.


# Coding 👨‍💻
 The file tree consists of common Frontend components like index.html, style.css, and index.js
```
root/
├── index.html
├── style.css
└── index.js
``` 

# Elucidation 💻

As a first step, I have visualized the website assigned to my team in which we have split the works between us. As follows are the functionalities used in the code.


1. ** LocalStorage** - 
As the website uses lot of user date we had to do with backend. As for now we was not thought the backend We planned to use the LocalStorage to store the data and retrieve the data from the local storage.

2. **Use of value** - 
We also needed so many data that user to enter so that it will calculate and give the user the required output such as bmi, daily food calories the user take.
So we made many input fields which stores in local storage and from there we are getting the data and giving the output.

3. **Spin Wheel functionalities** - One of the page required the spin wheel, for that I have used the  chart functions 

4. We also used some of the css properties like hover, model block, etc..,to make the static page look good.

# Snapshots of my art of code 🎞

![main page (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609679469936/aiFv_oIKF.png)

![my weight (2).png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609679485245/asxKdPTt0.png)

![track food.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1609679521813/C5g-XtS_-.png)

# Wrapping Up

Hope you enjoyed this article. As an aspiring developer I have learned and enjoyed on the process of making the website. I hope so will continue to post more blog. 🙂
Conociendo GraphQL
Tags: graphql, webdev, discuss, beginners
Published: 2021-01-03 17:44:38

En los últimos años se ha hecho popular una nueva forma de consumir información de un backend, sí, hablamos de GraphQl. Pero, ¿qué es exactamente?

GraphQl es un lenguaje de consultas que permite manipular información de forma rápida y mucho más precisa que una Rest API convencional.

Tiene 4 terminologías principales los cuales son: Query, Mutation, Resolver y Schema. A continuación, explicaremos más a detalle cada una de estas.

###Query###

Para entender que significa Query en GraphQL podemos referirnos a un CRUD hecho con las ya conocidas rest API. El término Query hace referencia a la letra R el cual significa READ. Entonces, su uso principal es el de leer información.

```javascript
query {
   obtenerPersonas {
      nombre,
      edad,
      ocupación,
   }
}
```

###Mutation###
Los Mutation hacen referencia al resto de letras de un CRUD, es decir _CREATE, UPDATE and DELETE_. Son independientes del lenguaje, es así que da igual si el backend esta hecho en Node o en Java.

```javascript
mutation borrarPersona($id: ID) {
       borrarPersona($id: ID)
}
```

El resultado que observaríamos, considerando este ejemplo y considerando que la operación fue exitosa, sería el siguiente:

```javascript
{
   "data": {
     "borrarPersona": "Se eliminó el registro correctamente"
  }    
}
```

###Schema###

Describe el tipo de objeto, queries y datos de la aplicación. Utilizan un typing en el que defines si el campo es un String, Int o algún otro tipo de dato. 

```javascript
type Cliente {
   id: ID,
   nombre: String,
   apellido: String,
   email: Email,
}

type Email: {
   email: String,
}
```

###Resolvers###

Son funciones responsables de retornar los valores existentes en el Schema. Básicamente se encargan de consultar la base de datos y traer el resultado. Estos nombres deben ser iguales a los que se definan en el Schema. A continuación, un ejemplo de un resolver básico.

```javascript
obtenerClientes: async () => {
    const clientes = await Clientes.find({});
    return clientes;
}
```

Esta ha sido una breve introducción a GraphQL, con esto podríamos empezar a experimentar y crear nuestras primeras consultas. Todo depende de cuánto practiquemos :) .
I started my blog, and here is an overview from my my first post 🥳
Tags: webdev, 2020, review, programming
Published: 2021-01-03 17:40:14

Hi everybody, I've been a member here and now I'm publishing my first post. This community means a lot to me and I mentioned this in the first blog post I wrote.
I know this might be relatively late but I started the blog with a review of 2020. I would be happy if you could take a look and your feedback is welcome ❤️
https://www.azaytek.com/2021/01/azaytek-2020-review.html
Docker Compose - wordpress and docker [EN]
Tags: docker, wordpress, yaml, mariadb
Published: 2021-01-03 17:35:30

I came here to share while listening to my "sertanejo" a script for docker-compose that creates a container with Wordpress and MariaDb as a database for a project i'm doing on twitch which is to create some themes so that's it i hope it helps someone else and any question just comment and i will be happy to answer ✌️

```yaml
version: '3'

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: pass
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - wordpress:/var/www/html
    depends_on:
      - db

  db:
    image: mariadb:latest
    restart: always
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: user
      MYSQL_PASSWORD: pass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:
```
How to understand and align shapes in powerpoint
Published: 2021-01-03 17:34:38

<sub><span>Photo by <a href="https://unsplash.com/@eaterscollective">Eaters Collective</a> on <a href="https://unsplash.com/s/photos/stacked">Unsplash</a></span></sub>

The issue is simple.
I have a powerpoint whith shapes.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/p1sg0lkat0eno0edis76.png)

Using [Open Xml SDK](https://docs.microsoft.com/fr-fr/office/open-xml/open-xml-sdk), i need to analyze a powerpoint slide containing shapes, and align them in an json.

Each shape has an offset property which defines its position (from the top left corner), and an extent property which defines its size.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wd3zh7cuflyqt1y4xytr.png)


![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xwiqtb9egnmua01ke7vl.png)

We will use a column object to keep track of which shapes belongs to which column.

So, by just ordering shapes by their Offset.X property, we can sort the shapes on the X axis.
The first shape will be the current shape.
Then, using a loop, we can define if the next item is inside the current shape, if projected on X axis. If it's inside, it will be in the same column. If not, we can create a new column, and set the item as the current one.

In the example, A1 will be the current item. Then, A4 is the next one. 

> A1.Offset.X + A1.Extent.X > A4.Offset.X 

Then A1 and A4 belongs to the same column. Then, A2 is the next item. 

> A1.Offset.X + A1.Extent.X < A2.Offset.X

Thus, we create a new column, and A2 is the current item, etc ... .

At the end we should have ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i0vyfxeffx9966n7hbfz.png)


If we want to solve issues, when shapes are not here (for example, what if A4 does not  exist ?). We can fill the column with fake shapes, and remove them when adding a shape.

Hope this helps !
Docker Compose - wordpress e docker
Tags: docker, wordpress, yaml, mariadb
Published: 2021-01-03 17:31:21

Vim compartilhar enquanto ouço meu trapzin maroto um script para docker-compose que sobe um container com wordpress e mariadb como banco de dados para um projeto que estou fazendo na twitch que é criar alguns temas, então é isso espero que ajude outra pessoa e qualquer dúvida ou comentário só chamar ✌️

```yaml
version: '3'

services:
  wordpress:
    image: wordpress
    restart: always
    ports:
      - 8080:80
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: user
      WORDPRESS_DB_PASSWORD: pass
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - wordpress:/var/www/html
    depends_on:
      - db

  db:
    image: mariadb:latest
    restart: always
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: user
      MYSQL_PASSWORD: pass
      MYSQL_RANDOM_ROOT_PASSWORD: '1'
    volumes:
      - db:/var/lib/mysql

volumes:
  wordpress:
  db:
```
Levelling Up Vscode text editing shortcuts?
Tags: question, vscode
Published: 2021-01-03 17:19:16

# Summary

If you're an intermediate developer happy with basic Vscode functionality, where does one look for non-default keyboard shortcuts for text editing? Where should I look for inspiration?

# Background

Around twice a year I contemplate learning more text editing shortcuts. Usually, this is triggered by:

- People documenting their journey through various editors, such as [Tristan Hume](https://thume.ca/2017/03/04/my-text-editor-journey-vim-spacemacs-atom-and-sublime-text/).
- People I admire ([Gary Bernhardt](https://youtu.be/GrnBXhsr0ng), [Andrew Kelley](https://vimeo.com/andrewrk)) using alternative editors (Vim, Emacs, Spacemacs... etc.) effectively in demos
- New editors, [such as Onivim2](https://twitter.com/ifazk/status/1296622965438595078?s=20), promising the power of Vim with the usability of Vscode.

Currently, I'm happily using Visual Studio Code to develop Python and have no desire to switch to a terminal-based editor. I like:

- Pretty menus
- Being able to click on things
- Minimizing time spent configuring/tweaking

However, I'd like to upgrade my text-editing keyboard-shortcuts slightly to enable functionality like:

- Deleting the previous/next word
- Cut a whole function definition for pasting someplace else
- Other functions I haven't thought of?

I've looked into various Vscode plugins, such as Vscode Spacemacs, but they intimidate me with their breadth of functionality. I've also failed on three separate occasions to learn Vim, so I'm hesitant to enable Vim keybindings.
How to Make a Phone Call using SwiftUI
Tags: swift, swiftui, ios
Published: 2021-01-03 17:12:25

---
title: How to Make a Phone Call using SwiftUI
published: true
description: 
tags: #swift #swiftui #ios
//cover_image: https://direct_url_to_image.jpg
---
<!-- wp:paragraph -->
<p>Making a phone call from a SwiftUI app is easy and only takes a few lines of code to implement. All we need to do is setup a button that will open the phone app and make a phone call with a phone number we pass in. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's look at some code below to see what we need to implement this.</p>
<!-- /wp:paragraph -->

<!-- wp:code -->
<pre class="wp-block-code"><code>
struct ContentView: View {

    var phoneNumber = "718-555-5555"

    var body: some View {
        VStack {
            Button(action: {
                let phone = "tel://"
                let phoneNumberformatted = phone + phoneNumber
                guard let url = URL(string: phoneNumberformatted) else { return }
                UIApplication.shared.open(url)
               }) {
               Text(phoneNumber)
                .foregroundColor(.blue)
            }
        }
    }
}</code></pre>
<!-- /wp:code -->

<!-- wp:paragraph -->
<p>In the example above we first create a string variable with the phone number we would like to use. Next we create a button and within the action of our button we format the phone number to our URL. The "<strong>tel://</strong>" is the url needed to tell our device to open the phone app and make a call. (<em>We can use the same code above to open other apps on our device. For example if we wanted to open the mail app we just need to replace the url with <strong>messages://</strong> instead of <strong>tel://</strong></em>) </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next we have a <strong>guard let</strong> statement to check to see if we have a formatted phone number. Then we use <strong>UIApplication</strong> to open the phone app and make a call using the url with the phone number we passed in. Lastly we set our button label to show the phone number we want to call.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>(<em>Side note: We will need to run this on a device to test because the simulator can not make phone calls.</em>)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>That is all that we need to make a phone call from our SwiftUI app. Hope this helps you on your next SwiftUI project!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>☎️📱🤳Happy coding ☎️📱🤳</p>
<!-- /wp:paragraph -->
CasioPT-1.css
Tags: codepen
Published: 2021-01-03 17:08:54

<p>Vintage Casio PT-1 keyboard drawn entirely with HTML and CSS; using divs, gradients and box-shadows. </p>

<p>Tutorials on how to make drawings like this: 
<a href="https://fossheim.io/writing/posts/css-macintosh/" target="_blank">https://fossheim.io/writing/posts/css-macintosh/</a>
<a href="https://fossheim.io/writing/posts/css-polaroid-camera/" target="_blank">https://fossheim.io/writing/posts/css-polaroid-camera/</a></p>

<p>GitHub repo with my CSS drawings:
<a href="https://github.com/sarahfossheim/art.css" target="_blank">https://github.com/sarahfossheim/art.css</a></p>

<p>If you like my work: 
<a href="https://www.buymeacoffee.com/fossheim" target="_blank">https://www.buymeacoffee.com/fossheim</a>
<a href="https://www.patreon.com/fossheim" target="_blank">https://www.patreon.com/fossheim</a></p>

{% codepen https://codepen.io/fossheim/pen/VweaNYW %}
Hello, World. 
Tags: firstpost, helloworld
Published: 2021-01-03 17:05:52

Had two weeks off from work for the holidays.

I wanted to get more into tech blogging, and set out to build my own starter blog via Gatsby, deployed on Netlify. 

I hit a few quite a few bugs that, with some Googling, appear to be common issues out of the box with Gatsby/Netlify, and I found myself wondering, "Why am I trying to more or less reinvent the wheel, building my own blog, when other platforms are available. What am I trying to prove?"

I'm a husband and father of two. I have a full-time job, and other interests outside of coding. My point of having a tech blog is to document my side projects. I want to be able to easily post, and not worry about bugs in the blog itself.

And so here we are: My first tech blog post (beyond the few I did on Medium while in bootcamp, which I'm sure I'll recycle here at some point.)

Here's to getting started...
Flattening a Multidimensional array and Summing up a multidimensional array
Tags: javascript, programming
Published: 2021-01-03 17:01:04

I've encountered problems with multidimensional arrays and you need to use recursion to solve the problem. Here are two examples of such problems.

1. The first problem is summing the elements of the array, given a multidimensional array. For example, given
```
let arr = [1,[1,2,[3,4]]]
```
The sum would be 11. 
Here is my code using recursion to solve the problem:
```javascript
function sumArrays(arr) {
  let sum = 0;
  for (let i = 0; i < arr.length; i++) {
    if(Array.isArray(arr[i])){
      sum += sumArrays(arr[i]);
    } else {
      sum += arr[i];
    }
  }
  return sum;
}
```
First, instantiate a variable sum. Then loop through the array. Check whether arr[i] is an array using Array.isArray. If it is an array, call the function sumArrays on the element again and add the sum to the sum variable. If the element is not an array, simply add the element to the sum.
For example, the first element 1 is not an array so add 1 to sum, so sum is now 1. The second element [1,2,[3,4]] is an array, so call sumArrays on it. It will loop through the element and check each element in the array. 1, 2 are elements so add that to sum. [3,4] is array so loop through that again and add the elements to the sum. 

2. The second example is using recursion to flatten a multidimensional array. You want a one dimensional array of all the elements in the multidimensional array. For example given
```
[1, [1, 2, [3, 4]]]
```
you want
```
[1,1,2,3,4]
```
Here's my code:
```javascript
function flattenArray(arr) {
  return arr.reduce((acc, ele) => {
    return acc.concat(Array.isArray(ele) ? flattenArray(ele) : ele)
  }, [])
}
```
Here I'm using the reduce function to concat the elements of the array to the accumulator variable which starts as an empty array. In my reduce function, I concat the element to the accumlator array. I check whether the element is an array, if so, I call the function flattenArray on it recursively. If not, I just concat the element to the array. 

I hope this clears up any confusion regarding recursion in multidimensional arrays. Hope this helped.
Simple idea of html view engine
Tags: html
Published: 2021-01-03 16:58:06

### What is html view engine?
some code that can combine multiple `.html` files and produce single `.html` file.

Let's take example.
This is `index.html` file
```html
<html lang="en">
<head>
    <title>Hi hello</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    { navbar }
    { footer }
</body>
</html>
```
here `{ footer }` means `HTML-Engine` put the code from `footer.html` and after replace this all `{ something }`, engine merge all code in one file.

and this is the simple `navbar.html`
```html
<nav>
    <span class="logo" >
        Logo
    </span>
    <span >
        <span>Home</span>
        <span>Student</span>
        <span>Developer</span>
        <span>About</span>
    </span>
</nav>
```

and this is simple `footer.html`
```html
<footer >
    Made with Utsav Ladani
</footer>
```
After run my code you get this `main.html`
```html
<html lang="en">
<head>
    <title>Hi hello</title>
</head>
<body>
    <nav>
    <span class="logo" >
        Logo
    </span>
    <span >
        <span>Home</span>
        <span>Student</span>
        <span>Developer</span>
        <span>About</span>
    </span>
    </nav>
    <footer >
        Made with Utsav Ladani
    </footer>
</body>

</html>
```
I try to understand how html engine works, and make this simple html engine. I hope you also understand this idea.

Here is my github project link
{% github Utsav-Ladani/HTML-Engine %}