teleren/devto huggingface dataset:
Common Interview Question -- Javascript Arrays
Tags: javascript, arrays, interview
Published: 2021-06-03 14:14:54

Arrays are one of those appealing topics in any programming language that almost all the interviewers tend to ask one or two questions about. In this article, I will be talking about Javascript arrays and some very frequently asked questions related to them.

First of all, you should have a very clear idea about what arrays are and what is the purpose of using them in your code.
To be precise, arrays are like the containers of your data, they keep the information/data in an ordered form just like you keep your clothes in a cupboard in an organized manner:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bmjcb67kcy8fqkp6ed1k.jpeg)

You can find all the relevant documentation about all the array methods in the MDN docs here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

Also, it is not always possible to remember all the methods and their functionalities since there are quite a lot of them therefore I would recommend keeping this Javascript arrays cheatsheet handy for quick reference found at https://jrsinclair.com/javascript-array-methods-cheat-sheet:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k6hn698mp4s1w1gjbxai.png)

However, my aim of writing this piece is to address one very common question asked during web developer interviews and it is related to the insertion/deletion phenomenon of arrays.
The interviewer may ask which are the array methods used for inserting/deleting in an array and which are the better ones?

The first part of the question is pretty simple and you can answer it straightaway...The two methods used for insertion/deletion are push/pop and shift/unshift. 
We can illustrate the functionality of these methods as follows:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0t2zccrj2sv4vy1h0mtn.png)

However, the second part of the question is little tricky..how can you judge which is one is better and which is not..we can answer this question in terms of number of operations, the one which takes lesser operations will be better. For example we have the following array:

let fruits = ['Apple', 'Orange', 'Blueberries']
and I want to insert one more fruit to this array, adding the  fourth item to the beginning of the array (hence using unshift method) will cause all the elements to re-index and hence more effort required however if we used the push method then the fourth item will be added straight to the end and none other items will be disturbed, same goes for the deletion theory hence we conclude that push/pop is better and faster than shift/unshift while working on really large arrays having thousands and thousands of records.

That's all folks..
Happy coding...
How to add a RSS feed to a rails blog
Published: 2021-06-03 12:51:21

---
title: How to add a RSS feed to a rails blog
published: true
date: 2021-06-03 12:32:22 UTC
tags: 
canonical_url: https://webdevchallenges.com/how-to-add-a-rss-feed-to-a-rails-blog
---

