teleren/devto huggingface dataset:
Putting React in context
Tags: react
Published: 2019-10-22 06:28:17

---
title: Putting React in context
published: true
tags: React
canonical_url: http://metamn.io/react/putting-react-in-context/
---

A deep dive into the language and the ecosystem around.

<!--more-->
* * *

After deploying my first commercial React app I’ve started to learn more about the nuts and bolts of the language, the new way of thinking it employs, and how the ecosystem helps to make it all happen.

The process is ongoing and is far from being finished. The journey is pure joy. Learning new paradigms, talking with core members, contributing to libraries, putting it all together, deep dive into details, write prototypes and live documentation.

Just to get a glimpse about how vast the React context is — please allow me to present the main concepts.

| Context | Description | Example |
| --- | --- | --- |
| Leaders | Identify trusted opinion leaders and sources of learning | [https://www.robinwieruch.de/](https://www.robinwieruch.de/), [https://kentcdodds.com/](https://kentcdodds.com/), [https://overreacted.io/](https://overreacted.io/) |
| Programming paradigms | The foundation of React | Reactive programming, Functional programming |
| Basic concepts | Understanding React | Pure functions, Side effects, State, Hooks, Functional components, Referential equality |
| Designing applications | Data and interaction models | Information architecture with graph databases, behavior with Finite State Machines |
| Designing components | Best practices in 2019 | Functional components with Hooks, Auto-generated tests with XState, Design systems with Storybook |
| GraphQL | Data driven applications | Apollo, Relay, Amazon AppSync, fragments, mutations, subscriptions, code co-location |
| Performance | Do not overthink it | Loading data and images, Code splitting, Pre-caching assets, Pre-rendering static HTML, Memoization |
| Advanced React | For large projects | Static type checking; Single page, Multi page, Server side rendered applications; Testing |
| Rapid prototyping | Both on front and back-end | Material UI, Headless CMS services |
| Quick deployment | Services with free tier | Gatsby, Next, Netlify, Github pages |
| External libraries | Open source components from the ecosystem | Forms, Tables, Animation, Virtualized lists, Error handling |
| Tricks and tips | Speeding up the development process | Prettify conditions, Conditional props, Logging, ESxx / JavaScript for React |
| DevOps | Sustainable deployments | Monorepos, Bundle size analyzer |

Stay tuned, details are on the way.
Avoiding stale elements in Capybara tests
Tags: ruby, testing, beginners
Published: 2019-09-25 00:00:00

---
title: 'Avoiding stale elements in Capybara tests'
date: '2019-09-25'
draft: false
published: true
description: 'Simple improvement on code style, to avoid a common error when testing with Selenium'
tags: 'ruby, testing, beginner'
cover_image: https://res.cloudinary.com/studiobanauso/image/upload/v1604441639/devtoarticleheader/20160125145459_glitch.jpg
---
Yesterday night, I encountered a new error: `StaleElementReferenceError`.

What it is? It is an error thrown by Selenium WebDriver, in my case used in a Capybara test with Ruby.

It is thrown, when the reference to the selected element changed.

In my case, I was testing an uploading function and was checking to see the preview image once the upload had finished.

The mistake in writing the test that I made, was that I was declaring a variable, where I was storing the selected element.

```ruby
Then('(I )see the preview of {string}') do |name|
  preview_image = page.find(".preview-image")
  expect(preview_image[:style]).to include(name)
end
```

After the image appeared, React changed the DOM and put a new element with the image. This caused the reference inside the variable to get, well, stale. And so, on one of the retries, Capybara threw the error.

This situation can easily be avoided, by writing the test without the variable like so:

```ruby
Then('(I )see the preview of {string}') do |name|
  expect(page.find(".preview-image")[:style]).to include(name)
end
```

This way, Capybara checks for the element on every retry.
Add Tags to Hugo Theme
Published: 2019-11-21 02:17:34

---
title: Add Tags to Hugo Theme
published: true
tags: 
canonical_url: https://pianomanfrazier.com/post/add-tags-to-hugo-theme/
---

To add support for tags in a Hugo theme you need two pieces. One template to render the list of tags and another to render the list of everything under that tag. After wading through Hugo's documentation several times I am documentating the process here.

Hugo's template [lookup order](https://gohugo.io/templates/lookup-order/) can be overwhelming. I recognize it's power, but to add a simple feature to a blog theme it can be too much.

Here is a simple way to add tag support. You will need two files.

```handlebars
{{/* layouts/taxonomy/terms.html */}}
{{ partial "header.html" . }}
<section>
<h1>Tags</h1>
<ul>
{{ range .Data.Terms.Alphabetical }}
<li>
<h2>
<a href="{{ .Page.Permalink }}">({{ .Count }}) {{ .Page.Title }}</a>
</h2>
</li>
{{ end }}
</ul>
</section>
{{ partial "footer.html" . }}

{{/* layouts/taxonomy/list.html */}}
{{ partial "header.html" . }}
<section>
<h1>Tag: {{ .Title }}</h1>
<ul>
{{ range .Pages }}
<li>
<h2>
<a href="{{ .Permalink }}">{{ .Title }}</a>
</h2>
<time>{{ .Date.Format (.Site.Params.dateform | default "January 2006") }}</time>
</li>
{{ end }}
</ul>
</section>
{{ partial "footer.html" . }}
```
Styling a React component using CSS - Card Component
Tags: react, tutorial, beginners, webdev
Published: 2019-09-30 04:13:09

---
title: Styling a React component using CSS - Card Component
published: true
tags: ['react', 'tutorial', 'beginners', 'webdev']
canonical_url: https://learnwithparam.com/videos/styling-react-component-using-css/
description: Lets learn to create a card component in React and style it using plain old CSS
series: Small steps on React
---

{% youtube 4S_ec0atTiE %}
Using Vim + SourceKit-LSP
Tags: swift, lsp, vim
Published: 2019-09-24 22:55:48

My editor of choice has always been `vim`. Not because it's the best but probably because it's the one I've used the most. All the commands have been imprinted into my head from years of use. So it is no surprise that I would try to use SourceKit-LSP to have `autocomplete` and `jump-to-definition` for Swift files.

I wrote an article some months ago on the setup. But some people had trouble building `SourceKit-LSP` from the master branch. 

So here is the solution if you are using Xcode11.

switch to the branch: `swift-5.1-branch` and build from that branch.

```
#In the directory where you cloned the SourceKit-LSP repo.
$ git fetch
$ git checkout swift-5.1-branch
$ swift build
``` 

then everything should build correctly.

If you want to check the original article for the setup you'll find it here:

[https://rderik.com/blog/setup-swift-lsp-and-vim/](https://rderik.com/blog/setup-swift-lsp-and-vim/)
Which modern fiction presents the most interesting techno-dystopia?
Tags: discuss, watercooler
Published: 2019-09-24 22:53:24

1984, and sometimes Brave New World, are conjured when we talk about tech-driven concerns about the future.

But which modern books, movies, shows, etc. present an interesting view of a scary future?

I imagine Black Mirror will come up, so please provide specific episodes which encapsulate the best ideas.
Learning JavaScript - Week 1
Tags: javascript, mongodb, heroku
Published: 2019-09-24 22:50:16

I started learning JavaScript this week and started with this course by Brad on Udemy https://www.udemy.com/course/learn-javascript-full-stack-from-scratch/

After getting about half way through it I got overwhelmed and I feel like the only thing I'm improving is my "copy and paste" skills as I follow the course.  The further into the course I get, the more overwhelmed I feel.

I definitely learned a few things though:

1. VS Code is a great tool for editing code.
2. MongoDB Atlas is really cool.
3. I remember the difference between let and const
4. I'm not even sure that I could code an alert popup
5. I'm not very confident that I can learn JavaScript

Choosing this course may have been a bad decision, there might be a better place to start but I'm not sure what that would be.  Google searches are so tainted by people trying to sell stuff that it's hard to tell what or who to believe, which makes it incredibly difficult to find a good place to start.

Overall I feel overwhelmed, but I learned to log "Hello World" to the console.
Maher Alkhatib is My name
Published: 2019-09-24 22:50:08

It feels like Learning how to ride a bike without training wheels for the first time all over again.i don't know how many times I hit the wall or electric poll or a tree over and over again.LOL BUT Finally I was a champ and the fastest compare to all the naighbourhood kids.bare with me I will eventually get it.
Can you teach an old developer new tricks?
Tags: career, watercooler
Published: 2019-09-24 22:03:58

(Full version published on [my blog](https://zoharpeled.wordpress.com/2019/09/25/can-you-teach-an-old-developer-new-tricks/))

Judging by the job offers advertisement I see, linked in and [Dev posts](https://dev.to/moopet/what-s-my-age-again-14eh), I guess I can probably be called old. I’m 43 (celebrated my birthday this month) and have been working as a developer for about two decades now – so even though I don’t really feel that old, In the landscape of professional software development I’m far from being considered young – and that’s an understatement.

## Ok, but can you still learn new stuff?

As it turns out, the answer is yes. I can learn new stuff, and as every developer knows, I must be able to learn new stuff if I want to keep working as a developer.

## So, what have I learned lately?

Well, about two years ago I’ve started working again for a company I was once employed at. Turns out they’ve changed quite a lot of things since the previous time I was there. I’ve learned to write MVVM based WPF applications, I’ve learned to create .NetCore WebApis, I’ve learned unit testing, dependency injection, Json and Json schema, and probably another thing or two I can’t recall now.

## And the moral of the story is…

Every now and then you need to start asking yourself some questions: Am I where I want to be? Are my methodologies and tech stack too far back? I’m not saying you should keep up with every new trend or language – that would be insane even for a 20 years old – but remember to keep yourself updated.


I remember when I first made Stackoverflow a part of my daily routine – I was amazed to learn how many languages that I didn’t even knew existed are being used every day by literally thousands of people.
I’ve learned many things from reading stackoverflow questions and answers, and even more from answering questions there.

I’ve just recently discovered Dev and found a warm, welcoming community of developers from all over the world with many interesting articles, insights and coding challenges. I’ve signed up just this month and I already feel I’m learning new things.
Style React component with styled-components : Part-2
Tags: javascript, react, node, styledcomponents
Published: 2019-09-24 20:40:27

In My Previous post [Style React component with styled-components : Part-1](https://dev.to/destro_mas/style-react-component-with-styled-components-part-1-19fl) , I wrote how we can start using `styled-components` and we created one Spinner component with it.

Now we can see, how we can pass props to the styled component named `StyledSpinner` and change the color/behavior of it.

For this example, I will change the border color by passing prop. So, the styled component will show the color what we pass to it.

Let's use props for the border color.

```javascript
border: 16px solid ${props => props.color || "red"};
```

Here, we can see, I changed the border color `#f3f3f3;` to `${props => props.color || "red"}` which means if any prop is passed it will use that, otherwise it will use red by default.
Cool!

The implementation of this Styled component will be like this-
```javascript
const StyledSpinner = styled.div`
  border: 16px solid ${props => props.color || "red"};
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
`;
```

Now we can use this `StyledSpinner` in our React Component and pass prop named `color`.

```javascript
<StyledSpinner color="#f3f3f3" />
```

<img src="https://thepracticaldev.s3.amazonaws.com/i/fohz4j3q8rk2uf35vp72.png" width="200" height="250" />

Now, I want to add another `StyledSpinner` without passing any `color` prop and it should use the default red color.

```javascript
render() {
    return (
      <Fragment>
        <StyledSpinner color="#f3f3f3" />
        <hr />
        <StyledSpinner />
      </Fragment>
    );
  }
```

Let's see how they look.


<img src="https://thepracticaldev.s3.amazonaws.com/i/zfuo8ez8goov8yltzbaf.png" width="200" height="250" />

Cool, as we expected!

Hope, someone finds this useful.

Cheers!
:wave:

As I am trying to contribute contents on the Web, you can buy me a coffee for my hours spent on all of these ❤️😊🌸
<a href="https://www.buymeacoffee.com/destromas" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/default-orange.png" alt="Buy Me A Coffee" style="height: 51px !important;width: 217px !important;" ></a>

My Blog: https://shahjada.me
What is this type of programming?
Tags: help, python, beginners
Published: 2019-09-24 20:03:27

Hi, I'm fairly new to programming. I am using a raspberry Pi, a few sensors and a Unicorn Hat HD.

There are a few sensors that I want to use but they have no python library and my google searches do not find any. Mostly for Arduino.

What field or topic would I need to study in order to create a library for any sensor I decide to use?

Here is an example of what I mean. 

Adafruit has released a python library for their cs811 air quality sensor. This is the type of thing I want to learn to create. (Not for the cs811 this is only an example.)

https://github.com/adafruit/Adafruit_CircuitPython_CCS811/blob/master/adafruit_ccs811.py

I understand that is something to do with Registers. 

Thank you!
Enable Dark Mode in some macOS apps
Tags: macos, productivity, beginners, hacks
Published: 2019-09-24 20:02:06

For me Dark mode in macOS, it was a kind of deception. Once you choose the Dark side, it's all Dark or nothing... and you can't choose what apps you want in Light mode. Applications like Mail or Finder are ugliest in Dark mode and difficult to use.

Fortunately, there is a way to have Light Mode and use a command in Terminal to change only desired applications to Dark:

```bash
defaults write [Plist ID] NSRequiresAquaSystemAppearance -bool [Option]
```

Replace `[Plist ID]` and `[Option]` with the desired value.

## Plist values:

| ID | Application |
| --- | --- |
| `-g` | Dock & Menu |
| `com.apple.notificationcenterui` | Notification Center |
| `com.apple.Spotlight` | Spotlight |
| `com.apple.finder` | Finder |
| `com.apple.iChat` | Messages |
| `com.apple.iCal` | Calendar |
| `com.apple.iTunes` | iTunnes |
| `com.apple.Terminal` | Terminal |
| `com.apple.ActivityMonitor` | Activity Monitor |
| `com.apple.AppStore` | App Store |
| `com.apple.dt.Xcode` | Xcode |
| `com.bohemiancoding.sketch3` | Sketch |
| `com.apple.Safari` | Safari |
| `com.google.Chrome` | Google Chrome |

You can go to `~/Library/Preferences` and you can see a complete list of Plist names.

## Option values:

| Option | Mode |
| --- | --- |
| `FALSE` | Dark |  
| `TRUE` | Light |

Once the command was executed restart the application. Only for Dock & Menu, you need to restart your session.

---

**That's All Folks!**
**Happy Coding*** 🖖

[![beer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mkgsx4aw6qn9i9ax6as9.png)](https://github.com/sponsors/deinsoftware)
Query to get Primary Key & Foreign Key columns
Tags: sql, database, sqlserver
Published: 2019-09-24 19:42:28

I want to share this query for SQL Server to get PK, FK, and Data Type information from a DB Table.

{% gist https://gist.github.com/luisfernando-ch/7185bb64cd46f40c687c864c5b8e61b3 %}

Enjoy!
Hello, Dev.to
Tags: career, javascript, whoishiring, codenewbie
Published: 2019-09-24 19:07:23

Hello. I'm currently redesigning my portfolio site while I look for my first paid software development position. I currently have 5 links on my "contact" section, and it looked a bit uneven.. So I'm going to link my dev.to account as well, and figured I should at least have one post up before I do.

If anyone sees this and wants to check it out: 
https://chancehalo.me

Also, if your company is hiring and isn't afraid of bootcamp grads without CS degrees - please let me know :D
6-10PM challenge problem #001
Tags: challenge, programming, problem, interview
Published: 2019-09-24 19:04:16

<b>Move Zeros To End</b>


An array 'arr' which have integers. You need to move all the zeros in the end of the array. You should preserve the relative order of other numbers in the array.

We should implement a solution that is more efficient than a naive brute force.

Example :
Given array arr = [12, 3, 0, 2, 8, 11, 0, 0, 6, 4, 0, 5, 7, 0, 8, 9, 0]
output:           [12, 3, 2, 8, 11, 6, 4, 5, 7, 8, 9, 0, 0, 0, 0, 0, 0]



<a href="https://dev.to/akbhairwal/6-10pm-challenge-problem-001-solution-3gmd">Solution</a>
Stack Overflow hires new CEO Prashanth Chandrasekar
Tags: news, stackoverflow
Published: 2019-09-24 18:37:41

## 👉 [Blog post from founder/outgoing CEO Joel Spolsky](https://stackoverflow.blog/2019/09/24/announcing-stack-overflows-new-ceo-prashanth-chandrasekar/)

Background:

> Prashanth was born in Bangalore, India, the city with the highest number of Stack Overflow users in the world, one of the global capitals for software developers writing the script for the future. He started out as a software engineer before moving over to management. He has a BS in Computer Engineering from the University of Maine, a Masters in Engineering Management from Cornell, and an MBA from Harvard. He worked at Capgemini as a management consultant and Barclays as an investment banker in their technology group before joining Rackspace in San Antonio, Texas.
Domain Whois Privacy Protection
Tags: whois, internet, domain, abiebdragx
Published: 2019-09-24 18:37:12

If you've had your domain for your website for any length of time, you may have been contacted by Domain Scammers who try to trick you into transferring your domain registration to them.

These spammers harvest your domain owner information from the whois contact details that are required by law to publicly show on your domain. By adding Whois Privacy Protection to your domain, you can protect your personal contact information and give yourself anonymity from prying unethical eyes.

<strong>How Does Whois Privacy Protection Work?</strong>

The ICANN (The Internet Corporation for Assigned Names and Numbers) requires that when you register a domain name, you must have accurate information published in the whois data, for administrative and legal aspects.

Seeing your name, company name, and contact information on your domain may seem like a great idea, and on the surface it seems to actually be a great way to boost your internet presence.

However, many less-than-ethical companies skim this public information (your name, email, address, etc.) and use it for spamming, telemarketing, and more. As we have seen with displaying our email address on our websites, we are opening ourselves up to spamming and phishing schemes by giving them our name, address, phone number, etc. in our domain registration information.

Unfortunately, making our information publicly available on the internet, in this case, can leave us wide open for unethical scammers who try to trick us into renewing our domain through them, and typically at a very high renewal fee.

Adding privacy protection to your domain helps maintain privacy by hiding our contact information.

The email and address of the protection service shows up in place of your contact information which protects you from the public display. They display a confidential email for you which essentially masks your email from the outside world.

<strong>Why Would You Want Domain Privacy Protection?</strong>

A Private Whois service allows you to protect your personal information appearing on the WHOIS. Just as anti-spam software helps filter your emails, this stops spammers from skimming your contact information.

And don't worry - you are still the legal owner of your domain, you just have the added security of hiding your private contact information from prying spamming eyes. The protection service will filter out the obvious spammers and forward all real emails onto you.

<a href="https://www.abiebdragx.me/2019/02/membuat-word-count-di-blog-sendiri.html">Whois protection</a> can typically be added to your domain registration as an optional service for a nominal fee. Most find this a small price to pay for added peace of mind.
A CI/CD Hello World Pipeline: Is it possible?
Tags: helloworld, devops, help
Published: 2019-09-24 18:16:20

I haven't had experience working with a <i>full</i> CI/CD pipeline yet so I thought I would build a ["Hello, World!"](https://en.wikipedia.org/wiki/%22Hello,_World!%22_program) one. I realise CI/CD is a complex subject and it will take me time to learn and build but I want to give it my best shot to keep it simple ... ish.

There are probably many technology combinations that could be used but I want to use the following criteria to narrow it down:
* Tooling shall be free for individual use - preferably Open Source or have a Community Edition available.
* Tooling shall run on my Ubuntu 18.04 machine.
* Tooling shall be able to run on Windows and Mac.

Now I am a very confident [Bash](https://www.gnu.org/software/bash/) scripter and I think I could use Bash as the glue for my rinky-dink (?!!) pipeline but I don't want to because I want to have fun and learn all the things! 

So I after some google-foo I cobbled together the following line up:
* Git and GitHub for source/configuration control.
* GitHub for issue tracking.
* Jenkins to run build and tests.
* Docker containers to run each of the 2 hello-world-ish micro-services.
* Kubernetes to orchestrate container deployment to give continuous user access to the micro-services.
* I may have to use Virtual Box to simulate a multi-node architecture.

I realise that [Azure Devops](https://dev.azure.com/) has a free tier which looks great. I know that GitHub is working on a [CI/CD pipeline](https://github.blog/2019-08-08-github-actions-now-supports-ci-cd/) with free (I think) self-hosted runners. But I feel like more of a challenge. However, I reserve the right to change my mind if things get out of control!

So that's the rough plan. Feel free to tell me what I am missing, where I am over-tooling, or what you would do differently in the comments.
My first ever tutorial video: What do you think?
Tags: tutorial, cloud, devops
Published: 2019-09-24 18:06:32

---
title: My first ever tutorial video: What do you think?
published: true
tags: tutorial, cloud, devops
---

Hey friends! I know the dev.to community is great with feedback, so I thought I'd ask you all a question... 

I've been writing and blogging for quite some time on [my personal website](http://thedevcoach.co.uk) and also with commissioned and freelance written work. 

However for my personal writing I felt it would benefit from a more personal touch. And I felt the only real way to do that was... through video. So I've taken a leap into making video content — so to start I just turned one of my latest articles into a tutorial video. 

I'd love to know what you think, and what feedback you have. I blog mainly on cloud native engineering topics — serverless, infrastructure as code, containers etc. I guess it's mainly the "Dev" side of "DevOps". 

But anyway enough about that — here it is, my first ever tutorial video!  

About the 6 concepts you need to know for Terraform. 

{% youtube 8KUgiwu4bLQ %}

Let me know what you think!