teleren/devto huggingface dataset:
How to get all the images from HTML documents using JavaScript?
Tags: javascript
Published: 2020-08-27 00:00:00

---
  title: How to get all the images from HTML documents using JavaScript?
  published: true
  tags: JavaScript
  date: Thu Aug 27 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/get-all-images-from-document-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-d0665481f3d3b2d276991a9b90213127.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/get-all-images-from-document-javascript)
  
To get all the images present in the document or HTML, you can use the read-only property called `images` in the `document` object.

Let's say you have a HTML document with 3 image tags like this,

```html
<body>
  <img src="https://via.placeholder.com/150" alt="Placeholder image" />
  <img src="https://via.placeholder.com/200" alt="Placeholder image" />
  <img src="https://via.placeholder.com/250" alt="Placeholder image" />
</body>
```

Now let's get all the images in the HTML using the `document.images` property in JavaScript.

```javascript
// get all the images from HTML document
const images = document.images;
```

The references to the images are returned as an `HTMLcollection`.

```javascript
// get all the images from HTML document
const images = document.images;

console.dir(images);
```

To see working example see [JSBin](https://jsbin.com/tuzojuqisi/edit?html,js,console,output).

### Feel free to share if you found this useful 😃.

---
Shuffle the Array (Javascript)
Tags: javascript, algorithms
Published: 2020-08-26 23:56:07

Algorithms are something I struggle with. A few of the interviews or screening processes for companies I've done recently have involved algorithms. Being eliminated before even getting to speak to someone is very discouraging. In response, I'm being intentional about solving algorithms recently. This time I'll be tackling [this Leetcode problem](https://leetcode.com/contest/weekly-contest-192/problems/shuffle-the-array/).

___

![Snoopy shuffling](https://media.giphy.com/media/l0MYv61yrzZu6roFG/source.gif)

> Given the array nums consisting of 2n elements in the form
> [x1,x2,...,xn,y1,y2,...,yn].
> Return the array in the form [x1,y1,x2,y2,...,xn,yn].

My job is to shuffle the elements of the array together like a deck of cards. This problem is simple with Javascripts `.push()` method. 

```javascript
var shuffle = function(nums, n) {
    let arr = [];
    for ( let i=0; i<n; i++ ) {
        arr.push(nums[i], nums[i+n])
    };
    return arr;
};
```

- Declare an empty array `arr` which will be my return value.
- Begin a `for` loop that will run until the index is greater than `n`.
- In each iteration: 
 1. `push()` the current index `nums[i]` and `nums[i + n]` into the return array `arr`.

After iterating `n` times return our new array. 

___

The difficulty was increased when I approached it without `push()`. I was having trouble keeping track of the indexes I need access to, so I wrote it out on a whiteboard. After writing it out I was able to find the pattern. Stepping through every iteration really cleared up what counters I needed. 

![Whiteboard of my solution](https://dev-to-uploads.s3.amazonaws.com/i/1rc9bzvgsicwktr4l1fz.JPG)

I ended up with four variables `i, y, x, b`. `i` pointed to the first index for the return array of my code block. `y` pointed to the second index for the return array. **These two variables were incremented by 2 each iteration.** `x` pointed to the first index for the input array. `b` pointed to the second index for the input array. **These two variables were incremented by 1 each iteration.** To catch the pattern I really needed to be thorough. After that I was quickly able to deduce what I needed to do. This was my final solution:

```javascript
var shuffle = function(nums, n) {
    const arr = [];
    let i = 0
    for ( let x=0; x < n; x++) {
        arr[i] = nums[x];
        arr[i+1] = nums[x+n];
        i+=2;
    };
    return arr;
};
```

- Declare an empty array `arr` which will be my return value.
- Declare a counter `i` outside of the loop that I'll increment differently.
- Begin a `for` loop that will run until the index `x` is greater than `n`.
- In each iteration:
 1. Set `arr[i]` to `nums[x]`
 2. Set `arr[i+1]` to `nums[x+n]`
 3. Increment `i` by 2
 4. Check if `x < n`
- Return the array.
Not sure what to do with my cs degree
Published: 2020-08-26 23:17:53

Im currently starting the 7th semester of my cs degree,so still an undergrad. I'm very ashamed of saying this out loud but i really really suck at coding, even worse i doñt even like it. I stumbled in to this field as a result of a hasty decision. Im not sure what do to with my life, i learned the fundamentals of web development in-making a fully mern stack website-as a part of this course. It does seem challenging but i know i can do this if i want to, the problem is that i dont like this field. I guess i need some advice. I've spent way too much time to quit now i suppose. Any input regarding the future i can choose in this field that does not involve too much development or coding would be very helpful.
Day 204: Blow My Mind
Tags: hiphop, code, coding, lifelongdev
Published: 2020-08-26 23:12:58

_liner notes_:
- Professional : Attended a couple of talk prep sessions. Got to see someone practice a keynote talk for an upcoming virtual conference. Cool to see how they prepare. Definitely took some notes. Had a meeting with a team member. Found out that you don't need to have been born in Canada to take part in the health system, you just have to be a resident. Finding that out was enough to blow my mind! haha I'll definitely be looking into how to make that happen and buy some land.

- Personal : Got the scenes changing on the stream! Things look weird and some things aren't showing up, but it's changing! haha Also put together what I'll need to be able to put solar panels on top of my van. This way, my battery can continuously charge wherever I am not have to go to the park to use my briefcase solar panels.

![Islands in Lofoten Islands, Norway with large mountains in the background](https://dev-to-uploads.s3.amazonaws.com/i/rcxders5kbyixt7b36uh.jpg)

After work, made my way to my old house because I've got packages coming today and tomorrow. Had the most difficult time trying to upload pictures to dev.to for this post. Not sure if it's because I don't really get a strong signal out here, even with the Google Pixel 4a and Google Fi. It really is the sticks out here. haha It's a horrible time to not have a strong signal because I am trying to watch 2 virtual meetups. haha After that, I just realized that it's Wednesday and I haven't submitted the recording of the show to submit to the radio station. I'll work on that and then back to my side project.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube SjK5AF_r77g %}
Devlog #01
Published: 2020-08-26 23:09:23

# 27.08.2020

After bootstrapping my new application with my personal example NextJs application, I prepared the phrasing of test cases that should be passed to match the acceptance criteria of the first user story.

{% github https://github.com/martinemmert/endless-document/issues/2 %}

![Screenshot of empty test descriptions](https://dev-to-uploads.s3.amazonaws.com/i/1c780rb7dop8zkjz26vj.png)

---

After that, I added some actual tests and wrote the code needed to pass them.

![Screenshot of test cases that describe what my program should do if a button with the text Add is clicked](https://dev-to-uploads.s3.amazonaws.com/i/m6c1l7nn27q7swooajb0.png)

![Screenshot of code that passes the updated test cases](https://dev-to-uploads.s3.amazonaws.com/i/cpq5ud2kum5umx478apt.png)

![Screenshot of Terminal with green tests](https://dev-to-uploads.s3.amazonaws.com/i/a1sy5p49jbip97wxhkny.png)

👍

---

Finally, I updated the first test case with my expectations of what should happen if the 'Add' button is clicked twice. 

![Screenshot of test cases that describe what my program should do if a button with the text Add is clicked twice](https://dev-to-uploads.s3.amazonaws.com/i/6qbl2uz6w226yeihtbge.png)

*I really like writing tests with the `@testing-library`. It gives the reader a clear picture of what to expect without going into the implementation details.*

The implementation will be part of the next update.

---

<span>Cover Photo by <a href="https://unsplash.com/@lunarts?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Volodymyr Hryshchenko</a> on <a href="https://unsplash.com/collections/465326/workflow?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></span>
Getting into OpenSource
Tags: discuss, opensource, showdev, reactnative
Published: 2020-08-26 23:03:25

Hello everyone, I recently published my first ever open-source library. It's a react-native library for payment collection through https://paystack.com

You can check it out https://github.com/moonsat/React-Native-Paystack

Getting into open-source is fun and exciting, but not as easy as it seems.

As a software developer that has been coding for over 5 years, I can tell you that I have been thinking of working on an open-source library for a very long time but just couldn't find the right time to do that. Procrastination and a little imposter syndrome can turn days to months. 


> The right way to do anything new is to just do it.

Working on open-source is exciting and can help you learn more about a certain technology, connect with other developers, and even help you get a job.

What's one open-source idea you have been thinking of working on and what are your overall thoughts on open-source?
Chroming Incognito
Tags: chrome, incognito
Published: 2020-08-26 22:58:58

The subject has been brought up frequently from time to time, but I would like to ask "Do we really browse incognito?"

I mean, there are lots of warning guides teaching people about the Incognito mode and how to achieve it across several browsers, but is it really incognito? How far incognito does it go?

The other day I was trying to _Incognito_ some browsing session due to my musical guilty pleasures (and not wanting to get recommendations based on those) when I thought:
Hey, How much _Incognito_ is this, if:
* It knows some of my history ?
* It still shares the same data path as my regular mode browser ?
* I open a second _Incognito_ and it has my sessions from the first one ?

Ok, maybe _Incognito_ isn't something we can fully achieve, there will be always some loophole but at least I wasn't going down that easily.

Just added this script to one of my path folders, and some of those thoughts just got some answers:

```
 #!/bin/bash

google-chrome --incognito --user-data-dir=$(mktemp -d /tmp/x.XXXXXXX) 2>/dev/null &
```

> ( and giving it execution permission of course )

It isn't perfect.
Along the day, my /tmp folder gets filled with these chrome data dirs, but it all goes away eventually (automatically with a reboot/power off or manually by simply removing them). Or I could just not run it in background and remove the folder after that. There's always room for improvement somewhere.

Now, this doesn't hold any guarantee that at some point, things stop being _Incognito_. But at least from what I've seen, it just creates another local degree of separation.

(I've only tested this with Chrome. I'm sure it must work with other browsers also)

Or you could just try to run the browser inside a container!!!
Where to Start (AEM 6.5 Upgrade)
Tags: aem, adobe, upgrade
Published: 2020-08-26 22:24:54

Now while looking back to the process I followed for the upgrade, I can say that the first thing to do is to identify the approach to follow. Plain and simple, there are two approaches. In-place upgrade, fresh instance upgrade. There are many posts that talk about the advantages and disadvantages of each approach (_I won't go into those details here_). Please read about it and take an educated decision on which one to follow based on your project.

When I was going to make my decision, an architect told me that it depends on the repository, code, integrations, time. A lot of times, doing a small POC of the approach that will be taken is the best way to identify which one is the right one for your solution.

This is how I ended up making the decision to go with an **In-Place upgrade**, it suited the solution needs plus it is the recommended approach by Adobe.

Once I had the approach, I had the 6.5 jar file/license, I was ready to build the team to perform it.
Upgrades take time, although it is not at all a project where you can put several engineers to make it go faster, upgrades are 1-2 men job at most.

Now that we have identified the approach, that we have the files ready for us, and that we have the team that will do it, is time for the planning around it.



_[Next Post - Process Breakdown] (https://dev.to/caraujo/process-breakdown-aem-6-5-upgrade-356n)_
_[Parent Post] (https://dev.to/caraujo/upgrading-aem-to-6-5-2i58)_
Upgrading AEM to 6.5
Tags: aem, adobe, upgrade
Published: 2020-08-26 22:24:25

Recently I was involved in a project to upgrade AEM from version 6.2 to 6.5.

As you can imagine there were several things to be considered for the upgrade. AEM has updated a lot of their features and libraries since 6.2, OAK repository changes, a bunch of /etc functionality relocations (_blueprints, rolloutconfigs, contexthub, segments, tags, designs, among others_).

On this series of posts, I want to describe the steps I followed to perform the In-Place upgrade. 

The first thing that I would like to say is: **this is not a recipe**, this is just information on the approach I took.
>First takeaway: if you are in a similar upgrade situation, these posts might help you identify the approach that you could take to perform yours. I read a bunch of documentation, posts, and information, in my case I used different ideas from different sources to accomplish the goal.

###List of related posts: (Updated on August 28, 2020)###

* [Where to Start (AEM 6.5 Upgrade)?] (https://dev.to/caraujo/where-to-start-aem-6-5-upgrade-dpk)
* [Process Breakdown (AEM 6.5 Upgrade)] (https://dev.to/caraujo/process-breakdown-aem-6-5-upgrade-356n)
* [Development & QA (AEM 6.5 Upgrade)] (https://dev.to/caraujo/dev-qa-aem-6-5-upgrade-5d7n)
* Pre-upgrade Maintenance (Post in progress)
* Upgrade Procedure (Post in progress)
* Post-upgrade Checks (Post in progress)
Generate TypeScript types from Swagger (OpenAPI 3)
Tags: typescript, javascript, swagger, react
Published: 2020-08-26 22:08:00

Hi! I'd like to share some code that helped me a lot to work with an API that had been changed often.

## Idea

The idea is to generate TypeScript types from Swagger's definition. I found an awesome npm library called [@codegena/oapi3ts-cli](https://www.npmjs.com/package/@codegena/oapi3ts-cli). To use this you need to store JSON file with API schema locally.

Let's move to code...

## Install dependencies

I used `axios` to fetch data. You can use anything you want.

```shell=
npm i -D @codegena/oapi3ts-cli axios
```

## Create folders and files that we need

Now let's create the `scripts/` folder in the root of your project and add two files (`fetch-schema.js` and `schema-codegen.js`) inside of the created folder. Also, we need to create `src/typings/` folder where we're gonna save our types and API schema.

```javascript=
// scripts/schema-codegen.js

const cliLib = require('@codegena/oapi3ts-cli');
const cliApp = new cliLib.CliApplication();

cliApp.cliConfig.typingsDirectory = '';
cliApp.createTypings();
```


```javascript=
// scripts/fetch-schema.js

const axios = require('axios');
const https = require('https');
const fs = require('fs');
const path = require('path');

const instance = axios.create({
  httpsAgent: new https.Agent({
    rejectUnauthorized: false,
  }),
});


/* The code below will create operation names.
Instead of `/api/User/GetList` you'll get `UserGetList` type
that you can use anywhere */

function addOperationIdsToSchema(schema) {
  const data = schema;
   
  Object.keys(data.paths).forEach((endpointPath) => {
    const operations = Object.keys(data.paths[endpointPath]);

    operations.forEach((operation) => {
      const oprationName = endpointPath.replace('/api/', '').replace(/\//g, '');
      data.paths[endpointPath][operation].operationId = oprationName;
    });
  });

  return data;
}

instance
  .get('https://YOUR_ENDPOINT_TO_SWAGGER/swagger.json')
  .then((response) => {
    const updatedSchema = addOperationIdsToSchema(response.data);
    fs.writeFileSync(
      path.resolve(__dirname, '../src/typings/api-schema.json'),
      JSON.stringify(updatedSchema, null, 2),
    );

    console.log('==> Schema fetched successfully...');
  })
  .catch(console.error);
```

## Update package.json

And one of the last things you need to do is add to `package.json` these lines:

```json=
{
    ...
    "scripts": {
        ...
        "schema:fetch": "node ./scripts/fetch-schema.js",
        "schema:generate": "node ./scripts/schema-codegen.js --srcPath ./src/typings/api-schema.json --destPath ./src/typings/api --separatedFiles false",
        "schema:codegen": "npm run schema:fetch && npm run schema:generate:api"
    }
}
```

## Now you can generate your API schema with this command:

```shell=
npm run schema:codegen
```

This command generated `src/typings/api/` folder with TypeScript definitions.

If you got into some problems, please, let me know to be able to update the article for future readers.
The best books on web design and building great websites... might not include any programming syntax
Tags: webdev, html, css, javascript
Published: 2020-08-26 21:43:13

We really like:

* [Don't Make Me Think](http://sensible.com)
* [The Elements of User Experience](http://www.jjg.net/elements/)
* [Letting Go of the Words](https://redish.net/books/letting-go-of-the-words/)
* [Rocket Surgery Made Easy](http://sensible.com)
- and then...
* [Exercises for programmers](https://pragprog.com/titles/bhwb/exercises-for-programmers/) - when it's time to learn to write code.

Here's a short video about the thought process behind choosing these books.

{% youtube bnbS1enub2Q %}
Then you can use the MDN docs
What I am looking forward to in Python 3.9
Tags: python
Published: 2020-08-26 21:39:27

* Strings get removeprefix() and removesuffix()
* New ways to merge or update dicts with the '|' (merge) and '|=' (update) operators

Ambivalent on
-------------
* I use type hinting a lot.  So I have to import typing.List in order to do types like List[str].  3.9 will let you use the built in
so the above will look like list[str];
Rust Munich Meetup #3
Tags: rust, meetup, talk, programming
Published: 2020-08-26 21:13:38

---
title: Rust Munich Meetup #3
published: true
description: In this issue of the meetup you learn about steganography for binaries and the image crate
tags: #rust #meetup #talk #programming
cover_image: https://secure.meetupstatic.com/photos/event/9/f/4/600_486662548.jpeg
---

Yesterday was the third online meetup of the rust munich group, just in case you missed it, no worries it's available on youtube. I recommend giving it a watch.

Things you can learn / expect

- tons of details about binary formats
- how steganography (hiding data) in binaries works
- history of the image crate
- tons of design details in the image crate to coop with all the different formats and platform differences

There are also some side topics to learn about
- importance of code formatting, especially in OSS and to get it right as early as possible
- the super powers of fuzzing

Thanks to our host [Bernhard](https://twitter.com/drahnr) and all the speakers for their amazing talks.

You can now also [follow us on twitter](https://twitter.com/RustMunich) to not miss the next one.
A Quick Guide on Missing Data Imputation Techniques in Python(2020)
Tags: machinelearning, datascience, python, dataimputation
Published: 2020-08-26 20:30:38

##Most machine learning algorithms expect complete and clean noise-free datasets, unfortunately, real-world datasets are messy and have multiples missing cells, in such cases handling missing data becomes quite complex.

##Therefore in the below article, I have discussed some of the most effective and indeed easy-to-use data imputation techniques which can be used to deal with missing data.

#[A Quick Guide on Missing Data Imputation Techniques in Python(2020)](https://medium.com/@waliamrinal/a-quick-guide-on-missing-data-imputation-techniques-in-python-2020-5410f3df1c1e)

#If you enjoyed reading this article, I am sure that we share similar interests and are/will be in similar industries. So let’s connect via [LinkedIn](https://www.linkedin.com/in/mrinal-walia-b0981b158/) and [Github](https://github.com/abhiwalia15). 

##Please do not hesitate to send a contact request!
So habe ich meinen Lead-Magnet erstellt
Tags: onlinemarketing, design, leadmagnet
Published: 2020-08-27 12:55:26

---
title: So habe ich meinen Lead-Magnet erstellt
published: true
date: 2020-08-26 19:57:17 UTC
tags: OnlineMarketing,design,leadmagnet
canonical_url: https://j0e.org/lead-magnet-erstellen/
---

![So habe ich meinen Lead-Magnet erstellt](https://j0e.org/wp-content/uploads/2020/08/lead-magnet-erstellt.png)

Den ersten Lead-Magnet zu erstellen, kann eine einschüchternde Aufgabe sein. In diesem Artikel zeige ich …

[So habe ich meinen Lead-Magnet erstellt Weiter Lesen »](https://j0e.org/lead-magnet-erstellen/)
What’s the best way to learn Java? React helped me learn JavaScript because it added a “structure” in a way.
Tags: java, javascript, swift, jetbrains
Published: 2020-08-26 19:56:34

Compared to Swift, how is Java? Is it like Python at all? 
(I might be thinking of Xcode as well) 
I like the visual of how Xcode uses Swift.... is Java like that? I like OOP.
Styling is kinda up in the air, so I want to narrow down what I’m doing. 
Do you get to “see” what your coding with Java, or is it mainly not seen? 

It took a while to grasp JavaScript. But React gave me a better visual of it.
Your First Flutter App - via CodePen!
Tags: flutter, codepen
Published: 2020-08-26 19:51:52

You will need a CodePen account.

{% codepen https://codepen.io/shalimkhan/pen/OJNbNWN %}

# **Log in to your CodePen account**

  - CodePen can be found at [codepen.io](http://codepen.io)
  - Basic accounts are free at the time of writing


# **Create a new Flutter app**

  - Select "New Flutter Pen" in the CodePen sidebar
      - Find the "Create" menu in the sidebar
      - Click the arrow next to the word "Pen"
      - Select "Flutter Pen" from the menu that appears

# **Remove the debug banner from the corner**

  - Change the **MaterialApp** widget so it looks like this:

  ```dart
  MaterialApp(
        home: MyWidget(),
        debugShowCheckedModeBanner: false,
      ),
  ```


# **Change the default text to something more interesting**

  - Change the **MyWidget** widget to look like this:

  ```dart
  class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              color: Colors.pink.shade600,
              fontSize: 50,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      );
    }
  }
  ```

# **Edit the text attributes to see what happens**
  - Try changing the font size to 25
  - or change the colour to blue
  - or change the font weight to normal