[RSS Feeds](https://developer.apple.com/news/rss/news.rss) are publicly accessible URLs of websites that can be consumed by other software in order to utilize the content of a site. If you write posts on your own blog like I do and then want to crosspost your posts to other sites like [dev.to](https://dev.to), a RSS feed might be helpful in doing so.

The RSS feed of my blog is available at [/feed](https://webdevchallenges.com/feed). It gets generated dynamically so it always includes my latest posts.

# How to add a RSS feed with Rails

The way I implemented this RSS feed is very similar to the way I implemented [my Sitemap.xml](https://webdevchallenges.com/how-to-add-a-dynamically-generated-sitemap-with-rails) first lets add a route to our `config/routes.rb` file:

```
get 'feed', to: 'home#feed', format: 'xml', as: :feed

```

As you can see, it expects to find a controller `home` with an action `feed`, so either create this controller too yourself or point to a different one in your application. The action itself is empty:

```
class HomeController < ApplicationController
  def feed
  end
end

```

The last thing we need is the view file `views/home/feed.xml.builder` which generates the xml code. It iterates through published posts, paginates them and then renders XML for each of them.

```
xml.instruct! :xml, version: "1.0"
xml.rss :version => "2.0" do
  xml.channel do
    xml.title "WebDevChallenges"
    xml.description "A blog about the lessons learned as a Web Developer"
    xml.link root_url

    Post.published.order('created_at DESC').page(1).each do |post|
      xml.item do
        xml.title post.title
        xml.description post.html_content
        xml.pubDate post.created_at.to_s(:rfc822)
        xml.link show_post_url(post.slug)
        xml.guid show_post_url(post.slug)
      end
    end
  end
end

```

As mentioned earlier, some sites like dev.to [offer the possibility to enter your own RSS feed](https://dev.to/settings/extensions) which then gets fetched regularly. If it detects a new post, it will land in your dashboard as a draft which you then can use to easily release your post there aswell which is exactly what I do.

Important to note here is that posting your content on multiple platforms might be negative in terms of SEO if google cannot find out which of the websites is the original creator of the content. dev.to offers you the option to set a canonical URL so it won’t affect your SEO negatively. The canonical URL gets set automatically if import your posts via RSS.

Hope that helped :)
Day 101
Tags: 100daysofcode, programming
Published: 2021-06-03 14:09:32

Day 101/200 of #200DaysOfCode #100DaysOfCode

- Solved three problems on Codewars.

1 - Minutes to Midnight (6 kyu)
2 - Next birth-day of the week finder (7 kyu)
3 - Scrabble Score (7 kyu)
AWS Cognito Hosted UI cannot be customised!
Published: 2021-06-03 14:06:42

I'm currently investigating which auth provider I should use for my new web-api project. The requirements are:
1. We need an OIDC solution with Authorization Code Flow with PKCE as we will have third party client applications (SPA/Mobile) developed by external vendors.
2. We need to give users options to login using an existing external OIDC provider.

These are quite a generic set of requirements that are commonly available in most OIDC providers. It was also quite easy to set-up in AWS Cognito as I expected. After everything is configured my login page looks like below:
![Screenshot Cognito](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6yul54aahzl7t1l95dwr.png)

The only problem is... **you can't customize the UI**. You can change some aspects, but only a handful of styles and colours ([see here](https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-app-ui-customization.html)). But what if you want to change the text "Sign in with your corporate ID". As it stands today, you can't.

The screenshot above is what AWS calls the "Hosted UI". If you are doing a Authorization Code Flow with PKCE then you need a hosted UI where the client application can redirect to. And if you're using a hosted UI 90% of the time you'd like to theme it to suite your brand needs. In fact, other than some demo application, I think any hosted UI by the OIDC providers should be themable.

Azure B2C is superior in this regard, they allow ways to fully customize your hosted pages. [See here](https://docs.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-user-flow) for more information.information.

So if you're considering AWS Cognito for an identity solution and plan to use standard OIDC flows for public apps, keep that in mind.
Creating a remix using Tone.js
Tags: javascript, webdev, music, tutorial
Published: 2021-06-03 13:52:15

I took a break from making music for a few years and wanted to return to composing music. This is a great time to return to my passion after a long hiatus. In the first step of creating music with code. I have decided to jump in and learn Tone.js. 

## What is Tone.js
Tone.js is a web audio framework used to create music in a browser. It is flexible and can be used to create various music web applications. Tone.js documentation has examples, documentation and demos on their GitHub page. The [Chrome Music Lab](https://musiclab.chromeexperiments.com/) uses Tone.js. 

### Creating Mary had a little lamb 
To start off we have to create a javascript file and create a synth. We have the exported Tone object and for the instrument,  MembraneSynth is used to make the sounds with. 

```
const synth = new Tone.MembraneSynth().toDestination();
```

We have to add the notes to Mary had a little lamb. This is done by creating an array for the notes. Use null to create a rest or a pause.

```
const notes = [
 "A3",
 "G2",
 "F1",
 "G2", 
 "A3",
 "A3", 
 "A3", 
 null,
 "G2",
 "G2",
 "G2",
 null,
 "A3",
 "C5",
 "C5",
 null
];
```
 We have to set the bpm. In this example I set it to 130. 

```
Tone.Transport.bpm.value = 130
```

Create a sequence with the synth and notes. For the last part we have to setup starting the audio so it can play in the browser. 

```
const seq = new Tone.Sequence((time, note) => {
    synth.triggerAttackRelease(note, 1.0 , time);
  },
  notes,
  "4n"
);

seq.start();
Tone.Transport.start();
```

In the browser the audio will loop a segment of Mary had a little lamb. This was my first experiment with Tone.js. The framework can be used to create more complex web applications.

### Tone.js resources for beginners
[Tone.js page](https://tonejs.github.io/)
[Tone.js tutorial] (https://medium.com/dev-red/tutorial-lets-make-music-with-javascript-and-tone-js-f6ac39d95b8c)
🦋How to handle a scrollable list of various widgets in Flutter
Tags: flutter, dart, tutorial, programming
Published: 2021-06-03 14:00:25

**Hey there Devs,**
I have a quick update for a reusable flutter widget I created during my current project. 
> The task is to create a scrollable List containing various widgets, on a page, where there is also a widget on the bottom of the page possibly cover some items from the list.

The widget I came up with for my shared folder is the following:
``` dart
import 'package:flutter/material.dart';

class SettingList extends StatelessWidget {
  final List<Widget> children;
  double height;

  SettingList({required this.children, this.height = 96}) {
    children.add(
      SizedBox(height: this.height),);
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Column(
        children: children,
      ),
    );
  }
}
```
The SettingList widget simply is a SingleChildScrollView wrapping a column to make it possible to contain various widgets. The height value can be overridden and is used for a SizedBox widget to add some Padding on the Bottom.

To handle the mentioned Challenge I put both the widget for the bottom and those for the list inside a Stack Widget to handle them (shown below):

``` dart
Stack(
        children: [
          SettingList(children: [
            ListOfWidgets
          ]),
          BottomWidgetWithAlignment
        ],
      ),
```

With some adjustments you can create a similar widget handling also space on the top.

I hope this quick example helps you one day, when you have a similar problem.
If you wanna see my current project head over to Github at https://github.com/lucianojung/flutter_package_examples (the corresponding widget is currently in a feature branch)

If you wanna know more about my project head over to medium and get to know a **new useful flutter package every week**
https://medium.com/@lucianojung

Fyi: the solution prevents the following error:
![flutter package example app without using the SettingList widget](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kzutaeembx0xetutba9b.jpg)
Use a Neural Network without its library
Tags: dannjs, javascript, machinelearning, webdev
Published: 2021-06-03 13:59:26


Various web applications use Neural Networks. The only downside is that you need to import an entire library to run these types of algorithms, which might be inconvenient.

Hopefully, the Dannjs library has a way of saving a Neural Network as a standalone JS function, which allows you to get the predictions without including the whole library.

In this short tutorial, we're going to train an XOR neural network in the new Online editor, and then use it in another browser without importing the library.

Here are the requirements for this tutorial:
* [Dannjs Online Editor](https://dannjs.org/sandbox)
* Any web browser



<br/>

### Setup

Let's start by creating the Neural Network.
```js
const nn = new Dann(2, 1);
nn.addHiddenLayer(8, 'leakyReLU');
nn.makeWeights();
nn.lr = 0.1;
```

<br/>

### Training

We can train the neural network with the XOR logic, 1000 epochs should do the trick. 
```js
let epochs = 1000;
for (let i = 0; i < epochs; i++) {
    nn.backpropagate([0,1],[1]);
    nn.backpropagate([1,0],[1]);
    nn.backpropagate([0,0],[0]);
    nn.backpropagate([1,1],[0]);
}
```

<br/>

### Testing

Once trained, we can test the output

```js
nn.feedForward([0,1],{log:true});
nn.feedForward([1,0],{log:true});
nn.feedForward([0,0],{log:true});
nn.feedForward([1,1],{log:true});
```

This should result in accurate predictions

```
Prediction:
[0.9955815601552473]

Prediction:
[0.9954508755506862]

Prediction:
[0.04536960523468736]

Prediction:
[0.003240998243744729]
```

<br/>

### Save

We can finally save the Neural Network as a minified function as a string that we can copy & use anywhere else.
```js
let func = nn.toFunction();
console.log(func);
```

Here is how you would use the function in another JS environment such as the chrome console.

![XOR minified](https://i.ibb.co/mvwLygc/outputonly.png)

We can see that we get the same predictions because every single parameter has been saved into the function.

This feature allows us to use any neural network outside of the library, making the usage of these algorithms in web applications simple & lightweight. Loading times on web pages is always a good thing to look out for, making this a neat trick to know about!
✨ I'm getting PUBLISHED ✨
Tags: published, technicalwriting
Published: 2021-06-03 13:55:39

✨ I'm getting PUBLISHED ✨

My most recent book proposal was accepted by not 1, but 2 publishers! I'm humbled to have been given the opportunity to select to work with Apress.

📚 Designing Developer Documentation as a Product
🗓 Early 2022

It doesn't feel real quite yet, but looking at the official Apress contract sure helps make it real! Eeek!

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

A big thank you to @dabit3 who first introduced me to contacts in acquisitions at both Manning and O'Reilly. Next thank you goes to [Corey Quinn](https://twitter.com/QuinnyPig) for pushing me to not go with the first publishing house that accepts me. He also introduced me to Apress folks.

I've dreamed and had the goal of getting published since I was 8 years old. It still feels unreal to me! I am so excited for the dream to come true! This vid is a little longer than 5mins, but I wanted to tell my story, so worth it.😁

{% youtube RYRa-yfy7S0 %}

Lastly, thank you all who are responding with such enthusiasm already to my book! 📚🤗

{% twitter 1400296654067179523 %}

{% twitter 1400260284384694280 %}

{% twitter 1400296157255962625 %}

{% twitter 1400206857998934018 %}

{% twitter 1400211472999804928 %}

{% twitter 1400431996766146563 %}

{% twitter 1400435353920720898 %}

{% twitter 1400487270625558529 %}

{% twitter 1400490008050470914 %}

{% twitter 1400491391675998210 %}
Dockerizing an angular app
Tags: angular, docker, googlecloud, cavepot
Published: 2021-06-03 13:55:38

In this article I will show you how to dockerize an angular application using nginx server. If you would like more information about the nginx server  you can find it here: https://www.nginx.com/

To get started we create a dockerfile with two stages:

**Stage 1**
Installing and building the angular application:
1. Copy the angular code from a local machine to a docker machine.
2. Copy the packages.json to install dependencies.
3. Install the angular-cli and npm dependencies.
4. Build an angular application.


For this stage we use a node machine image from the dockerhub https://hub.docker.com/_/node

**Stage 2**
1. Copy the angular dist folder from the previous docker machine named build on to the nginx location folder.
2. Then we use the default cmd that starts the nginx server. 

For this stage we will use a node machine from the dockerhub https://hub.docker.com/_/nginx

```
FROM node:12.7-alpine AS build
WORKDIR /app
COPY / ./
COPY package*.json ./

RUN npm install -g @angular/cli@10.0.4 && \
    npm install && \
    ng build
COPY . .
```

### STAGE 2: Run ###
```
FROM nginx:1.17.1-alpine
WORKDIR /app
COPY --from=build /app/dist/ui /usr/share/nginx/html
```

Once that is done, we will create the Dockerfile, and build the image to run it.


```
> docker build -t <image_name> -f Dockerfile .
```

Now we can verify if the image is created by running the following command.

```
> docker images
```

Now that we have created the image in order to run it we have two options:. 
1) Run it using the docker command line or 2) run it using the docker-compose.
If we decide to run it using the docker-compose we have to create a `docker-compose.yml` file like this:


```
version: '3'
services:
    server:
        image: <image_name>
        ports:
            - "80:80"
        tty: true
        expose:
            - "80" 
        stdin_open: true
        environment:
            - MODE=dev
        command: <command to run>
```

If we want to run a command when we run the image we can specify on command.
In addition to that, we can run the image without the docker-compose by using a command line.


```
docker run -d -p 80:80 <image_name> command
```

Hope you liked and also helps you in case you have to dockerize an angular app.
Learn html by building google home page
Tags: webdev, html, beginners
Published: 2021-06-03 13:53:16

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- comments: wil not be displayed, but part of the html document when loaded  -->
    <!-- image  -->
    <img alt="Google" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
    <br />
    <!-- line break -->
    <input />
    <!-- input  -->
    <br />
    <br />
    <!-- buttons clickable  -->
    <button>Google Search</button>
    <button>I am feeling lucky</button>
    <br />
    <br />
    <!-- labels -->
    <label>Google offered in:</label>
    <!-- hyper links -->
    <a href="#">हिन्दी</a>
    <a href="#">ಕನ್ನಡ</a>
</body>
</html>
```
My Coding Journey so far...
Tags: beginners, webdev, codenewbie, learning
Published: 2021-06-03 13:47:14

Hi Mika here,
Also Known as Malcolm.

I have been working in the tech industry for the last 5 years. Starting off with a career in IT as a 1st Line software support engineer. I gradually worked my way up within my respective field, however as I began to gain a deeper knowledge of the tech industry and myself as a creative deep down. I always had the sense to merge my creative side with the tech side.

This is where I saw the potential of Developing and getting into coding as an avenue for me. I started embarking on my coding journey around the tail-end of 2019, and I was on-off studying and taking courses up to now. 

Now I am doing coding full time and trying my best to become qualified. At the moment I have completed a few courses in Webdesign, java and javascript, While studying Python.

I am currently working on my portfolio site to get the ball on my Developing career rolling. Coding is definitely challenging but at the same time it feels rewarding to have something you built up from scratch realised before your very eyes.

This is definitely the source of reasons why this is keeping me here, and I cant wait to see what else I can create and develop.
I have so many ideas for projects that I want to create and work on. So as for now I am trying to do one project at a time. Starting with my partners own Graphic design website.

Please follow my journey and hopefully we can get better at coding together.

Good Day,
Mikazuki/ Malcolm.
Azure Transparent Data Encryption
Tags: azure, security, cybersecurity
Published: 2021-06-03 13:16:03

Azure Transparent Data Encryption or TDE is a technique of encrypting data at rest, mainly database files, at the file level. This solves the problem of protecting the data at rest. This performs real-time encryption and decryption of the data, their associated backups, and the log files without any change in the application codebase. This concept is applicable for SQL Database, SQL Managed Instance and Azure Synapse Analytics.

TDE is called transparent because the authorized users of the database do not need to create any macros or any special configuration to be able to access the data.

TDE performs the encryption and decryption of data at the page level whereby each page is decrypted as its read into the memory and is encrypted again as its being written in to the disk. The encryption happens using a Symmetric Key known as Database Encryption Key(DEK). The DEK is a symmetric AES256 key. This key is further encrypted using the Key Encryption Key(KEK). As the database starts the KEK decrypts the DEK and is then used to decrypt and re-encrypt the database files in the SQL Server database engine. The DEK is further protected by TDE Protector which is set at the server level and is inherited by all the databases on the specific server. The TDE protector is either a service-managed certificate (service-managed transparent data encryption) or an asymmetric key stored in Azure Key Vault (customer-managed transparent data encryption).

All the newly created databases are encrypted by using service managed TDE by default. SQL Databases created before May 2017 are not encrypted. Similarly, existing SQL Managed Instance databases created before February 2019 are not encrypted by default.

TDE cannot be used to encrypt system databases, for instance the master database, in Azure SQL DB and Azure SQL MI. This database contains the objects that are needed to perform the TDE operations on the user’s databases. To overcome this, Azure provides a feature called Infrastructure Encryption which encrypts the system databases including the master.

[Microsoft Doc](https://docs.microsoft.com/en-us/azure/azure-sql/database/transparent-data-encryption-tde-overview?tabs=azure-portal)