teleren/devto huggingface dataset:
JavaScript Data Structures: Doubly Linked List: Intro and Setup
Tags: beginners, tutorial, javascript, webdev
Published: 2019-12-04 16:22:16

---
title: "JavaScript Data Structures: Doubly Linked List: Intro and Setup"
description: "JavaScript Data Structures: Doubly Linked List: Intro and Setup"
published: true
tags: ["Beginners", "Tutorial", "JavaScript", "Webdev"]
series: JavaScript Data Structures
---

## Intro

After completing the [series about the Singly Linked List](https://dev.to/miku86/javascript-data-structures-singly-linked-list-2og), we start with the Doubly Linked List.


### What is a Doubly Linked List?

- the Doubly Linked List consists of nodes
- each node has a value
- each node has a pointer to the previous node (or null at the beginning of the list)
- each node has a pointer to the next node (or null at the end of the list)
- the List has a head (= beginning)
- the List has a tail (= end)
- the List has a length (= how many nodes are in the List)
- the List has no index like an Array
- "doubly" means every node has two connections (one to the previous node and one to the next node)

### Example

`A <===> B <===> C`

- A: prev: null
- A: next: B
- B: prev: A
- B: next: C
- C: prev: B
- C: next: null

### Big O of Doubly Linked List

- Access: `O(N)`
- Search: `O(N)`
- Insert: `O(1)`
- Delete: `O(1)`

---

## Setup

```js
// a Node has a value, a pointer to the previous node (= prev), a pointer to the next node (= next)
class Node {
  constructor(value) {
    this.value = value;
    this.prev = null;
    this.next = null;
  }
}

// a Doubly Linked List has a length, a beginning (= head), an end (= tail)
class DoublyLinkedList {
  constructor() {
    this.length = 0;
    this.head = null;
    this.tail = null;
  }
}
```

### Result

```js
const newNode = new Node(1);
console.log(newNode);
// Node { value: 1, prev: null, next: null }

const newDLL = new DoublyLinkedList();
console.log(newDLL);
// DoublyLinkedList { length: 0, head: null, tail: null }
```

---

## Next Part

We will implement our first method to the list. If you want to be notified, [subscribe](https://miku86.com/)!

---

## Questions

- What do you think is a suitable use case for a Doubly Linked List?
- Can you find some advantages against a Singly Linked List?
- Can you find some disadvantages against a Singly Linked List?
What Is Software Project Management?
Tags: projectmanagement, softwareproject
Published: 2019-12-04 16:08:18

Software project management is a way of software development. There are a systematic approach to make profitable software. That managed by project manager.

Project management is mostly happened by SDLC Process (Software Development Life Cycle). Such as step by step process Planning, Designing, Coding, Testing, Maintaining, Etc.

You can follow this article to get more information

Read: <a href="https://shiv1367.com/what-is-software-project-management-definition">What Is Software Project Management</a>.
How Does Special Letters Work?
Published: 2019-12-04 15:38:30

The font that you pick to express yourself often gives away the type of person that you are. For this very reason, in order to brighten up and add value to your social media presence, the special lettering generator is a tool that is absolutely necessary. With the help of the special letters generator, you’ll be provided with a large number of fonts and options to choose from.

<img alt="Russian calligraphic alphabet. Vector cyrillic alphabet. Contains lowercase and uppercase letters, numbers and special symbols. - Royalty-free Alphabet stock vector" gi-track-comp-download="" src="https://media.istockphoto.com/vectors/russian-calligraphic-alphabet-vector-cyrillic-alphabet-contains-and-vector-id1051104200" title="Russian calligraphic alphabet. Vector cyrillic alphabet. Contains lowercase and uppercase letters, numbers and special symbols. - Royalty-free Alphabet stock vector">
<b>Aesthetic Text Generator</b>

The characters copy and paste is a fun, efficient and easy to use font generator. More often than not, we see special, aesthetic, fun and fancy looking text appear on several websites however when we wish to copy it and paste it elsewhere such as on different social media platforms like Facebook, Twitter, Tumblr, YouTube, etc.

We always fail to do so and the text fails to appear in the new special style font that we want it to. The <a href="https://fontvilla.com/special-letters/">special letters copy and paste</a> uses Unicode as a result of which we can easily copy the text that we have created using the text generator and paste it wherever we want without any issues at all. By using the special letter symbols, it appears as if the font has been changed however in reality this is not the case at all.
The Ruby on Rails Whitepaper [Past Rubies]
Tags: ruby, rails
Published: 2019-12-04 15:37:51

__Past Rubies is a tiny weekly newsletter that shares curated historical content from the Ruby community. Consider it Ruby's version of &#39;on this day in history'. New issues every Wednesday - [subscribe here](https://www.getdrip.com/forms/275494850/submissions)__

## [The Ruby on Rails White Paper, 10 years later](https://web.archive.org/web/20110818131411/http://infoether.com/RubyRailsEcosystemFall2009.pdf)

<div class="styled-image">![4vgczuu](https://i.imgur.com/4vGcZuU.png)</div>

_This was actually released in the *autumn* of 2009, but was making the rounds on blogs a decade ago this week as more people discovered it. InfoEther and Mark Gardner released a very comprehensive Ruby on Rails whitepaper which covered everything from the current state of the framework, estimated developer population, to the community and ecosystem. For those of us who have been around a while or even fancy ourselves a bit of a "Ruby Historian", this is an unrivaled snapshot into the "State of Rails" in 2009._

## [It's time for... SCIENCE!](https://www.youtube.com/watch?v=kgDqUHWVw4A)

<div class="styled-image">![Ttbz6zs](https://i.imgur.com/TTbZ6zs.png)</div>

_This week five years ago we got to see [Jesse Toth](http://jesseplusplus.com/) give a talk about their work on Github's [Scientist](https://github.com/github/scientist). This allows developers to compare, via the lens of 'science experiments', old code and refactored code. Enjoy the talk and the code!_

## [Snakes and Rubies Conf](https://web.archive.org/web/20060115033010/http://snakesandrubies.com/event/)

<div class="styled-image">![Siyaykr](https://i.imgur.com/SIyaykR.png)</div>

_A whopping fourteen years ago saw Snakes and Rubies Conf, a collaborative conference between the Ruby and Python programming communities. [You can check out a wrapup here](https://web.archive.org/web/20080128102833/http://www.djangoproject.com/weblog/2005/dec/04/snakes_and_rubies/), and plenty from DHH and crew at the link above. Since I run everything through the wayback machine, most of the old links SHOULD work._

## [In memory of Ezra Zygmuntowicz](https://www.youtube.com/watch?v=xG1S9ZPCy2Q)

<div class="styled-image">![Itylwip](https://i.imgur.com/ITYLwip.png)</div>

_In a massive loss for the Ruby community, we found out about the passing of Ezra five years ago this last week. To honor his memory, we have this very kind tribute from Mike Perham back in 2014\. [There is also this magnificent talk from Ezra himself where he goes through a lot of his journey.](https://www.youtube.com/watch?v=Alko6wQo8mk)_
Big-O: A Hitchhiker's Guide
Published: 2019-12-04 15:27:48

## An Analogy 

Imagine you are starting a pie company. You want not only to make delicious pies, to build an efficient process for making delicious pies. You'll need to build machines that make pies. At a minimum, you'll need to measure a machine's performance. Ideally, you'll be able to reliably *predict* a machine's performance.

In this analogy, your code (more specifically, your *algorithm*) is your pie machine. Benchmarking tools are your way to measure performance, and Big-O is your way to predict performance.

## An Overview
Big-O is a notation. It's a back-of-the-envelope way for engineers to communicate algorithm runtime complexity to each other. Don't be intimidated by **runtime complexity**. Some algorithms solve the same problem much more efficiently than others. The faster algorithm is said to have a lower runtime complexity than the other. Runtime complexities always reflect the *worst case* scenario of an algorithm, for example searching through an array and the item you were looking for was the last element in the array.

Take a look at the image below from the [Big-O Cheatsheet](https://www.bigocheatsheet.com/). This site is a great resource for getting familiar with algorithms and their runtimes. 

![BigO Cheatsheet](https://miro.medium.com/max/2928/1*5ZLci3SuR0zM_QlZOADv8Q.jpeg)

This chart compares the runtime complexities of seven different algorithm types at varying input lengths. **n** here represents the size of an input; a greater n value is a greater input length. This chart tells us that some algorithms' runtimes become immeasurably complex even for small inputs, and that some algorithms' runtimes remain 'simple' even for large inputs. Below, I'll provide some examples for O(1), O(log n), O(n), O(n log n), and O(n^2).

## Some Examples

### O(1)

O(1) has the lowest runtime complexity. It makes no difference what the size of the input is. 

* Selecting the first or last element of an array.

### O(log n)

For O(log n) logarithmic algorithms, the runtime will approach an asymptote and plateau as the data set increases in size.

* A binary search tree.

### O(n)

O(n) algorithms are said to have a linear runtime. Their runtime is linearly proportional to their input size.

* Filtering an array.

### O(n log n)

O(n log n), or linearithmic, algorithms are ones where you perform logarithmic algorithms n times.

* Sorting an array. Think: sorting is like running search a bunch of times in a row. 

### O(n^2 )

O(n^2 ) or quadratic algorithms have runtimes that are proportional to the square of the input size.

* Looking for duplicates in an array, bubble sorts, or any kind of nested iteration. 



You may notice that I skipped over O(2^n ) and O(n!). I did this because you are less likely to encounter them than the other algorithm types. Because of their high runtime complexity, they are not a great choice for most tasks.
State machine advent: Visualize your state machines with diagrams as you code (4/24)
Tags: javascript, typescript, react
Published: 2019-12-04 15:26:33

[Yesterday](https://dev.to/codingdive/state-machine-advent-baby-s-first-state-machine-with-xstate-3-24-3b62), we wrote our very first state machine in XState. 

```javascript
const lightSwitchMachine = Machine({
  id: 'toggle',
  initial: 'inactive',
  states: {
    inactive: {
      on: {
        TOGGLE: 'active'
      }
    },
    active: {
      on: {
        TOGGLE: 'inactive'
      }
    },
  }
});
```

Just like any other code, reasoning about it once its written can be difficult especially as the complexity of our machines will increase. Here is where one of the unique traits of state machines come into play. Because we have modeled every possible state and their transitions in a centralized JSON object, and the fact that XState is compatible with a protocol called SCXML (short for statechart XML), we can copy the exact state machine from above into a visualizer which will turn our code into a nice looking graph.

https://xstate.js.org/viz/?gist=05c0640a118c35aa236bccc506d2b243

The visualizer works amazingly well and is a very interactive tool. You can click on the `toggle` button which will send a toggle event to your machine. Observe how the machine will transition from the `inactive` to the `active` state afterward.

By using the visualizer, we can now reason about our code more easily, share the diagram with our coworkers which can be super helpful when communicating with non-technical people and visualize changes to our state machine by editing the machine directly within the visualizer.

Looking at the graph is a great way to determine bugs in your state machine logic (such as missing transitions) that you wouldn't even notice by solely looking at your code. 

### About this series
Throughout the first 24 days of December, I'll publish a small blog post each day teaching you about the ins and outs of state machines and statecharts.

The first couple of days will be spent on the fundamentals before we'll progress to more advanced concepts.
Day 1 — Introduction - Learning Node JS In 30 Days [Mini series]
Tags: node, javascript, codenewbie
Published: 2019-12-04 15:22:16

Node.js is an open-source, cross-platform, JavaScript run-time environment that executes JavaScript code outside of a browser. (Wikipedia)

*Hard to understand right?*

__If I just give a short intro about it then__
- It is platform which allows us to run JavaScript on a computer/server
- CRUD options for files (Create, Read, Update, Delete)
- Can use with any type of database

__Why node is so popular__
- JavaScript everywhere
- Super fast
- Lightweight
- Huge ecosystem
- Great for real time application
- High performance
- Easy to learn

Now Tell Me Do you like Node Js ?

Originally it published on [nerdjfpbblog](https://blog.nerdjfpb.com/day1-nodejsin30days/) and graphical version on [instagram](https://www.instagram.com/p/B5p3r17ghLK/). you can connect with me in [twitter](https://twitter.com/nerdjfpb) !

See you on next one!
Giving back to the open-source tools we run on
Tags: opensource, gratitude
Published: 2019-12-04 15:22:13

---
title: Giving back to the open-source tools we run on
published: true
description: My 24 Pull Requests Alternative
canonical_url: https://meeshkan.com/blog/giving-back-to-open-source/
tags: opensource, gratitude
---

The annual [24 Pull Requests](https://24pullrequests.com/) challenge encourages developers to give back to the open-source community by sending 24 pull requests between December 1st and December 24th. Last week, however, it was announced that 24 Pull Requests will be taking a break for 2019.

While I was sad to hear that 24 Pull Requests isn't happening this year, I still want to use the month of December as an opportunity to give back to the open-source tools that we use at Meeshkan. We're a small startup, so we greatly benefit from generous maintainers who choose to make their tools open and available.

But 24 pull requests between now and December 24th is... a lot. So I'm modifying the challenge a bit.

### 🎁 December 2019 Goal 🎁

In the spirit of the holidays, I will make at least one pull request per week to different tools that we use regularly at Meeshkan.

These pull requests could be 'little gifts of code' like the original challenge suggests or maybe I'll continue [my Hacktoberfest mission](https://dev.to/meeshkan/how-to-remove-condescending-language-from-documentation-4a5p) of removing condescending language from documentation. Who knows, let's see where this goes!

If you'd like to join me, here are some tools that we use at Meeshkan with open issues:
* [alex](https://github.com/get-alex/alex/issues)
* [commander.js](https://github.com/tj/commander.js/issues)
* [fp-ts](https://github.com/gcanti/fp-ts/issues)
* [jest](https://github.com/facebook/jest/labels/Help%20Wanted)
* [jsdom](https://github.com/jsdom/jsdom/issues)
* [node-fetch](https://github.com/bitinn/node-fetch/issues)
* [mocha](https://github.com/mochajs/mocha/issues)
* [oclif](https://github.com/oclif/oclif/issues?q=is%3Aissue+is%3Aopen)
* [prettier](https://github.com/prettier/prettier/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)
* [sinon](https://github.com/sinonjs/sinon/issues)

You can also find more open-source initiatives on the [24 Pull Requests website](https://24pullrequests.com/).

Merry hacking 🥂
Creating GIFs from Videos using FFMPEG
Tags: audiovideo
Published: 2023-01-06 01:49:50

---
title: Creating GIFs from Videos using FFMPEG
published: true
date: 2019-12-04 15:13:35 UTC
tags: AudioVideo
canonical_url: https://brandonrozek.com/blog/videosandgifs/
---

I like using GIFs in Google Slides because it doesn’t require any interaction to start playing right away. Therefore, I looked at a couple resources to add a GIF from a video into my presentation. Of course this is all using one of my favorite terminal tools `ffmpeg`.

First of all, I wanted to include a video of a bot playing Pong. The video was a little long, so I decided speed it up for a more time-lapse type feel.

[From the FFMPEG website](https://trac.ffmpeg.org/wiki/How%20to%20speed%20up%20/%20slow%20down%20a%20video): To 10x the speed `ffmpeg -i input.mkv -filter:v "setpts=0.1*PTS" output.mkv`

You just need to replace the `0.1` with the appropriate decimal number to change the speed.

Giphy has a great [writeup](https://engineering.giphy.com/how-to-make-gifs-with-ffmpeg/) describing the commands to use in order to make your GIF look nice.

```
ffmpeg -i inputvideo.mp4 -filter_complex "[0:v] palettegen" palette.png
ffmpeg -i inputvideo.mp4 -i palette.png -filter_complex "[0:v][1:v] paletteuse" output.gif

```
WhatsApp link preview is weird
Tags: preview, gatsby, site, opengraph
Published: 2019-12-04 03:56:34

So, my day as a web developer today was described by this image: 
![My day as a dev](https://i.imgur.com/HMAzPoo.png)

As it may not be so easy to understand, I was **testing the link preview** feature of Whatsapp for a website I've been developing. Being a real fan of using the preview (and waiting a couple of seconds after I paste some article's URL on my IM's), I was very determined to make it work for this site in particular, but for some reason unknown to me it was not. I was adding the correct `meta` tags using [OpenGraph](https://ogp.me/) and it was working flawlessly on Facebook, Twitter, and Telegram. But not Whatsapp.

I've searched everywhere for this problem: SOF, `react-helmet`'s Github, Gatsby.js community... And every little thing I would change, trying to make it work, would need another deploy so it took a while. After a lot of "solutions" that included changing the image dimensions, adding a second tag and making the title a bit shorter, I've come across a tiny SOF comment that didn't have any upvote and would comment about **WhatsApp not liking style tags before the meta tags**. At first I didn't give it any credit, as it was improbable and difficult to try, since Gatsby is the one that builds the final `index.html`.

But eventually, after a lot of frustration, I had to try this last solution. This time, I changed the built code produced by Gatsby putting the `meta` tags just after the beginning of the `head` section. Deployed the files to a temporary [now.sh](https://zeit.co/home) site and gave it a try. It worked.

I was just as happy as I was shocked. This is the kind of implementation detail that you SHOULD disclose to developers. 

After all, it was the [tachyons](https://tachyons.io/) library that I've included directly on my custom CSS and it took some space. After removing it and replacing it by a CDN, it started working. It's valid to say that after removing _tachyons_, some other CSS was still included before the `meta` tags, so the problem was actually **the size of the CSS inside the style tag**.

*edit:* [Vitor Oliveira](https://dev.to/vitorolivg) has pointed out another great way of solving this problem: **Sorting the head tags with the `meta` data first.** For this, you need to edit (or add) a `gatsby-ssr.js` exporting the following function:
```javascript
export const onPreRenderHTML = ({ getHeadComponents, replaceHeadComponents }) => {
  const headComponents = getHeadComponents();
  headComponents.sort((a, b) => {
    if (a.type === 'meta') {
      return -1;
    } else if (b.type === 'meta') {
      return 1;
    }
    return 0;
  });
  replaceHeadComponents(headComponents);
};
```
Welcome Thread - v51
Tags: welcome
Published: 2019-12-04 15:02:47

---
title: Welcome Thread - v51
published: true
description: Welcome to DEV! A thread of hellos and intros.
tags: welcome
---

![smiling sloth](https://media.giphy.com/media/OocLVILtd7ybm/giphy.gif)

### Welcome to DEV!

1. Leave a comment below to introduce yourself! You can talk about what brought you here, what you're learning, or just a fun fact about yourself.

2. Reply to someone's comment, either with a question or just a hello. 👋 

**Great to have you in the community!**
Dear Women & Girls
Tags: womenintech, inclusion, diversity
Published: 2019-12-04 14:41:36

---
title: Dear Women & Girls
published: true
description: You are smart and deserving.
tags: #womenintech #inclusion #diversity
cover_image: https://firebasestorage.googleapis.com/v0/b/ashleemboyer-2018.appspot.com/o/images%2Fdearwomenandgirls.png?alt=media&token=5ae75ee7-bdca-4f00-aae0-8bffcde759c6
canonical_url: https://ashleemboyer.com/dear-women-and-girls
---

*Cover image alt: Header reading this blog post's title on a blank piece of paper sitting atop a desk with writing pens and ink.*

*Originally posted [on my personal blog site](https://ashleemboyer.com/dear-women-and-girls).*

Dear Women & Girls,

Take up space. You are smart and deserving. If a man or boy tries to make you feel otherwise, refer to this list of statements below. Thanks to [@necessaryaf](https://twitter.com/necessaryaf/status/1193608467904368642) on Twitter for this list.

1. You interrupted me, I’m not finished talking.
2. No.
3. That isn’t funny.
4. That isn’t appropriate.
5. I already know that.
6. That won’t be necessary.
7. Leave me alone.
8. You're making me uncomfortable.
9. Stop ignoring what I’m saying.
10. You owe me an apology.
11. You don't need to be that close to me.
12. If you insist on speaking to me in this manner, I’m going to ask you to leave/I will not continue this conversation with you.

We're socially trained to soften our language, but we can change that.

Signed,

A Tired Woman in Tech

---

Did you know I have a newsletter? 📬

If you want to get notified when I publish new blog posts or make major project announcements, head over to [https://ashleemboyer.com/newsletter](https://ashleemboyer.com/newsletter).

---

*[Image](https://unsplash.com/photos/Oz_J_FXKvIs) by [Kelly Sikkema](https://unsplash.com/@kellysikkema) on [Unsplash](https://unsplash.com).*
Daily Challenge #131 - Remove Anchor from URL
Tags: challenge
Published: 2019-12-04 14:36:41

---
title: Daily Challenge #131 - Remove Anchor from URL
published: true
series: Daily Challenge
description: Complete the function/method so that it returns the URL with anything after the anchor (#) removed
tags: challenge
---

Complete the function/method so that it returns the URL with anything after the anchor (#) removed.

*Examples*

`# returns 'www.codewars.com'`
`remove_url_anchor('www.codewars.com#about')`

`# returns 'www.codewars.com?page=1'` 
`remove_url_anchor('www.codewars.com?page=1')` 
   

***
_This challenge comes from jhoffner on CodeWars. Thank you to [CodeWars](<https://codewars.com/>), who has licensed redistribution of this challenge under the [2-Clause BSD License](<https://opensource.org/licenses/BSD-2-Clause>)!_

_Want to propose a challenge idea for a future post?  Email **yo+challenge@dev.to** with your suggestions!_