teleren/devto huggingface dataset:
Extracting React Components
Published: 2021-10-06 01:02:51

And **React** for the home stretch. After struggling with vanilla JavaScript, a language seemingly bound by few rules, learning React was almost comforting. In React, there's structure and how data flows is clearly defined. With a myriad of chat apps, from Facebook to Slack, I thought: *Why not add another one to the mix?*

#Why React#
Despite succumbing to many hard rules, React is efficient and flexible. Code is broken up into small, isolated pieces, which make up components. These components interact and communicate with each other, building complex UIs. 

##Components##
**Components** are independent, reusable bits of code. Together, they make up an app. They take in parameters called **props** and display views through a `render()` method. 

While building my chat app, I was initially writing big, complicated components while trying to get the flow of things. The `render()` method returned long descriptions, full of JSX, which goes against the core concepts of React. My code was neither independent nor flexible. 

![oh no reaction](https://zandlslant.com/wp-content/uploads/2019/09/webcomicNameMashup-1.png)

##Cleaning Up the Code##
In all of my components, I noticed I had copied and pasted code for a header over and over again, so it made sense to refactor that code into its own lil' component. 

There are two types of components: **functional components** and **class components**. To define a component is as easy as writing a function: 

![code snippet of react functional component](https://i.ibb.co/Qr2RJTD/Screen-Shot-2021-10-05-at-7-15-52-PM.png)

I assigned an arrow function to a variable Header. The function returns an element, which is a description of what I want my header to look like and that's fancy text - still text but fancy. I wrapped my `<h3>` tags in a `<div>` because React components can only return a single element.  

And there it is - a super simple and easy lil' functional React component. 

Then, I **export** it to be used somewhere else. 

###Rendering a Component###
Next, to render it in another class component, I **import** it at the top. 

`import {function} + relative file path`

Using JSX, I can basically place the code wherever I want and as many times as I want in the `render()` method. 

![code snippet of rendering react functional component in class component](https://i.ibb.co/fxZcs24/Screen-Shot-2021-10-05-at-7-54-25-PM.png)

Those same steps can be applied to other pieces of code, especially HTML elements, creating code that is flexible, efficient, and easy to read.
Node.js & Deno Comparison
Tags: javascript, deno, beginners
Published: 2021-10-05 20:55:53

## So what is Deno?

Deno is JavaScript , typescript runtime like node.js but it can run typescript natively and has so many new features related to security and module delivery.

## Why compare to node.js?

At it’s core Deno is same as node and they both uses V8 engine for javascript execution and also their creator [Ryan Dhal](https://tinyclouds.org/) is same but they are completely different how you manage your dependencies and also files.

## Why You Should Use.

### Why you should use Deno?

Deno has future because of it’s growing community and also it has so many features that node is lacking and also it is so much secure and better run time than node.

### Why you should use node?

Although Deno is future proof but node has so much bigger community than any other platform and also if you find yourself stuck you can easily find solution.

## Things that are changed with Deno.

- Have to give [permission](https://deno.land/manual/runtime/permission_apis) for accessing files read and write , net , hrtime , etc.
- [Importing modules](https://deno.land/manual/linking_to_external_code) is completely change and now you can import from url and file sitting on CDN
- No-Package Manager / No-Modules Folder. All the modules fetch from URL cache under Deno and you don’t need to worry about that
- Don’t worry about different setup for typescript it’s just works out of the box.
- Deno has different built in APIs than node because all of async calls end up in some sort of promise.

## Conclusion

Deno is the future, but node is current the king for JavaScript development thanks to massive size of community and millions of open source package.
Do you talk to your users?
Tags: usability, agile, users
Published: 2021-10-18 10:46:28

---
title: Do you talk to your users?
published: true
date: 2021-10-06 00:00:00 UTC
tags: usability,agile,users
canonical_url: https://jhall.io/archive/2021/10/06/do-you-talk-to-your-users/
---

How often do you talk to the users of the product your team builds?

If you’re building an eCommerce site, how often do you talk to the shoppers who shop on your site?

If you build CI/CD pipelines, how often do you talk to the developers whose code the pipeline executes?

If you automate stock trades, how often do you talk to investors?

If you’re not doing these things, how do you know your efforts are producing the results your users need and want?

If you want to build good, useful products, this isn’t the job of a user researcher. It’s your job as a developer, product owner, UX designer, or any other product contributor.

It can (and should) take many forms: Talk to your users before you build the product, to learn what to build. Talk to your users as you’re building the product for [usability testing](https://jhall.io/jonathan-test/). Talk to your users after you’ve built the product, for validation that you built the right thing, and to learn how to iterate.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
My first jam on the JAMstack
Tags: beginners, jamstack, api, decodingcoding
Published: 2021-10-05 23:54:05

---
title: My first jam on the JAMstack
published: true
description: Is this what love at first sight feels like?
tags: beginners, jamstack, API, decodingcoding
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/29zmz0p1f2j9qg5nirdn.jpg
---

### Is this what love at first sight feels like?

---

I got introduced to the world of JAMstack not too long ago. I had heard crazy loads about GatsbyJS and Netlify previously from other indie developers, but even after checking out their websites, I could not yet grasp the significance behind these new web technologies. Only after being introduced to the larger context and trend behind [JAMstack](https://jamstack.org/) and falling down the Google rabbit hole reading up more articles about it, did it all make sense.

Connecting up a bunch of APIs using Javascript to run your site, while updating content via Markup, feels like the future. Much of the heavy lifting on back-end code is abstracted away, which to a newbie coder like me, feels a lot less scary and a lot more time-saving to get a site up and running. The fact that it serves up static pages gives it a great speed and security boost, but the sites are hardly static, because you can serve up dynamic content via APIs too. The modular aspect of stacking these API services on top of one another feels so similar to the nocode approaches I’m familiar with, of meshing different web services together to make a product. Don’t things seem to be moving towards more abstraction, less coding? JAMstack seems to be a step closer towards the direction of nocode, if you ask me. 

After all that research and reading up documentation, I was pretty convinced to try setting up a JAMstack site today, via a combination of GatsbyJS, Netlify, and Netlify CMS. But chance encounter with [Stackbit](https://www.stackbit.com https://jamstack.org/) made all that unnecessary. In just a few minutes on Stackbit’s visual onboarding tool, it connected up my Github and Netlify accounts, and generated a static site based on a SaaS theme. And voila! I have a boilerplate JAMstack website already, and the only thing left that I needed to do to to make it truly mine was to customise the content, and link up a custom domain. I didn’t even need to touch any command line, install NodeJS, or code any Javascript. The ease of setting up a blazingly fast website based on modern technologies, all in a few minutes, just blew my mind.

Did I mention all this was FREE? Yes free, like air. 

Crazy!

---

Follow my daily writings on [Lifelog](https://golifelog.com/goals/30), where I write about learning to code, goals, productivity, indie hacking and tech for good.
Birthday Cakes in Ernakulam
Tags: cakes, bakers
Published: 2021-10-05 09:49:24

One of Ernakulam's best bakeries, Rising Loaf, provides handcrafted premium made-to-order baked treats that are free of preservatives and additives. Custom cakes, delicacies, and gourmet sweets are available. Our blends are one-of-a-kind because they mix a great deal of skill and expertise with natural baking ingredients to provide you with the best sweetness and taste. We take pride in giving every one of our clients, big and small, an amazing experience.
Birthday Cakes in Ernakulam is committed to making high-quality breads devoid of artificial preservatives, colours, or flavours. All of our bread loaves, cakes, cookies, donuts and muffins, and cupcakes are lovingly created in Ernakulam's cleanest environment. The fullness of our clients' grins when they try our exquisite items and return for more is how we define success at Rising Loaf. They're the cherry on top of our cake, the driving force behind our efforts to improve our baking and customer service.
To maintain the authentic taste and fresh flavours, we are captivated by using only high-quality and fresh ingredients in our confectioneries. The fullness of our clients' grins when they try our exquisite items and return for more is how we define success at Rising Loaf. They're the cherry on top of our cake, the driving force behind our efforts to improve our baking and customer service. Rising Loaf, one of Ernakulam's best bakeries, was created by friends with a passion for baking with the purpose of making handcrafted premium baked products that are completely free of harmful food preservatives and additives and delivering them to your door.
Mistakes as a Beginner Programmer
Tags: beginners, webdev, codenewbie, javascript
Published: 2021-10-05 23:15:10

Hello,Dev Friends.In this article I want to talk about some of the mistakes we often do as a beginner in programming.Some of them are from my experiences while some of them are common mistakes.

So,here we go:

1.Not setting the end goal clearly,for example,"I want an entry/mid level React Developer job in *some place* by *some date*."You need to know first what do you exactly want.It can be a job in Data Science,Python,etc.Make an estimated deadline based on your study plan.

2.Planning on the mindset required.As per my opinion,you cannot just simply start doing something without planning and understanding the mindset required behind coding.Do you understand the essence of being a programmer!

3.This is an important one.Break the problem,solve the problem first and then code the solution.Do not code directly.

4.Be confident about the language and frameworks you want to learn and stick to it.Do not get confused in between and try to learn everything.For example,if you want to learn web development then you need to learn HTML,CSS,JavaScript and then decide if you want to learn Vue/React/Angular,etc.

5.Have a portfolio with few good projects to apply for the job.Maintain those projects on Github.

6.The job of a Software Developer is not just to code but to solve problems.This is an important point and we need to understand the depth of it.To be a better problem solver,practice DS and Algo questions daily in your preferred language.

7.Solve those problems again which you failed to solve in your previous interviews.Most of us leave it unsolved.

8.Tutorial Hell:This is a very common issue which we all face in the beginning.I would suggest to decide on the limited courses which you want to finish first and then jump to other courses.Learn a topic first from one source.

9.If you are new to the industry or changing careers then join your nearest Coding meetup,online Dev community to interact with the like minded people and learn from their journey.

10.This one might be bit off the topic but apply,apply and apply for the jobs,attempt interviews and do not give up in your journey.Let not failures define you.Something or the other will definitely try to stop you in your journey but make sure that you stay consistent,may be take a short break but do rebound back to your path and stop only once you reach the end goal. 

Let me know your points in the comment section which you would like to add to the above list.

Happy Coding :)
You can follow me on [Twitter](https://twitter.com/kritikasri27) and [Github](https://github.com/kritika27).
My 1st Hacktoberfest!
Tags: hacktoberfest
Published: 2021-10-05 22:13:33

Hello everyone! I'm Geesilu. I'm new to here. This is my first time of participating Hacktoberfest.

## Contributions
During Hacktoberfest I often look for easy repos.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tok9t9pyk4fhuwhpdz4.jpg)


## Happy Coding! 👨‍💻
Testing in C# using Visual Studio
Tags: dotnet, csharp
Published: 2021-10-05 22:13:05

---
title: Testing in C# using Visual Studio
published: true
description: Testing in C# using Visual Studio
tags: dotnet, csharp
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/32zr9b1dclv7zodgn3ig.png
---

> Link to module: [C# testing in Visual Studio](https://docs.microsoft.com/en-us/learn/modules/visual-studio-test-tools/) 

Testing is an important part of shipping and maintaining an application. 

To really make writing and running tests a part of your everyday workflow, it needs to be easy to author and run tests. Not only that, but it also needs to be fast. One of the great features of Visual Studio is its ability to support different test frameworks but also the tooling around authoring and running tests.



In this module, you'll do the following:

- Write a test: Learn the basic parts of writing a test and use test projects that reference your product code.
- Use Visual Studio to run and debug your tests: See the output of your tests and interact with a whole suite of tests.
- Sharpen your test-writing skills: Use Fluent Assertions, data-driven tests, and mocking to expand your testing skills.

> Link to module: [C# testing in Visual Studio](https://docs.microsoft.com/en-us/learn/modules/visual-studio-test-tools/)
Day 466 : Light Switch
Tags: hiphop, code, coding, lifelongdev
Published: 2021-10-05 21:40:47

_liner notes_:
- Professional : Really chill day. No meetings, just worked on my blog post and did a little more research on other things for the future.

- Personal : Did a little work on my side project and got caught up in working on the toggle switch. Who would have thought that could be so complicated, haha. The main thing I'm looking into is accessibility. There's few considerations to look for. Like when a person is using a screen reader, I want it to say that it is a switch and whether it's on or off and not that it's a range element 0 or 1. I think I may have found something dealing with ARIA. I really hope an actual switch element is coming to HTML at some point in the future. haha I may style it to look like a light switch. Also found out that a preorder I made was ready to be shipped to me, so I had to pay the balance to complete the order. Looking forward to finally getting it. It's a laptop shell that I can hook up to my phone and used as a regular laptop. I'm thinking it would be cool for times I give a presentation/demo somewhere and I don't have to lug around my more expensive main laptop or Chromebook. I'm even thinking I could probably even use it to do some coding.

![Overhead photo of a coastline in Haiku-Pauwela, HI, USA with a rocky shore with ocean waves crashing and a forest with a dirt road with a red jeep.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lpfa0yzqzf3rkx64tddu.jpg)

Going to try and check out the accessibility options on my Chromebook and see if it has a screen reader. It should. I want to get started on going through tracks for this week's radio show as well. Don't want to have to do it the day of again.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube N1AW_xFdS8s %}
How do you implement an external script?
Tags: react, beginners, nextjs, help
Published: 2021-10-05 21:34:47

Hello! I've been given a script like the one below. If added to a page, it only loads after the page is refreshed.

Is there another way to go about this?

```<!-- script.details JavaScript -->
    <div aria-live="polite"><script id="ExampleFeed" async src="https://feed/js/v12/EmbeddedFeed.js" data-JobsBoardID="12345"  crossorigin="anonymous" integrity="sha384-Ehesge98ddaugfiwfdjwr398r"></script></div>
    <!-- End script.details JavaScript -->```


I've done something similar before like the example below but this time there is an error **Uncaught TypeError: can't access property "parentNode", elSnippet is null**

    import React, { useEffect } from 'react'

    export default function Example() {

    useEffect(() => {
        const script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'https://feed/js/v12/EmbeddedFeed.js';

        document.getElementsByTagName('head')[0].appendChild(script);
    }, []);

    return (
        <div id="embeddable-feed" data-lang="en"></div>
    )
    }
Netlify's Nightmare
Published: 2021-10-05 21:33:23

---
title: Netlify's Nightmare
published: true
description: Build keeps failing? 
tags: 
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pk17bm8drvszlmlb9vhd.jpg
---

So you have created your react app, and everything works nicely on your localhost / local machine. Then you decide to host it with a service like Netlify,which is an excellent PaaS for static content. All of a sudden your deploy keeps failing 😩. Nightmare right?

Doesn't have to be, firstly check if you have entered all your dotenv values. To do this goto Site Settings > Build & deploy > Environment. You should see environment variables. You will have to rename your variables starting with REACT_APP_ then your variable name, remember to change this on your source code as well. After all this add the variable NODE_VERSION (with the version similar to what you used on your local machine), I was stuck with this issue for days not understanding why I couldn't deploy until I added this.

Hope this was helpful. Please like and share😉.. Happy coding.
Cool Projects to Help You Learn React JS - Part 1
Tags: react, javascript, unsplash
Published: 2021-10-05 21:18:15

## Introduction
### What is React
React is a declarative and component-based Javascript Library for building web interfaces. Its developed and maintained by  [Facebook](https://facebook.com). Although it's grouped with other "Frameworks" like VueJS and Angular, its termed much as a Library and not a framework. [Find out more about React on this link](https://reactjs.org/).

### Why this article?
Personally, when I want to learn a new Framework, I go through the documentation to grasp the basic and core 'Hows and Whys', then I start basic applications to practice the concepts I've learned. This has always worked like magic for me. It goes without saying that learning by doing does a lot when it comes to grasping new concepts. I choose this approach since writing code is like a science, its a creative, intuitive and involving activity, like Math. Hence, learning by doing does it!

Let's skip the poetry and head first into the interesting part of this article.

## Interesting React Projects


### 1. React Clock Faces A.K.A. ReactCF - A Simple React.Js Clock With Many Faces
For this projects you'll learn these skills. The purpose of the project can be to display a Digital Clock that updates itself after every second, just like an actual digital watch. You can have different styles, or rather faces for displaying your digital clock. `Hint: Use Javascript's built in function: setTimeout()`
- React Components
- Reusability
- React DOM and Reactivity
- React Hooks: useEffect, useState

### 2. Stockfoto
However you may call it, the main aim of this project is to consume Unsplash Photos API, which is open source and have fun while doing it. *Note: Read through [Unsplash API Guildlines](https://unsplash.com/documentation) to make sure you're not breaking any rules.* This will be a very interesting project!
The api and interesting endpoints
- Random Picture
- Latest pictures
- Search Pictures
- Get One Picture and download picture

What you will learn:-

- React Components
- Reusability
- React DOM and Reactivity
- React Hooks: useEffect, useState
- React fetchAPI
- ES6

#### Cool Features you could implement.
- Lazy loading Images
- Lazy Loading Pagination - Load more images when a user scrolls to the bottom

I'll be happy to see what you create!
[I can also help you with your Reactjs code](http://www.fiverr.com/s/ca01sf)

As you wait for Part 2.
Regards
Happy Hacktoberfest from Sourcegraph 🍂
Tags: hacktoberfest, opensource, sourcegraph
Published: 2021-10-05 21:16:10

---
title: Happy Hacktoberfest from Sourcegraph 🍂
published: true
description: Contribute to open source with Sourcegraph, a Hacktoberfest 2021 community sponsor
tags: #hacktoberfest #opensource #sourcegraph
cover_image: https://storage.googleapis.com/sourcegraph-assets/learn/headers/hacktoberfest-socialmedia-twitter-SGlogo.jpg
---

We on the Sourcegraph team are so excited to be a Hacktoberfest Community Partner to celebrate open source throughout October. 

![Hacktoberfest Community Sponsors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pfxybi8hwy6h9tgv6moy.png)

Partnering with the community to invite more developers into open source is really important to us, and we are so thrilled to welcome contributors to open pull requests on our repositories.

## Accepting contributors to Sourcegraph

The Sourcegraph team has put together a [Good First Issues GitHub board](https://github.com/orgs/sourcegraph/projects/210) that will help Hacktoberfest contributors be able to contribute to our repos.

![Sourcegraph Good First Issues Board](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uvc25wt22czsti64siml.png)

In the board, you will find a number of Issues across different technologies, as well as technical troubleshooting tutorials that you can contribute to [Sourcegraph Learn](https://learn.sourcegraph.com).

We also have a [contributing guide](srcgr.ph/hacktoberfest-guide) in the main sourcegraph/sourcegraph repository to support you in making pull requests on the project. 

## Give back to the community by helping devs recover from errors

[Sourcegraph Learn](https://learn.sourcegraph.com) is participating in Hacktoberfest through inviting the community to contribute troubleshooting tutorials in popular programming languages and more. 

Check out our [open issues](https://github.com/sourcegraph/learn/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) to review what we are looking for help with this month.

We have a dedicated [Hacktoberfest 2021 contributor guide](https://github.com/sourcegraph/learn/blob/main/docs/hacktoberfest-2021.md) that provides step-by-step directions so you can open up your pull request and contribute directly to open source and help developers troubleshoot their code! 

## Earn Sourcegraph swag

For Hacktoberfest 2021, we are happy to share that we will be offering the first 50 successfully merged pull request contributors with a Sourcegraph swag package. We'll provide details to contributors directly. 

_Catch our presentation as part of the [Hacktoberfest KickOff celebration](https://youtu.be/XX0hOoSaI8Q?t=6271)._

{% youtube XX0hOoSaI8Q %}