teleren/devto huggingface dataset:
LinkedList Questions: [Optimal] Find Middle Element
Tags: algorithms, codenewbie, programming
Published: 2021-07-16 04:34:43

In this series of posts, I will discuss coding questions on the `LinkedList` Data structure.
The posts in this series will be organized in the following way,

1. Question Link ❓
2. Possible Explanation 📝
3. Documented C++ Code 🧹
4. Time and Space Complexity Analysis ⌛🌌

## The Question

Given a non-empty, singly linked list with head node `head`, return a middle node of the linked list.

If there are two middle nodes, return the second middle node.

[https://leetcode.com/problems/middle-of-the-linked-list/](https://leetcode.com/problems/middle-of-the-linked-list/)

> 💡 Give yourself at least 15-20 mins to figure out the solution :)

## Explanation
{% post https://dev.to/kathanvakharia/middle-element-of-linked-list-naive-approach-2589 %}

I hope you have read the previous article because I want to relate the ideas of both approaches rather than making you feel, an optimal solution is a completely new thing! 

> 👀 Observation: If you recall from the last post, we can reach the middle node after `floor(L/2)` iterations.

Remember the above point, I'll come to this point after we see the algorithm. 

Here's the algorithm.

1. Initialize two pointers, `fast` and `slow` both pointing to `head` initially.
2. Move `fast` double the speed than `slow` untill `fast` becomes **NULL** or it has reached the last node.

    ```
    //pseudo code
    while fast!=NULL and fast->next != NULL
    		fast = fast->next->next
    		slow = slow->next
    ```

3. return `slow` .

### Why does this work?

First of all, we can either have an *odd* length linkedlist or an *even* length LinkedList.

- Case 1: Odd length
    - `fast` will point to the last node after `floor(L/2)` iterations.
- Case 2: Even Length
    - `fast` will become **NULL** after traversing the entire list in `floor(L/2)` iterations.

So no matter what the type of LinkedList, one of the loop termination conditions will hit after `floor(L/2)` iterations, and by that time `slow` would be pointing to the required middle node.

![Image for explanation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xrolp7s3urc0wq43q7io.jpg)

## C++ Code

### Definition of Linked List

```cpp
//Definition for singly-linked list.
struct ListNode
{
    int val;
    ListNode *next;
    ListNode() : val(0), next(nullptr) {}
    ListNode(int x) : val(x), next(nullptr) {}
    ListNode(int x, ListNode *next) : val(x), next(next) {}
};

```

### Solution

```cpp
  ListNode *middleNode(ListNode *head)
  {
      ListNode *fast;
      ListNode *slow;
      fast = slow = head;

      //make fast reach the end of the list by moving it double time the slow
      while (fast != nullptr && fast->next != nullptr)
      {
          fast = fast->next->next;
          slow = slow->next;
      }
      //* now slow will point to the required node

      return slow;
  }
```

## Complexity Analysis

`N`: Length of Linked List.

### Time Complexity: O(N)

We are doing O(N/2) iterations which asymptotically is the same as O(N)

### Space Complexity: O(1)

We didn't use any extra space.
Installing PHP and PECL extensions on MacOS
Tags: php
Published: 2021-07-16 04:28:50

Installing `memcache` and `memcached` gives me this error:

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

This is due to permission issues in your local machine. To fix this, just manually create the folder that the script cannot:

```
$ pecl config-get ext_dir 
/usr/local/lib/php/pecl/20190902
```

Copy the value returned by the command and then run:

```
$ mkdir -p {paste clipboard value}
```

Then install the pecl extensions you need:

```
$ pecl install memcached
```


Happy coding!
MISTERSOFTEES
Published: 2021-07-16 03:49:53

MISTERSOFTEES There are hundreds of clothing and fashion brands and individuals that produce tens of thousands of new trending merchandise for the world every day. Sometimes you just want an inspiration to find unique, unofficial t-shirts to add to your collection.
Website: https://mistersoftees.com
Email: support@mistersoftees.com
Add: 3361 County road 87, Coffeeville, MS, 38922, United States
More Social:
https://twitter.com/Mistersoftees1
https://www.instagram.com/mistersoftees_store/
https://www.linkedin.com/in/mistersoftees/
https://www.pinterest.com/Mistersofteesstore/
https://mistersofteesshop.tumblr.com/
https://www.reddit.com/user/Mistersofteesstore
https://mistersofteesstore.blogspot.com/
https://www.plurk.com/Mistersoftees
https://weheartit.com/mistersoftees
https://www.quora.com/profile/Store-Mistersoftees
https://vk.com/id663206244
https://hearthis.at/mistersoftees/
https://www.instapaper.com/p/Mistersoftees
https://www.flickr.com/people/mistersoftees/
https://myspace.com/mistersoftees.store
https://www.scoop.it/u/mistersoftees-com-gmail-com
https://www.diigo.com/profile/mistersoftees
https://flipboard.com/@Mistersoftees
https://www.behance.net/Mistersoftees
https://getpocket.com/@Mistersoftees
https://sites.google.com/view/mistersofteesshop
Node v16.5.0 is out!
Tags: news, node, npm
Published: 2021-07-16 03:23:34

[Node v16.5.0 (Current)](https://nodejs.org/en/blog/release/v16.5.0/) released a few days ago – the main change is _experimental_ support for the [Web Streams API](https://developer.mozilla.org/en-US/docs/Web/API/Streams_API). You need to import from `'stream/web'` to use it, and it will give you a warning when it's used. `npm` also has released a new version – v7.19.1 – and there's a lot of tweaks and fixes in there.
Daily Developer Jokes - Thursday, Jul 15, 2021
Tags: jokes, dailydeveloperjokes
Published: 2021-07-16 02:52:01

---
title: "Daily Developer Jokes - Thursday, Jul 15, 2021"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
cover_image: "https://private.xtrp.io/projects/DailyDeveloperJokes/thumbnail_generator/?date=Thursday%2C%20Jul%2015%2C%202021"
published: true
tags: #jokes, #dailydeveloperjokes
---

Generated by Daily Developer Jokes, a project by [Fred Adams](https://xtrp.io/) ([@xtrp](https://dev.to/xtrp) on DEV)

___Read about Daily Developer Jokes on [this blog post](https://xtrp.io/blog/2020/01/12/daily-jokes-bot-release/), and check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/).___
### Today's Joke is...
![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e12589f412c5.png)

---
*Have a joke idea for a future post? Email ___[xtrp@xtrp.io](mailto:xtrp@xtrp.io)___ with your suggestions!*

*This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit.*

<!-- 
Joke text:
___Q:___ Why did the angry function exceed the callstack size?

___A:___ It got into an Argument with itself
 -->
Gutenberg Full Width Editor with Blocks Border Plugin
Tags: gutenberg, gutenbergplugin, wordpress, wordpressplugin
Published: 2021-07-16 02:34:35

---
title: Gutenberg Full Width Editor with Blocks Border Plugin
published: true
description: Gutenberg Editor plugin to add border and hover effects in the backend editor for easier navigation between nested blocks.
tags: Gutenberg, GutenbergPlugin, Wordpress, WordpressPlugin
cover_image: https://miro.medium.com/max/1400/1*UJI8QkHaL2-ionr-08XOfw.png
---

>Late to the party but as said it’s never too late.

Developed and released my first #WordpressPlugin. It is a simple utility-based plugin that adds a border and hover effects in the #Gutenberg editor for easier navigation between nested blocks.

I have been using it internally for more than a year and have been meaning to release it. #Procrastination

A fun coincidence which I found while putting this out for test — The new WP version 5.8 has something similar which is yet to be out. This gives me an opportunity to enhance this more.

First one is always special and many more to come.

[Gutenberg Editor Full Width Blocks Border
](https://wordpress.org/plugins/editor-blocks-border)
July 15th, 2021: What did you learn this week?
Tags: weeklylearn, discuss, weeklyretro
Published: 2021-07-16 02:22:16

It's that time of the week again. So wonderful devs, what did you learn this week? It could be programming tips, career advice etc.

<center>

![A picture it a dog waving their paw with the caption “Learning, cool at school or at home”](https://media.giphy.com/media/1xpm1nTQiRL96Di3Q6/giphy.gif)
</center>

Feel free to comment with what you learnt and/or reference your TIL post to give it some more exposure.

{%tag todayilearned %}

And remember, if something you learnt was a big win for you, then you know where to drop it as well.👇👇🏻👇🏼👇🏽👇🏾👇🏿

{% link https://dev.to/devteam/what-was-your-win-this-week-4ojf %}

<center>

![Drama from Entourage screaming “Victory!”](https://media.giphy.com/media/lnlAifQdenMxW/giphy.gif)
</center>
How to reverse a Singly Linked List
Tags: linkedlist, algorithms, datastructure
Published: 2021-07-16 02:19:12

---
title: How to reverse a Singly Linked List
published: true
description: There are some ways to reverse a Singly Linked List, the one that I want to show here doesn't require extra space.
tags: linkedList, algorithm, dataStructure
cover_image: https://res.cloudinary.com/dje4crtui/image/upload/v1626974300/articles%20covers/algorithm_rbvjun.jpg
---

In a [Singly Linked List](https://ricardoborges.dev/data-structures-in-typescript-linked-list), each node has only a pointer to the next node, and there are some ways to reverse it, the one that I want to show here doesn't require extra space.

In this algorithm, we start from the list's head, and we use three pointers, each one for **previous node**, **current node** and **next node**.
In the beginning, The **current** and the **next** points to the list's head, and the **previous** points to null. While the **current** are pointing to a node we do the following:

1. **next** point to its next node
2. **current.next** points to **previous node**
3. **previous node** points to the **current node**
4. **current node** points to **next node**

This loop continues until the current points to null, which will mean that we reached the end of the list. Like this:

```typescript
prev = null;
current = head;
next = head;

while (current !== null) {
  next = next.next;
  current.next = prev;
  prev = current;
  current = next;
}
```

A single iteration works like this:

![images](https://res.cloudinary.com/dje4crtui/image/upload/v1626015999/data%20structures/reverse-linked-list_yloqhh.png)

This algorithm may vary according to the Linked List implementation, using [this implementation](https://ricardoborges.dev/data-structures-in-typescript-linked-list), looks like this:

```typescript
function reverse(linkedList: LinkedList<number>) {
  let prev = null;
  let current = linkedList.head;
  let next = linkedList.head;

  while (current !== null) {
    next = next.next;
    current.next = prev;
    prev = current;
    current = next;
  }

  linkedList.head = prev;
}

const linkedList = new LinkedList((a: number, b: number) => a === b);

linkedList.append(1);
linkedList.append(2);
linkedList.append(3);
linkedList.append(4);
linkedList.append(5);

reverse(linkedList);

linkedList.traverse();
```
Shorthand for calling functions conditionally
Tags: beginners, javascript
Published: 2021-07-16 00:54:45

You actually can create a shorthand for calling functions conditionally, and I just found out this yesterday 😭 

```js
const type = 'greeting';

function greeting() {
    console.log('hello')
}

function goodbye() {
    console.log('goodbye')
}

if(type === 'greeting'){
    greeting()
}else{
    goodbye()
}
```

Instead of doing that, we can reduce our line number this way

```js
(type==='greeting' ? greeting:goodbye)()
```
Asking for feedback: Visual editor + template for QR-Reader and -Generator Apps
Tags: productivity, typescript, webdev, react
Published: 2021-07-16 00:02:59

### Quick access or setup
Here's [a live demo](https://metaexplorer.io/try-editor) of the editor on the project homepage,
and of course [the repository on github](https://github.com/shnydercom/metaExplorer-starter).
The repo also works as a template
[<img alt="image of a template button" src="https://thepracticaldev.s3.amazonaws.com/i/lzitp0wshy80lwgn7c8v.PNG">](https://github.com/shnydercom/metaExplorer-starter/generate) for your own QR-enabled web apps. Everything open source.

## Introducing: The MetaExplorer-starter template
I'm quite a fan of storybook, because you can communicate with your team mates about the features of frontend components. So everyone gets a clear idea of the UI component parts: But to talk about how two UI components look side by side, UX or measuring funnels I always wanted to have an editor for communicating more complex topics. Topics like how the application state changes, how good UX can be reused or if more copy moves the rest of the content "below the fold".

And so here's a simple App with a QR-reader and a QR-writer and some navigation. You can edit this App without code, and add your own UI components after reviewing them in storybook. <br/>
![sectionimage-mxp](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yeez9k630no2377r6vur.png)
## Feedback to make it more usable
Now it's mostly an editor for Application state, inspired by node-based editors such as in blender3D, node-red or camunda (BPMN).

Let me know your thoughts! Is it hard/easy to use, intuitive or not, are you against visual editors in general, what do you need in an editor? - and how long did it take you to crash it? 😉

Thanks! Wish everyone a productive time :) 📝
Do you have quiet working conditions?
Published: 2021-07-19 09:18:31

---
title: Do you have quiet working conditions?
published: true
date: 2021-07-16 00:00:00 UTC
tags: 
canonical_url: https://jhall.io/archive/2021/07/16/do-you-have-quiet-working-conditions/
---

One reason that “work from home” is so popular amoung knowledge workers is the idea of uninterrupted work time, and quiet working conditions.

It’s so important, that even 2 decades before the pandemic, it made Joel Spolsky’s [Joel Test](https://www.joelonsoftware.com/2000/08/09/the-joel-test-12-steps-to-better-code/):

> ## 8. Do programmers have quiet working conditions?
> 
> There are extensively documented productivity gains provided by giving knowledge workers space, quiet, and privacy.

As many of us begin to move back in offices, how can you ensure that you and your team can maintain this benefit, even if not in a physically isolated pace? A few tips:

1. Don’t be part of the problem: Don’t interrupt your colleagues unless absolutely necessary. Prefer async forms of communication when possible (send an email instead of a tap on the shoulder).
2. Adapt the Law of 2 Feet, when possible: Stand up and walk to a quieter place (if you’re given a laptop in the office).
3. Work from home a few days a week, if possible.
4. Use sound-absorbing furniture or wall hangings to dampen noise.
5. Use a [Do not distrub](https://amzn.to/3z3dyzI) flag or other visual indicator to put on your desk as a signal to your colleagues that you’re busy. If you’re the manager, buy enough of these for your whole team.
 ![](https://jhall.io/archive/images/dnd-flag.jpg)

* * *

_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
How to remove a file in Linux?
Tags: resource
Published: 2021-07-16 00:00:00

---
  title: How to remove a file in Linux?
  published: true
  tags: Resource
  date: Fri Jul 16 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/remove-file-linux
  cover_image: https://melvingeorge.me/_next/static/images/main-7fa316dc5e5ddb48c38db4bf7764b127.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/remove-file-linux)
  
To remove a file in Linux, you can use the `rm` command followed by a space and the name of the file in the Linux terminal.

For example, let's say you have a file called `myFile.txt` and wants to delete it. You can use the `rm` command like this in the terminal,

```bash
# Delete a file in Linux
rm myFile.txt
```

Executing the above command will delete the `myFile.txt` file from the directory.

See the execution of the above command live in [repl.it](https://replit.com/@melvin2016/delete-a-file-in-linux#main.sh).

To delete more than 1 file at once, you can pass the name of the files with space in between them like this,

```bash
# Delete more than 1 file in Linux
rm myFile.txt myFile2.txt myFile3.txt
```

That's it 😃!

### Feel free to share if you found this useful 😃.

---
Create a custom cursor that follows you and inverts colors
Tags: javascript, webdev, tutorial, codenewbie
Published: 2021-07-15 22:47:42

Link to original article with examples (recommended): https://gabriellazcano.com/blog/create-a-custom-cursor-that-follows-you-and-inverts-colors/

To achieve this we are using the mix-blend-mode CSS property with the value difference which basically inverts the color of the content it has below it.

```js
.container { 
    width: 100vw; 
    height: 100vh; 
    background-color: white; 
    position: relative; 
}

.circle {
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    mix-blend-mode: difference;
}
```

Here we are positioning the circle absolute to the container, giving it a size and with border-radius we are making the div a circle. I disable the pointer-events or we are not going to be able to select any text or really doing anything on the site, we would always be clicking on the cursor div.

> Setting the background-color to white in both the .container and the .circle is needed for this to work. In this tutorial I’m just going to use white but it can be done with any color. It just gets the inverted colors and then css just gets the difference.

And we start to see that it blends already. We just have to make the circle to move.

```js
const cursor = document.querySelector(".circle")

function getDimensions(e) {
  cursor.style.top = `${e.clientY - 25}px` // -25px for the size of the circle
  cursor.style.left = `${e.clientX - 25}px`
}

window.addEventListener("mousemove", (e) => {
  getDimensions(e)
});
```

**And it’s working**

## Bonus: MouseMove Optimization
While it’s working, if you add a debug getDimensions function you might see that there are lots of calls to the function. And this could impact performance.

There is a really known way of solving this problem. By throttling the function calls only firing it once the mousemove event idle for time, in this example 250ms.


```js
const delay = 250

// ...

function throttle(callback, limit) {
  let wait = false
  return function () {
    if (!wait) {
      callback.apply(null, arguments)
      wait = true
      setTimeout(function () {
        wait = false
      }, limit)
    }
  }
}

window.addEventListener("mousemove", (e) => {
  throttle(getDimensions(e), delay)
});
```

You can get the complete implementation in [this link](https://gist.github.com/DatsGabs/e8da259163413861720384d432e79bfb)

## Related Posts
[How to auto adjust font-size to fit div](https://gabriellazcano.com/blog/how-to-auto-adjust-font-size-to-fit-div/)
What are your opinions about a static site library?
Tags: javascript, html, react, npm
Published: 2021-07-15 22:38:58

    Hello there developers how is it going?
I had an idea lately ,more like a project idea , i basically wanna implement a React library which could basically be used to generate static pages.

  Nothing Dynamic just a simple blog page maybe, or maybe a portfolio generator, any basic layout at all...

 and I need advice from fellow developers on how this idea sounds

Leave comments on your thoughts and opinions

Lastly I will be uploaded a video soon enough on how you could make use of the WebRTC api to make a well detailed video chat application probably zoom clone or something, stay tuned
Gatsby, gatsby-source-filesystem and how to filter by the 'name' configuration option in graphQL
Tags: gatsby
Published: 2021-07-15 22:11:41

[Tutorial 4 of Gatsby v3](https://www.gatsbyjs.com/docs/tutorial/part-4/#task-use-graphiql-to-build-the-query-1) explains how to build a blog using markdown. It's all very well explained there: you need `gatsby-source-filesystem`, etc. What was not explained is how to use the `name` option in the `gatsby-source-filesystem` configuration option to filter results in the graphQL query. It's all explained in the [`gatsby-source-filesystem` docs](https://www.gatsbyjs.com/plugins/gatsby-source-filesystem/):

```
// In your gatsby-config.js
module.exports = {
  plugins: [
    // You can have multiple instances of this plugin
    // to read source nodes from different locations on your
    // filesystem.
    //
    // The following sets up the Jekyll pattern of having a
    // "pages" directory for Markdown files and a "data" directory
    // for `.json`, `.yaml`, `.csv`.
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `pages`,
        path: `${__dirname}/src/pages/`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `data`,
        path: `${__dirname}/src/data/`,
        ignore: [`**/\.*`], // ignore files starting with a dot
      },
    },
  ],
}
```

```
{
  allFile(filter: { sourceInstanceName: { eq: "data" } }) {
    edges {
      node {
        extension
        dir
        modifiedTime
      }
    }
  }
}
```

That's it!
Simple loading screen plugin for your Vue application
Tags: vue
Published: 2021-07-15 21:33:48

Simple loading screen plugin for your Vue application.

![Vue application](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rjjur641qklidxmlrxbu.gif)

# Getting Started
## Install
```
npm i --save vuejs-loading-plugin
```

## Set up
```javascript
import VueLoading from 'vuejs-loading-plugin'

// using default options
Vue.use(VueLoading)

// overwrite defaults
Vue.use(VueLoading, {
  dark: true, // default false
  text: 'Ladataan', // default 'Loading'
  loading: true, // default false
  customLoader: myVueComponent, // replaces the spinner and text with your own
  background: 'rgb(255,255,255)', // set custom background
  classes: ['myclass'] // array, object or string
})

```
## Usage
```javascript
// set loading state manually in components
this.$loading(true)
this.$loading(false)

// use async function
// takes promise and returns a promise
import { asyncLoading } from 'vuejs-loading-plugin'

const login = new Promise( (resolve, reject) => {
  // api call
})
asyncLoading(login).then().catch()
```
Got Bots?: A Weekly Bots Series with the Microsoft Reactor
Tags: beginners, codenewbie, webdev, showdev
Published: 2021-07-15 21:15:48

---
title: Got Bots?: A Weekly Bots Series with the Microsoft Reactor
published: true
description: Welcome to my Got Bots series! Here you'll find all the links and details to my July 2021 series with the Microsoft Rector on bots.
tags: beginners, codenewbie, webdev, showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r953wcmide2xquxj8nn.png
---

Have you ever wanted to learn about bots, but don't know where to start? 🤖 If you're looking for a fun, safe environment to ask questions and work through various projects, demos, examples, and free Microsoft resources- this show is for you!

### Check out this series page, with links to summaries/timestamps, resources, and more! ⤵️

## [Got Bots Series Page!🤖💬](https://dev.to/chloecondon/series/13937)

![image promoting got bots series](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/318mwhutlowryqiw0jay.png)

Join me, [Chloe Condon](https://twitter.com/ChloeCondon) (Senior Cloud Advocate on the Next Generation Experiences Team @ Microsoft) as I walk you through some of my favorite beginner projects to get started with building your own Twitter bots, chat bots, and more! This series will also cover beset practices when designing bots, and discuss the ethical choices you should consider while creating them.