teleren/devto huggingface dataset:
Let's explore the setTimeout and setInterval methods in JavaScript
Tags: javascript, codenewbie, webdev, beginners
Published: 2020-12-04 11:51:44

#The setTimeout() method
The `setTimeout()` method calls a function after a specified time provided in milliseconds. This method takes a function as a first argument and time in milliseconds as the second argument. You can write your logic inside the function body which will execute after the time you have specified.

For example: Show an alert box after 5 seconds.
```javascript
setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);
```
To cancel the timer, you can store the timer first in a variable and call the `clearTimeout()` function by passing the timer as argument.
```javascript
var timer = setTimeout(()=> {
    alert('Message after 5 seconds');
}, 5000);

clearTimeout(timer);
```
#The setInterval() method
The `setInterval()` method calls a function at specified interval of time provided in milliseconds. It takes function and time (in milliseconds) as its arguments.

For example: Print a random number every second.
```javascript
setInterval(() => {
    console.log(Math.random());
}, 1000);
```
To cancel the interval, you can store the interval first in a variable and call the `clearInterval()` function by passing the interval as argument.
```javascript
var interval = setInterval(() => {
    console.log(Math.random());
}, 1000);

clearInterval(interval);
```
#Create a running clock timer
To create a running clock, we need to take help of `setInterval()` method and `Date` object. We can get the current time by creating a new `Date` object.
```javascript
new Date().toLocaleTimeString(); // 4:50:16 PM
```
Once we create a `Date` object, it will give us the information of current date and time, it will not change its value with the passing time. So we need to create a fresh new `Date` object every time to get the latest date and time.

