teleren/devto huggingface dataset:
Flawk Live Stream Outline - Week 3
Tags: showdev, startup, react, javascript
Published: 2019-10-30 13:29:00

> Cover Photo by Anders Jildén on Unsplash

## We have a public roadmap! You can vote for features you want to see!
## https://flawk.to/roadmap

Every week I do a stream as I build out my new company [flawk.to](https://flawk.to). I have posted a little about this previously ([#1](https://dev.to/ericadamski/creating-more-meaningful-interactions-4j2h), [#2](https://dev.to/ericadamski/i-m-building-a-product-should-i-stream-it-51nk)) and will continue to write about it as time goes on. Some feedback I got on how to make my streaming more useful for others was a plan! So each week I will be posting an outline of what I will be doing in the stream and what the goals of that stream will be.

Here is last weeks plan (sadly no recorded video this time):

Plan: https://dev.to/ericadamski/flawk-live-stream-outline-week-2-28c6

For this week I will be:

We are getting closer to the minimum amount of functionality to hand off to early access users. Currently I am stuck on getting the design and layout of the community and event lists and their individual pages. This will be a CSS heavy week. I will be using [styled-components](https://www.styled-components.com/), React and the relatively newly announced [framer-motion](https://www.framer.com/motion/) which has been awesome so far. I have picked out a few designs I like and will be playing around with them during the stream. Here are 3 from [dribbble](https://dribbble.com/) that I really enjoy.

* [Inspiration 1](https://cdn.dribbble.com/users/686119/screenshots/6338628/shoot_1_2x.png)
* [Inspiration 2](https://cdn.dribbble.com/users/1303787/screenshots/7079491/media/1278febcb8aaac1408a8175998b3af7c.png)
* [Inspiration 3](https://cdn.dribbble.com/users/4859/screenshots/6685757/foodima_dr_2x.png)

By the end of the stream I should:

* View a list of communities or events
* Click through to an individual community or event

Looking forward to seeing y'all on the stream! I will be streaming over here https://www.twitch.tv/ericadamski starting at 9PM EST
Hourly vs. Fixed-Price. Which is best? 🤔
Tags: freelance, beginners, career
Published: 2019-10-30 13:06:27

Hi all, 👋 I'm just graduate from coding Bootcamp and considering going into freelance in web development, and at the moment I'm researching the rates as a junior dev.

If you are or have been, a freelance web developer, which one is better to start out for the first paid gig? What are the rates usually in the market?🔎💼


Would like to hear about your thoughts. Any helps/advices is greatly appreciated!🙏
How to add a new item to a list in React
Tags: reactjsjavascript
Published: 2019-10-30 12:59:41

---
title: How to add a new item to a list in React
published: true
description: Submit a form and update the application state
tags: reactjs javascript
cover_image: https://ferrariwebdevelopment.s3.us-east-2.amazonaws.com/assets/20190921-add-grocery.jpeg
---

## Submit a form and update the application state

If you read the previous articles, you know that at this point in our grocery list application we have a form with an input field and a button.
What we enter in the input field, a grocery item name, is saved in the application state, ready to be added to the array of grocery items already present.
How do we add a new item to the array? We do it with the `addGrocery()` method.
Let's add the `addGrocery()` method to our class:

```
addGrocery = event => {
  // code to add grocery item here
}
```

When we enter a name in the input field and press the `Add` button, the first thing that happens is the browser reloads the page. This is the default action a browser takes after submitting a form.

We don't want this behavior, though, we would rather have the list be updated without page refresh, so we use `preventDefault()` to stop the browser from reloading the page:

```
`addGrocery` = event => {
  event.preventDefault();
}
```

The next thing we want to do is update the state of the application because we are adding something to it.
We update the state with the `setState()` function and we pass into `setState()` a new state object that merges what is currently in the state and the new thing we are adding.

So, we first define a `newGrocery` variable and assign to its `name` property the value of `state.name`.
This is the value that is updated by the `changeHandler()` function that takes its value from the input field.
We then call `setState()` passing this new object and add the new grocery item to the state.

```
let newGrocery = {
  name: this.state.name
}

this.setState(
  { groceries: [...this.state.groceries, newGrocery] }
)
```

Notice that in React we need to keep the state object immutable, so instead of updating the current state object we set groceries to a new array. We then add the current state to this new array using the spread (`...`) operator, and finally append the new grocery item at the end of the array.
So, the state gets a brand new array, populated with the current groceries and the new grocery we are adding.

If we now add a new grocery in our web page and submit the form, the new grocery object is added to the end of the array and displayed in the page.
Call for Alpha Testers for Heroku Cachet Add-on
Tags: heroku, cachet, statuspage
Published: 2019-10-30 12:31:37

I'm looking for alpha testers for a Hosted Cachet add-on. [Cachet](https://cachethq.io/) is a popular status page app. You can tryout a working demo at [demo.cachethq.io](https://demo.cachethq.io/)

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

I'm trying to find at least 10 people to try it out and point out any bugs they might run across. In return, you'll get a free hosted status page.

DM me or email nbosscher@blue-giraffe.ca and I'll get you alpha-access.

Any help you can give I would really appreciate! Thanks!
Cloud security monitoring tools
Published: 2019-10-30 12:10:12

Probably you know about the severity of cyberattacks. Companies are losing their data and ensuring huge financial damages due to the cyberattacks.
Helical provides the best cloud security monitoring tools for cloud security risks.

You can leverage this tool for your cloud security management.
For more details visit: https://helical-inc.com/hlcproducts/cloud-it-security-policy-auditing/
Note Taking App - Make your notes saved securely
Tags: privacy, security
Published: 2019-10-30 12:07:51

Full post found at this [Note Taking App – Make your notes saved securely](https://bytenbit.com/note-taking-app/)

[Takedown](https://notepad.bytenbit.com/) is the note taking app that aims to provide the security of your data. It is easy to use powerful, fast, required no sign-up. It helps to prioritize your work into three categories & makes the user easier to navigates to their work and get organized. [Takedown](https://notepad.bytenbit.com/) comes with unlimited storage & support mostly all types of browsers, and it’s completely free.

 

A secure place to put your thoughts, notes, ideas, and reminders in one place.
Define your tasks, manage & arrange task according to priority.



## **Note Taking App, How it works?**

One of the important features of [Takedown](https://notepad.bytenbit.com/) is security. It ensures that no data is sent over the server & saves notes on the client-side. Takedown uses the core features of HTML5 i.e Web storage (Web storage is more secure, and large amounts of data can be stored locally, without affecting website performance and comes with no expiration date). Takedown note taking app saved your notes automatically as you write and ensure that no data stored on a server.

[![Takedown note taking app](https://www.bytenbit.com/wp-content/uploads/2018/12/Takedown-note-taking-app.png)](https://notepad.bytenbit.com/)

## **User Experience** 

It gives the user great experience across all devices: mobile, tablet, or desktop. App is responsive, it will adjust dynamically according to screen sizes. For each category, the box gets expand automatically according to text. Nicely distraction-free designed so that users focus on work only & put all information at one place.

Security, with [Takedown](https://notepad.bytenbit.com/) data privacy concerns, is always the priority, takedown believes your data needs to be secure as possible from an advertiser. Considering security features, [Takedown](https://notepad.bytenbit.com/) saves all your data in your system, no data is sent over a server.



Takedown note taking app is an open-source app, Feel free to[ fork and contribute.](https://github.com/ByteNbit/bytenbit.github.io)

If you’re not using it though, now is a great time to start. If you’re already using [Takedown](https://notepad.bytenbit.com/) app? Let us know how it is working for you? Sound off in the comments below and let us know.

Ref: [ByteNbit A Technology blog - Every Little helps](https://bytenbit.com/note-taking-app/)
Rubber duck debugging doesn't need to involve a duck!
Tags: debugging, fun, discuss
Published: 2019-10-30 11:09:55

---
title: Rubber duck debugging doesn't need to involve a duck!
published: true
description: What is rubber duck debugging, and why does it work? 
tags: debugging, fun, discuss, 
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nfth0qkx8ylk58ug9bda.jpg
canonical_url: https://flipsphere.net/2019/10/30/rubber-duck-debugging-doesnt-need-to-involve-a-duck.html
---

######Cover image credit: https://www.pexels.com/photo/yellow-duckies-in-line-on-a-concrete-floor-106144/######

#What is Rubber Duck Debugging?#

Rubber Duck Debugging (or Rubber Ducking) is explaining to an inanimate object what your problem is, and in doing so finding a solution. Typically rubber ducks are used, but any inanimate object will do; my current rubber duck is a giraffe called Stumps!

![A good rubber duck doesn't have to be a duck!](https://thepracticaldev.s3.amazonaws.com/i/dctaq7eihh7e08gillll.JPG)


#How to Rubber Duck Debug:#

1. You get suck in your coding and you can't find the solution.
2. Take a deep breath to calm yourself.
3. Find a duck, giraffe, monkey, or other inanimate object with a face.
4. Explain to your "duck" what the problem is.
5. As you're talking your "duck" will implant the answer into your brain! Eureka!


#How does it work?#

Rubber Duck Debugging works because it forces you to break down a complex problem into smaller chunks as you explain it to your duck. For example:

Dev: "Duck, why isn't my email sending?"
Duck: "..."
Dev: "The email is generated automatically when someone completes the contact form on my website, and it should then send to the site admin..."
Duck: "..."
Dev: "OMG DUCK I'M USING THE WRONG VARIABLE!"

Sometimes we developers can't see the forest for the trees. We're in so deep into our code that we can no longer *see* the problem, regardless of how obvious it may be. Breaking down the problem section by section, line by line, can help us realise where the issue is.

Speaking aloud also helps us hear our thoughts differently. The very act of hearing yourself explain the problem is often all you need to bring forth a solution. How often have you found yourself just asking "why?" in front of your code and BAM - the solution hits you. 


**Discussion: What's your experience with rubber duck debugging? Do you find it helps you? Also, please show me your ducks!**
Open source e-commerce Rails 6 & GraphQL with JWT
Tags: rails, graphql, svelte, tailwindcss
Published: 2019-10-30 11:03:04

---
title: Open source e-commerce Rails 6 & GraphQL with JWT
published: true
description: An e-commerce backend powered by Rails 6, graphQL and JWT. It includes and admin section developed with Svelte JS and Apollo client.
tags: rails, graphql, svelte, tailwindcss
cover_image: https://thepracticaldev.s3.amazonaws.com/i/nxalozvkbkk5hyyskemy.jpg
---

[Demanda](https://github.com/jorgegorka/demanda) is an open source e-commerce made with Ruby on Rails, GraphQL and JWT.

It started as a student's material for a web development course I teach but it has evolved since. 

Whether you are looking for a resource to learn more about GraphQL, Ruby on Rails and JWT authentication or just want a basic e-commerce platform that you can evolve to suit your needs [Demanda](https://github.com/jorgegorka/demanda) can help you.

Backend is a ruby on rails well tested application using GraphQL and JWT for authentication.

There is also an example admin interface developed with Svelte JS and Apollo client. It uses TailwindCSS for styling.

I will post in detail about each aspect of the application like authentication, crud, testing, etc.

https://github.com/jorgegorka/demanda
Excited to release my first side project on ProductHunt
Tags: opensource, javascript, productivity
Published: 2019-10-30 10:56:46

Hi guys,

I've created releasly with a couple of friends in the office. This is a free tool to get notifications on new open-source releases and awesome-list links. 

Come see us on producthunt and let us know what you think

https://www.producthunt.com/posts/releasly
I finished Hacktoberfest for the first time
Tags: hacktoberfest, webdev, opensource, javascript
Published: 2019-10-30 10:44:02

---
title: I finished Hacktoberfest for the first time
published: true
description: 
tags: hacktoberfest, webdev, opensource, javascript
cover_image: https://thepracticaldev.s3.amazonaws.com/i/2fz40euv0lezdjah4q20.png
---

I hope you've had a good #Hacktoberfest. Did you order your 2019 Hacktoberfest t-shirt yet? 

2019 has been the first time I have participated in Hacktoberfest, and you could say I'm a new contributor to open source now.

I wasn't planning on participating at first, but I was reminded at a meetup partway through October that #Hacktoberfest was happening. There was still time, so I figured I would try to complete my 4 pull requests this year.

# My first 4 open source contributions for Hacktoberfest

My first 4 contributions have been pretty diverse.

I submitted a PR to an educational repository showcasing an example of JavaScript's way of retrieving and sending JSON data with an API.

The second PR was a logo for RoughJS, which is a library for generating graphics with a sketchy feel. I created the logo using RoughJS itself, which was kind of fun.

I worked on improving the SEO for an open-source website for artists.

For my last pull request I improved the documentation for DEITY Falcon, a React framework you can use to easily build headless PWA websites.


![Over 4 Pull Requests](https://thepracticaldev.s3.amazonaws.com/i/ojkbitf8309r38npp7kn.png)

# I started my own open source project

I think I have gotten much more familiar with open source this month. After finishing my 4 pull requests, I started my own open source project.

{% tweet 1188767202054418432 %}

I created a platform which is a talk index that includes upcoming conferences. The goal is to help you decide if you should go to a developer conference or not.

If this is something that interests you then I'd like to hear from you! I want to hear some ideas / suggestions on how we can improve ConfTalks to make it fulfill its goal of helping you decide wether you want to go to a conference or not. I made a [RFC (request for comments)](https://github.com/EddyVinck/ConfTalks/issues/46) on GitHub, but I also really appreciate comments here on DEV of course! Please help me help you with ConfTalks 🙂

If you want to get involved with ConfTalks, I created a 💌 [newsletter](https://emailoctopus.com/lists/b6cc50a1-f282-11e9-be00-06b4694bee2a/forms/subscribe) and a [community Slack workspace](https://join.slack.com/t/conftalks/shared_invite/enQtNzk1MjA1ODQ2NzM3LTRkMmU0YmRhZDEzYmUxZTEyYjhlMWYzOWIyYTU0NDBkMGFlN2U3MjJmNWE5MjM4ZDM1Yzg0M2QwZWUzODllMzM) you can join if you are interested in hearing more about ConfTalks or want to get contribute.

Check it out! https://conftalks.org

[![ConfTalks](https://thepracticaldev.s3.amazonaws.com/i/rvcfgn672lrsshrp80gd.jpg)](https://conftalks.org)

How has your Hacktoberfest been this year?
Using Map<String, String> with @PathVariable
Tags: maps, pathvariable, java, springboot
Published: 2021-05-24 12:56:56

---
title: Using Map<String, String> with @PathVariable
published: true
date: 2019-10-30 10:13:27 UTC
tags: maps,pathvariable,java,springboot
canonical_url: https://medium.com/java-epic/using-map-string-string-with-pathvariable-7d9b21ea9b71
---

#### Is that map populated with all path variable names and values?

![](https://cdn-images-1.medium.com/max/1024/0*Oq6Nenv5vZP1mvKm)<figcaption>Photo by <a href="https://unsplash.com/@davidmartinjr?utm_source=medium&amp;utm_medium=referral">David Martin</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral">Unsplash</a></figcaption>

**@PathVariable** is a Spring annotation which indicates that a method parameter should be bound to a URI template variable. If the method parameter is Map<String, String> then the map is populated with all path variable names and values.

**It has the following optional elements:**

- name — name of the path variable to bind to
- required — tells whether the path variable is required
- value — alias for name

```
@GetMapping(value = "/book/{author}/{title}")
public void process3(@PathVariable Map<String, String> vals) {

   logger.info("{}: {}", vals.get("author"), vals.get("title"));

}
```

**Doc**  : [http://zetcode.com/spring/pathvariable/](http://zetcode.com/spring/pathvariable/)

* * *
Build Angular 9|8 Universal CRUD App with MongoDB SSR
Tags: angular, angular89, expressjs, mongodb
Published: 2020-02-07 09:16:51

---
title: Build Angular 9|8 Universal CRUD App with MongoDB SSR
published: true
date: 2019-10-30 10:01:02 UTC
tags: Angular ,Angular 8|9,Express JS,MongoDB
canonical_url: https://www.positronx.io/build-angular-universal-crud-app-with-mongodb-server-side-rendering/
---

The post [Build Angular 8|9 Universal CRUD App with MongoDB SSR](https://www.positronx.io/build-angular-universal-crud-app-with-mongodb-server-side-rendering/) appeared first on [positronX.io](https://www.positronx.io).

**Step by step practical guide on building an Angular 8|9 Universal CRUD (Create, Read, Update, Delete) operation web application with MongoDB Server-side Rendering (SSR).**

All the final code of this tutorial can be found by clicking on the below button on my Github repository:

## Server-side Rendering (SSR): Intro to Angular Universal

[click here to read more](https://www.positronx.io/build-angular-universal-crud-app-with-mongodb-server-side-rendering/)
Will you join me for my 30ArticlesForNovember challenge on Twitter?
Tags: meta
Published: 2019-10-30 09:55:44

Today I announced a small challenge for me: the #30ArticlesForNovember.

The goal is to share on Twitter each day a different article that I find interesting. Maybe not only about tech and programming.

If you want to [join me here](https://twitter.com/BelloneDavide/status/1189474483503022081?s=20), I'd be really happy! 

{% twitter 1189474483503022081 %}
Team communication: how to achieve your goals in the workplace
Tags: communication
Published: 2019-10-30 09:28:09

---
title: Team communication: how to achieve your goals in the workplace
published: true
description: Team communication lies at the heart of every business. Need to motivate colleagues? Get a raise? With the right approach, you can achieve your dreams faster.
tags: communication
cover_image: https://www.mindk.com/blog/wp-content/uploads/2019/10/brainstorming-businesswomen-colleagues-1093913-1920x1080.jpg
canonical_url: https://www.mindk.com/blog/team-communication/
---
There’s a quote from the ’90s that never loses relevance: “No matter what job you have in life, your success will be determined 5% by your academic credentials, 15% by your professional experiences, and 80% by your communication skills.“

Even though the world has become more digital, we still work with humans. Thus, the success of your ideas and attempts to change something will 80% depend on your ability to negotiate and provide strong arguments.

Here, at MindK we take communication with clients and team seriously. Recently, I’ve had a chance to attend a two-day workshop and learn how to be a better communicator. Armed with my own experience as a project manager and the new knowledge, I organized a training session for our team and noted down the most useful insights for you.

[Continue reading...](https://www.mindk.com/blog/team-communication/)
Password reset - Magento 2
Tags: magento2
Published: 2019-10-30 08:37:44

We always worry when a password reset needs to be done in our Dev environments when there is no email service installed.

**Easiest way** : Install n98 tool
```
wget https://files.magerun.net/n98-magerun2.phar
chmod +x ./n98-magerun2.phar
```
```
php n98-magerun2.phar customer:change-password
```



**Another way**
In M2, there is a way to do this if you have access to the Database.

When the password reset link is clicked and the email has been submitted, there will be a value for the rp_token column in datatable customer_entity in M2 database.
The parameter passed as the "token" will be the above value.

The parameter passed as the "id" will be customer ID (entity_Id in cstomer_entity datatable).  

You can use the following link with the proper parameter values to reset the password.
https://test.com/customer/account/createPassword/?id=125565&token=5b029aeae4659db7939c38970680c45b
Learning english in virtual reality
Tags: virtual, reality, vr, unreal
Published: 2019-10-30 08:31:53

[watch video here](https://imgur.com/gallery/WykBP1o)


At our training center we also teach english in addition to tech (programming languages, AutoCAD, 3DS Max, machine learning and vr).  The english courses are done in preparation for a test called "IELTS" (International English Language Testing System), which helps them during college admissions and scholarships.

For our spoken english module we've been using #vr  in order to increase student interest and increase the time students spend practicing speaking in english. This experential learning technique has been very useful as it has resulted in an increase in the amount of time students spend on this module willingly.

They're having so much fun, they want to spend more time learning!
Node, Express - REST API Performance test With & without Redis cache
Tags: redis, node, express, restapi
Published: 2019-10-30 08:12:24

As per the official Redis site 

"Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cache and message broker".

For more info please go through link [Redis](https://redis.io/topics/introduction#targetText=Redis%20is%20an%20open%20source,with%20radius%20queries%20and%20streams.)


Now we are building sample REST API, testing with and without Redis integration.


CODE BASE GITHUB LINK  [redisCache_nodejs_express_API](https://github.com/srinivasKandukuri/redisCache_nodejs_express_API)

Files/Folder Structure.

![Redis](https://thepracticaldev.s3.amazonaws.com/i/51n310c1t4wollsihu6z.png)


We are using Some external data-source(API) for testing purpose.


Snippet 

```js

function cacheMid(req,res,next){
    var api = req.path;
    client.get(api, function(err, data){
        if (data != null) {
            console.log("from Cache");
            res.send(JSON.parse(data));
        } else {
            next();
        }
    })
}

function getAPI(req,res){
   axios.get('http://datasource.kapsarc.org/api/datasets/1.0/search/?rows=500')
    .then(function (response) {
        var api = req.path;
        var dataset = response.data;
        client.setex(api, 50, JSON.stringify(dataset));
        console.log("from API");
        res.send(response.data);
    })
    .catch(function (error) {
      console.log(error);
    });
}

// Router
app.get('/getAPI',cacheMid, getAPI);

```

When we call /getAPI in postman then cacheMid middleware get called and check for mapped key, here it is 'req.path' is the key
if the there is any data with key in redis database then it will return data, otherwise it will got to else block & call the external API, get the json data, then we are setting into redis database.

Performance API TEST

# localhost:4000/getAPI



![image](https://raw.githubusercontent.com/srinivasKandukuri/redisCache_nodejs_express_API/master/img/gitImg.png)