teleren/devto huggingface dataset:
Deploy React apps to Netlify in a neater reapportion.
Tags: actionshackathon21, react, netlify, github
Published: 2021-12-03 18:39:03



### My Workflow


Have everything run and built from the get-go on github by github actions whenever you push a commit and enjoy a smooth deployment on Netlify.

With the previous in mind follow these steps:

- Create your react project as usual `npx create-react-app app_name`.
- Build using `npm run build`
- Then go ahead and set your workflow, to generate a `.yml` file.
- Create a netlify.toml file and then add the following code:

  - `[build]` 
  - `command = "npm run build"`
  - `publish = "build"`

- Drag and drop your build folder into your netlify site.
- Generate a personal access token on netlify by going in user settings, applications and copy it to github secret.

![Generate P_A_T token](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a7i5ztlyj3t6xpxytlpp.png)

- Copy Api ID from netlify site to github secrets.

![Api key on netlify site settings](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qa766z98kpb88oaw4zek.png)

- Create yaml file & add the tokens from secrets.
- Add netlify deploy -–prod to yaml file 



### Submission Category: 

DIY Deployments.


### Yaml File or Link to Code

Add the .yml file as follows .github/workflows/name.yml in the project. For more reference see the official [docs](https://docs.github.com/en/actions/learn-github-actions#creating-a-workflow-file)


```
name: CI/CD

on:
  push:
    branches: [ your_branch_name ]
  pull_request:
    branches: [ your_branch_name ]


jobs:
  build:

    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [12.x, 14.x]

    steps:
    - name: Checkout repository
      uses: actions/checkout@v2

    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v1
      with:
        node-version: ${{ matrix.node-version }}

    - name: Install dependencies
      run: npm install

    - name: Run the tests
      run: npm test 

    - name: Buil￼d
      run: npm run build
      
    - name: Deploy Site
      env:
        NETLIFY_SITE_ID: ${{ secrets.GITHUB_TOKEN_NAME }}
        NETLIFY_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN_NAME }}
      run: netlify deploy --prod
```




### Additional Resources / Info

Github [repository](https://github.com/Omoyi/Hackethon-github)

Under [MIT License](https://github.com/Omoyi/Hackethon-github/blob/main/LICENSE)

Happy coding ^ ^
Automating Terraform With Github Actions
Tags: actionshackathon21, actions, opensource, github
Published: 2021-12-03 18:35:36

### My Workflow
A project to demonstrate how to automate terraform workflow with Github Actions.

* Login to your AWS account and generate `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY`.
* After that, login to your Terraform Cloud account. Create a new workspace and select **API-driven workflow**.
* Then navigate to the **Variables** tab and click on **Add variable**. Add `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` with their respective values.
* From your Terraform Cloud User Settings, click on **Tokens** and generate an API token named `GitHub Actions`.
* Add the token to your Github repository as a secret. Name the secret `TF_API_TOKEN`.

* Clone and open your Github repo on your code editor.
* Checkout to a new branch with `git checkout -b <branch-name>`.
* Add your changes with `git add .` and commit the changes with a message using `git commit -m "<commit-message>"`.
* Then push your changes with `git push`.
* Go back to the Github repository and generate a pull request from the new branch. You can view the status of the job through the pull request created, Actions tab or the Terraform Cloud workspace.
* Then merge the pull request.

### Submission Category: 
DIY Deployments


### Yaml File or Link to Code
{% github https://github.com/mariehposa/terraform-automation %}
What was your win this week?
Tags: discuss, weeklyretro
Published: 2021-12-03 18:29:27

---
title: What was your win this week?
published: true
description: Got to all your meetings on time? Started a new project? Fixed a tricky bug?
tags: discuss, weeklyretro
cover_image: https://cl.ly/188e843c2985/download/Image%202019-02-15%20at%202.36.37%20PM.png
---

Hey there! 


Looking back on this past week, what was something you were proud of accomplishing?

All wins count — big or small 🎉

Examples of 'wins' include:

- Starting a new project
- Fixing a tricky bug
- Embarking on a new creative challenge... or whatever else might spark joy ❤️ 

---

Congrats on your accomplishments this week! 

![Woman and puppet dancing saying "we're number one!"](https://media.giphy.com/media/sgFDIjII6GtmE/giphy.gif)
Simple but useful CLI for React projects.
Tags: react, npm, javascript, productivity
Published: 2021-12-03 18:23:32

In the last few days, I was thinking about using some of my free time solve some simple problems in my day life as a React developer. I came across a lib for CLI creation, which motivated me to try to create one that could be used quite often not just for me: the [receipt-cli](https://www.npmjs.com/package/receipt-cli).

I've taken just few hours to implement and publish to npm. It's quite simple, but useful as well.

Working on the next few versions to add more features and maybe implement a whole react boilerplate starter.

If you wanna contribute, feel free to take a look at the project (or just say a hello!). I'm trying to build an [organization](https://github.com/Chef-UI) on GitHub to work around this kind of tools.

Thank you, [gluegun](https://github.com/infinitered/gluegun) and hope see y'all soon.

Photo by <a href="https://unsplash.com/@paulmelki?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Paul Melki</a> on <a href="https://unsplash.com/s/photos/library?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
🎁 CodeCast's Coding Advent: Day Three 🎁
Tags: webdev, beginners, programming, react
Published: 2021-12-03 18:13:08

![Day Three](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/47sqnvhgf782ia410jte.png)

## DAY THREE

Apps like Linktree have become incredibly popular to share multiple links on a single landing page. Our ambassador [Michael Tirona](https://twitter.com/TironaCodes) has created a three-part series where teaches you how to make your own Linktree clone with React!

[Find the tutorial here!](https://www.codecast.io/casts/KPjp7X3KQw2A-creating-a-linktree-clone-in-react-pt-1)


![Linktree Clone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apbxg3sfypbibeu87wbn.png)

You can also be sure to follow us on [Instagram](https://www.instagram.com/codecastapp/), [Twitter](https://twitter.com/CodeCastApp), [Facebook](https://www.facebook.com/codecastapp), and [LinkedIn](https://www.linkedin.com/company/code-cast/) to see our daily advent releases there!
How to fix the ReferenceError: global is not defined error in SvelteKit/Vite
Tags: svelte, sveltekit, vite, webdev
Published: 2021-12-03 18:10:29

## TL:DR
```js
// svelte.config.js
const config = {
	preprocess: preprocess(),
	kit: {
		adapter: adapter(),
		target: '#svelte',
		// add this 👇
		vite: {
			define: {
				global: {}
			}
		}
	}
};
```
I spent hours trying to figure this out and it was really difficult to find the exact information on the web since this error message is very similar to an [Angular](https://angular.io/) issue. However, the Angular solution is useless for [SvelteKit](https://kit.svelte.dev/) so, I thought I'd put this post together.

SvelteKit is [currently in beta](https://github.com/sveltejs/kit#read-this-first) so who knows, maybe they might address this at some point in the future but anyway...

SvelteKit uses [Vite](https://vitejs.dev/) as its build tool which is great because Vite pre-bundles dependencies using [esbuild](https://esbuild.github.io/) which is really really fast. But by default, Vite doesn't include [shims](https://developer.mozilla.org/en-US/docs/Glossary/Shim) for NodeJS variables so these need to be added by the user.

That sound simple enough to fix, just create a `vite.config.[js/ts]` file, add it to your SvelteKit project and define global right?

```js
// vite.config.ts
export default defineConfig({
  define: {
    "global": {},
  },
});
```

Well not quite...


![Adding a vite config to sveltekit is not a good idea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4yqkd6s8xg6xk9735wj4.png)

This would usually be fine but SvelteKit doesn't play ball with a Vite config file, it will instead ask you to put the changes in a `svelte.config.file`. Makes sense I guess🤷?

Apart from the fact that a svelte config looks different from a vite config so it's not as simple as just copying and pasting into the main config object. Following the link in the error take you here -> https://kit.svelte.dev/docs#configuration-vite which isn't super useful. But after a bit of googling I found [this much more helpful example](https://kit.svelte.dev/faq#aliases) albeit on a different topic but it was good enough.

And... that's what lead to the working solution below:

```js
// svelte.config.js
const config = {
	preprocess: preprocess(),
	kit: {
		adapter: adapter(),
		target: '#svelte',
		// add this 👇
		vite: {
			define: {
				global: {}
			}
		}
	}
};
```

I should also mention I'm quite new to Svelte so there is a huge chance someone will call me out in the comments and add a much more elegant solution 😜


## Sources
https://github.com/vitejs/vite/issues/2778
https://github.com/vitejs/vite/issues/728
https://github.com/bevacqua/dragula/issues/602
https://kit.svelte.dev/faq#aliases
Day 79/100 Tables
Tags: 100daysofcode, javascript, programming, motivation
Published: 2021-12-03 18:07:06

Everything seems pretty daunting but when I set my mind on the table and focused on the structures, I somehow understood the reason why it should be use according to it's functions and modifications.

![Tables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v1hd3jjc23ohx3rgcetx.png)

## Code Snippets

```
<table>
  <tr>
    <th>Monday</th>
    <th>Tuesday</th>
    <th>Wednesday</th>
  </tr>
  <tr>
    <td colspan="2">Out of Town</td>
    <td>Back in Town</td>
  </tr>
</table>
```

```
let box1Name = "";
let box2Name = 0;
const box = "Package";

box1Name = box[0];
box2Name = box.length;
```
[![Resource](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zg6mvi1sgsipdp6hsa12.png)](https://developer.mozilla.org/en-US/)
The Curious Case of the DATA Constant
Tags: ruby, programming
Published: 2021-12-03 17:44:33

If you're unfamiliar with Ruby's `DATA` constant don't feel too bad, it's an easy one to miss.  Not only is it rare to see in the wild but out of the 9 Ruby books I own (and have actually read) only 2 of them even _mention_ this global constant, ["Programming Ruby" by Dave Thomas](https://www.amazon.com/Programming-Ruby-1-9-2-0-Programmers/dp/1937785491), commonly known as the pickaxe book, and ["The Ruby Programming Language" by David Flanagan and Yukihiro Matsumoto](https://www.amazon.com/Ruby-Programming-Language-Everything-Need/dp/0596516177) (you know, the guy who _created_ the language).

To understand the `DATA` constant we first must understand the `__END__` token. If the Ruby interpreter finds an `__END__` token it will stop running the program code. The first time I heard about this the presenter said that the interpreter will "ignore" anything after the token and demoed it by using it to "comment" out a chunk of code at the end of the file. This was a neat trick but unfortunately inaccurate and completely ignored the coolest part of the `__END__` token.

I had all but forgotten about `__END__` until @schwad brought it up at his awesome RubyConf talk (I'll post a link once the videos are publicly available). I wont spoil his talk but Nick gave me enough additional information to spark my curiosity and send me down a rabbit hole of Ruby Archaeology.

Turns out the ruby interpreter does just "ignore" anything after the token but will actually treat any after the `__END__` token as data and will take the content and assign it to the `DATA` constant. Armed with this information, the DATA constant becomes a lot easier to understand. `DATA` is an IO steam.  Just like opening a file and reading its contents, you can do the same thing with `DATA`.

So what does this look like in practice? Something like this:
```ruby
# end_data_demo.rb
puts DATA.read.tr("\n", " ")

__END__
Look
at
this
data
```
If you run `ruby end_data_demo.rb` in your terminal you'll get "Look at this data" returned.

Pretty cool, right? No? Well I think it is. Look, you can even store YAML in there:

![My shitty code](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ym4zhtupstwzm6ya9t5y.png)

Now you may be thinking, "Ok fine, that kinda cool, but why or when would I actually use this?". Well given the time of the year let me give you a more practical demo.

Many of you are doing [Advent of Code](https://adventofcode.com).  If you're doing it or have done it in Ruby you've probably done something like this to get your puzzles input:
```ruby
input = File.readlines('.puzzle_input.txt')

# Your logic here
```
this works but requires a separate file for you input. Here's how I'm doing AoC this year:
```ruby
input = DATA.readlines

# My logic here

__END__
My
puzzle
input
```
One day, one file.

`DATA` is a pretty cool trick but unfortunately isn't set in a multi-file application... BUT all is not lost.  There are still some cool things we can do with `__END__` stay tuned for the post where we'll abuse `__END__` for fun and profit.
JDoc4droid, an offline Javadoc viewer for Android
Tags: java, javadoc, android, programming
Published: 2021-12-03 17:26:24

### Why create a Javadoc viewer for Android?

I like to hang out in online programming communities like [StackOverflow](https://stackoverflow.com) or programming [Discord](https://discord.com) servers. There, I often like to answer questions from other people. Since I also do that using my mobile phone, I had a problem: I don't know everything by heart and viewing Javadocs on mobile devices can be painful. With painful, I mean that one needs to look the documentation up first and javadocs are not optimized for mobile devices.

### The app

This is why I have created [JDoc4droid](https://github.com/danthe1st/JDoc4droid), an Android app that allows to download and view Javadocs from Oracle, Maven repositories and even use Javadocs from a local Javadoc JAR or ZIP file.

### Download

JDoc4droid is [available in the Play Store](https://play.google.com/store/apps/details?id=io.github.danthe1st.jdoc4droid) and the sources [can be found on GitHub](https://github.com/danthe1st/JDoc4droid).

### How does it work?

Artifacts deployed to maven repositories (normally) include a javadoc JAR. JDoc4droid downloads this file and saves it locally. 

For viewing classes, JDoc4droid looks for a file named `allclasses-index.html` or `allclasses-noframe.html` in the root of the Javadoc. This HTML file is parsed using [JSoup](https://jsoup.org/) and the classes (including a link to the HTML Javadoc of the classes) are extracted to be shown.

On the other hand, viewing classes works in a similar manner. When opening a class, the HTML Javadoc of the class is parsed utilising [JSoup](https://jsoup.org/) once more and the contents are extracted to be displayed on screen.

### Screenshots

![list and add Javadocs](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wdziszg6bocqiull0rnd.png)
![add Javadoc from Maven Repository](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3tu2i7cq9jkawkc2v9zy.png)
![Browse classes](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l5y3m06xpekfter1aeiz.png)
![View class](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u34fzo4l9kdr0ww20vh8.png)

### GitHub

{% github danthe1st/JDoc4droid %}

![Logo Image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rn5yf62dmzvbotcrh0za.png)
Living in the Shell #8; unzip
Tags: productivity, linux, bash, devops
Published: 2021-12-03 17:24:46


## `unzip` 🎉

Extracts ZIP archive contents.

## Test archive integrity `-t`

```sh
unzip -t x.zip
```

## List archive content (short format) `-l`

```sh
unzip -l x.zip
```

## Display exhaustive archive information/content `-Zzl`

```sh
unzip -Zzl x.zip
```

## Extract all files into given path `-d`

```sh
unzip x.zip -d output-dir
```

> Extracts all files into `output-dir` directory.

## Extract specific files

```sh
unzip x.zip a.txt b.txt
```

## Extract all, but exclude some files `-x`

```sh
unzip x.zip -x a.txt b.txt
```

> Extracts all but excludes `a.txt` and `b.txt`.

## Extract with overwrite `-o`

```sh
unzip -o x.zip -d output-dir
```

## Extract without overwrite `-n`

```sh
unzip -n x.zip -d output-dir
```
Top AWS Interview Questions and Answers
Tags: aws, interview, cloudskills, tutorial
Published: 2021-12-03 17:17:57

## What is AWS?
AWS (Amazon Web Services) is a comprehensive, evolving cloud computing platform provided by Amazon that includes a mixture of infrastructure as a service, platform as a service, and packaged software as a service offering. AWS services can offer an organization tools such as compute power, database storage, and content delivery services.

## How AWS works?
AWS is separated into different services; each can be configured in different ways based on the user's needs. Users should be able to see configuration options and individual server maps for an AWS service.



```
Here is a fully dedicated video on AWS Interview Question and Answers👇👇
```
[![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pqlp90spiocrwnt090i.png)](https://www.youtube.com/watch?v=Zl2AkMGAnYc)


▬▬▬▬▬▬ WANT TO LEARN MORE? ▬▬▬▬▬▬
Full Terraform tutorial ► [https://bit.ly/2GwK8V2](https://bit.ly/2GwK8V2)
DevOps Tools, like Ansible ► [https://bit.ly/3iASHuP](https://bit.ly/3iASHuP)
Docker Tutorial ► [https://bit.ly/3iAT9Jx](https://bit.ly/3iAT9Jx)
AWS Tutorial ► [https://bit.ly/3iAT9Jx](https://bit.ly/3iAT9Jx)
GCP Tutorial ► [https://bit.ly/3mwh412](https://bit.ly/3mwh412)
Jenkins Tutorials ► [https://bit.ly/3iHnfv4](https://bit.ly/3iHnfv4)
Jenkins Pipeline ► [https://bit.ly/30CJGLB](https://bit.ly/30CJGLB)
Python ► [https://bit.ly/3I7bewU](https://bit.ly/3I7bewU)
Python in just 1 video ► [https://bit.ly/3EeqGVy](https://bit.ly/3EeqGVy)
Symfony and Database 
Tags: php, symfony, doctrine, docker
Published: 2021-12-03 16:40:59

I'm having free time these days so I decided to go back to learn symfony. I picked up a course about doctrine and symfony. I will post my notes here, feel free to leave a comment, I am open to all suggestions.

#Doctrine Installation :#

Symfony 5 doesn’t come with a database layer when installing it, to be able to store data in a Database we need to add a library for that, like **Doctrine**. run : `composer require orm`

orm is an alias for a library called *symfony/orm-pack*

**Pack is a shortcut to install several packages using one command**, for example if we check the github repo of orm-pack, we see that it contains only a *composer.json* file where we have all dependencies(packages) needed for Doctrine.

##Symfony and Docker :##

Once the installation is done, you will notice that **Symfony Flex** added a *docker-compose.yml* file. Instead of using a local Database (ex :mysql)  and attach it to our project let's take advantage of docker and the automatic configuration added by Flex.

![docker-compose file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6kge70wf1qt4027q03sv.png)

Check that Docker is installed on your machine, and then run : 
`docker compose up  -d`

To see the mysql Docker container, run :
`docker compose ps`

To connect to mysql : 
`docker compose exec database mysql -u root --password=password`

Without Docker, you need to configure the environment variable DATABASE_URL in the *.env* file. Since we are using the local symfony server (by running `symfony serve -d`) we don’t need that, because when the symfony binary detects the *docker-compose.yml* file it reads all the config and environment variables of running services and make them available for our app.
You can run `symfony var:export --multiline` to see the value of environment variables.

To stop a container : 
`docker compose stop`

That's all for today :)
How to resize your Instagram post design to LinkedIn post size in Figma
Tags: socialmedia, figmaplugin, linkedin, figma
Published: 2021-12-03 17:00:15

---
title: How to resize your Instagram post design to LinkedIn post size in Figma
published: true
date: 2021-12-03 16:39:31 UTC
tags: socialmedia,figmaplugin,linkedin,figma
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*k4rghVGgMkpgx4xf.jpg)

Today, we’ll look at how to quickly resize our Instagram post design to LinkedIn post size using a Figma plugin called Thumblisher.

### What You Will Need

You’ll need the following resources to follow along with this Figma tutorial:

**Install Thumblisher Figma Plugin**

Before getting started, make sure to install Thumblisher Figma Plugin to your Figma editor to resize your social media graphics easily.

[Figma - Thumblisher | The easiest way to resize and scale your frames for different social media platforms. Plugin Dem...](https://www.figma.com/community/plugin/1037826586645134259/Thumblisher)

**Download Exercise File**

To access the social media templates we’ll use in this tutorial, duplicate the Social Media Exercice File:

[https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File](https://www.figma.com/community/file/1045659071341514535/Social-Media-Exercice-File)

Find more resources on [https://www.captain-design.com/](https://www.captain-design.com/)

### Watch Video Tutorial

{% youtube c9iaNukdUto %}

### Before you go

Feel free to visit our website [**captain-design.com**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

You’ll find three things to help you kickstart your next project’s design :

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-resize-your-instagram-post-design-to-linkedin-post-size-in-figma/) _on December 3, 2021._
Observables... why?
Tags: javascript, beginners, webdev, typescript
Published: 2021-12-03 16:36:31

Many times in the front end realm, while using angular framework we come across "Let's use an observable". OH! Well ok, but why? 

`Observables` are used to fetch data Asynchronously and we can use their return values in a continuous sequence (multiple times) when executed.

- By default, they are lazy as it emits values when time progresses.

- They offer a lot of operators which simplifies the coding effort. 

- Can be cancelled using unsubscribe method anytime.

- RXJS operators: You have many pipe operators majorly map, filter, switchMap, combineLatest, etc. to transform observable data before subscribing.

- Subscribe method allows us to have a centralized and predictable error handling.

- One operator retry can be used to retry whenever needed, also if we need to retry the observable based on some conditions retryWhen can be used.

Reference:
RXJS: https://rxjs.dev/guide/overview
List of operators along with their interactive diagrams: https://rxmarbles.com/