teleren/devto huggingface dataset:
Downloading remote images as a zip file using JSZip
Tags: javascript, jszip, filesaver
Published: 2019-12-15 10:54:09

---
title: Downloading remote images as a zip file using JSZip
published: true
description: 
tags: javascript, jszip, file-saver
---

Imagine this scenario where there is a gallery of images showing up on your website and you want the user to be able to select multiple images and download them as a zip file. How would you go about implementing it?

Firstly, we will have to fetch the images that are to be downloaded. We will be using browsers Fetch API to achieve that. Simple Enough?

```javascript
const imageUrl = 'https://images.unsplash.com/photo-1576328842079-95ef7deedc89?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80.jpg';

// Fetch the image and parse the response stream as a blob
const imageBlob = fetch(imageUrl).then(response => response.blob());

// create a new file from the blob object
const imageFile = new File([imageBlob], "filename.jpg");
```

Everything goes great until you stumble upon this CORS error.

![CORS error](https://thepracticaldev.s3.amazonaws.com/i/ut37h16miudl1j8ku5aj.png)

To solve this you need to change the s3 bucket CORS settings. Add this to the `CORS Configuration` file.

```xml
 <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
```

Alright! going back to creating the zip file. We are going to use a npm package called [JSZip](https://stuk.github.io/jszip/) which will be responsible for generating a zip, and another one called [file Saver](https://www.npmjs.com/package/file-saver/v/1.3.2) that will trigger the download file for us.

```javascript
import JSZip from "jszip";
import { saveAs } from 'file-saver';

/* Create a new instance of JSZip and a folder named 'collection' where*/
/* we will be adding all of our files*/
let zip = new JSZip();
let folder = zip.folder('collection');

/* Add the image to the folder */
folder.file(`${name}.jpg`, fileImg);

/* Generate a zip file asynchronously and trigger the download */
folder.generateAsync({ type: "blob" }).then(content => saveAs(content, "files"));

```

And we are done. If you wanted to add multiple images then you could loop over the urls, fetch the image add it to the folder and finally generate a zip file.
Day 8 Advent of Code
Tags: python, adventofcode
Published: 2019-12-15 10:33:48

# day 8

https://adventofcode.com/2019/day/8

```python
import pandas as pd
import numpy as np
import matplotlib.pyplot as plt


df = pd.read_csv("input.txt", header=None, names=["c"])
input_string = df["c"].values[0]

s = list(range(150, 15150, 150))


def get_num(x, n=0):
    return list(x).count(str(n))


def make_layer_array(x: str) -> np.array:
    a = np.array([int(x) for x in list(x)])
    return a.reshape(6, 25)


layers = list()
layer_num = 0
num_zeros = 100000000
i_p = 0
best_layer = 0
best_string = ""


for i in s:
    if layer_num == 0:
        A = make_layer_array(input_string[i_p:i])[..., np.newaxis]
    else:
        A = np.dstack((A, make_layer_array(input_string[i_p:i])[..., np.newaxis]))
    layer_num += 1

    if get_num(input_string[i_p:i]) < num_zeros:
        num_zeros = get_num(input_string[i_p:i])
        best_layer = layer_num
        best_string = input_string[i_p:i]
    i_p = i

result = get_num(best_string, n=1) * get_num(best_string, n=2)

print("part 1:", result)
# 0 is black, 1 is white, and 2 is transparent.
# 25 pixels wide and 6 pixels tall

R = np.zeros((6, 25))

for x in range(A.shape[0]):
    for y in range(A.shape[1]):
        for k in A[x, y, :]:
            if k != 2:
                R[x, y] = k
                break

plt.matshow(R)
plt.savefig("result.png", bbox_inches="tight")
plt.close()
```
![](https://thepracticaldev.s3.amazonaws.com/i/7lpqi7murhk372epujln.png)
Implemented Portals on my Portfolio site to blogs site.
Tags: portals, chrome, webdev, javascript
Published: 2019-12-15 10:33:06

𝙋𝙤𝙧𝙩𝙖𝙡𝙨: provides a new way of loading and navigating through web pages. see demo.

Portals offer the best of both worlds: the low complexity of an MPA with the seamless transitions of a SPA. Think of them like an <iframe> in that they allow for embedding, but unlike an <iframe>, they also come with features to navigate to their content.

Live Demo: https://mohammad-quanit.github.io/
Resources: https://web.dev/hands-on-portals/

Please give me more suggestions, how can I improve this more.
URL redirects with AWS S3 and Cloudfront
Tags: serverless, aws, cloudfront, s3
Published: 2019-12-15 08:57:20

---
title: URL redirects with AWS S3 and Cloudfront
published: true
description: 
cover_image: https://imewish.github.io/assets/images/301.png
tags: serverless, AWS, CloudFront, s3
---

Hosting a static website with S3 is awesome! It is Faster, Cheaper, Zero maintenance.

In this article, we will see how to do URL redirects on a website hosted with AWS S3 and Cloudfront.

There was a scenario which I was faced once in my company, One of our websites had deleted some old content and replaced it with new content and URL. And when people who google search for that particular content they get the old URL which doest exists.

To fix this issue the approach we had was to do add a temporary redirect for that old URL to the new one until it gets updated at google search.

**The Fix**

AWS S3 Static hosting provides an option to add redirection rules to the website hosted in a particular bucket. [https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html](https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html "https://docs.aws.amazon.com/AmazonS3/latest/dev/how-to-page-redirect.html")

![](https://imewish.github.io/assets/images/staticwebsitehosting30.png)

In this particular case, the URL's we are going to use will be these,

**_https://example.com/content/old-content_**

and we will be redirecting this to

**_https://example.com/content/new/content_**

To add the rules,

1. Click on your bucket
2. Go to properties and click on static website hosting
3. Under the redirection rules filed, put the following code

Redirect Rule,

    <RoutingRules>
      <RoutingRule>
        <Condition>
          <KeyPrefixEquals>content/old-content/</KeyPrefixEquals>
        </Condition>
        <Redirect>
          <HostName>example.com</HostName>
    <ReplaceKeyPrefixWith>content/new/content</ReplaceKeyPrefixWith>
        </Redirect>
      </RoutingRule>
    </RoutingRules>

Please note, The **HostName(**Line 7**)** part is important if your S3 website is configured with **Cloudfront.** Else during redirect, the domain name will be replaced with the S3 website endpoint.

That's it. Now any requests coming to the old URL will be automatically redirected to the new one
Simplify Your Web Development Stack [For Windows Users]
Tags: webdev, php, laravel, showdev
Published: 2019-12-15 08:54:31

Hi everyone! Maybe you already know about XAMPP, WAMP Server, or even Laragon. They are kits of web servers such as Apache HTTPd, MySQL / MariaDB, and PHP that run on Windows. Some people who use MacOS might use Laravel Valet or MAMP, but for some Laravel developers they prefer using Valet because it's easier to use. 

Today, I want to introduce to you that I created another alternative web development stack, it's called [Varlet](https://varlet.dev) and runs in a Windows environment. The basic idea is to combine easily replaced PHP versions such as Laragon, and CLI commands like Laravel Valet.

You can swap PHP versions very easily. Varlet come with two application: graphical user interface used for configure Varlet and managing the services, and commandline app for creating virtualhost like Laravel Valet.

## Creating Virtualhost

You can create or linking your project in any directory. Yo create virtualhost, in CMD or Terminal:

```bat
> cd D:\some\directory\of\your\project

> varlet link
```

Also, you can specify a domain name:

```bat
> varlet link -d myproject.test
```

Then, you can open your site with or without `https`, because Varlet will automatically generate SSL Certificate for your virtualhost.

To remove a virtualhost:

```bat
> cd D:\some\directory\of\your\project

> varlet unlink
```

This project is Open Source, you can contribute to this project. See this on the Github project page: https://github.com/riipandi/varlet.

---

For ideas, issues, or feature requests, join us at https://spectrum.chat/varlet.


Thank you.
Advent of Code 2019 Solution Megathread - Day 15: Oxygen System
Tags: adventofcode, challenge, adventofcode2019, spoilers
Published: 2019-12-15 08:40:16

---
title: Advent of Code 2019 Solution Megathread - Day 15: Oxygen System
published: True
description: Gasp! We're running out of air!
tags: adventofcode,challenge, adventofcode2019, spoilers
series: Advent of Code 2019 Solutions
cover_image: https://i.imgur.com/o3lEPQQ.png
---

We're running out of air, but don't worry: our old pal the IntCode Robot is back to help us out.

### [Day 15 - The Problem](https://adventofcode.com/2019/day/15)
More bad news! We're running out of air, and we have no idea about the shape of our ship. Luckily, our care package contains an IntCode program that can run an Oxygen System Repair Robot. 

We need to find an efficient path to the Oxygen System location in Part 1. Fire up those IntCodes and get searching our mazelike module.

Part 2 needs us to see how long we have to wait until the area is safe to go into again. We may need a better map...

### Ongoing Meta

#### Dev.to List of Leaderboards

* `120635-5c140b9a` - provided by [Linda Thompson](https://dev.to/lindakatcodes) 

 If you were part of [Ryan Palo](https://dev.to/rpalo)'s leaderboard last year, you're still a member of that! 

If you want me to add your leaderboard code to this page, reply to one of these posts and/or send me a DM containing your  code and any theming or notes you’d like me to add. (You can find your private leaderboard code on your "[Private Leaderboard](https://adventofcode.com/2019/leaderboard/private)" page.)

I'll edit in any leaderboards that people want to post, along with any description for the kinds of people you want to have on it. (My leaderboard is being used as my office's leaderboard.) And if I get something wrong, please call me out or message me and I’ll fix it ASAP.

There's no limit to the number of leaderboards you can join, so there's no problem belonging to a "Beginner" *and* a language specific one if you want.

#### Neat Statistics

I'm planning on adding some statistics, but other than "what languages did we see yesterday" does anyone have any ideas?

##### Languages Seen On Day 13

> Under construction
What Do You Do When You're Stuck?
Tags: beginners
Published: 2019-12-15 07:52:26

Lately, I've been feeling like I'm not sure which direction to move in. Should I learn this new framework? Or a new language? Or maybe I need to brush up on something I haven't touched in a while? freeCodeCamp or pay for a class?

As someone new to tech, it is pretty intimidating knowing where to start and/or when to stop. If you have any advice, please leave it in the comments! If I try out any of your suggestions, I'll make sure to let you know if it worked for me!
I don't know data structures
Tags: 100daysofcode
Published: 2019-12-15 07:48:51

**I haven't done anything about coding.**

![shame on me](https://media.giphy.com/media/vX9WcCiWwUF7G/giphy.gif)

I've just searched for job lists, to see what kind of needs do companies have.

I decided ...

1- I focus on code's efficiency for a while. 
2- I won't go deep in python, c# and f#( I love to learn but...)
3- I don't know data structures and algorithms well.

day 02
C++ - Variables
Tags: cpp, beginners, programming
Published: 2019-12-15 07:48:21

<img src="https://raw.githubusercontent.com/Pushpender-Thakur/myDevAssets/master/asas.png"></img>
A **variable** in simple terms is a storage place which has some memory allocated to it. 

Think of it like a box where you can put your data into.

###Terms

**Declaration**:- specify variable name and it’s data type.
**Definition**:- Declaration + assign memory to it.
**Initialization**:- put value into the box.
**Datatype**:- size of the box
**Variable Name**: name of the box.

##How to Create a Variable?

* First Method

```cpp
int a = 12;

/*
int = datatype
a = variable name
12 = value
*/
```

* Second Method
```cpp
int a{12}; // called uniform initialization
```

* Third Method
```cpp
int a(12); // called constructor initialization
```

**Note**:- *All these three called definition + initialization of a variable.*

References for more information:-
1. [https://data-flair.training/blogs/variables-in-c-and-c-plus-plus/](https://data-flair.training/blogs/variables-in-c-and-c-plus-plus/)
2. [http://www.cplusplus.com/doc/tutorial/variables/](http://www.cplusplus.com/doc/tutorial/variables/)
3. [https://www.geeksforgeeks.org/c-data-types/](https://www.geeksforgeeks.org/c-data-types/)

That's it guys. Have a good day.

If you find anything incorrect or know more about it let me know in the comments.
Day 15 of the Visual Studio Tips Advent Calendar is now live
Tags: visualstudio
Published: 2019-12-15 07:27:43

Day 15 of the Visual Studio Tips Advent Calendar is now live. Enjoy! 

Included is a shout out to my Mum as it's her birthday today.

https://visualstudiotips.co.uk/calendar/

#VisualStudio #DevDecember #VsTipsAdvent #Advent
Printing in D
Tags: dlang, tutorial
Published: 2019-12-15 07:23:44

Another excellent article on Python has me questioning why.

{% link https://dev.to/alamarw/python-s-print-does-what-54if %} 

`print("Hello Word”)`

```dlang
writeln("Hello Word");
```

This is where the similarities end. `writeln` is not a substitute for `print` as we see next.

`print("my", "name", "is", "Austin")`
`# my name is Austin`

```dlang 
writeln("my", "name", "is", "Jesse");
// mynameisJesse
```
While multiple arguments can be passed in, no default or explicit separator exists. Instead we can wrap our call in an array to get access to some array ops. 

```dlang 
writeln(["my" , "name" , "is" , "Jesse"].join(" "));
// my name is Jesse
```

`print(“my”, “name”, “is”, “Austin”, sep=“,”, end=“!”)`
`my,name,is,Austin!`

```dlang 
write(["my" , "name" , "is" , "Jesse"].join(","), "!");
// my,name,is,Jesse!
```

In order to replicate the Python behavior, `write` was chosen because `ln` stands for line which is placed at the end. The exclamation mark is then included as the last argument. 

`with open(“text.txt”, “w”) as text:`
`    print(“my”, “name”, “is”, “Austin”, sep=“,”, end=“!”, file=text)`

```dlang 
with(File("text.txt", "w"))
    write(["my" , "name" , "is" , "Jesse"].join(","), "!");
writeln(readText("text.txt"));
```
Or

```dlang 
append("text.txt", ["my" , "name" , "is" , "Jesse"].join(",") ~ "!");
```

This uses a tilde (concatenation operator) because append does not take additional parameters like write. 

https://run.dlang.io/

# Conclusion 

Python's choice to place a space between prints arguments likely lead to the choice of giving control of that separator. While the code to replicate Python's behavior is only minor, by making the default behavior meaningful to those wanting something readable printed to the screen Python required less familiarity of other language constructs.

If you instructed a new programmer "just wrap all your arguments in these brackets and call this join like so" as done in D, that new programmer would look at you and say "it's a computer why doesn't it do what I want instead of jumping through hoops. 

Where I look at Python and see learning isolated tools. D's approach (also available in Python) is universally applicable. It can do a console and file, and other strings, networking, in some cases datatype. 

Python tries to do the right thing but I think that opens the door for confusion because being explicit is not the norm.
Youtube Video: What’s New in C# 8.0- Default Implementation in Interface
Tags: csharp, webdev, dotnet, visualstudio
Published: 2019-12-15 07:20:42

---
title:  Youtube Video: What’s New in C# 8.0- Default Implementation in Interface
published: true
description: Youtube Video: What’s New in C# 8.0- Default Implementation in Interface
tags: Csharp, WebDev, dotnet, VisualStudio
---

In this video, I have explained how we can use Default interface implementation in C#. 

Recently Microsoft has released a new version C# 8.0. With C# 8.0, there are lots of new cool features are available in language itself and I'm thinking of creating a video series on that and this video is part of that. In this video, I have explained how we can use default interface implementation features in C# 8.0. Hope you like it.


{% youtube aMjzFCOknGs%}


If you like this video and wanted to see a similar kind of video then, please subscribe to my youtube channel at - http://bit.ly/codewithjv
Youtube Video: How to enable Ivy in Angular8
Tags: angular, webdev, javascript, typescript
Published: 2019-12-15 07:16:42

---
title:  Youtube Video: How to enable Ivy in Angular8
published: true
description: Youtube Video: How to enable Ivy in Angular8
tags: Angular, WebDev, JavaScript, TypeScript
---

In this video, I have explained how we can enable Ivy which is a next-generation Angular compiler and interpreter from Angular Team in Angular 8. 

If you don't know what is Ivy then it is a code name of next-generation compiler and interpreter from the Angular team. It comes with lots of improvement like Efficient Tree shaking, Incremental Dom and other lots of cool features. That way you will have your application bundle size decreased and lots of other cool features. I hope you will like this video.


{% youtube LJlpzUwl28s%}

I'm going to publish a whole Angular 9 series on my Youtube channel.

If you like this video and wanted to see a similar kind of video then, please subscribe to my Youtube channel at - http://bit.ly/codewithjv
Learning C
Tags: c, personal, cs, fundamentals
Published: 2019-12-15 06:59:35

---
title: Learning C
published: true
description: Taking a brief break from JS
tags: c, personal, CS, fundamentals
---

Hi all!

I just wanted to give a heads up to everyone (esp followers) and post a quick update to let you know that I'm taking a brief break from JavaScript based languages. 
I enrolled in a software engineer training program and part of the teaching philosophy is that learning the C programming language is a great way to also learn CS fundamentals, so most of my posts for the next few months will likely be mainly regarding the C language and CS fundamentals. 

If you're interested, info on the program is at <a href="https://qwasar.io/">qwasar.io</a>, co-founded by Kwame Yamgnane (who was also co-founder of 42, a coding school that started in France).
Advices for learn react framework
Tags: react, javascript, framework, codenewbie
Published: 2019-12-15 06:11:59

Hi guys, I am new learning to react and I have to be honest it has been very hard to learn react, it has made me a somewhat complex framework to understand.  I would like to hear from you guys what advice you would give me to learn react and be able to master it.  I already know javascript so that part is covered.

Thanks a lot.
Day 11 – Creating and Deleting Folders - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-15 06:05:00

We are on the same `fs module` for the creating and deleting folders

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/9ew7goyfsfzp4gmaqq0f.png)

We are going to use `fs.mkdirSync` to make new folder

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/thoizkqq6cb0ta4xtot7.png)

I'm creating a new folder called `song` by writing fs.mkdirSync('song')

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/mkgtrtugt2gwf3vdjp3k.png)

Run it using `node app.js` 
It created a new song folder on the dir

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/piz1rxc8rf04wnbkh1d0.png)

Now we are going to use `fs.rmdirSync` to delete the folder

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/3pertgu6masv05wwz0iu.png)

We can delete dir by fs.rmdirSync(path) so we'll try it

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/721lv18hhkce9vwrjfeb.png)

Run it using `node app.js`

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/806fdfbyzll45wd8hu7r.png)

So we created and deleted folder easily using `fs.mkdirSync` and `fs.rmdirSync`

Do you have any questions ?

You can see the graphical version here
{% instagram B6D2XQfgyfy %}

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day11-nodejsin30days/). You can connect with me in [twitter](https://twitter.com/nerdjfpb) or [linkedin](https://www.linkedin.com/in/nerdjfpb/) !


You can read the old posts from here --

{% post nerdjfpb/day-1-learning-node-js-in-30-days-mini-series-55e7 %}

{% post nerdjfpb/day-2-learning-node-js-in-30-days-mini-series-5023 %}

{% post nerdjfpb/day-3-learning-node-js-in-30-days-mini-series-24i4 %}

{% post nerdjfpb/day-4-learning-node-js-in-30-days-mini-series-1koc %}

{% post nerdjfpb/day-5-learning-node-js-in-30-days-mini-series-21jm %}

{% post nerdjfpb/day-6-learning-node-js-in-30-days-mini-series-758 %}

{% post nerdjfpb/day-7-learning-node-js-in-30-days-mini-series-3023 %}

{% post nerdjfpb/day-8-var-vs-let-vs-const-learning-node-js-in-30-days-mini-series-1i72 %}

{% post nerdjfpb/day-9-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2dfe %}

{% post nerdjfpb/day-10-mastering-eventemitter-learning-node-js-in-30-days-mini-series-2802 %}
HTML Attributes:
Tags: beginners, webdev, html
Published: 2019-12-15 05:49:13



HTML attributes provide additional information about he element.These are used in the opening tag of the element.
For example: 
            
            < div class="one">
                 //some text
            </div>

Here,class is the attribute which we can use for styling purposes or any other purpose.There are many other such attributes which we will define here....

Attribute href :

href attribute is used inside the anchor tags and it contains the link address.

    <a href="https://www.example.com">

Attribute src:

src attribute is used to specify the image source of the image file.

    <img src="Image.jpg">

Attribute alt:

alt attribute is used inside the image tag to specify what the image is about when image doesn`t get displayed.

    <img src="Image.jpg" alt=" Good Image">

Attributes height and width:

height and width are used to specify height and width of the image.

    <img src="Image.jpg" height="40px" width="40px">

Attribute lang:

lang attribute is used to specify the language of the html element or any other attribute.
It is very important attribute, since it is used for screen readers etc.

    <html lang="en-us">

Attribute style:

style attribute is used for in-line styling purposes

    < div style="color:yellowgreen;">

Attribute title:

title attribute is used to display the value inside it when the mouse hovers over that element.

    < div title="This is the div element"> 
    // some text
    </div>

Attribute id:

The value of the id attribute is unique for the document.It can be used for any purpose like styling, getting the element in JS.

For styling purpose:
    
    <p id="first"> Hello World </p>

In JS:

We ca get the element by using id:

    const anyName=document.getElementById("first");

Attribute class:

class attribute can be used for various elements.

    <p class="one">//some text</p>
    <p class="one">//some another text</p>

Then, we can use class for styling purposes or for any other purpose.
We can also use it in JS

    const anyName=document.getElementsByClassName("one");


Next up, we will see CSS......