teleren/devto huggingface dataset:
LaTeX: Tables of Contents, Images, and Tables
Tags: latex, codenewbie
Published: 2021-05-12 16:41:56

Hello :) How are you today?

Today I am going to talk about the different tables of contents that we have available in LaTeX. These are three

1. `\tableofcontents` here appear the contents that you put in `\section{}`, `\subsection{}`, `\subsubsection{}`, `\chapter{}`, `\part{}` this is the title of the sections which are in your documents 

2. `\listoftables` here appear the content of the `caption` instruction which is inside the `table` environment

3. `\listoffigures` here appear the content of the `caption` instruction which is inside the `figure` environment


Let me focus on the `caption` command

# Caption Command

We meet the `caption` command in the `tabular` and `figure` environments but 

> `caption` has an optional option

The complete caption command is 

```
\caption[list]{table}
```

- `table` is the title shown under the table/image
- `list` is the tile shown in the `listoftables` / `listoffigures` 

So, you can have two *titles* for the same image

> You need to be careful with this, you need to put attention to the names you give to your image/table 

Sometimes the text in `table` is a brief description of the image and the text in `list` is the complete description of the image/table but this is not a rule to follow

That is all, thanks for reading :) 
follow me on Twitter `@latexteada`
LeetCode #2 (typescript)
Tags: algorithms, typescript
Published: 2021-05-12 16:24:26

# 2. Add Two Numbers

## Description

...

## Solution

```typescript

function addTwoNumbers(
  l1: ListNode | null | undefined,
  l2: ListNode | null | undefined
) {
  let result = new ListNode();
  let current = result;
  let carry = 0;
  let sum: number;
  while (l1 || l2) {
    sum = (l1?.val ?? 0) + (l2?.val ?? 0) + carry;
    current.next = new ListNode(sum % 10);
    current = current.next;
    carry = sum > 9 ? 1 : 0;
    l1 = l1?.next;
    l2 = l2?.next;
  }
  if (carry) {
    current.next = new ListNode(carry);
  }
  return result.next;
}

```



https://leetcode.com/problems/add-two-numbers/[https://leetcode.com/problems/add-two-numbers/]
3 ways to code Rock, Paper and Scissors in JavaScript (beginner, intermediate and advanced approach)
Tags: tutorial, javascript
Published: 2021-05-12 15:59:32

In this video I show you how to code Rock paper Scissors in JavaScript in not just one approach, but 3 different approaches.

I am doing this to show you just some of the ways you can solve one problem using JavaScript. I will be using a more beginner approach to start off with, and move onto more intermediate and advanced approaches.

This is a JavaScript tutorial so there will be no styling in this tutorial. That part is totally up to you :)

Please do share your finished games with me, I would absolutely love to see what you have made and how you have chosen to style your games!

00:00​ Introduction
01:18​ Beginner Rock Paper Scissors
17:28​ Intermediate Rock Paper Scissors
32:45​ Advanced Rock Paper Scissors

{% youtube RwFeg0cEZvQ %}

You can find the code for all three games here: https://github.com/kubowania/rock-paper-scissors-x3

___
In most videos I use Tabnine as my A.I autocompletion tool. You can download it for free here: http://bit.ly/tabnine-top-tool​

If you would like to buy me a coffee, well thank you very much that is mega kind! : https://www.buymeacoffee.com/aniakubow

Sign up for weekly coding tips from my newsletter partnership: https://bit.ly/JS-tips​

You can also find me on:
Twitter: https://www.twitter.com/ania_kubow
Instagram: https:///www.instagram.com/aniakubow

#codingbootcamp​​ #coding​
Mom's Blood Sugar Log
Tags: beginners, python, codenewbie, codecademy
Published: 2021-05-12 15:44:34

Last week, I signed up for Codecademy out of a sudden nudge. I didn't expect to be building anything remotely useful that soon, yet a short 5 days later, I ended up with a simple yet functional blood glucose log that I'd always wanted to build for my diabetic mother. Here is my first ever terminal program, built as my portfolio project for Codecademy's CS101 course.

First, I created a class `Records` to contain all the variables that come with a blood glucose record, including the timestamp and conversion calculation from my mom's mg/dL reading to the more widely used mmol/L metric. Class variables such as the start times of different meal periods also allow the data to be automatically tagged across the three meals + midnight instances when my mom gets her dose of insulin.

![the class Records](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm5exnwpksltmsfxexet.png)

