teleren/devto huggingface dataset:
Manipulate Linked List to reduce insertion time complexity 
Tags: cpp
Published: 2019-12-03 00:33:12



Arrays is a collections of items stored at contiguous memory location. It stores multiple data of same type. 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/u1mih6smj4vw675qb1x9.jpg)

Now the retrieving data from a arrays is very easy, all we have to do is to get the data from the position.
``arr[pos];``
 
But insertion and deletion is very **costly**. 
As arrays are static every time a new element has to be inserted at the end , a new array is created and the we have to loop through the whole array inserting the all the previous elements an then the new element is reached at the end. 
The time complexity is always **n** as it has to traverse the array.

**This problem could be solved using linked list if we can manipulate it.**


 ``
class Node{
  Node* head=NULL;
  Node* tail=NULL; // Maintaining a pointer that points to the end
  void insert(int data){
    Node* node= new Node;
    node->data=data;
    if(head==NULL){
      head=node;
    }else{
      // no need to traverse the complete linked list as we already
      // have a pointer pointing to the end
      // all we have to do add a pointer after that pointer
      tail->next=node;
      tail=tail->next;
    }
  }
};
``

By maintaining a pointer that points to the end of the linked list we can reduce the time complexity of the insertion. Now we can insert at linear time.
What's a React Component?
Tags: react
Published: 2019-12-03 00:16:45

A React Component is a function that returns a React Element.

## What's a React Element?

Great question!
A React Element is anything between angle brackets:

```
<h1>Title</h1>
<div>...content...</div>
<App />
<Pokemon />
```

These are all React Elements because they're wrapped in JSX angle brackets.

These elements look like HTML tags but aren't.
Those tags get converted to function calls:

```js
React.createElement("h1", null, "Title");
React.createElement("div", null, "...content...");
React.createElement(App);
React.createElement(Pokemon);
```

So React Elements can be created from host elements like `h1` and `div` or Components like `App` and `Pokemon`.

## How do I Create a Component?

A React Component is just a function that returns a React Element.

```jsx
function MyComponent() {
  return <h1>Look what we did!</h1>;
}
```

You can then use it by creating a React Element from it:

```
function App() {
  return (
    <div>
      <MyComponent />
    </div>
  )
}
```

Now you know how to create a component!

## Give it a Try!

Give your newfound knowledge a try.
Open this CodeSandbox directly in your browser and extract a component.

Find the `<h1>Bulbasaur</h1>` React Element and turn it into a component.

{% codesandbox 6o14l %}

---

Follow the 🧵 on Twitter:
{% twitter 1201594231434944512 %}

Subscribe on YouTube:
{% youtube _t6yUkP5L3g %}
React's Reconciliation Algorithm
Tags: react
Published: 2020-09-16 05:49:14

---
title: React's Reconciliation Algorithm
published: true
date: 2019-12-03 00:00:00 UTC
tags: React
canonical_url: https://www.loginradius.com/engineering/blog/reacts-reconciliation-algorithm/
---