For this example, we will create a new `Date` object every second and print that.
```javascript
var date = setInterval(() => { 
   console.log(new Date().toLocaleTimeString());
}, 1000);
```
To show the running clock timer on a web page, you can create a `div` element in HTML and set the it’s `innerHTML` with the latest time every second.
```html
<div id="time"> </div>
```
```javascript
var date = setInterval(() => {
  const element = document.getElementById('time');
  element.innerHTML = new Date().toLocaleTimeString();
}, 1000);
```
#You may also like
* [Callback functions in JavaScript](https://jscurious.com/callback-functions-in-javascript/)
* [JavaScript Array forEach() method to loop through an Array](https://jscurious.com/javascript-array-foreach-method-to-loop-through-an-array/)
* [20 JavaScript Shorthand Coding Techniques that will save your time](https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/)


***Thanks for your time***
For more web development blogs, please visit [jscurious.com](https://jscurious.com)
Discord Bot - @Mr. Taskman
Published: 2020-12-04 11:39:31

I do not see how the tag of "help" is valid here, but here goes.

Currently working on an **open source project** with *2 others*. We are developing **a discord bot**, that could if all goes well, **render** other "third party" project management tools like *trello, jira, kanban*, and the like **obsolete**.

This project is being written in **Typescript**, a superset of *javascript*.
Current structure geared towards "**SOA**" - service oriented architecture.

If anyone is interested, feel free to contact me or hit me up on discord:
https://discord.gg/qhHjuqgJ6Y.
Repo: https://github.com/rbrtbrnschn/mr-taskman

Disclaimer:
Knowledge of typescript isn't a necessity, it's easier to learn than you think.
I do not know if posting this link is allowed, nor if I used the *help* tag properly.
Why a developer needs Kubernetes
Tags: kubernetes, docker
Published: 2020-12-04 11:27:09

So, let's say you use Docker, package applications into Docker images, and deploy to production. This works if you have a simple application and you are delighted with how it works. But this is not enough if the requirements for your applications are higher than usual.
For example:
* Fault tolerance. 
* Resource limits. 
* Scalability. 
* Combining applications into groups. 
* Collecting metrics and logs. 
* Security and access control. 
* Simple integration with different solutions.
* Launching applications on a schedule.

Among all options suitable to solve this tasks, Kubernetes stays the best choice.
It is an open-source orchestration system for managing a cluster of containers.More about how it works you can learn <a href="https://exceed-team.com/tech/why-a-developer-need-kubernetes">here</a>.

Kubernetes also have some useful components such as DNS for Services and Pods, Cluster level log, The package manager- Helm that ease and make the work with Kubernetes more interesting. 

Share your experience of working with Kubernetes in comments. Have you ever faced with troubles and found another better solutions?
UPDATE … FROM for database normalisation
Tags: postgres, sql, normalisation
Published: 2020-12-04 11:22:14

---
title: UPDATE … FROM for database normalisation
published: true
description: Some queries for quickly normalising data in a PostgreSQL database
tags: postgresql, sql, normalisation
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xofb85ep1xezobck91w1.jpg
---

## Normalisation?

Normalisation is the process of reducing the “copies” of data in a database, for example, in a `fixtures` table having a foreign-key to a `sport` table rather than repeating the value `Football` in each of the `fixtures`.

`fixtures`

| id | sport | home_team | away_team |
| --- | --- | --- | --- |
| 1 | Football | Liverpool | Everton |
| 2 | Football | Newcastle | Chelsea |
| 3 | Football | Sunderland | Arsenal |

Might become:

`sports`

| id | sport |
| --- | --- |
| 1 | Football |

`fixtures`

| id | sport_id | home_team | away_team |
| --- | --- | --- | --- |
| 1 | 1 | Liverpool | Everton |
| 2 | 1 | Newcastle | Chelsea |
| 3 | 1 | Sunderland | Arsenal |

`home_team` and `away_team` should probably also be foreign-keys to a `teams` table.

### Migration queries

Create the new `sports` table:
```sql
CREATE TABLE sports (
  id SERIAL PRIMARY KEY NOT NULL,
  Name VARCHAR(100) NOT NULL
);
```

Insert all of the sports:
```sql
INSERT INTO sports (name)
  SELECT DISTINCT sport FROM fixtures;
```

Add the `sport_id` foreign-key but don’t validate as there won’t be any values yet:
```sql
ALTER TABLE fixtures 
  ADD COLUMN sport_id INT;
ALTER TABLE fixtures
  ADD CONSTRAINT fixtures_sport_id
    FOREIGN KEY (sport_id)
    REFERENCES sports (id) NOT VALID;
```

Update all of the fixtures with the correct value for `sport_id`:
```sql
UPDATE fixtures SET sport_id = sports.id
FROM sports
WHERE fixtures.sport = sports.name;
```

Validate the foreign-key constraint:
```sql
ALTER TABLE fixtures
  VALIDATE CONSTRAINT fixtures_sport_id;
```
[Podcast] Barcoding podcast - Episode 13: Security
Tags: podcast, security, java
Published: 2020-12-04 11:13:23

Recently I was invited as a guest to one of my favorite Software Development, and Java podcasts called [Barcoding](https://anchor.fm/barcoding/).

![Alt Text](https://community.snyk.io/remoteimages/i/qgvd3b3vffk4q8zlhpv2.jpg)

[Barcoding](https://twitter.com/coding_bar) is developed by [Paulien van Alst](https://twitter.com/PaulienVanAlst) and Arnoud Rijpkema, two Software Developers from the Netherlands. In this podcast, they share their conversations about software development that they normally have at the bar on Friday night.

In Episode 13, I was invited to talk about Software Security, and it turned out to be a great experience; and time flew by recording this episode.

![Alt Text](https://community.snyk.io/remoteimages/i/aidljp3ywn2o252x9513.png)

Check out this episode with the links below and let me know what you think.

- [Anchor] (https://anchor.fm/barcoding/episodes/Episode-13-Security-en8cct/a-a40nj2l)
- [Spotify](https://open.spotify.com/episode/27qlIiswSDPXhhWtLIcjXg?si=UaRk60ICQJiZ1_SDAapKyw)
- [Apple podcast](https://podcasts.apple.com/us/podcast/episode-13-security/id1477504970?i=1000501060135)
- [Google podcast](https://podcasts.google.com/feed/aHR0cHM6Ly9hbmNob3IuZm0vcy9kN2FiMDJjL3BvZGNhc3QvcnNz/episode/NjI2MDAzZmUtMDBiOS00MDFhLTlhMWItZDdkNjhiNjMxMzBi?sa=X&ved=0CAUQkfYCahcKEwjI6M3Sl7TtAhUAAAAAHQAAAAAQAQ)
How to Make Horizontal Scroll Slider In a Very Simple Way.
Tags: css, html, webdev
Published: 2020-12-04 11:12:41

Horizontal slider is one of the most used sliders in design because of its simplicity and ease. Personally, while learning html and css I wish I could do somethings with those two and not having to write some javascript and also in a very simple and fast way.

I have seen a lot of approaches to this particular problem using css and I believe it might still be kind of hard for some upcoming developers. I came about going about this problem in a very simple way. 

The first step is to create a container that contain all the slides;

    <body>
        <div class="super-container">
            <div class="wrapper">
                <div class="slide" ></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
                <div class="slide"></div>
            </div>     
        </div>
        
    </body>

After that is the styling which is the major thing that is required to achieve what we want to achieve.

In this tutorial, we will use the css property white-space:nowrap to make the slides be on a horizontal line , side by side and the overflow:scroll property scroll will be responsible to make it scroll.

    .wrapper{
        width:100%;
        height: auto;
        padding-top:20px;
        overflow-y: hidden;
        overflow-x: scroll;
        white-space: nowrap;
    }

Notice from the code above that the wrapper containing the slides was given the property white-space:nowrap. White-space property talks about how a white space is handled in our wrapper div. The value nowrap read as no-wrap  makes it that the divs will never wrap to the next line.

So the next thing we need to do is to style the slides to look the way we want it. Some wants 3 items  to show before the next one while some wants  it to show one after the other.

In this tutorial, it will show one after the other and with a side hint of the next slide showing. Below is the code. 

    .slide{
        height:120px;
        width:80%;
        display: inline-block;
        background-image: url("https://www.refrigeratedfrozenfood.com/ext/resources/NEW_RD_Website/DefaultImages/default-pasta.jpg?1430942591");
        background-size: cover;
        border-radius:10px;
        margin-left:15px;
    }

The most important css property from the code above is display: inline-block which is very important in what we are trying to build. It makes the div stay side by side, it doesn’t add a line break as long as the divs still have space to stay side by side.

With just these few codes, we have created a horizontal slider. Personally, I believe this is the simplest way to go about it. 

![The Horizontal Slider.](https://paper-attachments.dropbox.com/s_DD4A91B367BAFF11D4D0443842EAC33D92023C2C172FFA4A6FBC1BB637E3F015_1607000555538_Screen+Shot+2020-12-03+at+5.01.32+PM.png)


Check the live code on codepen and also see the live result;

https://codepen.io/grace_2241/pen/YzGKjBw

And you can also check the video on my youtube channel and subscribe. 

https://www.youtube.com/watch?v=l0yqQNwSXBM&
How to take a screenshot in Flutter.
Tags: flutter, acctgen1, mobile, codenewbie
Published: 2020-12-04 11:11:56

A few days back, I was working on a payment application with flutter, so I wanted to able to generate a receipt inform of a screenshot to users after a successful transaction, so that’s how I started searching on how to take the screenshot and found a good solution for the idea. So I thought to myself, why not write an article about it, so others can just spend a few minutes integrating what took me a few hours to implement. So in this article, I would be teaching you how you can take a screenshot and save it to your gallery in flutter using some flutter package which would be specified later in this write-up, Stay tune.

**Read the full story on [Medium](https://acctgen1.medium.com/how-to-take-a-screenshot-in-flutter-f01e6fc57500):**
https://acctgen1.medium.com/how-to-take-a-screenshot-in-flutter-f01e6fc57500
Preparing to create a new project in Common Lisp
Tags: commonlisp, asdf, getstarted
Published: 2020-12-04 11:10:43

---
title: Preparing to create a new project in Common Lisp
published: True
description: 
tags: #commonlisp #asdf #getstarted
---

# Prerequisite

* SBCL
* rlwrap
* Emacs
* [Quicklisp](https://www.quicklisp.org/beta/)

# Emacs

* Install [slime](https://melpa.org/#/slime), and [paredit](https://melpa.org/#/paredit)
* Edit ~/.emacs
* [Add paredit hooks](https://www.emacswiki.org/emacs/ParEdit)
* set inferior-lisp-program

```Lisp
(setq inferior-lisp-program "sbcl")
```

Anyways, for me, I need more memory so I did this.

```Lisp
(setq inferior-lisp-program "sbcl --dynamic-space-size 13000")
```

# ASDF

* Edit ~/.config/common-lisp/source-registry.conf

```Lisp
(:source-registry
  (:tree (:home "Develop/thesis"))
  :inherit-configuration)
```

Develop/thesis must be changed to a path to a directory  in the home directory.

# The project

My project name is mt-seq and I put it in ~/Develop/thesis. 

Update 2020-12-06: Or the project can be created using [quickproject](https://www.xach.com/lisp/quickproject/). Thanks [Michał "phoe" Herda](https://functional.cafe/@phoe/105322143428705156).

*  ~/Develop/thesis/mt-seq.asd

```Lisp
(defsystem mt-seq
  :description "mt-seq"
  :author "Vee Satayamas"
  :license "LLGPL"
  :depends-on ("asdf" "lparallel" "bt-semaphore")
  :components ((:module "src"
		:serial t
		:components ((:file "packages")
			     (:file "mt")))))
```

* ~/Develop/thesis/src/mt.lisp

```Lisp
(in-package :mt-seq)

(defun toto (x)
  x)
```
 
* ~/Develop/thesis/src/packages.lisp

```Lisp
(defpackage :mt-seq
  (:use :cl :lparallel :bt-semaphore)
  (:export #:toto))
```

I expect that this should be sufficient for starting a new project in Common Lisp in a proper format.
Top Mobile App Development Trends to Watch Out in 2021
Tags: mobile, discuss, devjournal
Published: 2020-12-04 11:08:48

The year 2020 is all set to depart. This fateful year has left a scar of coronavirus outbreak and brought drastic changes in the way we live and work. Of course, the impact of this pandemic will be felt for a long time, the world looks at the technology with hope as we approach the year 2021. What looks certain is the fact that we will depend more on mobile apps in the coming time and advancements of emerging technology will work wonders to make apps more useful.

Take an example of on-demand apps. Almost every industry sector has started leveraging the benefits of customized on-demand apps for offering enhanced customer experience and improved services. These apps are designed to increase our convenience and have become a technological boon for many people across different classes of society. On-demand app development is thriving amid the rise in demand in this pandemic age.

Isn’t it interesting to go through the top technology trends that will reshape the future of mobile app development by giving it a Midas touch of innovation and creativity? Whether you are an entrepreneur, a startup owner, or an individual who just likes to use unique apps across various genres, you will certainly like to know the upcoming app development trends for the year 2021 and beyond. Let’s go through such trends in this post.

Top Technological Trends to Look for Mobile App Development in 2021

AR and VR technologies will rule
Augmented Reality (AR) and Virtual Reality (VR) are not new technologies for mobile app development, but the integration of their advancements always bring revolutionary changes in the user experience. Consider an example of the real estate sector. When features based on these concepts are integrated into the real estate app, they can give an immersive experience to the users while blurring the boundaries between the virtual and real worlds.

https://www.suriainternational.com/top-mobile-app-development-trends/
Discord Bot @Mr.Taskman
Published: 2020-12-04 11:02:49

I do not see how the tag of "help" is valid here, but here goes.

Currently working on an **open source project** with *2 others*. We are developing **a discord bot**, that could if all goes well, **render** other "third party" project management tools like *trello, jira, kanban*, and the like **obsolete**.

This project is being written in **Typescript**, a superset of *javascript*.
Current structure geared towards "**SOA**" - service oriented architecture.

If anyone is interested, feel free to contact me or hit me up on discord:
https://discord.gg/qhHjuqgJ6Y.
Repo: https://github.com/rbrtbrnschn/mr-taskman

Disclaimer:
Knowledge of typescript isn't a necessity, it's easier to learn than you think.
I do not know if posting this link is allowed, nor if I used the *help* tag properly.
5 array methods in JavaScript.
Tags: javascript
Published: 2020-12-08 04:29:32

---
title: 5 array methods in JavaScript.
published: true
date: 2020-12-04 11:00:00 UTC
tags: javascript
canonical_url: https://blog.murtajaziad.xyz/5-array-methods-in-javascript/
---

Arrays are used to store multiple values in a single variable, and here’s 5 methods for them.

* * *

### 1. push()

push() method adds one or more elements to the end of an array and returns the new length of the array.

```js
const animals = ["pigs", "goats", "sheep"];

const count = animals.push("cows");
console.log(count); // 4
console.log(animals); // ["pigs", "goats", "sheep", "cows"]
```

### 2. pop()

pop() method removes the last element from an array and returns that element. This method changes the length of the array.

```js
const plants = ["broccoli", "cauliflower", "cabbage", "kale", "tomato"];

console.log(plants.pop()); // tomato
console.log(plants); // ["broccoli", "cauliflower", "cabbage", "kale"]

plants.pop();
console.log(plants); // ["broccoli", "cauliflower", "cabbage"]
```

### 3. shift()

shift() method removes the first element from an array and returns that removed element. This method changes the length of the array.

```js
const array1 = [1, 2, 3];

const firstElement = array1.shift();
console.log(array1); // [2, 3]
console.log(firstElement); // 1
```

### 4. reverse()

reverse() method reverses an array in place. The first array element becomes the last, and the last array element becomes the first _be careful, as it changes the original array_.

```js
const array1 = ["one", "two", "three"];
console.log(array1); // ["one", "two", "three"]

const reversed = array1.reverse();
console.log(reversed); // ["three", "two", "one"]
console.log(array1); // ["three", "two", "one"]
```

### 5. find()

find() method returns the value of the first element in the provided array that satisfies the provided testing function.

```js
const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);

console.log(found); // 12
```
A Rubber Duck A Day, Keeps The Sneaky Bugs Away
Published: 2020-12-03 21:22:06

You may be shocked to see a Path toy as a methodology and still wondering what is the connection between a rubber duck and software engineering? Well, this toy has a deep story. Let's explore it together.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/EVnf7prY7J8Wc/giphy.gif">


<h1> What Is Rubber Duck Debugging? </h1>
The term rubber ducking is the shortened term of a rubber duck debugging which is a method of debugging code where you explain the problem or the concept line by line for a rubber duck that won't judge you.

<h1> How To Implement Rubber Duck Debugging? </h1>
Bring the rubber duck to your desk, then start by explaining what the code is supposed to do. After that, describe when the error has happened. For example, in the runtime or while you still writing the code. Then, try to trace the code and explain it aloud line by line to the rubber duck till you finish. After that, describe what are the approaches that you followed to fix the problem and what approach works and not works.

<h1> Rubber Ducking Under The Hood </h1>
Well, the Rubber duck is not a silly concept or merely a path toy. Actually, it hides a strong methodology that has been used in our life without a specific concept. How? Let's go with the following example for more clarification.
Assume that you want to clarify how the sound comes through the headphone to a curious 10-years-old boy, what will you do is describing all the processes precisely with the exact details in a proper way that suits his knowledge level as I explained in the previous topic.

The same strategy will go when you try to figure out a solution for your code problem after spending a lot of hours reading the code over and over to find a sneaky bug. Once you try to explain it out loud without skim-reading or glossing over the details, you force yourself to analyze the code until you find the bug.

<h1> Rubber Ducking Benefits </h1>
1. Helps you to solve the problem by yourself, which is a great way to enhance your skill in problem-solving.
2. Reducing Impostor Syndrome -there's an article about this concept below-.
3. Helps you to solve better since you tried to explain the code line by line to the duck.
4. Gives you a good opportunity to discuss your mistakes without being judged.

<h4> Final comment| </h4>
Never give up trying.

If you have any comments or questions, don't hesitate 🙏🏻
<h5>Resources: </h5>
<h6> {% medium https://medium.com/@joycekwon/rubber-duck-debugging-e7164317481d %}</h6>
<h6> {% link https://dev.to/rachelsoderberg/rubber-ducky-debugging-1jbe %}
 </h6>
<h6> {% medium https://medium.com/better-programming/imposter-syndrome-in-my-head-f58c9b3d0c4c %}
 </h6>
The prevention of flipping ids
Tags: rust
Published: 2020-12-04 10:56:33

---
title: The prevention of flipping ids
published: true
description: 
tags: #rust #rustlang
//cover_image: https://direct_url_to_image.jpg
---


Given I have a file of document id and text unit id. For example:

```cvs
doc-id, text-unit-ids
1,100,200,300
2,50,8,1,6
```

I want to keep them in a list of doc-id, text-unit-id pairs. For example:

```
1,100
1,200
1,300
2,50
2,8
2,1
2,6
```

So I defined my variable in Rust, as follow:

```Rust
let word_id_tu_ids: Vec<(u32, u32)> = vec![];
```

Sometimes I have a problem that I flipped them. I put a pair of text-unit-id and doc-id instead of text-unit-it and doc-id. For example, I put 100,1 instead of 100,1. 

By (u32, u32), the Rust compiler cannot help me. So I tried:

```Rust
type WordId = u32;
type DocId = u32;

fn push(w: WordId, d: DocId) {
    let mut v: Vec<(WordId, DocId)> = vec![];
    v.push((d, w));
}
```

It didn't help. So I tried struct instead. 

```Rust
struct WordId(u32);
struct DocId(u32);

fn push(w: WordId, d: DocId) {
    let mut v: Vec<(WordId, DocId)> = vec![];
    v.push((d, w));
}
```

Now the compiler can detect the error. However, maybe it is not clear to human eyes. So I defined another struct.

```Rust
struct WordId(u32);
struct DocId(u32);

struct WordIdDocId {
    word_id: WordId,
    doc_id: DocId,
}

fn push(w: WordId, d: DocId) {
    let mut v: Vec<WordIdDocId> = vec![];
    v.push(WordIdDocId {word_id: w, doc_id: d});
}
```

Now it is clear to human eyes and the compiler. Anyways, is it what people call over-engineering? What if I want to: 

```Rust
let u = w + 1;
```

We can do it in Rust, but the code is going to be even longer.