The bulk of the program includes three main functionalities, including:
1. Create a new log by entering the latest reading
2. Retrieve all logs from a given date
3. Calculate the 2-week average reading (that is indicative of overall glucose levels) 

The records are all stored in a .csv file that could be easily printed for my mom to take to the doctor's office. 

![3 Main Functionalities](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5gvlnkm15dxv3gnlqpvk.png)

Last but not least, I put the running program into a loopable `script()` that called the functionalities previously defined. With the `rerun()` function, my mom can also return to the main menu and check the log after putting in the record.

![Script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a38ym9qz7nn6t61cyj0l.png)

Though the datetime and csv modules took a lot of googling to get around, I am thoroughly pleased with the result of this project. I look forward to learning other languages in the future that will enable me to create a more user-friendly GUI, such that my mom could actually use the application!

Here's the program running in full:
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9tu6lfm5n62tevyttukp.gif)

The code file and version history can be found on https://github.com/kateleext/blood_log
Gifit: Convert Screen Recordings to easy-to-share Animated gifs
Tags: gif, tutorial, macos, linux
Published: 2021-05-12 15:40:04

When building Grouparoo, the team often shares screen recordings of our work with each other. In many cases, the tools we are using (like Github, until recently anyway) could only embed image content into READMEs and Pull Requests. That meant that the humble animated gif was often the best way to share a video. Here is my personal script called `gifit` which uses the open source `ffmpeg` and `gifsicle` tools to make it super easy to convert any video file into an easy-to-share gif!

![Animated Gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g6q9dv0fhpenwo8g4i8l.gif)

```bash
#!/bin/bash

# This script required ffmpeg and gifsicle
# On OSX: `brew install ffmpeg gifsicle`

SECONDS=0
INPUT_FILE=$1
BASENAME="${INPUT_FILE%.*}"
OUTPUT_FILE="$BASENAME.gif"

echo "🎥 Converting $INPUT_FILE to $OUTPUT_FILE"

# Convert the video to a gif
ffmpeg -i $INPUT_FILE -pix_fmt rgb8 -r 10 $OUTPUT_FILE -loglevel warning -stats

# Compress the Gif
# Reduce the size to 1/2 the original (because we are recording a retina screen)
# Tweak the "lossy" argument to add more colors, but increase filesize
gifsicle -O3 $OUTPUT_FILE -o $OUTPUT_FILE --lossy=80 --scale=0.5

# How lng did it take?
ELAPSED="$(($SECONDS / 3600))hrs $((($SECONDS / 60) % 60))min $(($SECONDS % 60))sec"

echo "🎉 Complete in $ELAPSED"
```

Note that on OS X you will need to `brew install ffmpeg gifsicle` first.

So, to make the video above, I:

1. Used Quicktime to record my screen
2. Saved the video as `screenshot.mov`
3. Ran `gifit screenshot.mov` and I got `screenshot.gif`!
Modifying an Array Stored in an Object
Tags: javascript, tutorial, beginners, devops
Published: 2021-05-12 15:35:23

* Take a look at the object I've provided.
```
let user = {
  name: 'Kenneth',
  age: 28,
  data: {
    username: 'kennethCodesAllDay',
    joinDate: 'March 26, 2016',
    organization: 'freeCodeCamp',
    friends: [
      'Sam',
      'Kira',
      'Tomo'
    ],
    location: {
      city: 'San Francisco',
      state: 'CA',
      country: 'USA'
    }
  }
};

function addFriend(userObj, friend) {
  // Only change code below this line

  // Only change code above this line
}

console.log(addFriend(user, 'Pete'));
```
* The `user` object contains three keys. The `data` key contains five keys, one of which contains an array of `friends`. From this, you can see how flexible objects are as data structures. We've started writing a function `addFriend`. Finish writing it so that it takes a `user` object and adds the name of the `friend` argument to the array stored in `user.data.friends` and returns that array.
* Answer:
```
let user = {
  name: 'Kenneth',
  age: 28,
  data: {
    username: 'kennethCodesAllDay',
    joinDate: 'March 26, 2016',
    organization: 'freeCodeCamp',
    friends: [
      'Sam',
      'Kira',
      'Tomo'
    ],
    location: {
      city: 'San Francisco',
      state: 'CA',
      country: 'USA'
    }
  }
};

function addFriend(userObj, friend) {
  userObj.data.friends.push(friend)
  return userObj.data.friends
}
```
```
console.log(addFriend(user, 'Pete')); console will display 
[ 'Sam', 'Kira', 'Tomo', 'Pete' ]
```
Generating an Array of All Object Keys with Object.keys()
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-12 15:23:11

