teleren/devto huggingface dataset:
Debugging ScullyIO Rendering and Network Errors with the help of puppeteerLaunchOptions
Tags: angular, scully, typescript, webdev
Published: 2020-05-07 12:25:32

---
title: Debugging ScullyIO Rendering and Network Errors with the help of puppeteerLaunchOptions
published: true
date: 2020-04-07 00:00:00 UTC
tags: angular,scully,typescript,webdev
canonical_url: https://www.leonelngande.com/debugging-scullyio-rendering-and-network-errors-with-help-the-help-puppeteerlaunchoptions/
---

With my Angular app’s Scully build broken due to proxy redirect issues, I was very happy today discovering we can control the underlying mechanism of rendering the pages to some degree.

As per the Scully [documentation](https://github.com/scullyio/scully/blob/master/docs/scully-configuration.md#puppeteerlaunchoptions), we can add `puppeteerLaunchOptions` (a set of configurable options to set on the browser) to our Scully configuration file. You can find details on all the options [here](https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-puppeteerlaunchoptions).

To debug the proxy configuration issue affecting the rendering of my pages, two options in particular were super helpful:

- `slowMo`: Slows down Puppeteer operations by the specified amount of milliseconds. Useful so that you can see what is going on. And
- `devtools`: Whether to auto-open a DevTools panel for each tab.

Here’s how to add these options to your `scully.config.js` file:

```javascript
exports.config = {
  projectRoot: "./src",
  projectName: "xamcademy",
  outDir: './dist/static',

  /* ADD THESE */
  puppeteerLaunchOptions: {
    slowMo: 4000,
    devtools: true,
  },
};

```

Of course we have to use the [--showBrowser](https://github.com/scullyio/scully/blob/master/docs/scully-cmd-line.md#showbrowser) option with the scully build command so we see the effect of the puppeteer launch options.

So run your scully build command adding the showBrowser option: `npm run scully --showBrowser`. You’ll now notice the addition of the Chrome devtools to each page scully is prerendering, as well as a noticeable slowdown of each page’s rendering.

With this slowdown, you have enough time to switch to the network tab and inspect the requests, hopefully finding the cause of the errors.

Of course you can adjust the duration of the slowdown by increasing or reducing the value of `slowMo` above. That’s it for this post, happy bug fixing!
Curso JSON - 4. Conversiones
Tags: spanish, vscode, node, javascript
Published: 2020-04-06 23:48:37

{% youtube dy6lKJL0zTo %}

Curso sobre JSON de novato a experto (**versión GRATIS**)
Presentación: https://slides.com/equimancho/json/#/4

Repositorio:
https://github.com/equiman/playground-json

Contadores (Mr. Timer):
https://www.youtube.com/channel/UCYo5An-3L_eOd1l5WQdU3oQ

---

**That's All Folks!
Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinacademy)
5 object methods you must know as a javascript Developer
Tags: codenewbie, beginners, javascript, tutorial
Published: 2020-04-06 23:46:06



Almost everything is an object in javascript and unfortunately, not all of us know the goodies that it comes with.

In this article, i will show you the five most used Object methods and their examples.

### 1. Object.assign()

This is perhaps the most used object method in javascript. So basically, this method copies all the values from one or more source to a targeted object.

```javascript
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

console.log(honda);
// {type: "sedan", price: 10000, isLuxury: true}
```

In the above code block, we created a new object chevrolet that hold some data in it.
And for some reason we want another object with the same data. So we basically copy the data inside of chevrolet to honda using the assign method.

# 2. Object.create()

This method is quite similar to Object.assign() — you can make a new object base on a reference object. However, the difference is that objects created with the assign() method are linked with the reference object. Changes made to one of them will affect the other (inheritance chain).

```javascript
//  with  assign
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

honda.price = 2000; // this will overwrite both
//  the price property in honda
//  and chevrolet

console.log(chevrolet);
// {type: "sedan", price: 2000, isLuxury: true}

//  with object.create
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.create(chevrolet);

honda.price = 2000;
//  change will not affect reference object (chevrolet)

console.log(chevrolet);
// {type: "sedan", price: 10000, isLuxury: true}

console.log(honda);
// {type: "sedan", price: 2000, isLuxury: true}
```

# 3. Object.entries()

The entries.() method return an array with all the data (key/values) inside of an object.

```javascript
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};

const chevArr = Object.entries(chevrolet);

console.log(chevArr);
// [ [type,sedan,], [price,10000,], [isLuxury,true,]]
```

# 4. Object.freeze()

This method literally freeze an object making it immutable. Properties can not be changed or deleted.

```javascript
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
Object.freeze(chevrolet);

chevrolet.price = 20000;

console.log(chevrolet.price);
//  10000 instead of 20000.
```

# 5. Object. is()

This method compares two objects and return a boolean.

```javascript
const chevrolet = {
  type: 'sedan',
  price: 10000,
  isLuxury: true,
};
const honda = Object.assign(chevrolet);

const isEqual = Object.is(honda, chevrolet);

console.log(isEqual);
//  true
```




Update: if you like this, you should checkout my [article on array methods](https://dev.to/krakencoder/10-array-methods-you-need-to-know-in-javascript-4npm)
That is it guys and i hope you learn something from this. 
Happy coding.
Curso JSON - 2. Tipos de datos
Tags: spanish, vscode, node, javascript
Published: 2020-04-06 23:43:49

{% youtube RpDClJwFSwA %}

Curso sobre JSON de novato a experto (**versión GRATIS**)
Presentación: https://slides.com/equimancho/json/#/2

---

**That's All Folks!
Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinacademy)
New Devlog For My Upcoming Indie Game :)
Tags: devlog, unity3d, csharp, beginners
Published: 2020-04-06 23:33:43

