teleren/devto huggingface dataset:
React file structure snippets to get you started
Tags: react, beginners, snippets, flatiron
Published: 2019-07-02 01:09:48

React and I haven't been the best of friends recently. Passing data between components and working from component to subcomponents, each with different states isn't hasn't been as intuitive for me.

So today, I decided to make the time to find some helpful patterns for structuring your React files.

####Components that will probably hold state
- Forms
- Inputs
- Conditional display

###General Form.js
```javascript
    state ={
        title: "",
        description: ""
    }

    handleChange = (event) => {
        this.setState({title: event.target.value})
    }
    handleSubmit = (event) => {
        this.props.newBook(this.state)
    }

...

return (
    <form onSubmit={this.handleSubmit}>
    <input onChange={this.handleChange} value= {this.state.title}>
```

####General App.js
```javascript
    state = {
        books: [] 
    }

    ComponentDidMount() {
        fetch(url)
        .then(res => res.json())
        .then(data => {
            this.setState({books: data})
    }

    handleNewBook = (bookData) => {
        const newBook = { ...bookData }
        this.setState({books:[...this.state.books, newBook]})
}

render() {
    return(
        <NewBookForm onNewBook = {this.handleNewBook} />
        <Container books= {this.state.books} />
```

####General Container.js
```javascript
render() {
    const books = this.props.books.map(bookData => <Book book={bookData} />)
return (
    <div>
    { books }
    </div>
)
```

####General Book.js
```javascript
    <div>
        <h1> {this.props.book.title} </h1>
        <p> {this.props.book.content} </p>
    </div>
```