* We can also generate an array which contains all the keys stored in an object using the `Object.keys()` method and passing in an object as the argument. This will return an array with strings representing each property in the object. Again, there will be no specific order to the entries in the array.

* Finish writing the `getArrayOfUsers` function so that it returns an array containing all the properties in the object it receives as an argument.
```
let users = {
  Alan: {
    age: 27,
    online: false
  },
  Jeff: {
    age: 32,
    online: true
  },
  Sarah: {
    age: 48,
    online: false
  },
  Ryan: {
    age: 19,
    online: true
  }
};

function getArrayOfUsers(obj) {
  // Only change code below this line

  // Only change code above this line
}

console.log(getArrayOfUsers(users));
```
* Answer:
```
let users = {
  Alan: {
    age: 27,
    online: false
  },
  Jeff: {
    age: 32,
    online: true
  },
  Sarah: {
    age: 48,
    online: false
  },
  Ryan: {
    age: 19,
    online: true
  }
};

function getArrayOfUsers(obj) {
return Object.keys(obj)
}
```
```
console.log(getArrayOfUsers(users)); console will display 
[ 'Alan', 'Jeff', 'Sarah', 'Ryan' ]
```
I made a 100 days of code blog
Tags: 100daysofcode, showdev, webdev
Published: 2021-05-12 15:22:19

Link: https://100days-pontakorn.vercel.app/


Before the challenge, I had little or no motivation to code after studying. So, I decided to take this challenge but not really strictn. I don't use 1 hour rule because it might prevent coding after getting tired by studying in university. There is a some kind of "pause period" because I needed to study for the final exam.


Most projects are about frontend web development. Some of them are projects that related to the web development or can apply what I have learned from the project to the web. My goal is to practice and apply knowledge to improve myself for taking a job.


The blog is currently built with Nuxt and Nuxt Content. It is a great stack for simple blog.I use WindiCSS for styling because it generate only CSS I used and it integrates well with Nuxt.


I hope I can finish 100 days of code with myself improved significantly.
Iterating Through the Keys of an Object with a for...in Statement
Tags: javascript, devops, tutorial, beginners
Published: 2021-05-12 15:20:17

* Sometimes you may need to iterate through all the keys within an object. This requires a specific syntax in JavaScript called a for...in statement. For our `users` object, this could look like:
```
for (let user in users) {
  console.log(user);
}
```
* This would log Alan, Jeff, Sarah, and Ryan - each value on its own line.
* In this statement, we defined a variable user, and as you can see, this variable was reset during each iteration to each of the object's keys as the statement looped through the object, resulting in each user's name being printed to the console.

* Ex: We've defined a function `countOnline` which accepts one argument (a user object). Use a for...in statement within this function to loop through the users object passed into the function and return the number of `users` whose online property is set to `true`. An example of a users object which could be passed to countOnline is shown below. Each user will have an `online` property with either a `true` or `false` value.
* Note: dot-notation will cause errors in this challenge.
[square-bracket] notation must be used to call a variable property name.
```
{
  Alan: {
    online: false
  },
  Jeff: {
    online: true
  },
  Sarah: {
    online: false
  }
}
```
```
function countOnline(usersObj) {
  // Only change code below this line

  // Only change code above this line
}
```
* Answer:
```
let testUser = {
  Alan: { 
    online: false 
  },
  Jeff: {
    online: true 
  },
  Sarah: {
    online: false
  }
};


function countOnline(usersObj) {
  let onlineUsers = 0;
for (let user in usersObj) {
console.log(user); // console will display Alan, Jeff, Sarah
console.log(usersObj[user]); // console will display { online: false } { online: true } { online: false }
 if (usersObj[user].online === true) {
   onlineUsers++
 }
}
return onlineUsers;
};

console.log(countOnline(testUser)); // console will display 1
```
Detect Internet Connection Status In Browser
Tags: javascript, node, ux, webdev
Published: 2021-05-12 15:18:12

Hello everyone 👋

In this article, we are going to learn how can we detect the internet connection state on our website.

This can be very useful to improve user experience by showing snack messages or pop-ups when the browser is not able to connect to the internet.

### Implementation

We can get the current state of the connection by using `window.navigator.onLine`, which will return a `boolean` value.

