teleren/devto huggingface dataset:
Mbcrump's Stream Notes - Node.js from scratch
Tags: node, javascript, vscode
Published: 2019-12-23 00:25:14

---
title: Mbcrump's Stream Notes - Node.js from scratch
published: true
description: Learn Node.js with me. 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/pnr6dkkq924mz20kk6xh.png
tags: nodejs, javascript, vscode
---

***I modeled this template off the one that [_clarkio](https://twitter.com/_clarkio) created. Check out his [Twitch](https://www.twitch.tv/clarkio) for live coding and more!***

# Mbcrump's Stream Notes - December 20, 2019

<img src="https://thepracticaldev.s3.amazonaws.com/i/g211tsorfckspjmxilg3.png"/>

## Node.js from Scratch Part 1 and 2

### Stream Replay

- [Twitch Part 1](https://www.twitch.tv/videos/524221926) and [Twitch Part 2](https://www.twitch.tv/videos/524232981)
- [YouTube Part 1](https://youtu.be/uG-lGqyRxhg) and [YouTube Part 2](https://youtu.be/y3jngE3WAnM)

## Goals

- [x] Jump straight into it
- [x] Learn about Node.js [Install it, use command line]
- [x] Basic Web Server in Node.js
- [x] Express Framework
- [x] Express Routing
- [x] Serving Static Files
- [x] Send data to the view
- [x] Handling POST Request Body
- [x] Closing

## Results

- Finished the first series!

## Things we learned

 - Learned how to install Node.js, why you would want to use it
 - Created our first app (Basic web server)
 - Installed Expressed and played with some options
 - Served static files and learned how to post data to the view


## Resources

- [Node.js Installation](https://nodejs.org/en/)
- [Node.js Tutorial](http://mfikri.com/en/blog/nodejs-tutorial)
- [Code for today](https://github.com/mbcrump/nodejsfromscratch)


## Segments

This table helps point out different segments of the stream. The timestamps link to the video on YouTube at that point in the recording. I do this b/c Twitch deletes videos after 60 days.

|  Jump to 	|
|:-------------:	|
| [Install Node.js](https://youtu.be/uG-lGqyRxhg?t=254)|  left-aligned 	|
| [Basic Web Server in Node.js](https://youtu.be/uG-lGqyRxhg?t=514)|  left-aligned 	|
| [Express Framework](https://youtu.be/uG-lGqyRxhg?t=976)|  left-aligned 	|
| [Express Routing](https://youtu.be/uG-lGqyRxhg?t=1402)|  left-aligned 	|
| [Serving Static Files](https://youtu.be/y3jngE3WAnM?t=251)|  left-aligned 	|
| [Send data to the view](https://youtu.be/y3jngE3WAnM?t=858)|  left-aligned 	|
| [Handling POST Request Body](https://youtu.be/y3jngE3WAnM?t=1207)|  left-aligned 	|


## Today's Stream Supporters

- [LilyHazel](https://www.twitch.tv/lilyhazel)
- [BitMasher](https://www.twitch.tv/bitmasher)

## Get connected with Michael Crump

- [Twitter](https://twitter.com/mbcrump)
- [Twitch](https://twitch.tv/mbcrump)
- [Instagram](https://instagram.com/mbcrump)
- [YouTube](https://youtube.com/mbcrump)
- [GitHub](https://github.com/mbcrump)
- [Website](https://www.michaelcrump.net)
Apply a MacOS-like drop shadow to any image
Published: 2020-11-20 08:28:10

---
title: Apply a MacOS-like drop shadow to any image
published: true
date: 2019-12-23 00:00:00 UTC
tags: 
canonical_url: https://mmazzarolo.com/blog/2019-12-23-macos-screenshot-like-drop-shadow/
---

The MacOS screenshot utility adds a nice drop shadow to your screenshots.

![screenshot](https://mmazzarolo.com/static/7cc5d5922af846d947b827d91720a36d/c83ae/screenshot.png "screenshot")

You can apply a similar drop shadow to any image using [ImageMagick](https://imagemagick.org/index.php).

Make sure ImageMagick is installed:

```bash
brew install imagemagick
```

Then, run:

```bash
convert screenshot-without-shadow.png \( +clone -background black -shadow 80x20+0+15 \) +swap -background transparent -layers merge +repage screenshot-with-shadow.png
```

That’s it!

Source: [Stephen’s Java Adventures](http://javaadventure.blogspot.com/2011/10/how-to-add-mac-like-shadow-to-your.html).
Pointers arithmetic
Tags: c, pointers, basics, beginners
Published: 2019-12-22 23:03:28

---
title: Pointers arithmetic
published: true
description: Using arithmetic with pointers in the C programming language
tags: C, pointers, basics, beginners
series: Basics of the C programming language
---

##Overview

The real power of pointers is when you want to sequence through the elements of an array.
Since each element in an array is an address in memory (that the pointer references), the `++` or `--` operators can be used to iterate through an array.
Since the pointers by default reference the first value in an array using standard declaration, e.g. `*pMyArray = myArray;`, dereferencing the pointer can be used to quickly get the first value `*pMyArray`, and indirection can be used to access any other elements further in the array using the following syntax:

```c
*(pMyArray + 3);
// accesses the fourth element
```

The same syntax can be used to assign values to an array. The two expressions below achieve the same result of assigning the number 27 to the 12th element of the array:

```c
myArray[11] = 27;
*(pMyArray + 10) = 27;
```

To set the pointer to a specific element, it can be done using the 'address of' operator when it is assigned, along with the index desired: `*pMyArray = myArray[3];` sets the pointer to the fourth element of the array.

An example of iterating through an array using pointers and summing the elements is below, with explanation in the comments.

```c
int arraySum(int myArray[], const int num)
{
  int sum = 0, *ptr;
  int * const myArrayEnd = myArray + num;

  for (ptr = myArray; ptr < myArrayEnd; ++ptr)
  {
    // dereference the pointer to get the value and add the value to the sum
    sum += *ptr;
  }
  return sum;
}

int main(void)
{
  int arraySum(int myArray[], const int n);
  int values[5] = {1, 2, 3, 4, 5};

  // here, we are calling the arraySum function with the values array and pointing it to the last element (5)
  printf("The sum is %i \n", arraySum(values, 5));

  return 0;
}
```

Functions that process arrays actually use pointers as arguments, so you have a choice between using array notation and pointer notation for array-processing function -- it is a matter of programmer choice.
Like everything in programming, it is a trade-off. Using array notation makes it more obvious that the function is working with arrays, but pointers are closer to machine language and, with some compilers, leads to more efficient code.
Pointers and strings
Tags: c, pointers, basics, beginners
Published: 2019-12-22 23:41:24

---
title: Pointers and strings
published: true
description: Using pointers with strings in the C programming language
tags: C, pointers, basics, beginners
series: Basics of the C programming language
---

##Overview

As seen in the previous post in this series, pointer arithmetic is a handy way to iterate through arrays, and since strings are an array data structure (an array of characters), they are also useful and give the programmer a lot of flexibility when working with strings.
For example, a character pointer can be used to copy a string, using a while loop, that is much more efficient (in terms of lines of code) than a for loop. In the example below, both methods will copy the same string:

```c
//using a for loop (you can eliminate the first parameter because *to already points to the first element's address)
void copyString(char *to, char *from)
{
 int i;

 for ( ; *from != '\0'; ++from, ++to)
 // could also be written as for (*to; *from != '\0'; ++from, ++to), but the *to is not necessary as noted above
 {
   *to = *from;
 }
 *to = '\0';
}

//using a while loop
void copyStringSmall(char *to, char *from)
{
  while (*from)
  {
    *to++ = *from++;
  }
  to = '\0';
  // add the null terminator to the end of the string that is copied after the loop ends
}

int main(void)
{
  char string1[] = "a string to copy";
  char string2[];
  char string3[];

  copyString(string2, string1);
  copyStringSmall(string3, string1);

  printf("for loop: %s \n", string2);
  printf("while loop: %s \n", string3);
}
```

The reason the while loop can be so compact is because the null character is equivalent to zero, i.e. it is "falsy", so the while loop will terminate when it hits the end of the string. In C, booleans are represented by integers, 0 is false, and 1 (or, really anything nonzero) is true.
Be A Programmer
Tags: phpdeveloper, laravel, css, html
Published: 2019-12-22 23:40:59

---
title: Be A Programmer
published: true
description: Be awesome in your work and be prepare for the success you make
tags: PHPDeveloper, Laravel, CSS, Html
---

<p>I wan to learn and expand my knowledge in web development on how to make an interesting projects and results.</p>
Makers Week 6: No I in Team!
Tags: makers, ruby, sinatra, rspec
Published: 2019-12-22 23:21:47

Weekly Goal:
*Can you, with only a specification to guide you, work as part of a team to build a web app?*

At the start of this week, we started our first group project which was fun. We went back to using ruby because we had the most experience in that plus it was only a week better to use something we're comfortable with.

Day 1

On the first day, we got sorted into groups. We spent most of the first day setting out a plan of action. We wrote up some user stories and domain models, we also had to decide on an MVP(Minimum Viable Product). Honestly, I think that this helped us keep our focus later down the line. We had to decide on when to do standups and when to do retros, we decided on morning standups and afternoon retros. Finally, at the end of the day, we split off into teams and got started adding the gems to the gemfile as well as starting on our first method.

Day 2

We started straight into it the next day. We were pairing but because we were getting set up there wasn't a lot of problems, so decided to look into something I heard about that would. It was a layout erb which can set a boilerplate for our erb files which made the project a little easier later on. I also added a couple of other things while had the time and gave my partner a hand whenever he needed it. 

Day 3

We got to work on checking date availability during day 3. It caused a bit of trouble because it kept redirecting us to the wrong page which obviously isn't ideal. After getting a bit of visibility we knew what was going wrong we just didn’t know why. it was changing the id name after the post request. So we went to see one of the couches and they helped us out. We realised that when redirecting we were redirected to "/:id" similar to the way you do the get request, but what we should have been doing was getting the id and using string interpolation to pass it through.

Day 4

We mainly did finishing touches for functionality and started styling which is where the layout erb came into play. We were able to put all our link tags into one file and it loaded them on to all the pages. Because I had some experience using bootstrap I was giving everyone a hand with using it. Which helped me sharpen up my knowledge on it.

Day 5

We mainly messed around with the pages to see if there was any bugs with the page and worked on them. We also finished off the styling which was a bit awkward because everything was kind of messing up. But after opening up the elements using the chrome developer tools we saw that the styling wasn't actually changing after refreshing the page. so after hard reloading the page everything was working. It was a little annoying but at least I learned to use the developer tools more.

Summary

This was a good week because we got to work as part of a team. I think we took the right approach making a solid plan before doing anything. We also go our MVP done by Tuesday. Which was a small victory at the start of the week and having a small scale project to work towards and then build on made things a little easier. Overall a great and fun week.
Web Development on an iPad Pro and Thoughts of a New Web Developer
Tags: beginners, webdev, career
Published: 2019-12-22 22:59:33

---
title: Web Development on an iPad Pro and Thoughts of a New Web Developer
published: true
description: 
tags: beginner, web dev, career
---

So for awhile now I have been wanting to pursue my career as a web developer and I have had my ups and down. Earlier this year I started to take that seriously using avenues like Superhi and countless YouTube videos. I am happy to say I have been working as a developer full time for a month now. Since I have the bare set up of just a MacBook Pro, I have been wanting to add a monitor for awhile now. With the recent updates in OS X and the inclusive of iPad OS I though,” Why not just invest in your future and get an iPad Pro as a monitor and for design features”. So after a few months I went for it.


   I love this machine. I’m actually writing this article on my iPad just to prove my point. I have a $40 keyboard case and it is honestly better than the Folio keyboard from Apple IMO. Now on to my point, I was searching for how to use this as my main machine eventually and was coming up empty handing. I know things like Codepen exist and I love that platform but I really love Svelte and want to be able to add libraries or use frameworks. So in my current role I have been having to wait for access to files and a text editor so I went on the hunt for an in browser one. I found Code Sandbox. It reminds me so much of VS Code. This thing has really made me feel as though serious web development on the iPad is just around the corner. For things like testing and cross browser testing though we are still a bit out. I’m so thrilled that if I am out and about with just my iPad or on a trip I will be able to make little side projects and one offs with out the need to bring every machine in my house.
vim shortcuts that i find central
Tags: vim
Published: 2019-12-22 22:27:30

This is my first post. I always wanted to write a blog post about the vim key-mappings and general approaches that I use that I've found super useful over the years. I tend to make them work wherever there is vim or vim-emulation (Vimium / Chrome, VSVim / VS Code, IdeaVim / IntelliJ, XVim2 / Xcode, tmux integration, Codepen, etc.). 

#### [Till I Die](https://www.youtube.com/watch?v=pKDABrZ418c):
```
ctrl-hjkl -> ctrl-w hjkl with tmux integration
gd -> go to definition (e.g., using ALE; i haven't cleaned this up for all languages)
ctrl-o -> jump back
ctrl-i -> jump forward
. -> repeat command
qa...q -> macros
<format on save (e.g., using prettier, black)>
```

#### [Til the Sun Dies](https://www.youtube.com/watch?v=-_vY-MX_Lj4):
```
fd -> escape
[In System Preferences, map] caps lock -> control
; -> :
```
How to upload a file to Firebase Storage in React
Tags: react, javascript, database
Published: 2019-12-22 21:15:03

---
title: How to upload a file to Firebase Storage in React
published: true
description: Learn how you can upload and retrieve files using Firebase database
tags: React, JavaScript, Database
---

First, you must have a Google account, log in to console.firebase.com then enable Storage database on your account and make sure to set up database rules, to import and use the library on your project run the command

```npm install firebase```
In a separate file initialize the app using your config credentials like demonstrated below

```
import firebase from 'firebase/app'
import 'firebase/storage'

  const config = {
    apiKey: 'xxx-xxxx',
    authDomain: 'xxx-xxx.firebaseapp.com',
    databaseURL: 'https://xxxx-xxxx.firebaseio.com',
    projectId: 'xxxxx-xxxx',
    storageBucket: 'xxxx-xxxx.appspot.com',
    messagingSenderId: 'xxxxxxx'
  }
  const fire = firebase.initializeApp(config)
  const storage = firebase.storage()

  export { storage as default }
```

From there, you start by building the user interface, we only need 3 components to handle the upload process, the first element one is an input file picker, using the accept method you can specify what file types to allow, we also give it an id so we can hide the default ugly input picker.


```
  {done && <h3>Uploaded successfully!</h3>}
  {uploading && <progress percent={progress}  />}
    ...
  <input
    accept='image/x-png, image/jpeg'
    id='myfileinput'
    class='inputfile'
    type='file'
    onChange={this.handleChange}
    />

    <label for='myfileinput'>
    <i class='ui upload icon' />
    Select a file
    </label>

    <button 
    onClick={this.handleUpload}>
    Upload
    </button>
```

  
The handleChange function only return the file selected by the user and save it to the state, note that we are only using the first file selected, as you know, the input can also accept multiple files selecttion, in that case, tweak your code accordingly to make sure you are handling all selected files.

See full article and video tutorial at [Murkstom blog]( https://murkstom.com/blog/firebase-storage-tuto?utm_source=devto&utm_medium=storagetuto).
Anyone who worked with Wordpress as well as Laravel?
Tags: laravel, wordpress, php
Published: 2019-12-22 20:50:35

Hi, I am an intermediate developer who has been working with wordpress. 

I have been struggling with different issues like coding structure and database interaction with wordpress. 

However, I got to know that laravel provides a better pattern and structure when compared to wordpress. can you show me the differences that make laravel better?
Microsoft Bought GitHub and You Ran Away...Have You Gone Back?
Tags: discuss, github, watercooler
Published: 2019-12-22 20:14:21

It's been just over a year since it was announced that [GitHub was being purchased by Microsoft](https://github.blog/2018-10-26-github-and-microsoft/). When the announcement came, a lot of people _(including myself)_ chose to flee GitHub in search of code hosting soil untainted by the Windows owning behemoth. And now that all that time has passed, I'm wondering this: **How many people have followed through with their exodus and stuck to it and how many have returned to GitHub in the end? And for those who have returned to GitHub, why did you go back?**

While I have still have some repositores still on GitHub, I don't actively maintain any code their anymore. But I'm finding myself wondering if I should go back for a couple of reasons, the main one being that GitHub is so widely used, I worry that it could deter people from contributing to, or even using, the open source projects that I publish.

I'd really love to know what others in the community are experiencing and how this process has gone for them. Please comment and answer the bolded questions above. If you're one who still hasn't gone back to GitHub, please feel free to explain why you haven't looked back.
Regular expressions are a must for data mining
Tags: 100daysofcode
Published: 2019-12-22 19:58:48

https://www.codewars.com/kata/525f50e3b73515a6db000b83

After I solved in 10 minutes I was thinking "I am  clever" but then I saw solutions. There were clever solutions using regex.

 are great I better checkout once more

day07
Vue.js Pro Lightbox - fancy, responsive slide gallery!
Tags: vue, vuelightbox, vueplugins, vueslider
Published: 2019-12-22 18:45:34

---
title: Vue.js Pro Lightbox - fancy, responsive slide gallery!
published: true
description: Full version of Vue Fullscreen lightbox - added captions, zooming, thumbs and more
tags: vue, vue lightbox, vue plugins, vue slider
---


Complete version of Vue Fullscreen Lightbox is now available!

Full version includes improvements like: captions, zooming thumbs and more. Maximize user experience with high performance, mobile optimized slide gallery.

Lightbox demo: [https://fslightbox.com/vue](https://fslightbox.com/vue).

Total pro version cost: 19.90$ or 39.90$ (depending on license) - get it [here](https://fslightbox.com/vue/pro).

There is also free version available not such powerful as Pro but still fancy.

![Vue Lightbox](https://thepracticaldev.s3.amazonaws.com/i/apx768p09hwf67nnch15.jpg)
Transform SQL Query into MongoDB Query
Tags: mongodb, sql, node
Published: 2019-12-22 18:45:08

You can run SQL SELECT Query against MongoDB. SQL support includes functions, expressions, aggregation for collections with nested objects and arrays.

Let's look at how to use the GROUP BY clause with the SUM function in SQL.

Instead of writing the MongoDB query which is represented as a JSON-like structure

    db.employees.aggregate([
      {
       $group:  {
       _id:  "$department",
       total:  { $sum:  "$salary"  }
        },
        }
    ])

You can query MongoDB by using old SQL which you probably already know

    SELECT department, SUM(salary) AS total FROM employees GROUP BY department

Please note that SQL features are not natively supported by MongoDB. The SQL query is validated and translated into a MongoDB query and executed by MongoBooster. The Equivalent MongoDB Query can be viewed in console.log tab.

**Group By:**

![](https://qphs.fs.quoracdn.net/main-qimg-3d89a2ca3bd5629e2319ffb5e57ec6a0.webp)

**View equivalent MongoDB Query:**

![](https://qphs.fs.quoracdn.net/main-qimg-93f5ad8328b310403b7275b13015e934.webp)

If you’re not familiar with [NoSQLBooster for MongoDB](http://www.tellmehow.co/convert-sql-query-to-mongodb-query/), it is a shell-centric cross-platform GUI tool for MongoDB which provides fluent query builder, SQL query, update-in-place, ES2017 syntax support and true intellisense experience.
React Hooks: Creating Custom State Hook
Tags: beginners, react, hooks
Published: 2019-12-22 17:49:50

React custom hooks is nothing more than a JavaScript function. It encapsulates components logic, can be imported, exported and reused all over the application. If you have a repetitive hooks logic in components, it might be a good idea to extract it into a separate function and reuse all over the application. Also, a custom hook function can call other React hooks if needed.

Take for example this very simple counter application with a `useState` hook. On every button click we updating the counter by incrementing or decrementing. Let's refactor and move its logic to a custom hook.

```jsx
// App.jsx

function App() {
  const [counter, setCounter] = React.useState(0);

  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);
  
  return (
    <>
      <h1>{counter}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </>
  );
}
```

To make a custom hook out of this component logic, we need to extract `useState` and handlers into a separate function and move it in a separate file. A custom hook name should start with a prefix `use`, that will indicate the usage of hooks inside it:

```jsx
// useCounter.js
import React from 'react';

export function useCounter() {
  const [counter, setCounter] = React.useState(0);
  const increment = () => setCounter(counter + 1);
  const decrement = () => setCounter(counter - 1);

  return { counter, increment, decrement };
}
```
The state and logic of the counter are now encapsulated into the function. It should return the counter and handlers, responsible for state modifications. Also do not forget to export the function.
In a current example, the function returns an object with state values, but it is not restricted only to objects. As it is only a simple JavaScript function, we can return any data type. It could be aswell an array:

```jsx
// ...
return [counter, increment, decrement];
//...
```

The `useCounter` custom hook can now be imported anywhere in the application. Each instance of the function will hold its own state. That means even if you invoke `useCounter` function in the same application, each instance of the counter will hold it's own state, and other instances will not be affected.

The final result will look like this:

```jsx
import { useCounter } from './useCounter.js';

function App() {
  const { counter, increment, decrement } = useCounter();
  
  return (
    <>
      <h1>{counter}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </>
  );
}
```

Custom hooks can consist not only state logic, but also be responsible for authentication, data fetching, DOM manipulations. Before creating your own hook, have a look at [usehooks.com](https://usehooks.com/) for already built recipes, maybe you'll what you been looking for.