teleren/devto huggingface dataset:
Full Tutorial: Microservices using GraphQL, React, Redux, Node.js, Sequelize and MySQL #7
Tags: react, node, webdev, javascript
Published: 2019-12-28 02:36:26

**Update:** [Part 8 is out!](https://dev.to/bettercodingacademy/i-m-a-professional-react-developer-and-here-s-how-i-create-react-powered-microservices-using-graphql-and-node-js-8-1jdg)

**About Me:** I've been a professional web developer for just over 10 years now. I'm currently the lead web development instructor at [Better Coding Academy](https://codebetter.com.au), and as part of what I do, I post videos on our YouTube channel at [https://www.youtube.com/c/BetterCodingAcademy](https://www.youtube.com/c/BetterCodingAcademy).

_(Subscribe for awesome web development content!)_

This is part 7 in a full tutorial on how to set up a GraphQL Microservices-powered React app. ([Here's part 6!](https://dev.to/bettercodingacademy/i-m-a-professional-react-developer-and-here-s-how-i-create-a-graphql-microservices-powered-react-app-with-node-js-and-mysql-6-17pl))

In this video, I start working on detecting and working with the user session in the frontend React app, hooking it up to the backend microservices.

I hope you enjoy!

{% youtube 0uQPQIdnWko %}

Happy coding!

Full source code: [https://github.com/parkroolucas/microservices-demo](https://github.com/parkroolucas/microservices-demo)
Learn NPM - The Node Package Manager for JavaScript 
Tags: javascript, node, npm, webdev
Published: 2019-12-28 02:32:50

## Free JavaScript Tutorial - NPM for Beginners - Fast Track

### Learn NPM - The Node Package Manager for JavaScript

NPM stands for Node Package Manager and it is used mainly to download and install JavaScript Packages. This course would be beneficial for any web developer who is looking to make his or her life easier by using code that is already written instead of starting from scratch.

NPM comes with Nodejs already as a default so we would need to download that first in order for us to use it. This is a short course full of useful content and tips.

What you'll learn
* Students will learn the fundamentals of NPM

{% youtube syKHSerLsGY %}
Building an interactive form
Tags: html, css, webdev, tutorial
Published: 2019-12-28 02:02:51

---
title: Building an interactive form
published: true
description: Learn how to develop an interactive login form in an afternoon, with HTML + CSS + JS.
tags: HTML,CSS,webdev,tutorial
series: Building an interactive form
cover_image: https://thepracticaldev.s3.amazonaws.com/i/1zn2rvs6wiztswtluegk.png
---

A few weeks back, [I wrote an article about how to build an interactive login form just using HTML and CSS](https://dev.to/alvaromontoro/building-an-interactive-login-form-with-html-and-css-1i2n) (without any JavaScript or SVG). It was a fun challenge and I learned a lot, but it had many inconveniences. 

![Screenshot of the form](https://thepracticaldev.s3.amazonaws.com/i/xz740ctxmsn0sct3d5xk.png)
<figcaption>Screenshot of the end result</figcaption>

Some of the things we had to do because of the original restrictions were not maintainable or didn't work on many browsers, and I decided to rebuild the form adding some JavaScript to handle the interactivity.

Also, the post was too long and not detailed enough; so for this new form (and article), we broke the steps a little, explaining why we made some choice and giving more details about the whole process.

The series will be divided into 6 parts:

- Introduction (this post!)
- HTML structure
- Initial styles
- CSS image
- Advanced styles
- JS interactions

You may disagree with many of the choices I make through the series (feel free to leave a comment), and I may rumble or rant about some things along the way, but at the end of this series, I hope you really enjoyed the process.
React Hooks: useEffect
Tags: react, hooks
Published: 2019-10-15 21:31:05

---
title: React Hooks: useEffect
published: true
description: Notes on the useEffect hook in React
tags: react, hooks
---

useEffect allows you to fire side effects in functional components.

It acts much like componentDidMount, but it will fire any time the component re-renders unless you pass in a secondary parameter – an array. This array can have any (or no) value, but generally you would link it to whatever property you are trying to update or keep track of with useEffect. If the array is empty, it will act very much like componentDidMount and only fire once when the component is first rendered, and not on subsequent re-renders.

In the example below, the useEffect is fetching some data to display on the frontend to the user. Normally one would probably want to use an async/await to do this, but there are some caveats when doing this with useEffect.

Async actually returns an ‘asyncFunc’ object, which useEffect does not want. So if you want to write an asynchronous function inside useEffect, you would want to declare the async as a named function inside the body of useEffect.

Another caveat is that if you want to use a conditional, it must be placed inside of the useEffect function. You cannot place the useEffect function inside of a conditional. See the code below.

```javascript
import React, {useState, useEffect} from 'react';

import Card from '../card/card.component';

// in this example we are getting data from an API and displaying it to the user, who can type a query into a search field
const UseEffectExample = () => {
  if (searchQuery.length > 0) {
    //set the initial values
    const [user, setUser] = useState(null);
    const [searchQuery, setSearchQuery] = useState('');

    useEffect(() => {
      const fetchFunc = async () => {
        const response = await fetch(`https://jsonplaceholder.typicode.com/users?username=${searchQuery}`);

        // convert the response to JSON     
        const resJson = await response.json();

        // in this case, the response is a an array, so using resJson[0] will return the first item of any response (or undefined/null if none)
        setUser(resJson[0]);      
      };

      fetchFunc();
      
    }, [searchQuery]); // place the property inside the array so that whenever the search query changes, call useEffect again
  }
  
  
  return (
  // your UI code here    
  )
}
```
What Are Your Programming Goals for 2020?
Tags: 2020, discuss, resolutions
Published: 2019-12-28 01:27:58

The decade of 2010 has been a long and action-packed one. Donald Trump became president of the United States and was also impeached, the first iPad was released, same-sex marriage became legal in the United States, and everyone went crazy over Pokemon Go, Minecraft, and Fortnite.

This decade has been a big one for me as well. I went from being a complete stranger to the computer programming world, to someone who can actually understand the programming memes on Twitter. I was introduced to a world of people who make the technology around us function. I am grateful for being introduced to this craft, and my life would not be the same without my interest in computers.

I accomplished a number of things, such as starting a GitHub account and making a few fun projects on it, learning the art of game development, and starting a personal blog. 

In the decade of 2020, I hope to start getting serious about computer programming and studying for certifications within the field. I'm also planning to look into a part-time job in the software development field, such as becoming a software contractor. I also plan to write more on the dev.to platform. Even though I am new to this community, I enjoy the content you guys create, and I hope to contribute and do my part by sharing my stories.

I would like to thank everyone on the internet who has helped me come to this point in my life where I feel like I am an included member of the computer programming community. I have never taken a formal class in computer programming or science, and I have the internet to thank for all of the educational content that helped me learn how to write code.

What about you? What do you plan to accomplish in 2020? Tell us about your career goals, bucket list items, or studying goals.
Pleasant parsing of AWS Lambda logs
Tags: aws, lambda, observability, serverless
Published: 2019-12-28 01:25:31

---
title: Pleasant parsing of AWS Lambda logs
published: true
description: Use "saw" to process AWS Lambda logs
tags: aws,lambda,observability,serverless
---


![Photo by Markus Spiske on Unsplash](https://thepracticaldev.s3.amazonaws.com/i/a3a21oxmxk3wft3eis8p.jpg)
<sub><sup>_Photo by Markus Spiske on Unsplash_</sub></sup>


Looking up logs in AWS Cloud Console is a tedious work.
CloudWatch interface has its own limitation. 
Using shell commands and tools is much more productive.

One of not so known tools is [saw](https://github.com/TylerBrock/saw).

In this article I will show you some typical use cases when developing and debugging Lambda functions. 

By "debugging" I mean the simplest way called also "print line" debugging ;) when you put some `console.log` statements in your code, deploy it, execute and watch at the output logs.


Assuming you have already downloaded and installed saw tool (instruction at [github](https://github.com/TylerBrock/saw)), let's prepare environment so that saw can connect to AWS.

Set the following environment variables:

```
export AWS_ACCESS_KEY_ID=<put your AWS access key here>
export AWS_SECRET_ACCESS_KEY=<put your AWS secret key here>
export AWS_REGION=<put your AWS region here, e.g.:eu-west-1>
```

### Use case 1: Watch lambda logs real-time

```
 saw watch "/aws/lambda/my-lambda-function"
```

The above command will fetch logs for Lambda named `my-lambda-function` in a similar way like `tail -f filename` command works in Linux for printing out lines added to a file in real time.


### Use case 2: Filter out old logs in search for particular expression


```
saw get "/aws/lambda/my-lambda-function" \
--start 2019-09-17T10:52:00.00Z \
--stop 2019-09-17T23:00:00.00Z \
--prefix '2019/09/19/[$LATEST]dc80521928524b82837eae6ee718d217' \
> function.log
```

The above command will fetch logs from 2019-09-17 starting at 10:52:00 UTC and ending at 23:00:00 UTC and redirect them to file `function.log` on your local. 

In addition, it will filter out logs from particular log stream (`2019/09/19/[$LATEST]dc80521928524b82837eae6ee718d217`)

The `--start`, `--stop` and `--prefix` arguments are optional, but I would recommend using them unless you want to fetch all the logs for particular function which can be huge amount of data.

Having the logs in a local file is a big advantage as you can further parse it or search with tools like `sed`, `grep`, open in editor etc.

How would you know which log stream to query? Answer to this question you will find in my other article: [Tracking failed SQS messages](https://dev.to/piczmar_0/tracking-failed-sqs-messages-21l6)
A FULL-STACK TYPESCRIPT APP TO SEND PUSH-NOTIFICATIONS USING EXPO
Tags: node, typescript, react, reactnative
Published: 2019-12-28 00:27:13

HEY, PEOPLE!

Well, I don't use Expo, but I ended up working on a recently done Expo project where one of the features I was supposed to develop was
a way to connect the server and some other internal APIs and services (such as a payments API) so they could send notifications to the App made with Expo.
In addition, another requirement was that Marketing personnel could also send notifications to specific users through a user-friendly interface that was connected to the Company database.

And to solve this problem, I created a Dashboard using React (which Marketing people will use) that lists all Company users and sends notifications to a RESTful API made with NodeJS (which will also be used by internal APIs and services) that forwards
notifications to Expo servers to be delivered to their vendors (FCM for Android and APNs for iOS). - More info on repos!

NOTE: The projects listed here are just a simplification of the modules I made, ok?

Without further ado, follow the repos!

Dashboard: https://github.com/steniowagner/expo-notifications-dashboard

App: https://github.com/steniowagner/expo-notifications-app

Api: https://github.com/steniowagner/expo-notifications-api

A great 2020 to you! 😘
laravel 6 sortable table example
Published: 2020-01-01 09:52:39

---
title: laravel 6 sortable table example
published: true
date: 2019-12-28 00:00:00 UTC
tags: 
canonical_url: 
---

Hi GuysI always to find something new article for laravel developers So Today I will learn you column sorting with pagination example We will sort your table with pagination in laravelWe will do it column sorting using kyslikcolumnsortable composer packagekyslikcolumnsortable packag
Laravel 6  Log viewer Example
Published: 2019-12-30 13:01:50

---
title: Laravel 6  Log viewer Example
published: true
date: 2019-12-28 00:00:00 UTC
tags: 
canonical_url: 
---

Hi GuysIn this TutorialsI will learn you how to install log viewer package in laravel 6you can simply and easy to logviewer package in laravel 6Laravel provides log file that store all runtime error exception or any other error that get we can view log file better using LogViewer compos
2019 Achievements 💪 
Tags: yearinreview, android, career
Published: 2019-12-27 23:45:09

2019 was particularly rich for me. This is a reminder for me to don't forgot and to keep moving forward in 2020.

* I started to teach Android for a professional formation
* I have everything ready to launch my own app business in 2020
* I started a new job with lot of challenges (with a nice rise of income 🤑)
* I learned a new language(Kotlin) and I love it
* I learned a lot about modern Android development 
* I have participate at Hacktoberfest (and got the T-shirt 😊)
* I can watch any talks or series in English without subtitles
* (off topic) I validated 7a/5.11d grade outdoor climbing 💪

What are yours ?
Toastr Notification In Laravel 6
Published: 2020-01-11 13:19:46

---
title: Toastr Notification In Laravel 6
published: true
date: 2019-12-28 00:00:00 UTC
tags: 
canonical_url: 
---

Hi GuysIn this tutorial i will share with you how to install and use toastr notifications using yoeunestoastr package in laravel 6 applicationwe will use yoeunestoastr packagewe will write step be step tutorial for laravel 6 toastr notificationsToastr notifications yoeunestoastr packa
Happy Holidays & Thank You
Tags: thankyou, webdev, mobiledev
Published: 2019-12-27 23:55:35

Wanted to say thanks to all of the people who have read my content here and also found there way over to my [@YouTube channel](https://www.youtube.com/channel/UCMCcqbJpyL3LAv3PJeYz2bg) for following, liking and reading my content.

I use to blog and post code frequently, even wrote a book!!

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

But eventually got caught up in work/life and just stopped doing it for almost a year. One day this past June, in the middle of a fair bit of stress I decided to start again to learn something new to balance out the day to day and share it with others. 

>So far 15 post, 1780 followers and 37K views

Sharing, teaching helping others is part of what I do in my day job  but doing it on my own terms makes it so much less stressful and so much more satisfying.

So thanks for your responses because it confirmed that is was something I should have never stopped doing.
What to put on my business card? 
Tags: businesscard, jobtitle, discuss
Published: 2019-12-27 23:46:23

I've got a project: I'm making a business card that has wifi. It'll have a cut out through which you see some of the hardware (including a led), a micro-usb port to provide it power and instructions on the back.

Now, the front should contain my name, contact details and a job title. I just don't know yet what that job title should be.

This is the frame within which I'm working:

- I'm a software developer who likes to work full-stack. I'm comfortable in a large number of languages and also do some hardware (microcontrollers) in projects like this one. 
- I want to stay away from qualifiers like "Junior", "Medior" and "Senior" 
- I'd say I'm a programmer as well as a developer, but I'd prefer to use the latter because it sounds more professional and less hobbyist to me
- I want something that's a bit more imaginative, though
- the best thing I've come up with so far is "Software Developer & Tinkerer Extraordinaire" (probably spread over two lines). I don't like the "extraordinaire" and I'm not entirely convinced of "tinkerer". I like the "software developer" and the combination of something serious and something tongue in cheek, but I'm not dead-set on either.

Ideas? Opinions?
2020: Bringing in a New Decade
Tags: productivity, 2020, goals
Published: 2019-12-27 23:37:18

In 2017, I wasn’t a goal-oriented person or at least I didn’t think about goals the way I do now. This year, I started using Google Calendar and Notion to get my ideas together and plan them out.

2019 was a year where I evaluated my life and decisions. My goals from 2018 were clear but not well planned. I fell short of a lot of goals and some I didn’t even try at all. I have a list of ideas and things that I want to do. So 2020 will be the year.

Like I did last year, I listed out the project ideas, blog posts, future reading list that I want to do in 2020 using Notion and my BUJO.

### Successful Goals
1. Drink More Water — I think it was 60% increase
2. Read More — 15 Books completed, 20 Books picked up
3. Portfolio Redesigned — It looks better

### Try Again, Maybe Not
1. Japanese — I know very few words and Kanji is hard
2. Blog — I few off with the posts
3. Coding — No huge projects / not consistent
4. Mediation — Found out I hated it


# My Top Blog Posts
{% medium https://medium.com/p/omlet-arcade-review-4ade841f1ff8 %}
{% medium https://medium.com/jmspaceblog/why-notion-but-why-not-e97433ad9e4a %}
{% medium https://medium.com/jmspaceblog/start-a-bullet-journal-69b389e9278d %}

Overall, my blog posts have gotten a lot of views over the past year. This has encouraged me to write more posts for 2020.

### Favorite Apps
1. YouTube — The New TV
2. Minecraft — Infinite fun
3. Call of Duty Mobile -- Come on, it’s COD!!
4. Notion — Productivity and Organization
5. Google Keep & Tasks -- A must for quick notes and to-dos
6. Google Calendar -- It’s keeping on top of dates
7. Libby — The library app
8. Musi — Still better than Pandora and YouTube
9. Spotify -- They get me better than Tidal and YouTube
10. Amazon -- Unfortunately, I’ve been looking at future purchases
11. Pinterest -- Just because of the endless ideas

There are apps from last year that I do not use anymore. Either they have been replaced are no longer used. I have also let go of Facebook and Snapchat completely and I have spent less time on Twitter and Instagram. I use Twitter to communicate with the outside world and Instagram for seeing what people create. No more endless scrolling for me.

I have stop using Asana and completely moved to Notion. Notion has risen as the all in one app for productivity and project management.

# 2019 vs 2020
## Coding

**Goal: JavaScript applications and Backend**

My goal for 2019 was to get into backend, but as I slowly realized that my laptop was starting to put me down. Doing the basics front-end was too much. So learning backend was put on hold and still will be on hold. I just started using React. I want to use the first 6 months creating React projects. I also want to get into web design more by using Figma.

##Blogging and Social Media

**2019 Goal:**

*I just want to do more. I want a minimum of 1 post a month. I want to share images and videos of the websites that I create.*

2020 goal will not change much. There will just be more to share. Before the year is up, I will come up with blogs for the year.
Run v0.6.5 - Recent Updates, 300 Stars, Homebrew Support!
Tags: showdev, go, tools
Published: 2019-12-27 22:59:02

Run: Easily manage and invoke small scripts and wrappers

* https://github.com/TekWizely/run

---

It's been several days since my initial launch on the socials, and I'd like to declare the launch as a success!

Run was very well received, and is currently enjoying over 300 Stars on GitHub

I'd like to share an update on recent changes.  You can read about them below.

If you're at all interested in managing task runners and scripts, I hope you will give my project a try.

I am happy to answer any questions you might have.

Thank you and Happy Holidays!

-TekWizely

---

#### Homebrew Support

Thanks to Run catching the eye of an official Brew maintainer[1], we were able to get a formula created pretty quickly.

Instructions here:

* https://github.com/TekWizely/run#brew


#### Passing Options Through to Command Script

Thanks to user Gys[2] reporting on a use-case they were trying to fit, run now passes all arguments through to the command script by default.

Learn more here:

* https://github.com/TekWizely/run#passing-options-directly-through-to-the-command-script


#### Auto-Detecting `#!` Scripts

Run now auto-detects the `#!` line in your command script and adjusts its execution logic accordingly.

Learn more here:

* https://github.com/TekWizely/run#custom--support


#### Using a Dash (`'-'`) in Command Names

I was making a Runfile with a `list-all` command and discovered that I couldn't invoke it, doh!

So I quickly updated the rules for command naming to support the `'-'` character.

Learn more here:

* https://github.com/TekWizely/run#naming-commands


#### Fixed : Panic if Last Line Non-Empty

User chabad360[3] discovered almost immediately that Run panicked if the last line of the file was not an empty line.

Thankfully, they took time to submit an issue and the bug was fixed pretty quickly.

---
[1]https://github.com/dawidd6
[2]https://github.com/Gys
[3]https://github.com/chabad360
Day 60 : Searching For
Tags: hiphop, code, coding, lifelongdev
Published: 2019-12-27 22:35:30

_liner notes_:
- Professional : Basically spent the day researching and searching for information for some projects for work.

- Personal : Did my laundry. Thanks to the holidays, didn't have to do. Worked on my side project. I was able to get the speech recognition working the way I want to. Decided to tackle trying to get the presentation slides to show up on a page. Little did I know that the library I am planning to use doesn't like to be embedded into other pages. haha We'll see about that. I'm thinking I may have to make a web component so that the slides have their own DOM (shadow) as if it was the only thing on the page. Will it work? Not sure, that's why coding is fascinating to me. Always new challenges!

![Valley of trees with mountains on both sides in Yosemite California](https://thepracticaldev.s3.amazonaws.com/i/xdsys7ide6mljvvg5yx9.png)

Going to see if the web component will fix my situation with the slides. Got to finish up some pre-work for this week's radio show. Maybe play a game on Switch and call it a night.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube wNrEWwQ9wU4 %}