- `true` if connected.
- `false` if not connected.

```javascript
const online = window.navigator.onLine;
if (online) {
  // Is connected to internet
} else {
  // Not connected to internet
}
```

> If the browser doesn't support `window.navigator.onLine` the above example will always come out as `false` or `undefined`.

#### Connection State Changes Listener

We can also detect the connection state by listening for network state change events i.e, `online` and `offline`.

```javascript
window.addEventListener('offline', function(e) {
    // Network disconnected
  }
);

window.addEventListener('online', function(e) {
    // Network connected
  }
);
```

It's very easy to implement but there are some side cases where it might give a false-positive result.

- The computer is connected to a mobile hotspot, but mobile internet is not working then also you can get an `online` status.

- The computer is running a virtualization software that has virtual ethernet adapters that are always "connected".

---

> Originally published on [blog.bibekkakati.me](https://blog.bibekkakati.me/detect-internet-connection-status-in-browser)

---

Thank you for reading 🙏

If you enjoyed this article or found it helpful, give it a thumbs-up 👍

Feel free to connect 👋

[Twitter](https://twitter.com/kakatibibek) | [Instagram](https://instagram.com/bibekkakati) | [LinkedIn](https://linkedin.com/in/bibekkakati)


---

If you like my work and want to support it, you can do it here. I will really appreciate it.

<a href="https://www.buymeacoffee.com/bibekkakati">
<img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=bibekkakati&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff">
</a>
Double comparison in Java
Tags: java
Published: 2021-05-12 15:01:20

Recently I was solving an interesting bug that came down to comparing two `Double` variables with `equals` method. It looks innocent, what can be wrong with something like `firstDouble.equals(secondDouble)`? 
The problem here is with how doubles are stored. To fit them into 64bytes (usually) they are rounded. 

See the example below:
```java
Double firstDouble = 0d;
for (int i = 1; i <= 42; i++) {
 firstDouble += 0.1;
}

Double secondDouble = 0.1 * 42;

System.out.println(firstDouble); // 4.200000000000001
System.out.println(secondDouble); // 4.2
System.out.println(firstDouble.equals(secondDouble)); // false
```

This inaccuracy is caused by rounding errors.
We need to use a different approach to compare those doubles. 

## Threshold method

If we do not have access to any libraries and want to solve this with Java only we can use something called the threshold method. 
Simply, we will subtract those doubles, make absolute value, and compare if the result is smaller than some very small number. 

```java
double epsilon = 0.000001d;
boolean result = Math.abs(firstDouble - secondDouble) < epsilon;
System.out.println(result); // true
```

That small number is called epsilon and the smaller it is the better the accuracy of the result. For most cases, 5 decimals should be enough. 

## Apache Commons Math

There is no utility method for this in JDK. Luckily for us, Apache Commons Math library has us covered. With it we can compare those doubles like so:

```java
double epsilon = 0.000001d;
boolean result = Precision.equals(firstDouble, secondDouble, epsilon)
System.out.println(result);
```

The epsilon has the same meaning as in the example above. 

There are similar methods in Guava and other libraries. 

---

You can follow me on [Twitter](https://twitter.com/pavel_polivka) to get more tips like this.
Contentful Updates: Introducing new APIs for managing bulk content
Published: 2021-05-12 14:59:25

Every month Shy from the Contentful Dev Rel Team will share his favorite changes from the [Contentful Changelog](https://www.contentful.com/developers/changelog/). 

This month is so jam packed he's made two videos. For this one he's sharing all of the details about the three newest [Contentful APIs for managing content in Bulk Content](https://www.contentful.com/developers/changelog/#introducing-new-apis-for-managing-bulk-content)
💻 What is TypeScript? A Practical Guide for Developers 🛠
Tags: typescript, devrel
Published: 2021-05-12 14:48:06

## What is TypeScript

[TypeScript](https://www.typescriptlang.org/) is a popular JavaScript superset created by Microsoft that brings [a type system](https://en.wikipedia.org/wiki/Type_system#Type_checking) on top of all the flexibility and dynamic programming capabilities of JavaScript.

The language has been built as an open-source project, [licensed under the Apache License 2.0](https://github.com/Microsoft/TypeScript/blob/master/LICENSE.txt), has a very active and vibrant community, and has taken off significantly since its original inception.

## Installing TypeScript

To get started with TypeScript and try out all the examples, you can either install the TypeScript transpiler on your computer (more about this in the following paragraph), use the [official online playground](https://www.typescriptlang.org/play) or any other [online solution](https://stackblitz.com) you prefer.

In case you want to try the examples locally, you need to install the command-line transpiler, which runs on Node. First, you need to [install Node.js and npm](https://nodejs.org/en/download/current/) on your system. Then, you can create a Node.js project and install the TypeScript transpiler package:

```bash
# Create a new directory for your project
mkdir typescript-intro

# Make your project directory the current directory
cd typescript-intro

# Initialize a new Node.js project
npm init -y

# Install the TypeScript compiler
npm i typescript
```

This will install the `tsc` (TypeScript Compiler) command in the current project. To test the installation, create a TypeScript file called `index.ts` under your project directory with the following code:

```typescript
console.log(1);
```

Then, use the transpiler to transform it to JavaScript:

```bash
# transpiling index.ts to index.js
npx tsc index.ts
```

This will generate a new file called `index.js` with the exact same code of the TypeScript file. Use the `node` command to execute this new file:

```bash
# this will output 1
node index.js
```

Although the transpiler did nothing else besides creating a JavaScript file and copying the original code to it, these steps helped you validate that your TypeScript installation is in good shape and ready to handle the next steps.

> **Note:** TypeScript versions can have substantial differences even though they get released as **minor** revisions. It's common to bump into transpilation problems after a minor version update. For that reason, it is better to install TypeScript locally in your project and execute it using `npx` when needed _instead_ of relying on a global TypeScript installation.

[Read more...](https://auth0.com/blog/working-with-typeScript-a-practical-introduction/?utm_source=content_synd&utm_medium=sc&utm_campaign=typescript)
Cron Job Tutorials - How to set up cron job for BackWPup?
Published: 2021-05-12 14:45:44


I installed BackWPup on my server, and I want to set up a cron job to trigger BackWPup's cron job script. What should I do to set up the cron job?

https://www.easycron.com/cron-job-tutorials/how-to-set-up-cron-job-for-backwpup

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wrjfm6gt0yj1v6ugshbh.png)
Change PowerShell Version used in PowerShell@2 - Azure DevOps Tricks #1
Tags: devops, azure, powershell
Published: 2021-05-12 14:45:32

Ran into a pipeline issue when using `ConvertFrom-Json -Depth 20` to load a JSON file in a `PowerShell@2` task in a DevOps pipeline. The `-Depth` parameter was throwing an error: 

> <figure><pre>ConvertFrom-Json : A parameter cannot be found that matches parameter name 'Depth'</pre><figcaption>Error message</figcaption></figure>


## What the ConvertFrom-Json docs say?

* <a href="https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/convertfrom-json?view=powershell-5.1" target="_blank">PowerShell 5.1</a>
  * Doesn't list a parameter `-Depth`. 
* <a href="https://docs.microsoft.com/en-us/powershell/module/microsoft.powershell.utility/convertfrom-json?view=powershell-7" target="_blank">PowerShell 7 (LTS)</a>
  * `-Depth`: Gets or sets the maximum depth the JSON input is allowed to have. By default, it is 1024. This parameter was introduced in PowerShell 6.2.

## What version of PowerShell is `PowerShell@2` using?
*note: this may differ depending on the Agent that is running the task.*

I added a line to the script to get the version:

> <figure><pre>   Write-Host "Version: ($PSVersionTable.PSVersion)"</pre> <figcaption>Extra line to show PowerShell version</figcaption></figure>

Output:

> <figure><pre>   Version: 5.1.17763.1852</pre><figcaption>PowerShell Version running on the Agent</figcaption></figure>

## How do we change the version?

This little snippet allows a script defined in a `PowerShell@2` task to relaunch in a specific version of PowerShell. 

> <figure>
<pre>
    if ($PSVersionTable.PSVersion -lt [Version]"7.0") {
        Write-Host "Version: $($PSVersionTable.PSVersion)"
        Write-Host "Re-launching as pwsh"
        pwsh -File $MyInvocation.MyCommand.Definition
        exit
    }
</pre>
<figcaption> From <a href="https://stackoverflow.com/a/31197015" target="_blank">StackOverflow</a>.</figcaption></figure>

Some other options if you want a specific version.

> <figure>
<pre>
    powershell -Version 2 -File $MyInvocation.MyCommand.Definition
</pre>
<figcaption>Specify a specific version of powershell</figcaption></figure>