Overview The “reconciliation” algorithm in React is how the decision to re-render the component is made. In the browser, DOM manipulation is expensive and time-consuming, both in mounting and unmounting. Part of what makes React very performant is its reconciliation algorithm…

   
[Read On](https://www.loginradius.com/engineering/blog/reacts-reconciliation-algorithm/)
Nodemon delay
Tags: node
Published: 2019-12-04 18:49:18

---
title: Nodemon delay
published: true
date: 2019-12-03 00:00:00 UTC
tags: node
canonical_url: https://hiltonmeyer.com/articles/nodemon-delay.html
---

[Nodemon](https://github.com/remy/nodemon) is awesome for development but one thing that comes up from time to time is that as I'm typing the serer will restart over and over.  
I was wondering if there wasn't some kind of debouncing available. A quick check of the docs and I was sorted.

As a command:

```
nodemon --delay 2.5 app.js

```

In a config file called nodemon.json:

```
{
    "delay": "2500"
}

```

Both the above will delay the restart for 2.5 seconds before restarting. Be aware that the value set in the file is in milliseconds.
Learn React in 25 Short Lessons — React Holiday 2019 ⚛️🎄
Tags: react, beginners
Published: 2019-12-02 23:58:01

Hey React Friends,

I'm firing up the third season of [React Holiday](https://react.holiday).

This year, I'm bringing it to dev.to!


React Holiday is for pros and beginners alike.
Each day, we'll cover one critical part of React.
We'll start with the most fundamental concepts — "What's a Component?" and "How Do I Pass Props?"
But we'll progress quickly to component composition and experimental features like Concurrent Mode.

Follow along and level up your React Game!

---

Follow the 🧵 on Twitter:

{% twitter 1201594041378496512 %}

Subscribe on YouTube:
{% youtube YurJDf8JIks %}
Codecademy - CSS 2: Visual Rules
Tags: codenewbie, womenintech, codecademy, css
Published: 2019-12-02 23:07:14

###**Things I don't want to forget from the codecademy CSS Visual Rules lesson**

-To style an HTML element you write CSS declarations inside CSS selectors.
-CSS declarations consist of a property (e.g. colour, size) and a value (e.g. blue, 200px) A colon separates the property and value and a semi-colon is used at the end. 
-The entire thing - CSS selector and CSS declaration - is called a CSS rule or rule set.

-Font-family is used to set fonts. The default is Times New Roman if no other is selected. It seems that these are case sensitive (unless that is just codecademy)
```
h1 {
  font-family: Garamond;
}
```
-Font-size sets the font size (obvs) and px is used to measure it. 
```
p {
  font-size: 18px;
}
```
-Font-weight can make things bold. It can also be set to normal (not bold!)
```
p {
  font-weight: bold;
}
```
-Text-align can be used to align text to the element's parent. It can be set either to left, center or right.
```
h1 {
  text-align: right;
}
```
-Colour properties can be used with CSS rules. Background-color changes the background of the element it is used in. Color changes the foreground colour of it. E.g. the h1 title below would have a blue background and the text would be red.
```
h1 {
  color: red;
  background-color: blue;
}
```
-Opacity allows you to set the opacity of an element. It is measured from 0-1.
```
.overlay {
  opacity: 0.5;
}
```
-You can make the background of an element an image using CSS. It can either be a URL or relative file path (2nd example is of a pic called mountains.jpg in the main folder called images
```
.main-banner {
  background-image: url("https://www.example.com/image.jpg");
}

or

.main-banner {
  background-image: url("images/mountains.jpg");
}
```
create and validate a form using just HTML css and javascript
Tags: forms, css, javascript, beginners
Published: 2019-12-02 22:59:37

hello guys please check out this video on how to create and validate a form using just html css and javascript 

things to learn
1. toggle password onClick
2. email validation 
3. how to create this awesome form with just css and more

 
<a href="https://youtu.be/BOuo_XrstXQ">Youtube Link</a>
Bongo Cat Codes
Tags: codepen
Published: 2019-12-02 22:43:39

<p>Part of an upcoming personal site update</p>

<p>Inspired By
<a href="https://codepen.io/abeatrize/pen/LJqYey" target="_blank">https://codepen.io/abeatrize/pen/LJqYey</a></p>

<p>Bongo Cat originally created by @StrayRogue and @DitzyFlama</p>

{% codepen https://codepen.io/carolineartz/pen/VwYwZaP %}
I Am Not A Unicorn (Nor A Wizard): or, Why I Chose A Data Science Bootcamp
Tags: beginners, datascience, bootcamp
Published: 2019-12-02 22:42:18

Even a casual look around the web at what makes a good data scientist will reveal that many feel that a great data scientist is a unicorn: an entity that blends a unique and disparate set of skills and traits to perform what can appear to be magic with really big sets of data. Somewhat to my surprise, it turns out that I have aspirations toward wizardry.

#How I Got Here
I recently moved to Houston, TX from Wasilla, AK. In Alaska, I worked in the telecommunications industry for nearly 20 years, from February 2000 until July 2018. We moved because my wife, who works in the oil and gas industry, took another job that was based in Houston.
![Moose Fighting In A Driveway](https://media.giphy.com/media/n9B5NNaPw25qg/giphy.gif)<figcaption>Moose fighting from Giphy.com</figcaption>
In the course of looking for employment in my new city, I came to realize that I was dissatisfied with my job. It wasn’t a bad job. In fact, I had previously enjoyed it and it did feed my need to be constantly learning. I just felt that I needed a change from poring over packet captures and digging through signaling protocols.

I have always had an interest in programming. Toward the end of my time in Alaska, I had taught myself enough Python to script some job-aid tools to streamline some tasks. I found that I really enjoyed this. It was apparent to others, as well. One day, after I solved a problem in a text-parsing script I had written, one of my co-workers told me “You know, Dave, maybe you should go back to school for that. You seem to really enjoy it.”

Fast forward to the summer of 2019. I’m contemplating yet more job listings on Indeed and I get to thinking about my co-worker’s comment. I had previously seen advertisements for coding bootcamps but now I started looking at them in earnest. In the course of that investigation, I ran across a data science program.

Reading about this program excited me far more than the coding program had. Tempering my excitement, I looked into the data science field to ensure it was a good fit for me.

#What I Determined
There are many articles on what makes a great data scientist. None of them align perfectly, though there is some general overlap. Some of the points of overlap I found were:
<ul>
<li>Curiosity</li>
<li>A love of learning</li>
<li>Analytical thinking, especially with regard to solving problems</li>
<li>Tenacity or determination</li>
<li>Diverse technical skills</li>
<li>Education, especially in statistics and math</li>
</ul>
I have the curiosity, tenacity, love of learning, and problem solving mindset. I lack the education and some of the technical skills, but I can learn the material and develop those skills. Importantly, I was still interested in the field after my preliminary research, so I decided to move forward.
![Pretty Unicorn Picture](https://thepracticaldev.s3.amazonaws.com/i/53ehot4jzdhsmoqn2v0m.png)<figcaption>Unicorn from NicePNG.com</figcaption>
I am not a unicorn, nor a wizard, but someday soon, I’m going to make that transformation.
A different kind of introduction to Accessibility
Tags: a11y, technology, beginners
Published: 2019-12-02 21:42:27

For those of us who are more visual learners - a quick introduction to Accessibility. 

![Introduction to Accessibility - what is it - transcript at bottom of page](https://thepracticaldev.s3.amazonaws.com/i/5la2mpr6xkuudczdde8j.jpg)

![The ability spectrum - we all benefit - transcript at bottom of page](https://thepracticaldev.s3.amazonaws.com/i/cg9w7cb680u9agogywdh.jpg)

![Types of disabilities - transcript at bottom of page](https://thepracticaldev.s3.amazonaws.com/i/q4djggmtku2epj5jnmzy.jpg)

![How software creates equal opportunities - transcript at bottom of page](https://thepracticaldev.s3.amazonaws.com/i/u1j83ua2ur2em1vesbq0.jpg)


--

Transcript

# Introducing Accessibility - Ally
## What is it? 
* It comes in all shapes & sizes
* It's necessary & non-negotiable
* It's an ongoing design requirement
* It's not limited to physical disabilities
* It's made up of objective & subjective guidelines
* It's the right & ability to access the same information

## The ability spectrum
_From permanent - situation_

Permanent - such as legally blind, deaf or physically disabled
 -> temporary - such as having an ear infection, broken arm or eye infection
  -> -> situational - such as a new parent, at a concert or library

__a.k.a we all benefit from accessibility__


You can thank accessibility for..
* ...those handy next stop reminders on the bus & train
* ...those captions so you can still watch the news in a noisy bar
* ...those extra page hits because search engines discovered your transcripts

## Types of disabilities
* Colour-blind / blind / low vision
* Deafblind / deaf
* Cognitive / speech / reading / seizures
* Motor / multiple disabilities

## Software + assistive technology
We all live in a pretty __incredible__ time where software creates equal opportunities when creators simply follow standards

Application [in/output]
 [in/output] transformed into an accessibility tree [in/output]
 [in/output] assistive technology [in/output]
 [in/output] user [in/output]

*screen readers* are the most commonly discussed assistive technology
...but there is also technology to translate into/from __braille display__
...*magnify text*
...*head wands*, *mouth sticks* & *oversized trackball mouse*
...*single switch* & *sip-and-puff* switch
...*adaptive keyboard*
...*eye-tracking* & *voice recognition* technology

## Cognitive disabilities
always keep in mind...

__"don't beat around the bush"__
* Be direct, help avoid mistakes & be clear on how to fix them
* Don't expect users to understand implied meaning
* Give adequate time for everyone

__still be creative!__
* Balance use of text alternatives like video & illustrations
* ...or use bright colours to keep attention & interest
* Keep text & layout simple - white space is your friend
Help!!
Published: 2019-12-02 21:13:00

app.js
import React, { useState } from 'react';
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";
import AddNote from './components/addNote';
import NoteCard from './components/noteCard';

function App() {
  const [noteCount, setNoteCount] = useState(localStorage.getItem('noteObjCount') || 0);
  const addNote = () => {
    setNoteCount(parseInt(noteCount)+1);
  };
  const deleteNote = (count) => {
    setNoteCount(count);
  };
  return (
    <body className="container ml-1 mt-3">
      <AddNote addNote={addNote} />
      <NoteCard noteCount={noteCount} deleteNote={deleteNote}/>
  </body>
  );
}
Sum of two lowest positive integers
Tags: kata, challenge, codewars, csharp
Published: 2019-12-02 21:06:57

## Task description

> Create a function that returns the sum of the two lowest positive numbers given an array of minimum 4 positive integers. No floats or non-positive integers will be passed.
> 
> For example, when an array is passed like `[19, 5, 42, 2, 77]`, the output should be `7`.
> 
> `[10, 343445353, 3453445, 3453545353453]` should return `3453455`.

## Task solution

### Tests

```csharp
using Microsoft.VisualStudio.TestTools.UnitTesting;
using Kata;

namespace KataTests.UnitTests 
{
    [TestClass]
    public class LowestNumbersTests
    {
        [TestMethod]
        public void TaskExamplesPassAsExpected()
        {
            var computer = new LowestNumbers();
            var numbers = new int[]{-1, 2, 3, 5};
            Assert.AreEqual(5, computer.sumSmallestNumbers(numbers));	
            Assert.AreEqual(10, computer.sumSmallestNumbers(numbers, 4));	
            Assert.Throws<ArgumentException>(() => computer.sumSmallestNumbers(numbers, 5));
        }
    }
}
```

We take an array of integers into a function named `sumSmallestNumbers` and there is an optional parameter of how many to count. We also check that if too many are asked to be counted, an exception is raised.

### Implementation

```csharp
using System;
using System.Linq;

namespace Kata {
  public class LowestNumbers
  {
    public int sumSmallestNumbers(int[] numbers, int requiredCount = 2) {
      if(numbers.Length < requiredCount) {
        throw new ArgumentException(String.Format("{0} only contains {1} items but {2} were requested.", numbers, numbers.Length, requiredCount));
      }
      
      Array.Sort(numbers);
      return numbers.Where(i => i >= 0).Take(requiredCount).Sum();
    }
  }
}
```

This is the implementation I ended up with is pretty simple, we simply check that we haven't requested too many items to total and if we have, throw an `ArgumentException`. If we have't however, we remove all negative numbers, then we sort the positive numbers array and take the first however many `requiredCount` requested and sum them up. We also have a default `requiredCount` of `2` since the task description requested us to sum the lowest `2` items but we can change this to be whatever we want now, as can be seen in the tests.

## Conclusions

I am really enjoying getting back into `C#` lately, it is much better than it used to be in terms of simplicity and ease of use, this is a basic implementation but you can see how powerful the language itself is and how descriptive and readable too. See you in the next one!
Multi-columns relationships for Laravel's Eloquent ORM
Tags: laravel, relationship, database
Published: 2019-12-02 21:03:22

---
title: Multi-columns relationships for Laravel's Eloquent ORM
published: true
description: Laravel Eloquent doesn't support composite keys. As a consequence, there is no way to define a relationship from one model to another by matching more than one column. Trying to use where clauses (like in the example below) won't work when eager loading the relationship because at the time the relationship is processed $this->l2 is null.
tags: laravel, relationship, database
---
Upgrading To PHP 7.4 (Laragon)
Tags: php, laragon, php7, upgradephp
Published: 2019-12-05 15:44:23

---
title: Upgrading To PHP 7.4 (Laragon)
published: true
date: 2019-12-02 20:39:40 UTC
tags: php,laragon,php7,upgrade-php
canonical_url: https://medium.com/@stephenjudeso/upgrading-to-php-7-4-laragon-862b9d204d0c
---

Its no longer news that [PHP 7.4](https://www.php.net/archive/2019.php#2019-11-28-1) is now available with lots of exciting new features. Yeah, and everyone wants to get a test of it :)

PHP 7.4 comes with numerous improvements and new features such as: Typed Properties, Arrow Functions, Null coalescing assignment operator, Unpacking Inside Arrays, Opcache Preloading etc.

You can walk your self through this new features [here](https://www.php.net/manual/en/migration74.new-features.php). Thanks to PHP development team. Bravo!

### Laragon

[Laragon](https://laragon.org/docs/) is a modern, maintained and rich-featured local development environment. Laragon comes pre-installed with many popular applications like Node.js, PHP, Apache, Nginx, Redis, Composer, and MariaDB/MySQL. It’s currently available for only Windows OS. You can download it [here](https://laragon.org/download/).

> _Please note that Laragon’s latest release as at the time I wrote this article haven’t shipped with PHP 7.4 and that’s the essence of this article._

### Upgrading to PHP 7.4

First lets download PHP 7.4 for [Windows](https://windows.php.net/download#php-7.4). Here is a direct link for [64 bits] (https://windows.php.net/downloads/releases/php-7.4.0-nts-Win32-vc15-x64.zip) and   [32 bits](https://windows.php.net/downloads/releases/php-7.4.0-Win32-vc15-x86.zip).[](https://windows.php.net/downloads/releases/php-7.4.0-nts-Win32-vc15-x64.zip) Extract the downloaded zip file to Laragon’s PHP folder.

Note that Laragon’s PHP folder can be found on this path:

```
C:\laragon\bin\php
```

![](https://cdn-images-1.medium.com/max/1024/0*pueQcEVUhgWxK3hL.png)

Now open Laragon app on your system, click on Menu, navigate to the menu item, then change the PHP version to the latest one you have on your system.

![](https://cdn-images-1.medium.com/max/964/0*vzRGX331tzXNU2oz.png)

Now you have your local development environment running PHP 7.4!

#### Cheers !

Join my [weekly newsletter](http://stephenjude.tech/newsletter) and never miss out on news, tutorials, tips and more.

You can also follow me on twitter [@stephenjudeso](https://twitter.com/stephenjudeso)
Chart.js Data Points and Labels
Tags: angular, typescript, javascript
Published: 2019-12-02 20:12:09

Have you ever tried to plot live data in Chart.js only to find, that only two points at a time are plotted?

**Labels**
[The official documentation ](https://www.chartjs.org/docs/latest/axes/labelling.html) doesn't really underscore that there is a one to one relationship on a data point and a corresponding label on the x-axis.  In addition, the labels exist at the topmost layer of the chart whereas the data-points exist within one or more data-sets.

The different layers are seen here:

 ![one label per point](https://thepracticaldev.s3.amazonaws.com/i/aoge15hi1mp8xhumzc53.PNG)


And declared via the ChartData interface:

Notice that only one set of "labels" exist for all the data-sets.

![chart data interface](https://thepracticaldev.s3.amazonaws.com/i/vymu02mg5aju8avzgqio.PNG)

**Data Points**
Chart.js can plot multiple data points on the chart via the ChartDataSets array. This means when new data arrives and there's more than one data-set, the new data must be added to the correct data-set. The only way to discern them is via the index within the data-set array or the label within. Yes data-sets have a single label, not to be confused with the chart.data.labels property.

**Updating Data**
Simply find the proper data set and set the data to the new livedata array. Like this:

![push](https://thepracticaldev.s3.amazonaws.com/i/itw4p3rrd0mdz8tyac11.PNG)

**Putting It Together**

Keeping immutability in mind.

![full code](https://thepracticaldev.s3.amazonaws.com/i/12scm8rxg7krqjxbumv3.PNG)
 

Where getLabels is this:

![get labels](https://thepracticaldev.s3.amazonaws.com/i/wzrru1fgqz98qql0ouz7.PNG)
 

JWP2019
Giving Thanks for Diversity in Tech: Gift Egwuenu
Published: 2020-01-15 20:59:48

---
title: Giving Thanks for Diversity in Tech: Gift Egwuenu
published: True
date: 2019-12-02 20:09:47 UTC
tags: 
canonical_url: https://www.thisdot.co/giving-thanks-series-1-gift-egwuenu
---

![gift](//images.ctfassets.net/zojzzdop0fzx/4NeeAlCRPKldn5XK6yEGjN/6d6074345cd757b67956a9dfd56dd17e/gift.jpg)

Gift Egwuenu is a Software Engineer based in Lagos, Nigeria.  At her job with Andela, she primarily works with React and GraphQL, but also loves using VueJS for her personal projects!

Passionate about creating communities for developers to thrive in, and making the web accessible for all, Gift helps run multiple developer organizations, including Vue Vixens Nigeria, for which she is a Chapter Lead, and as an Organizer for JAMstack Lagos.  She is also one of the proud organizers of Concatenate, a free conference for Nigerian developers.

As evident by her participation in so many development groups, Gift is passionate about creating communities for developers to thrive in, and when asked about her take on “inclusion”, she shared that, “I think we can do better by continuously educating folks about inclusion, and also practicing inclusion. It's one thing to know about inclusion, and another to practice it.”

If you are unable to catch Gift’s upcoming REFACTR.CONF talk this April in Atlanta, you might find her cooking, or walking about her home city with a camera.  And if you are local to Lagos, she welcomes you to attend one of the upcoming Vue Vixens Nigeria or JAMstack Lagos which she will soon be organizing.

When asked what advice Gift would give to other women who would like to pursue careers in tech, she encouraged new developers to, “stay consistent and find a community that wants to see you succeed, or an accountability partner. Don't forget to always share your small wins! As you grow, you'll be able to look back and see how far you've come.”

If you would like to keep up with Gift in the coming year, you can follow her on Twitter, [@lauragift21](https://twitter.com/lauragift21).