teleren/devto huggingface dataset:
Weekly Challenge 088
Tags: perl, weeklychallenge, perlweeklychallenge
Published: 2020-11-23 12:53:50

[Challenge](https://perlweeklychallenge.org/blog/perl-weekly-challenge-088/)

# TASK #1 › Array of Product

## Task

You are given an array of positive integers `@N`.

Write a script to return an array `@M` where `$M[i]` is the product of all elements of `@N` except the index `$N[i]`.
## My solution

This is relatively straight forward. I calculate the product of all the numbers using List::Util's [product](https://metacpan.org/pod/List::Util#product) function. For those that follow my posts, I tend to use only CPAN modules that are in core, like List::Util.

I then use the [map](https://perldoc.perl.org/functions/map) function to loop over the numbers, diving the product by the number to give the solution.

## Examples

```
» ./ch-1.pl 5 2 1 4 3
24, 60, 120, 30, 40

» ./ch-1.pl 2 1 4 3
12, 24, 6, 8
```

# TASK #2 › Spiral Matrix


## Task

You are given `m x n` matrix of positive integers.

Write a script to print spiral matrix as list.

## My solution

Initially I was quite stumped about the way to solve it. I was thinking I'd need some sort of counter to know how many values I would need to take and in which direction. After an hour of thinking about it (while watching the television), I figured out a reasonably clean solution. It will be interesting to see what other Team PWC members come up with.

It can be broken down to the following steps.

1. Parse the input into an array of arrays, check that all rows are even.
1. Create an array `@used` that is the same size as the input array.
1. Have an array `@directions` that map the x & y movements. For example `[1, 0]` means to move down.
1. Starting at the top left moving right add the value at that position to the `@solutions` array, and mark that position as used.
1. If the next position is out of bounds of the array or is a value that has been used, switch directions. Continue this pattern until the `@solutions` array is completed.
1. Output the values to the screen.
 
## Examples 

```
» ./ch-2.pl "1 2 3" "4 5 6" "7 8 9"
1, 2, 3, 6, 9, 8, 7, 4, 5

» ./ch-2.pl "1 2 3 4" "5 6 7 8" "9 10 11 12" "13 14 15 16"
1, 2, 3, 4, 8, 12, 16, 15, 14, 13, 9, 5, 6, 7, 11, 10
```
Chingu Weekly Update Vol. 122
Tags: chingu, javascript, freecodecamp
Published: 2020-11-23 15:14:45

---
title: Chingu Weekly Update Vol. 122
published: true
date: 2020-11-23 12:32:57 UTC
tags: chingu,javascript,freecodecamp
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1000/0*YupzkdRDxMV78GHv)

### News, Shout-outs & Showcases

🔥 Congratulations to @silentdev on the BIG news!

🔥 Here is an npm package @Zumdewald made!

[Intl-date](https://www.npmjs.com/package/intl-dates): Easily get useful date-related information using JavaScript Intl.

🔥 Check out this neat [Trivia app](https://trivia-zone.vercel.app/) made by @tomlikeabomb.

![](https://cdn-images-1.medium.com/max/1024/1*U6STG9zdw9uZCHPXm60cDA.png)

🔥 Here are some resources from last week’s Roundtable discussion on GraphQL:

- [jdmedlock/graphql-server](https://github.com/jdmedlock/graphql-server)
- [GraphQL + TypeScript + PostgreSQL API](https://dev.to/wonder2210/graphql-typescript-postgresql-api-271g)
- [A query language for your API](https://graphql.org/)
- [Insomnia](https://dev.to/scottw/insomnia-rest-client-578d-temp-slug-9682618)
- [graphql/dataloader](https://github.com/graphql/dataloader)
- [Objection.js](https://vincit.github.io/objection.js/)

### Overheard in Chingu

> Bob is our resident expert so he can give a dissertation

> Reading about Five whys

> Toyota also used Andon Cords

> I just talked to IKEA customer service (after waiting 2 hours on phone).

![](https://cdn-images-1.medium.com/max/1024/0*5ykrPlTRp76dA1J8.jpg)

> I will occasionally trash node modules folder, forget, then freak out for a second when seeing “347,820” items being deleted when emptying the trash…

> Is there a way to specify you want all the attributes?

> “Here’s what happened next” Someone watching a bit too much Youtube clickbait, eh?

> I have an iMac for work. I cracked it open, installed a new SSD and upgraded the ram to 16gb

> has anyone here had experience with DataLoader for GraphQL??

> just avoiding that Danish stuff, eh

> Technically, Windows is an old norse word, which was added to English when vikings ruled some part of England. so technically, _technically_ .. Windows is a norse (/danish) brand

> i’ll have you know there is folgers in my cup

> I have some sugar cookie tea to try

> I slept poorly last night, but after a short nap I’m ready to start writing some code again

### Resources of the Week

#### [Illustrated notes on fixing git mistakes](https://dev.to/godspowercuche/illustrated-notes-on-fixing-git-mistakes-3250-temp-slug-6214633)

![](https://cdn-images-1.medium.com/max/880/0*PuLvrdA5eaU-bmxZ.png)

### Quote to Go

![](https://cdn-images-1.medium.com/max/1000/0*-sB9uzcxprPGkYqN.jpeg)

### Before you Go!

> _You can learn more about_ **_Chingu_** _& how to join us at_ [_https://chingu.io_](https://chingu.io/)

* * *
Website Color Extractor
Tags: javascript, design, css, webdev
Published: 2020-11-23 12:30:52

Website color extractor is a free online color tool allowing you to check what colors are used in a CSS file, and how many times they have been used! A free online tool to extract colors from CSS files. Built for modern CSS, it works with hex, rgb and rgba.

##CSS Color Extractor
Extract the css color palette scheme from a website. A handy CSS tool for web designers to see all the HEX color combinations in a web page. Paste the CSS url here and get all the colors which they used! A must-have tool for designers and frontend developers. Free css colour scheme extraction. The apps color extraction tool is used to grab colors from a css. Simply enter the URL of the website css file you want to grab colors from, then press the Check Colors button. Our color tool will then attempt to read that websites CSS files to find all of the HEX, RGB and RGBA color codes. If colors are found, you will be redirected to the color codes page where you can see all of their colors. From there, you can build and test color schemes and palettes with those colours. Hexcolors.co extracts color information from any css files. It extracts color from CSS source where the color can be identified in accordance with the CSS2/CSS3 specification. In general this means that it will extract multiple formats of hexadecimal color representation as well as valid html/css color names.

**https://hexcolor.co/css-color-extractor/**
Digital Clock in React
Tags: react, challenge, node, javascript
Published: 2020-11-23 12:28:46

This is my first post. So please forgive me in advance.

I never wrote anything before. Even in collage I copied and pasted assignments. So I'm trying to post a blog in a week. 

This post is a part of my #100daysofcode challenge. This is my second attempt. My first attempt last long for 10 days. I took this challenge to learn a new thing everyday. I will be focused on JavaScript, React and NodeJs. 

On day 1 of this challenge I build a React Application that shows current time. I know this is not much but I will try to make it harder.

You can check out source code here.
https://github.com/ChikoDish/react-clock

live demo: https://chikodish.github.io/react-clock/

Please leave you valuable comments. 
Thank you.
Get a web app from a database using a low-code tool
Tags: webdev, discuss, showdev, development
Published: 2020-11-23 12:21:57

Hello there! 

I and my team are working on a new product allowing you to get web app, a dashboard, or an admin panel from your database (Google Sheets, MySQL). Without code.
To make this solution fully meet users’ needs, we need to hear your feedback.

Sign up for a quick demo, share your thoughts! Help us build a product you really need & will use.

https://uibakery.io/build-web-app/step-by-step?utm_campaign=ui_bakery%20-%20PoC_data_app%20-%20GoogleAds%20-%20cacq%20-%20xx%20-%20demo&utm_source=DevTo&utm_content=demo_invitation
5 Best SimilarSiteSearch.com Alternatives and Competitors
Tags: directory, similar, sites
Published: 2020-11-23 11:43:12

![SimilarZone.com - Maing page](https://dev-to-uploads.s3.amazonaws.com/i/k5p8te6zh7o9f9wmqhpn.jpg)

SimilarSiteSearch.com is a platform that helps you find related, similar, or alternative sites. It collects and combines details about websites from many sources, including the site itself. The site is also known as a search engine that generates a massive list of websites based on the similarity of categories and topics. SimilarSiteSearch.com is a mashup of keyword based searches and directory listings.

<b>A list of 5 sites similar to SimilarSiteSearch.com:</b>

1.  <a href="https://www.similarzone.com">SimilarZone.com</a> adopted no restriction and limitation on providing the information related to any website. Either you want alternatives to any news website, any social website, any video streaming website, any entertainment website, and any movie website.

2. AlternativeTo.net lets you find apps and software for Windows, Mac, Linux, iPhone, iPad, Android, Android Tablets, Web Apps, Online, Windows Tablets and more by recommending alternatives to apps you already know.

3. AlternativeWebsites.com - looking for an Alternative Website? Check out our lists of Similar Sites to some of the most Popular Websites on the Internet.

4. MoreOfIt.com is the first (and best) website similarity search engine. It answers the question: 'what websites are like this?'. Give moreofit a website you like, and it will find similar and popular alternatives.

5. TopSimilarSites.com helps you find similar, alternative or related sites to any of your favourite websites instantly. Give it a try!
Ruby on Rails: Dark Mode: TLDR
Tags: dark, css, ruby, rails
Published: 2020-11-23 11:38:51

---
title: Ruby on Rails: Dark Mode: TLDR
published: true
description: 
tags: 
- dark
- css
- ruby
- rails
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/znr0mfx0pa9cob6x1reg.gif
canonical_url: https://blog.corsego.com/ruby-on-rails-dark-mode
---

You don't need to migrate columns, have a current user, or add new stylesheets.

Here's how it works on my website:

![dark-mode](https://dev-to-uploads.s3.amazonaws.com/i/znr0mfx0pa9cob6x1reg.gif)

[Live Demo - try to click yourself!](https://saas.corsego.com/)

### Here's how to do it:

* Set a `body` `class` and create links to selecting a `theme`:

```
# application.html.erb

<body class="<%= cookies[:theme] %>">

  <% if cookies[:theme] == "light" %>
    <%= link_to "go dark", root_path(theme: "dark") %>
  <% else %>
    <%= link_to "go light", root_path(theme: "light") %>
  <% end %>
  
  <%= yield %>

</body>
```

* Persist `theme` in `cookies`:

```
# application_controller.rb

before_action :set_theme

def set_theme
  if params[:theme].present?
    theme = params[:theme].to_sym
    # session[:theme] = theme
    cookies[:theme] = theme
    redirect_to(request.referrer || root_path)
  end
end
```

* Update your css file accordingly:

```
# application.scss

body.light {
  color: black;
  background-color: white;
}
body.dark {
  color: white;
  background-color: black;
}
```

That's it! Now you can customize your `css` as you like.

[Originally posted here](https://blog.corsego.com/ruby-on-rails-dark-mode)

That's it!🤠

Liked this article? Please follow me! It will really motivate me to post more fun stuff!
Which is the Best API Documentation Tool?

Tags: apidocumentation, apidocumentationtool
Published: 2020-11-23 11:31:33

API Documentation contains the essential information required to integrate an API.

It helps developers to know how to get started with your API and what is possible with API. Good API documentation keeps all the answers to these questions.

**What is API Documentation Tool:**

It's a free tool and helps API testing and generate the developer's friendly API documentation.

This tool helps developers to easy to adapt the flow and reduces the support time. Preparing API documentation from scratch is a highly complicated and time-consuming process.

This API documentation tool eliminates these drawbacks and automatically generates the information in a form easy to read and understand.

Here I have shared some best API Documentation tools and the developers must know them.

**Top API Documentation Tools:**

-Swagger
-OpenAPI generator 
-LucyBot DocGen 
-ReDoc 
-DapperDox 
-API Transformer 
-Widdershins 
-API Spec Converter 
-Postman 
-ClickHelp

**Benefits of API Documentation Tool:**

API Documentation is a great way to boost up the DX ( Developer Experience). It gives easy learning and quick understand to the developers. It allows the fastest API integration towards the development.

**Consume Support Time:**

Perfect API documentation reduces the time of spending on users and external partner management.

It helps your team to how effectively integrate the API.

**Increased User Adoption:**

The API documentation increases developer user experience and easily understand the scenarios very clearly. It leads the better user adoption.

**Easy to maintain the information:**

Good API documentation leads to better product maintenance. In-house developers easily identify the methods and easy to handle the association requests.

**Enhanced Awareness:**

Well-made API documentation encourages more users to use their APIs. It will increase user satisfaction and the biggest promotion of your APIs.

I hope in this post, We have learned some more information about the API documentation tools and how matter's for developers. In further posts, I will share the full-fledged guide about API documentation.

Tags:API documentation,API documentation tool
What are call(), apply() and bind() in JavaScript
Tags: javascript, webdev, codenewbie, beginners
Published: 2020-11-23 11:17:26

In JavaScript `this` refers to the owner object. If you want to attach some extra properties to a function, then you can do that with these 3 methods and can access that extra property using the `this` keyword. Let’s learn in deep about these 3 methods.

#The call() method
The `call()` method calls a function with a given value and other arguments provided in the function.

```javascript
const address = {city: 'Sonepur', state: 'Odisha'};

function print(name) {
    console.log('Name: ' + name + ', Address: ' + this.city + ', ' + this.state);
}

print.call(address, 'Amitav');
// Name: Amitav, Address: Sonepur, Odisha
```
Here in the example above, `call()` attaches the address object to the print() function and print() function can access this address object using `this`.
You can provide any type of value for `this`.

```javascript
function print() {
    console.log('Hello ' + this);
}

print.call('World'); // Hello World

print.call(245); // Hello 245
```
```javascript
function print() {
    console.log(this[0] + ' ' + this[1]);
}

print.call(['Hello', 'World']); // Hello World
```
#The apply() method
This method invokes the function and allows you to pass the arguments as an array.

```javascript
const address = {city: 'Sonepur', state: 'Odisha'};

function print(name, age) {
    console.log(name +', Age: ' + age + ', Address: ' + this.city + ', ' + this.state);
}

print.apply(address, ['Amitav', 24]);
//Amitav, Age: 24, Address: Sonepur, Odisha
```

Both `call()` and `apply()` works the same way. The only difference is that `call()` expects all parameters to be provided one by one, whereas `apply()` allows you to pass in arguments as an array.

#The bind() method
This method returns a new function with the value bound to it, which you can use to call the function with the required arguments.

```javascript
const address = {city: 'Sonepur', state: 'Odisha'};

function print(name, age) {
    console.log(name +', Age: ' + age + ', Address: ' + this.city + ', ' + this.state);
}

const bindAddress = print.bind(address);

bindAddress('Amitav', 24);
//Amitav, Age: 24, Address: Sonepur, Odisha
```
#You may also like
* [20 JavaScript Shorthand Techniques that will save your time](https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/)
* [JavaScript Array forEach() method to loop through an Array](https://jscurious.com/javascript-array-foreach-method-to-loop-through-an-array/)
* [ES6 Destructuring Assignment in JavaScript](https://jscurious.com/es6-destructuring-assignment/)

**Thanks for your time**
*Find more Web dev blogs on [jscurious.com](https://jscurious.com/)*
LeetHub - Automatically sync your code b/w Leetcode & GitHub
Tags: github, javascript, algorithms, css
Published: 2020-11-23 10:51:11

Hey guys,

TL;DR: [LeetHub](https://www.producthunt.com/posts/leethub) is a free chrome extension that automatically pushes your code to GitHub when solving any Leetcode problem!

I just wanted to share a chrome extension I built in the past 2 days that legit could've been SOO helpful this recruiting season. As someone who's received multiple Fortune 100 SWE internship offers, having a good developer portfolio is vital for getting that interview. Recruiters *actually* check out your GitHub profile.

But instead of building random side-projects that may or may not help you prepare for your coding interviews, why not just practice on your algorithms & data structures, whilst at the same time improve your dev portfolio?

This is what led me to LeetHub to enable students to just focus on improving their algorithms skills & let this extension take care of improving your portfolio!

If you find it useful (or not), I'd appreciate some feedback on ProductHunt.

It has been open-sourced on [Github](https://github.com/QasimWani/LeetHub)

Chrome extension [link](https://chrome.google.com/webstore/detail/leethub/aciombdipochlnkbpcbgdpjffcfdbggi)

Would appreciate some ❤️!
Play: A new programming language that targets Web Assembly, based on Forth
Tags: play, forth, programming, language
Published: 2020-11-23 11:15:58

---
title: Play: A new programming language that targets Web Assembly, based on Forth
published: true
description: Today's mark the release of Play alpha 1, a brand new stack-oriented programming language.
tags: play, forth, programming, language
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zrguvqxr7ujbsdb9vsl7.png
---

Today marks the first release of Play, a new programming language inspired by Forth.

Play might look a lot like Forth, but improves on the language in several ways. Play includes a strong static type system like the ones found in Elm and Haskell. All data structures are immutable, and side effects are tightly controlled, which leads to code that is easy to reason about.

Code written in Play is compiled to web assembly, which means it can run pretty much everywhere, even in browsers.

The goal of today's release is not to present a finished product, but rather give people an idea of what writing code in Play would be like.

To learn more, you can take a look at the [website](https://www.play-lang.dev) and toy with some examples at the [playground](https://www.play-lang.dev/playground.html).
Identifying Web Developer Awareness of Attack Attempts
Tags: webdev, security, architecture, devops
Published: 2020-11-23 11:14:23

Hello **#DEVCommunity**!
Get involved in making web applications self-defending and attack-aware. Our research aims to identify roadblocks in the integration of attack detection and response capabilities.

Most attacker activities involve a probing phase in which an attacker attempts to discover exploitable vulnerabilities. As many of such attack attempts could be detected while validating an application's input, the goal of our survey is to identify whether developers understand attack indicators and how they can be best supported in building detectors for such indicators.

## Participation Requirements
Are you of legal age (18+) and have experience in web development or have developed applications using web technologies? Then participate in our survey and support us with your professional insights.

## Survey Details
The survey is questionnaire-based and consists of three sections:

- In the first section, you will be asked questions on your experience with security controls and input validation.

- The second section consists of questions that will identify whether you can detect attack indicators.

- In the last section, you will be asked some general questions such that we can link you and your answers to a specific developer profile.

The survey can be accessed here: https://forms.gle/NCH8hfbTggdVSmVe9

Feel free to get in touch with me should you have any questions or require further information. You can find my contact details on [my personal website](https://tolgadevsec.github.io).

Your participation is appreciated and will support our goal of developing a pragmatic and usable attack-awareness integration solution. You are more than welcome to share this survey with your developer friends and colleagues.
Navegar entre rutas de Angular utilizando routerLink
Tags: angular, tutorial, routing, spanish
Published: 2020-11-23 11:11:31

En el post anterior realizamos agregamos la primer ruta en nuesta aplicación Angular.

Aprovechando que ya contamos con el array de definiciones de rutas de nuestra aplicación dentro de `app.module.ts` vamos a crear una ruta nueva y navegar utilizando `routerLink`.

### Nuevo componente

Vamos a comenzar creando un nuevo componente con el siguiente comando del CLI:

```powershell
ng generate component posts
```

Luego, agregar una nueva ruta sólo consistiría en sumar el nuevo componente a la colección de rutas:

```typescript
const routes: Route[] = [
  { path: "home", component: HomeComponent },
  { path: "posts", component: PostsComponent },
  { path: "**", redirectTo: "home" }
];
```

Y, por último, añadimos la posibilidad de navegar entre las rutas de nuestra aplicación en `app.component.html`:

```html
<!-- app.component.html -->
<nav>
  <a href="/home">Inicio</a> |
  <a href="/posts">Posts</a>
</nav>
<router-outlet></router-outlet>
```

Excelente!! Al ejecutar el comando `ng serve` ya podremos navegar por nuestra aplicación. 

Pero puede que estemos frente a un pequeño problema. Al navegar a la nueva ruta se produce un refresh de la página y esto puede llegar a ser algo no deseado si pensamos crear una SPA porque estamos perdiendo el estado de la aplicación ante cada click en los links.

### Incorporar `routerLink`

Para solucionar este inconveniente vamos a utilizar la [directiva routerLink](https://angular.io/api/router/RouterLink) para cambiar de página evitando hacer un refresh.

Simplemente lo que debemos hacer es reemplazar nuestros `href` por `routerLink`:

```html
<!-- app.component.html -->
<nav>
  <a routerLink="/home">Inicio</a> |
  <a routerLink="/posts">Posts</a>
</nav>
```

Y ahora cuando hacemos click entre las rutas de nuestra aplicación ya no se reliza el refresh de la página!!

Aquí se puede ver el código final:

[Stackblitz](https://stackblitz.com/edit/angular-navegar-entre-rutas?file=src/app/app.component.html)