teleren/devto huggingface dataset:
We’re one of the 50 Austin Startups to Watch in 2020
Published: 2020-04-10 01:23:39

---
title: We’re one of the 50 Austin Startups to Watch in 2020
 #BootcampsAustin https://bootcampsaustin.com/top-startups-to-watch-in-austin-2020/ …
published: true
date: 2020-04-07 22:04:58 UTC
tags: 
canonical_url: 
---

We’re one of the 50 Austin Startups to Watch in 2020 [# **BootcampsAustin**](https://twitter.com/hashtag/BootcampsAustin?src=hash)[https://bootcampsaustin.com/top-startups-to-watch-in-austin-2020/ …](https://bootcampsaustin.com/top-startups-to-watch-in-austin-2020/)
HTML5 Documentation
Tags: showdev, react, nextjs, static
Published: 2020-04-07 22:04:50

This was a fun and cute front-end side project I worked on this past weekend. I grabbed the contents of the docs from w3schools. 

Feel free to contribute to the project!💯

Live at: https://html5-documentation.now.sh/
Source code: https://github.com/shimphillip/html5-documentation

Tech stacks and libraries💻:
* React
* Next.js
* React-highlight
* styled jsx

Feel free to pitch in ideas on how I can make this project matter!
this should be a separate PR!!
Tags: developer, pr, developersitch
Published: 2020-04-07 21:39:18

Recently while working on some task I had to write some hacky code, and by hacky,  I mean code with lot `if..else`. There are a lot of places in the code base with such random `if..else` changing the flow of based on some environment variable. Hence I was initially okay with adding all these `ifs` but once I finished with the functionality and looked back to refactor so that I can send it for review, no matter how I refactored it, it turned out to be messy code which I just couldn't push for a review! 

Then I took a decision to refactor whole functionality so that I can later remove all the `ifs` placed at multiple places in code. When I decided to refactor it was good from a long term perspective just that I decided to take such a decision without discussing it with anyone in the team. Before you get me wrong, this refactoring was already done to new parts of the code to solve this exact problem just that it was not applied to the old part of the codebase due to not having enough time or not the correct opportunity. 

Once I pushed it for review, the first comment I got was "this should be put in separate PR!". Well, in all honesty, that was expected and also true! but in reality, due to 1 QA per 5 devs, my team is usually bottleneck for releases and hence we hardly get any time to work on old code or a new feature in our test framework. If I had left the refactoring for later stage I would have never got another opportunity to work on that part of the code but the part I really wanted to avoid was leaving the code with `if..else` which is really hard to understand after some time like for e.g. why was this different? why I am converting variable to `int` and sometimes to `float`? or some similar questions. Of course, I can add comments but how many such comments one can add?

From a regular development environment, I should have raised separate PR but while working in a QA, with stringent timelines I think going ahead with single PR with "unplanned" changes was the right call! 

Just snippet of what code looked like (all are made up fields), and what I refactored it into... 

### Old Way
```python
# checking request against response or some constants

assert_equal(request.name, response.name)
assert_equal(request.type, response.type)
assert_equal(response.checksum, get_checksum(request))

if env == "DEV":
    assert_true(respone.timestamp)
else:
    assert_ts_in_range(response.timestamp, tolerance_in_sec=2)

```  

### New way
```python
assertor = get_msg_assertor(response, env)  # class based

assertor.name(request.name)
assertor.type(request.type)
assertor.checksum(get_checksum(request))
assertor.timestamp()  # DEV will just check for presence and UAT will check for tolerance
```
React formData(), useState, useEffect
Tags: react
Published: 2020-04-07 21:35:08

I have four separate methods that get categories, tags, brands, and collections from my API. I am trying to populate dropdowns on a product page to show those options to choose from. How can I write the following to populate the values without overwriting each time. 

Here is the code. I am not sure how to do it all in the same formdata initialization.


`const AddProduct = () => {
  const [values, setValues] = useState({
    name: "",
    description: "",
    price: "",
    discountedPrice: "",
    category: "",
    categories: [],
    brand: "",
    brands: [],
    tag: "",
    tags: [],
    collectionName: "",
    collections: [],
    shipping: "",
    freeShipping: "",
    quantity: "",
    photo: "",
    loading: false,
    error: "",
    createdProduct: "",
    redirectToProfile: false,
    formData: "",
  });`

  `const { user, token } = isAuthenticated();`
  `const {
    name,
    description,
    price,
    discountedPrice,
    category,
    categories,
    brand,
    brands,
    tag,
    tags,
    collectionName,
    collections,
    shipping,
    freeShipping,
    quantity,
    loading,
    error,
    createdProduct,
    redirectToProfile,
    formData,
  } = values;`

  //Load categories and set form data

  `const init = () => {
    // getCategories(name);
    // getTags(name);
    // getBrands(name);
    getCollections(name).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          ...values,
          categories: data,
          collections: data,
          brands: data,
          tags: data,
          formData: new FormData(),
        });
      }
    });
  };`

  `useEffect(() => {
    init();
  }, []);`

 ` const handleChange = (name) => (event) => {
    const value = name === "photo" ? event.target.files[0] : event.target.value;
    formData.set(name, value);`

    setValues({ ...values, [name]: value });
 ` };`
XState Text Formatting Part 3
Tags: xstate, fsm
Published: 2020-04-07 21:31:08

---
title: XState Text Formatting Part 3
published: true
description: Modelling a set of radio buttons with an null state
tags: xstate, fsm
---

In the previous article, we modelled a set of buttons that would allow the user to align text to the left, center, right, or justified alignments. To view the previous entry in the series, read [XState Text Formatting Part 2](https://dev.to/jacobmparis/xstate-text-formatting-part-2-32ma)

In this article, we will explore what happens when the user presses the return/enter key.

Word processors allow the user to create lists. Lists can be either unordered (bulleted) or ordered (numbered). Unlike the alignment, however, we can also opt out of either state and use regular paragraphing. That gives us three distinct states for this feature:

* Paragraph
* Numbers
* Bullets

![A state machine with states for paragraph, bullets, and numbers](https://dev-to-uploads.s3.amazonaws.com/i/9621j5oh83o3360j38vn.png)

Here we have two toggle buttons: one of which will toggle numbers (and deselect bullets if it was selected), and the other of which will toggle bullets (and deselect numbers if it was selected). That's not something we can model by lifting state up to the parent, so the events will have to be on each child.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/95b9qylxnspdhid7hlyd.png)

Example: https://xstate.js.org/viz/?gist=1a27cf4ddb397f593a7008769e3e69ed

# References

[Constructing the user interface with state charts (Addison Wesley, 1999)](https://libgen.lc/ads.php?md5=4D04F809E3680D075B916D541BC2A28A)

[XState Documentation](https://xstate.js.org/docs/)
How to destructure objects in Javascript — beginner’s guide
Tags: javascript, objects, beginners, tutorial
Published: 2020-04-07 21:29:27

In the last article I wrote about array destructuring in Javascript. More on this in the link bellow. {% link  https://dev.to/cilvako/how-to-destructure-arrays-in-javascript-beginner-s-guide-l3m %} Today, I'll continue on the same topic but I'll discuss objects. Just a little reminder, **destructuring allows us to extract array items or object properties, multiple at a time**.

Let's look at the syntax below. This is how we used to extract properties from obejects before ES6 was introduced. You can quickly see that the larger the object, the more repetitive code we need to write.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fbyp7n95sag8nwbdnql5.PNG)

Now let's take the same code and destructure it following the ES6 way: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/v7sqf4wgxojididg3wux.PNG)

The code is much shorter, easier to read and maintain. **An important note is that the variables and the properties need to have identical names**, otherwise this won't work and on printing we'll get undefined.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fgffyr0x9k69dnv0rnat.PNG)

If **we must** give our variables new names, we can do so by adding a colon after the initial name + the desired name. You can see this in action in the example below.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ui5liyqm1ez6z54invon.PNG)

We can use the rest operator to store in a new object all the properties we didn't want in individual variables. Like so: 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/i9h9x3gyk7ez2072yg70.PNG)

Using the same rest operator, we can clone objects. A very useful  feature when we want to manipulate an object but we don't want to change any of the original properties. This happens to be my favorite use case for object destructuring, especially when working with React.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5bbxfw2w0ylgd3objovm.PNG)
What’s your alternative solution? Challenge #15
Tags: challenges, discuss, javascript, codenewbie
Published: 2020-04-07 21:12:15

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Find the maximum number in an array of numbers

```

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge13

function findMax(ar)
{
    var max = ar[0];
    
    for(var i = 0; i < ar.length; i++)
    {
        if (ar[i] > max)
        {
            max = ar[i];
        }
    }
    
    return max;
}

var ar = [-5, 10, -3, 12, -9, 5, 90, 0, 1];
var max = findMax(ar);
println("Max: ", max);

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
What’s your alternative solution? Challenge #14
Tags: challenges, discuss, javascript, codenewbie
Published: 2020-04-07 21:08:08

# About this series

This is series of daily JavaScript coding challenges... for both beginners and advanced users.

Each day I’m gone present you a very simple coding challenge, together with the solution. The solution is intentionally written in a didactic way using classic JavaScript syntax in order to be accessible to coders of all levels.

Solutions are designed with increase level of complexity.

## Today’s coding challenge

```
Create a function that receives an array of numbers and returns an array containing only the positive numbers

```

Note: This is the same coding challenge as #13, but the solution from this challenge is different.

(scroll down for solution)

## Code newbies

If you are a code newbie, try to work on the solution on your own. After you finish it, or if you need help, please consult the provided solution.

## Advanced developers

Please provide alternative solutions in the comments below. 

You can solve it using functional concepts or solve it using a different algorithm... or just solve it using the latest ES innovations.

By providing a new solution you can show code newbies different ways to solve the same problem.

## Solution

```javascript
// Solution for challenge12c

function getPositives(ar)
{
    return ar.filter(el => el >= 0);
}

var ar = [-5, 10, -3, 12, -9, 5, 90, 0, 1];
var ar2 = getPositives(ar);
println(ar2);

```


To quickly verify this solution, copy the code above in this coding [editor](https://codeguppy.com/code.html) and press "Run".

> Note: The solution was originally designed for [codeguppy.com](https://codeguppy.com) environment, and therefore is making use of `println`. This is the almost equivalent of `console.log` in other environments. Please feel free to use your preferred coding playground / environment when implementing your solution.
Tiiny Host - Super Simple Static Web Hosting
Tags: showdev
Published: 2020-04-07 20:34:41

Hey guys,

We built [tiiny.host](https://tiiny.host) to greatly simplify hosting. All feedback appreciated.
Here's a common question we get:

**Q:** How is this different to github pages, netlify, surge.sh etc?

**Answers**:

- No knowledge of git or cmd line required (great for beginners)

- Sites you upload disappear within 7 days. Great for prototyping and temporarily hosting stuff to share.

- Unlimited subdomains (not the case with github pages)

- No registration required (you can remain anonymous)
Deploying a Gitlab Runner on AWS with Packer
Tags: devops, aws
Published: 2020-04-07 20:28:31

## Introduction
Gitlab.com allows its users to run their own, self-hosted, Gitlab Runners as part of their Gitlab CI feature. This comes in handy when the CI jobs have to run in a user-owned environment or more powerful runners are needed.

If that environment is AWS and you are looking for an automated way of setting up the Runner(s) on EC2, then stay tuned for a 56k.cloud recipe!

# Requirements
* a gitlab.com account
* a repository that needs a CI / CD set up
* the Gitlab runner registration token. This can be found in the above mentioned repository `settings -> CI / CD -> Runners -> Specific Runners -> Set up a specific runner manually`
* install Hashicorp's Packer on your build machine

##Steps
* clone the 56k.cloud Packer repository:
* git clone https://gitlab.com/56k/packer.git
* build the Gitlab runner image using Packer:
```
cd packer/gitlab-runner
packer build -var 'aws_access_key=<your_access_key_id>' -var 'aws_secret_key=<your_access_key>' gitlab-runner.json
```
* login the AWS Console and check the EC2 -> AMIs section to confirm that the new Gitlab runner AMI is there. Make a note of the AMI ID.
* launch a new EC2 instance using the AMI ID found in the previous step. 
Call the following script from the `User data`  section of `EC2's instance launch options` to register the runner with gitlab.com:
```
/home/ubuntu/gitlab-runner-register.sh <environment (e.g.: dev)> <gitlab_cicd_token>
```
going back to the repository's `settings -> CI / CD -> Runners -> Specific Runners`, this new runner should be available in the list. Click on Enable for this project to make the runner usable by the repository.

##Next steps
At this point, the Gitlab runner is attached to the project. When defining the Gitlab CI / CD pipeline in `.gitlab-ci.yml` each job will have to use a tag to run that job on the new Gitlab runner. This tag matches the environment passed to the `gitlab-runner-register.sh` script above. Example:

```
job:
  script:
    - echo "Hello world!"
  tags:
    - <environment (e.g. dev)>
```

## Summary
Now that we have a reusable image (AMI) for a self-hosted Gitlab runner, it can be used as a building block for further automation.

One possible next improvement is to use this AMI and the User Data script in an infrastructure-as-code DSL like Terraform or Cloudformation. But that's a subject for a future blog post!

# Find out more about 56K.Cloud
The [56K.Cloud](https://56k.cloud) team loves Cloud, Containers, DevOps, and Infrastructure as Code. If you are interested in chatting connect with us on [Twitter](https://twitter.com/56kcloud) or drop us an email: info@56K.Cloud We hope you found this article helpful. If there is anything you would like to contribute or you have questions, please let us know!
Technology
Published: 2020-04-07 19:45:30

Who would have projected that technology will affect almost every primary sector by the 21st century? I was fortunate to experience a time where communication with the outside world requires a fancy writing pad, envelop and expensive stamps, not to mention the long wait for a response. In the current digital age, technology is growing with unseen speed and potential and has become a necessity for every sector that wants to stand out and grow. Consequently, it has attracted a pool of skills ranging from software engineers to information security specialists. One of the most desired and demanded skills by tech companies is web and app developers. That sparked my interest in studying web development. 

Web development has not only given me a career to pursue, but also has given me an opportunity of being part of the innovating digital world. The core of every technology product or service is coding. Thus, being part of the development team that codes solutions for industries give me satisfaction. Mainly, my interest is to grow as a front-end web developer. That way, I can create website layouts and integrate graphics. Notably, the best way to make clients have the touch and feel of technology is by maximizing their user experience and interaction. 

I am proficient in HTML, CSS, and JavaScript. My skills provide me with the opportunity to develop robust front-end architecture. Noteworthy, one challenge of web development is cross-browser compatibility issues. Also, adequate cross-browser testing is critical in ensuring that all browsers support the site. The exponential growth of technology will persist, prompting an upgrade of skills for web developers. Therefore, I will stay current on emerging technologies, conduct research, and implement them to make me seasoned and impactful.
Webpack Plugin for a chrome extension build 
Tags: webpack, plugin, browser, extension
Published: 2020-04-07 20:20:46

I have created a chrome extension last year which required me to do a lot of manual processes before deploying it on Web Store. There are a series of steps like updating the version in your `manifest.json` file and creating a zip folder of your code. Apart from this, there are many other optimization steps like minifying your JS and CSS. It was tiresome to repeat all these steps and there was a high probability of missing any one of them, so I thought of automating the whole process.

###How do we automate the process?###

####Solution 1####
The first solution that came to my mind was to write a script that can be run before deploying the extension on Web Store.

```javascript
var fs = require('fs');
var archiver = require('archiver');
const wepbpackConfig = require('../webpack.config')

// create version bump.
if(process.env.NODE_ENV==='PROD'){
  const bump = require('json-bump')
  bump('src/manifest.json', { minor : 1 })
}

//create zip file.
var output = fs.createWriteStream(__dirname + 'prod.zip');
var archive = archiver('zip', {
  zlib: { level: 9 } // Sets the compression level.
});
archive.pipe(output);

//directory path to archive
archive.directory('src/', 'my_chrome_extension');
archive.finalize();
```

####Solution 2####

I have been recently learning about webpack in-depth and thought of achieving the same with the help of webpack plugin. I have created a webpack plugin which does the above-mentioned task for me.

The plugin can be installed by: `npm i extension-build-webpack-plugin`
**More about** [Webpack Plugin](https://www.npmjs.com/package/extension-build-webpack-plugin)

Once installed it can be included in the `webpack.config.js` file
For example

```javascript
const BrowserExtensionPlugin = require("extension-build-webpack-plugin");

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-chrome-extension.bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        use: 'babel-loader'
      }
    ]
  },
  plugins: [
    new BrowserExtensionPlugin({devMode: false, name: "my-first-webpack.zip", directory: "src", updateType: "minor"}),
  ]
};
```
React long Components
Tags: react, discuss
Published: 2020-04-07 20:18:23

---
title: React long Components
published: true
description: 
tags: react, discuss, help
---

I'm a front-end developer with almost 4 years of experience, working mostly with React. Today I wanted to practise and build a Select Component in React. I was looking for some inspiration and found this:
- [react-select](https://github.com/JedWatson/react-select/blob/fd54f55e4d57fc9a63451a24eb963388a20fa0f0/packages/react-select/src/Select.js)
- [downshift](https://github.com/downshift-js/downshift/blob/ccf514d753cc00d4f908d6bca8cdad5bfe64f485/src/downshift.js)

These components are +1000 lines of code long (and I know there are more examples out there, and not only involving Select Components).
I'm a pessimist so I think I'm just bad at this, but I have some hope that maybe they're doing something wrong. How could anyone (for contributing or debugging reasons) read all those lines and understand everything that's going on?
What do you think?