In this video i show my progress on my upcoming indie game, which is a platformer mainly based around gravity. If you enjoy the video make sure to subscribe cause that helps me a lot :)

video: https://www.youtube.com/watch?v=_Ey_aVkFlyU
#2 Building a simple GraphQL API with Actix and Juniper (Rust)
Tags: rust, graphql, tutorial, webdev
Published: 2020-04-06 23:09:53

{% youtube aEAz5DHhpLo %}

[Part 1](https://dev.to/nemesiscodex/building-a-simple-graphql-api-with-actix-and-juniper-rust-26f6)
Ruby Hashes vs JS Objects
Tags: ruby, javascript, languagelearning, hash
Published: 2020-04-06 02:07:22

If you're coming from JS and learning Ruby like I am, you've probably tried to use Ruby hashes and gotten a fair share of errors.

```ruby
irb(main):001:0> person = { name: "Jennifer", state: "California" }
irb(main):002:0> person.name
Traceback (most recent call last):
        4: from /Users/j/.rbenv/versions/2.6.5/bin/irb:23:in `<main>'
        3: from /Users/j/.rbenv/versions/2.6.5/bin/irb:23:in `load'
        2: from /Users/j/.rbenv/versions/2.6.5/lib/ruby/gems/2.6.0/gems/irb-1.2.0/exe/irb:11:in `<top (required)>'
        1: from (irb):2
NoMethodError (undefined method `name' for {:name=>"Jennifer", :state=>"California"}:Hash)
irb(main):003:0> person['name']
=> nil
```
What gives? Ruby was totally fine with how I created the hash - it's exactly how I create JS objects. But I get errors when I try to access it using either: 
- the dot notation `person.name`: I get a `NoMethodError`
- using the bracket notation `person['name']`: I get `nil`

Let's break down what's happening.

By creating a hash like so:
```ruby
person = { name: "Jennifer", state: "California" }
```
I'm using Ruby's new notation for creating a hash. This was introduced in version 1.9 (current version is 2.6).

The old equivalent syntax makes it way easier to understand what's actually happening:
```ruby
person = { :name => "Jennifer", :state => "California" }
```
While JS only allows you to use strings as keys[^0], you can use any object as a key for Ruby hashes. What I'm actually creating is a ruby hash containing 2 key/value pairs:
- `:name`: Ruby symbol pointing to `"Jennifer"` (a string)
- `:state`: Ruby symbol pointing to `"California"` (also a string)

When you use the dot notation `person.name`, Ruby interprets that as you trying to call a method called `name` on `person`. `person` doesn't have a `name` method, since hashes don't have a `name` method. Ruby throws a `NoMethodError` as a result.

When you use the bracket notation `person['name']`, Ruby tries to retrieve the value associated with a string key `'name'`, not a symbol key `:name`. It doesn't find that string key, so it returns `nil`. 

The right way is to pass in the symbol `:name` using the square bracket notation:

```ruby
irb(main):004:0> person[:name]
=> "Jennifer"
```


Hope this helps! Anything else you find confusing in Ruby? Comment below

[^0]: This is not strictly true anymore. You can use [Symbols](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol) as JS object keys as of ES6. I still don't see this much though.
BE THE HERO!
Published: 2020-04-06 23:05:37

After not having the time I wanted to follow RocketSeat's Omnistack 11 Week (i had to download the classes from YouTube to finish the project), I finished the application on April 5th.
It was an absolute pleasure to create this application, which aims to be a place where Non-Governmental Organizations can register "requests for help" and users can contact to help financially.
We studied and implemented Node.js in the Back-End environment, React.js in the Front-End and React Native in the Mobile app. In addition, we learned how to use GitHub in sync with VS Code and, for convenience and simplification, we learned and used the SQLite database.
Many thanks to the people from RocketSeat for this fantastic project, it was a pleasure to participate in this fantastic week. Follow the link to the project repository: (https://github.com/JoramirJr/be-the-hero)
Python Zero to Hero - Ep.1 - get your Python setup
Tags: python, tutorial, devenviroment
Published: 2020-04-06 22:56:46

---
title: Python Zero to Hero - Ep.1 - get your Python setup
published: true
description: Today we start our Python journey. Start setting your Python coding environment. I tried to explain as detail as possible for you to understand how your Pyhton got installed and information about Python and related software packages.
tags: Python, tutorial, dev enviroment
---
Today we start our Python journey. Start setting your Python coding environment. I tried to explain as detail as possible for you to understand how your Pyhton got installed and information about Python and related software packages.

You can grab the slide deck [here](https://bit.ly/PythonSetup).
Curso JSON - 1. ¿Qué es JSON?
Tags: spanish, vscode, node, javascript
Published: 2020-04-06 22:39:26

{% youtube qpd9wHkd0pI %}

Curso sobre JSON de novato a experto (**versión GRATIS**)
Presentación: https://slides.com/equimancho/json/#/1

---

Documentación Oficial: https://www.json.org

---

**That's All Folks!**
**Happy Coding** 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinacademy)
Curso JSON - Introducción
Tags: spanish, vscode, node, javascript
Published: 2020-04-06 22:30:25

{% youtube JJFXgEpcGbg  %}

Curso sobre JSON de novato a experto (**versión GRATIS**)
Presentación: https://slides.com/equimancho/json

---

That's All Folks!
Happy Coding 🖖

[![cerveza](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h4zle20oa7anpfjvap8n.png)](https://github.com/sponsors/deinsoftware)
AI and ML Online Developer Summit (April 14, 2020)
Tags: conference, machinelearning, ai, webinar
Published: 2020-04-10 17:45:49

---
title: AI and ML Online Developer Summit (April 14, 2020)
published: true
date: 2020-04-06 22:20:09 UTC
tags: Conference, Machine Learning, AI, webinar
canonical_url: https://maxkatz.org/2020/04/06/ai-and-ml-online-developer-conference-april-14-2020/
---

I’m a big fan of [online events as they allow you](https://dev.to/maxkatz/how-to-scale-developer-relations-with-online-meetups-4216) to scale. [IBM Developer SF](http://crowdcast.io/ibmdeveloper) has been running online events for almost two years. Next week we are hosting our first online conference: [AI & ML Online Developer Conference](https://aiml-developer-summit-online.splashthat.com/). We have five talks and a hands-on workshop.

Check out the full schedule and register at: [https://aiml-developer-summit-online.splashthat.com/](https://aiml-developer-summit-online.splashthat.com/)

🗓 Schedule

🎈8:45am – Welcome

🌟9:00am – Improve Communication Apps with Machine Learning! – Lizzie Siegle (Twilio)

🌟9:20am – Explainability in neural networks – Lavanya Shukla (Weights & Biases)

🌟9:40am – Hands-on workshop

🌟10:10am – Testing Machine Learning Models in Production – Eric Schles

🌟10:30 – Predict the Future with Watson Studio AutoAI – Jenna Ritten (IBM)

🌟10:50 – Realtime Object Detection in the Browser with TensorFlow.js – Nicholas Bourdakos (IBM)

![](https://katzmax.files.wordpress.com/2020/04/aiml-april2020-online-1.png?w=800)

Check out the full schedule and register at: [https://aiml-developer-summit-online.splashthat.com/](https://aiml-developer-summit-online.splashthat.com/)
Day 110 : Nowhere
Tags: hiphop, code, coding, lifelongdev
Published: 2020-04-06 22:02:43

_liner notes_:
- Saturday : Did another show online only since the station has been closed due to the pandemic. Think I'm starting to get used to just going into my room and start broadcasting without needing to set up my equipment. haha As usual, had a really good time doing the show. The recording is at https://kNOwBETTERHIPHOP.com

![Radio show episode image of Martin Luther King Jr. speaking to a crowd with the words April 4th 2020, Lovely Day](https://dev-to-uploads.s3.amazonaws.com/i/wmgw4772w7qcp0cehx19.jpg)

- Sunday : Normally I get the show recording up and ready for the different podcast apps to update right after the show on Saturday night. For some reason, uploading the recording took a lot longer than normal. I basically just did everything else and let it upload. I wasn't going anywhere. haha I went to bed and woke up early on Sunday and it was uploaded eventhough the page still showed it was uploading. Whatever, as long as it worked. haha Spent the day working on my personal project. Reached out to a few producers I know to submit tracks. Got some tracks in and was told the process was pretty easy. Happy to hear that because I tried to make the website super easy to use and work well on mobile devices.

- Professional : Had a meeting with my manager and decided to work on a quick demo for a meeting tomorrow. Planned it out and started working on it. Then Glitch started having problems pretty much all day. haha So that threw me off.

- Personal : Will keep working on the demo since Glitch is now functional. Good thing I created a starter project that I can just remix and have a good place to start working.

![lake with a log in the foreground, forests on the sides and a mountain in the background in Rawson Lake, AB, Canada](https://dev-to-uploads.s3.amazonaws.com/i/c2j06htzdxyti28c0bia.png)

Going to keep working on this demo. Want to get it working for the meeting tomorrow morning.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube Crup0EVHib0 %}
Can I have subtitles for 📞?
Tags: twiliohackathon
Published: 2020-04-06 02:04:38



### What I am building

English is not my first language. After living in United States for more than 10 years, I can handle daily conversations fine. However, if there is one thing I still fear, it is those phone calls 📞. When the phone call conversation is mixed with background noises or the person speaks in accents/dialects that I am not familiar with, my listening skill collapses.

Sadly, I am not the only one. There are some people in my family who does not get exposed to English conversations everyday or learn English at educational institutions, like I did. They often ask me to make phone calls on behalf of them.

There are excellent tools like online dictionary and translation service (ie. AWS Translate) that they can utilize but that requires the person to multitask between using those tools and paying attention to the conversation at the same time.

So I propose to build a tool where you can: 
* A  user makes a phone call
* The conversation is transcribed in real time
* The transcribed text can also be translated in real time
* Those transcription & translation are visible to the user, in real time.

I see these could potentially benefit: 
* Those who is more comfortable with reading than listening in English
* Those who face difficulty in hearing

### Demo Link
TODO

### Link to Code
TODO

### How I built it (what's the stack? did I run into issues or discover something new along the way?)
TODO

### Additional Resources/Info
TODO
Hands-On with Helm Charts in Kubernetes
Tags: devops, kubernetes, development
Published: 2020-04-06 21:51:53

About Me: How's it going everyone? To keep it brief, I run a tech company and I'm an Azure/DevOps trainer for CBT Nuggets :). I left my job to pursue something I loved, teaching and practicing quality engineering. 

Below is a YouTube video of me showing Helm Charts in Kubernetes. It's the first of many YouTube videos that will dive into DevOps technologies and DevOps practices.

[![Helm Charts in K8s](https://i.imgur.com/cgqKWLZ.jpg)](https://www.youtube.com/watch?v=0Ui_EWciSyM&t=5s)
Delievery - Deliver (or Send) Anything, Everywhere in your Local Community - Twilio Hackathon
Tags: twiliohackathon, ionic, nestjs, opensource
Published: 2020-04-06 21:41:46

---
title: Delievery - Deliver (or Send) Anything, Everywhere in your Local Community - Twilio Hackathon
published: true
description: My submission to the Twilio x DEV Hackathon!
tags: twiliohackathon, ionic, nestjs, opensource
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/wvhl5unzp408u5o3tcis.png
---

## What I am going to build

### Problem Statement

When we want to send or receive to something, locally, let's say a handmade cake 🎂 by Granny, or a surprise 🎉🎁 for a Girlfriend or let's say we forgot our 📱 phone at home, we find it very difficult to send / receive such 🙄 small (but 🔝 very important) things.

### Introducing, DELIEVERY ✅

With Delievery, anyone can send or receive anything from anywhere in their local community. And anyone can become a delivery 🚚 exec (or medium of 😉 happiness if it's Granny's cake) to complete the task.

This is going to be a mobile app. Initially with 3 major user roles:

1. 👨‍🏫 Applicant User - Who is going to request to send or receive anything
2. 👮‍♂️ Delivery Exec - Who is going to complete the request raised by an Applicant User and will also earn money
3. 👨‍⚖️ Approver User
  * Who can accept a delivery from delivery exec, if Applicant has sent something
  * Who can give package to delivery exec, if Applicant has requested something

### Category

My project will fall under *Interesting Integrations* category, as I am going to use Twilio APIs with combination of other APIs.

### Features

Below are the main features:

1. 🏦 Account managment
  - MVP - Login, Signup, Forgot and Reset Password
2. ⚡ Tasks management
  - MVP - Create, Cancel, Status, History
  - Future - Payment
3. 🚴‍♀️ Live tracking of Delivery Exec
  - If possible, I will implement it in current version or can be considered part of future work.
4. 🤷‍♂️ FAQs on how to use app - MVP

<!-- ## Demo Link -->
## Link to Code
👨‍💻 https://github.com/shhdharmen/delievery
{% github shhdharmen/delievery %}

## How I am going to build it (what's the stack)?

My stack will be:

1. 📱 Mobile App - Ionic with Angular
2. 🔄 APIs - NestJS
3. ☁️ Server - TBD
4. 🏪 Database - MongoDB
5. 💵 Payment Gateway - TBD

### Twilio APIs

1. Account management
  - For signup and login, I am planning to use `Authy` and `Verify`
  - To send welcome, forgot-password and reset-password mails, I will use `SendGrid`
2. Tasks management
  - State notifications (requested, accepted, delivered, etc.) using in app chat with `Programmable Chat`
  - Final state notifications (package delivered) using `SMS` or `WhatsApp`
  - Or maybe I will use `Conversations` for both of the above
3. FAQs - `AutoPilot`

## Additional Resources / Info

- Logo generated using https://hatchful.shopify.com/

---

👋 I'm writing this post to serve as a commitment for me to continue this journey. If you find this project interesting feel free to share your feedback or idea.

Thanks for reading.
How To Add a Cache Layer to your JavaScript API
Tags: javascript, cache
Published: 2020-04-06 21:21:48

Caching can be difficult to get right, but it doesn't really take much code if you are aware of the gotcha's.  The sample below implements a simple cache around an API in roughly 10 lines of code:
```
      const apiCache = new Map();
      async function apiWrapper(url) {
        if (!apiCache.has(url)) {
          const promise = fetch(url).then((r) => r.json());
          apiCache.set(url, promise);
        }

        const response = await apiCache.get(url);
        return cloneDeep(response);
      }
```

There are a few key points to note with the code above.

_It always returns a promise._

You don't want to cache the result, you want to cache the promise.  This handles race conditions where multiple callers are requesting the same resource simultaneously.  The consuming code behaves the same whether its the 1st call for this resource or the 20th.  The promise just resolves more quickly when the resource has already been cached.

_The response is cloned before returning to the consumer._

Because Javascript will return a reference, if a caller modifies the response, it will be modified for all future consumers.  This has to be a deep clone, using a shallow clone via object spread or assign will cause issues.  Use cloneDeep from lodash.

Note that this implementation uses the URL as the cache key.  If your api uses http body with a POST, you will want to serialize the data and add it to the url to build a unique key.

Below is a full standalone html page if you want to try it out and verify edge cases:
```
<html>
  <head> </head>
  <body>
    <script>
      function cloneDeep(obj) {
        //example only, use lodash
        return JSON.parse(JSON.stringify(obj));
      }

      const apiCache = new Map();
      async function apiWrapper(url) {
        if (!apiCache.has(url)) {
          const promise = fetch(url).then((r) => r.json());
          apiCache.set(url, promise);
        }

        const response = await apiCache.get(url);
        return cloneDeep(response);
      }

      const post1Url = "https://jsonplaceholder.typicode.com/posts/1";
      console.log("make 1st request");
      apiWrapper(post1Url)
        .then((post1) => {
          post1.title = "fetched from 1";
          console.log(post1);
        })
        .catch((e) => {
          console.log(e);
        });

      console.log("make 2nd request");
      apiWrapper(post1Url)
        .then((post1) => {
          console.log(post1);
        })
        .catch((e) => {
          console.log(e);
        });
    </script>
  </body>
</html>
```