- Check out [this article](https://blog.bitsrc.io/reusable-components-in-react-a-practical-guide-ec15a81a4d71) for a more in-depth look at creating and using React components
- I also recommend [this article](https://www.robinwieruch.de/react-pass-props-to-component/), which offers a deep dive into passing props between components (although it does use this.state, [which I believe](https://dev.to/jasterix/state-or-this-state-4a80) makes React more difficult)
My First Post
Published: 2019-07-02 00:36:47

Hi There! 

This is my first post. At present I am trying to build a spread sheet of people I am trying to reach by email and SMS. I mostly have contact phone numbers. What I want to do is send sms or email messages to them all at once. I need to keep track of the conversation and responses.
I am learning about google forms to collect and store data.
I think I need to turn my website into a membership site. Thinking of using membership.io....

This looks like a fun community I'm looking forward to getting involved!

Best Regards,

Simon.

....you can probably tell that I've been around a while now. I started with pen, paper and stamps...
An interactive and practical introduction to Web Accessibility for everyone
Tags: a11y, frontend
Published: 2019-07-02 05:59:28

---
title: An interactive and practical introduction to Web Accessibility for everyone
published: true
tags: accessibility, frontend
canonical_url: https://kushagra.dev/blog/introduction-to-web-accessibility/
cover_image: https://images.unsplash.com/photo-1417551471850-924c48abad50?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80
---

Ever since I understood the importance of Accessibility, I have always tried putting a conscious effort to share whatever I keep learning. So that everyone can start caring about at least the basics of Accessibility while making websites.

Nothing brings you closer to reality than actually facing it. This is the premise of my latest attempt to spread awareness about Web Accessibility. 

Presenting 👉🏼 [introtoaccessibility.com](https://introtoaccessibility.com/)

This project is a series of chapters, in the form of a quiz. Each chapter shows you something or ask you to do something and then asks you a question. The chapters are basically extreme cases of unusable user experience designed such that they are inaccessible even to abled users.

Each chapter makes you experience a particular Accessibility issue. It then tells you how that issue affects various users on the Internet, why it affects them and what you can do to prevent it.

My intention with this project is that it **can be the first step to introduce Web Accessibility to anyone and everyone who work with websites**. No matter if they are developers, designers or marketers! I hope I can arouse empathy that each one of us requires to make the Web a better place for everyone.

Please do share with anyone and everyone you know who works with websites -> [introtoaccessibility.com](https://introtoaccessibility.com/)

You can see my other projects here -> https://kushagra.dev/lab/
And follow me on Twitter -> [@chinchang457](https://twitter.com/chinchang457) where I share more such stuff.
Also, I recently launched a ["Ask me Anything" on Github](https://github.com/chinchang/ask-me-anything).
Bringing Components to Legacy Code
Tags: react, components, talks, meetup
Published: 2019-07-01 23:49:54

Not all systems allow the code to take over the entire rendering of your app. Sometimes you want to modernize and scale your code using libraries such as React on systems that already have a lot of legacy interactive code, or a CMS that must controls what is rendered in the page.

This talk shows techniques to adopt an existing environment so modern libraries can coexist with existing environments, where the DOM dictates the components it needs.

---

_Recorded at a ReactNYC meetup on September 2017._
Create Login UI Template with Angular 8 and Material Design
Tags: angular98, angularmaterial, angular8
Published: 2020-01-29 12:26:22

---
title: Create Login UI Template with Angular 8 and Material Design
published: true
tags: angular 9|8, angularmaterial, angular 8
canonical_url: https://www.positronx.io/create-login-ui-template-with-angular-8-material-design/
---

In this Angular 8 tutorial, we’ll learn to build beautiful login and registration UI (user interface) template with Angular Material 8. We’ll take help of Material design components and Angular 8 flex layout CDK to create the login and registration template. We’ll create a simple Angular 8 application from scratch and implement a login and registration UI module in it. You can check out below, how we’ll convert a simple login and registration HTML form into a beautiful UI template.
### Material Design Login and Register UI Template Demo

Click below to check out the live demo:

[Log in UI Demo](https://github-nofg3w.stackblitz.io)

You can also get the Git repo by clicking on the button below:

[GitHub Repo](https://github.com/SinghDigamber/angular-material-login-template)

#### Table of contents

1. Prerequisite
2. Setup Angular 8 project
3. Generate components using Angular CLI
4. Implementing Angular Material 8
5. Create Custom Angular Material Module
6. Initialize Routing
7. Create Angular Material Navbar
8. Create Registration UI with Material Design
9. Conclusion

### Prerequisite

Firstly, we’ll install and configure an Angular 8 project from scratch. I assume you’ve already installed Node.js and Angular CLI in your system. If not follow this tutorial: [Install Node JS on Mac OS](https://dev.to/singhdigamber/how-to-install-node-js-on-mac-os-2d6a-temp-slug-3854940)

I used below command to install Angular CLI:

```
npm install @angular/cli -g
```

### Setup Angular 8 Project

Enter command in terminal and hit enter to create a fresh Angular 8 project.

```
ng new angular-material-login-template

# ? Would you like to add Angular routing? = Yes
# ? Which stylesheet format would you like to use? = CSS
```

Get into the project folder:

```
cd angular-material-login-template
```

### Generate Components Using Angular CLI

Components are a reusable piece of code in an Angular application. You can create components quickly using a single command. Run the command to create login and registration components in an Angular 8 project.

```
ng g component components/log-in --module app

ng g component components/register --module app
```

The `--module app` tag makes the `app.module.ts` is the main app module file.

### Implementing Angular Material 8

Run the following command to install Angular Material 8 UI library in Angular project:


[Click here to read more](https://www.positronx.io/create-login-ui-template-with-angular-8-material-design/)
Docker 101
Tags: docker, devops, linux
Published: 2019-07-01 23:12:12

Here's a little screencast showing practically how to run Docker containers, and how to interact with them when they're running.

I'm hoping to make a few more going into running multiple containers in a network, Docker Compose, building custom containers, and perhaps Kubernetes.

[![Everything Is AWESOME](https://img.youtube.com/vi/wE50DbmsUGM/0.jpg)](https://www.youtube.com/watch?v=wE50DbmsUGM "Docker 101")

(Click to watch!)
Ruby Question
Tags: ruby
Published: 2019-07-01 22:02:44

---
title: Ruby Question
published: true
description: 
tags: ruby
---
The [documentation](http://ruby-doc.org/stdlib-2.6.3/libdoc/ostruct/rdoc/OpenStruct.html#method-i-to_h) for method <code>:to_h</code> in Ruby class <code>OpenStruct</code> says this:

> Converts the OpenStruct to a hash with keys representing each attribute (as symbols) and their corresponding values.

> If a block is given, the results of the block on each pair of the receiver will be used as pairs.

And it offers this example:

```ruby
require "ostruct"
data = OpenStruct.new("country" => "Australia", :capital => "Canberra")
data.to_h   # => {:country => "Australia", :capital => "Canberra" }
data.to_h {|name, value| [name.to_s, value.upcase] }
            # => {"country" => "AUSTRALIA", "capital" => "CANBERRA" }
```

When I do the same in <code>irb</code> (version: irb 0.9.6(09/06/30)), I get this:

```ruby
require "ostruct"
# => true
data = OpenStruct.new("country" => "Australia", :capital => "Canberra")
# => #<OpenStruct country="Australia", capital="Canberra">
data.to_h
# => {:country=>"Australia", :capital=>"Canberra"}
data.to_h {|name, value| [name.to_s, value.upcase] }
# => {:country=>"Australia", :capital=>"Canberra"}
```

The difference:
- In the documentation, the last two values are different.
- In the <code>irb</code> session, they are the same.

So, my question:  Is this a documentation error?
Give your desk some cool style while hiding it's guts!
Tags: showdev, webdev, discuss, workstations
Published: 2019-07-01 21:48:27

---
title: Give your desk some cool style while hiding it's guts! 
published: true
description: A cool hack for hiding your wires and giving your desk some style
tags: showdev, webdev, discuss, workstations
---

So my new friend Scott had a post about your desk setup. Check it here. {% link https://dev.to/ssimontis/let-s-see-your-awesome-workspaces-3n2n %}

I posted my setup on his post which made me think about how it could be useful to others, and a cool topic to post about! 

So I bought a standup desk and I loved it... other than the fact that my cords and guts were just hanging there. It looked ugly and I hated it.

So I started thinking about a curtain to cover it up. But I wanted it to be cool and not to costly. So I went to amazon, and looked up some shower curtains! 

Boom! Styled and low cost. Just stapled it to my desk and that was it! 


![dechamps desk](http://api.gidgitz.com/uploads/7d5380d1-91ea-49fb-9483-2f589b1101f9.JPG)

Let me know what clever hacks you use to keep your desk/office organized and look cool.
Let's code some happy text.
Tags: javascript, animation, tutorial
Published: 2019-07-01 21:20:08

---
title: Let's code some happy text.
published: true
description: Tutorial on how to animate text using JavaScript
tags: javascript, animation, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/i47yjcvmm1no28nzho3a.png
---

# Happy Text

Let's start this tutorial by normalizing the CSS.

```css
body {
  margin: 0;
  padding: 0;
}

canvas {
  display: block;
}

```
This will get rid of side bars when working with a full sized canvas.

Now, let's create a canvas the same size as the page and append it to the body of the page.
```javascript
const canvas = document.createElement('canvas');
const w = innerWidth,
  h = innerHeight,
  w2 = w / 2,
  h2 = h / 2;
canvas.width = w;
canvas.height = h;

document.body.appendChild(canvas);

```

Now we can get a canvas 2D context and define some text as well some text parameters.


```javascript
const c = canvas.getContext('2d');
const fontsize = 30;
c.font = fontsize + "px Arial";

let text = "Happy Text!";
```

Then we create a function that clear the canvas and draws our text to screen every frame.

```javascript
function draw() {

  /* clear the canvas from 0,0 to w,h - width and height of the page */
  c.clearRect(0, 0, w, h);

  /* draw the text on coords 10, 10 */
  c.fillText(text, 10, 10 );

  /* calls the draw function every frame */
  requestAnimationFrame(draw);
}

draw();
```

Well, that's all fine, but that text is not happy at all.

Instead of just drawing the text, we should draw each letter individually and then animate them.

We can do that with a for loop, iterating each char from the text, and with a sine wave, controlling the Y position of each letter.

So, now our draw function looks like this:

```javascript
/* angle that controls the sine wave */
let a = 0;

/* the size of the text, so we can centralize it on the screen */
const xoffset = c.measureText(text).width;

function draw() {
  c.clearRect(0, 0, w, h);
  /* for loop to iterate each char from text */
  for (let i = 0; i < text.length; i++) {
    c.fillText(text[i], 
      (w2 - xoffset) + (i * fontsize), /* centralized X position */
      h2 + (Math.sin(a - i) * 10)); /* sine wave offset by char position */
  }
  a += 0.08; /* increase the angle each frame, so the sine wave moves */
  requestAnimationFrame(draw);
}

draw();
```

That's it. Our happy text is all done.

The complete code:
```javascript
const canvas = document.createElement('canvas');
const w = innerWidth,
  h = innerHeight,
  w2 = w / 2,
  h2 = h / 2;
canvas.width = w;
canvas.height = h;

document.body.appendChild(canvas);

const c = canvas.getContext('2d');
const fontsize = 30;
c.font = fontsize + "px Arial";

let text = "Happy Text!";

let a = 0;

const xoffset = c.measureText(text).width;

function draw() {
  c.clearRect(0, 0, w, h);
  for (let i = 0; i < text.length; i++) {
    c.fillText(text[i],
      (w2 - xoffset) + (i * fontsize),
      h2 + (Math.sin(a - i) * 10));
  }
  a += 0.08;
  requestAnimationFrame(draw);
}

draw();

```

[Link to JSFiddle](http://jsfiddle.net/victorqribeiro/63e5s1pf/) with the code.
What Do You Do To Celebrate a Big Accomplishment?
Tags: fun, personal, career, discuss
Published: 2019-07-01 20:56:03

Just this evening, I finished a big project at work that I've been working on by myself for almost a year. It's not perfect and there are lots of places where I would want to improve / extend it, but it works! I'm really happy that I've been able to get it up and running.

What should I do to celebrate? Do you have any traditions / rituals you or your team do when you finish a project?
How to implement pagination with Oracle DB in a readability way
Tags: showdev, oracledb, node, sql
Published: 2019-07-01 20:38:38

---
title: How to implement pagination with Oracle DB in a readability way
published: true
description: Advanced recordset with pagination data (and without subselect).
tags: showdev,oracledb, nodejs, sql, 
---

It was a Sunday morning. An early Sunday morning. I was waiting for my home wake up. So I looked again to my uncompleted task: how to paginate my recordset with Oracle DB (11c...).

I was inspiring to found a solution without using subselect. 

I tried to avoid using subselect because I consider it not so readable (I found a lot of example with it). I've found my way using [`WITH` statement](https://oracle-base.com/articles/misc/with-clause).

The `WITH` statement permits to have a clean and simple SQL code.

This is the result.

```
WITH RECORDSET AS (
    -- put here your select with the complete recordset.
    SELECT FIELDA, FIELDB, FIELDC FROM TABLE
), 
NUMBERED AS (
    SELECT 
    ROW_NUMBER() OVER (ORDER BY FIELDA) RN, 
    RECORDSET.*
    FROM RECORDSET)
SELECT
    -- page number parameter
    :page_number PAGE_NUMBER, 
    -- total recordset pages
    CEIL((SELECT COUNT(*) FROM NUMBERED) / :page_size) TOTAL_PAGES, 
    -- page size parameter
    :page_size PAGE_SIZE, 
    -- total rows
    (SELECT COUNT(*) FROM NUMBERED) TOTAL_ROWS, 
    NUMBERED.*
FROM NUMBERED
WHERE 
    RN BETWEEN ((:page_size*:page_number)-:page_size+1) AND (:page_size*:page_number)
```

This code ask for two parameter: `:page_size` of your recordset and `:page_number` you want retrive.

The first fields contain pagination data: `PAGE_NUMBER`, `TOTAL_ROWS`, `PAGE_SIZE` and `TOTAL_ROWS`.

As well as I consider this a clean way to have a paginated recordset, I found it also very performing.
Transforms and Animations
Tags: javascript, css, beginners, html
Published: 2019-07-01 20:12:59

Today's coding challenges were some of the ones either introduced after I started FCC the first time, or I had skipped over in favor of learning javascript. I'm glad they came up today. 
![](https://thepracticaldev.s3.amazonaws.com/i/dfmhai4lflpnurb6mod3.jpg)
Applied Visual Design started out as kind of a refresher, but quickly moved into learning about transforms and animations. I had not previously taken the time to learn these beyond trying to reverse engineer someone elses project. I have no specific example either. It didn't mean anything.  I'm hoping over the next few days that I can find a way to practice these things.  This morning as I got myself pumped up for today's lessons, I came across [this post](https://dev.to/teamxenox/the-only-way-to-improve-your-css-game-1m2k) and clicked through to the [CSS Battle](https://cssbattle.dev/) site and convinced myself, aside from the page not working in Firefox, that I wouldn't be able to accomplish any of it. I think I might give it a shot as a daily practice. 

What resources helped you when you first learned CSS?

Edit:
After clicking back over to CSS Battle, I realized I needed to login in order to access the "Completed" sets. 
![](https://thepracticaldev.s3.amazonaws.com/i/hqt8oesm49vj3o7bdxv4.jpg)
Saving my stuff from Medium
Tags: medium, meta
Published: 2019-07-01 20:04:01

As it appears, Medium is starting to use some Dark UX Patterns to paywall content. There have been several false alarms (accidental paywalling, "build my brand" hipsterism etc.) earlier, but it seems they are now all-in on their desperate monetization attempts.

Here's what I did to secure my stuff:

- Exported the zip file of all posts from Medium Settings UI
- Copied the "posts" folder from the zip (bunch of html files) to 
  [my github repo](https://github.com/vivainio/vivainio-medium-posts)


- Converted them to markdown for easy reading on github with [medium-2-md](https://github.com/gautamdhameja/medium-2-md) and npx:

```shell
$ npx medium-2-md convertLocal html/
```

This emitted a bunch of markdown files in a new directory. I deleted all the blog comments (nobody wants to read those!) and pushed the files to github, for easy reading. [Here's an example blog post](https://github.com/vivainio/vivainio-medium-posts/blob/master/md/2018-01-14_MobX-with-Angular--the-Prelude-1c0dcfb43fe6.md)

All the gists (i.e. code snippets) are still missing from the markdown versions - so some scripting work remains to be done before pushing them elsewhere.

## What didn't work

[dev.to](https://dev.to/) offers a way to import content from Medium through RSS  feeds. In the spirit of dark patterns, Medium's RSS feed only has a few most recent articles [(example here)](https://medium.com/feed/@vivainio) so I abandoned that path. 

## Migrating to dev.to?

As it appears, [dev.to](https://dev.to) is fast as heck. Pages practically load before you click them, so you manage to skim more posts per minute. I'll probably push all of these posts there once the preparation work is ready. 

The first step though was to move everything to a public static hosting site (github). Now, Medium can go tits-up tomorrow for all I care!
Having a hard time, and need a friend or someone to vent to?
Tags: friends, discuss, health, webdev
Published: 2019-07-01 20:01:46

---
title: Having a hard time, and need a friend or someone to vent to?
published: true
description: If you're having a hard week, or just need a new friend, I'm there for you.
tags: friends, discuss, health, webdev
---

A lot of us have hard days and feel like no one is there to listen, and it sucks! 

I had a recent comment on my post that was very touching. I felt for this person and the hardship they had in their lives. 

The fact that this person told me their story, showed me they really just needed a friend to hear their hurt and give them hope.

If you feel that way right now or get to that point every so often, please feel free to message me directly, or drop a comment. 

I mean it when I say this. I'm happy to give advice, compliments, cheer you up or just listen.
How do you find topics to blog about?
Tags: discuss, career
Published: 2019-07-01 19:34:07

Writing blog posts isn't super hard for me, possibly because I've always enjoyed writing and I come from a family of teachers. I find myself spending a lot more time trying to find things to write about than actually composing an article. I'm looking for new ways to reduce the amount of time I spend looking for topics.

How do you decide on topics to write about?
GitHub README templates & tips on writing high-quality documentation
Tags: writing, opensource, tutorial, beginners
Published: 2019-07-01 19:29:40



I've been working on a project wherein I'm curating various documentation templates and compiling tips that help create better documentations. It'd be awesome if y'all could check it out and give feedback!

Link: https://github.com/kylelobo/The-Documentation-Compendium

Cheers! :)