teleren/devto huggingface dataset:
TUTORIAL: How to open a GitHub project in Codesphere
Published: 2021-03-16 17:29:21

>Codesphere is a development ecosystem that combines a collaborative IDE, GitOps, and cloud services to streamline the development of scalable web applications. 

Nowadays it’s hard to imagine development without using git. That’s why in today’s article we’ll show you how to clone your git project from GitHub and open it in Codesphere.

###Clearing the working directory

At the moment, when a new app is created Codesphere clones a default project from GitHub. To quickly clear out the working directory we can run the following command in the terminal:

`rm -rf ..?* .[!.]* *`

###Cloning a GitHub repository

To clone a GitHub repository, we first need to find the repo’s web URL. This will typically be:
https://github.com/YOUR-USERNAME/YOUR-REPO-NAME.git

To find the right one, navigate to the green code button on your repo’s main page.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtzts78b6ctikq3b9wa4.png)

Then click on ‘https’ and copy the URL.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50k27idwxie9gxou9epx.png)

After that, navigate back to Codesphere and run the following command in the terminal to clone the repo:

git clone URL

For example, here is how this command looks for me:

git clone https://github.com/LiorB-D/ToDoList.git .

Finally, your project should now appear under Code in the file tree.

Thanks for reading!

By the way, the direct GitHub integration is coming soon to make the version control process as simple as possible.

Stay tuned and happy coding!
New Product: Stack.new
Tags: serverless, devops, aws, cloudformation
Published: 2021-03-16 17:26:31

The team at [Stackery] (https://stackery.io) is very excited to release [stack.new] (https://stack.new) today! 

Stack.new is a public tool to audit AWS CloudFormation templates against aspects of [AWS' 5 Pillars of Well-Architecture Framework] (https://aws.amazon.com/blogs/apn/the-5-pillars-of-the-aws-well-architected-framework/) to help you build more secure and reliable infrastructure in the Cloud.

##How it works##
1. Drop any public GitHub CloudFormation template URL into [stack.new] (https://stack.new) (or select "random"). 
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n4wf306qydc2z5di0p0q.png)
2. Stackery then audits and visualizes the CloudFormation template... it takes a second or 2.

##Key Features##
**CloudFormation Visualizer**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1hgg6jzxftka2ak0vhtg.png)
Stackery's Design Canvas helps you visualize and identify resources in your CloudFormation template. Click into any resource to see its configuration or add new resources to update your template.

**Audit Results**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2l047ru6fmyxrm8pnu0d.png)
Powered by CFN-nag, Stack.new audits your template against 115 points including 46 related to [IAM Policies] (https://docs.aws.amazon.com/IAM/latest/UserGuide/access_policies.html). We also provide links to relevant materials from AWS and other serverless tutorials to help resolve the issues.

**Reference Information**
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5m08n35m0d7d9b8e7wfa.png)
Documentation (pulled right from GitHub), resources in your template (like Cognito, Lambda, etc.), Audit results overview, and of course, your code!

At Stackery, we are always working to help flatten (shorten?) the learning curve for Cloud-native and Serverless applications. [Tell us](https://airtable.com/shrpnWLSLvMVGvDkL) what you think and let us know what else you'd like to see form stack.new
5 more useful sites for FRONTEND devs!
Tags: beginners, javascript, html, productivity
Published: 2021-03-16 17:24:48


## Hello, here are 5 more great tools to increase your productivity!😉

---

### [Codepen](https://codepen.io/)

If you program with html, css and Javascript, this site will be very useful.
Just open the online editor and code. You don't even have to link your .css and .js files to the html, Codepen does it for you! Best of all, it has a live preview of the result of your code.

You can also browse other people's projects and see code snippets!

&nbsp;  

### [Repl.it](https://repl.it/)

Just wonderful! With Repl.it, you have more than 50 programming languages ​​available, all in the browser. You can also integrate it with your Github account, to deploy and observe changes made to the code.

&nbsp;  

### [Canva] (https://canva.com/)

This one is a darling of mine. You can create and edit images, mainly for marketing, a very important point for us web designers.
It has hundreds of templates ready to be edited, which will save you time when creating a promotional image for your new project, improving your personal marketing and even when creating a cover image for something, as well as I did for that article!

&nbsp;  

### [Gitpod](https://www.gitpod.io/)

Gitpod is a development environment with VS Code online, which can be run directly by your browser. Without complications, in seconds you create a fully functional environment, with integration into your Github or Gitlab. You can also download the browser extension, which makes your life even easier.

A great contribution to open source.

&nbsp;  

### [Font Awesome](https://fontawesome.com/)

Virtually everyone knows Font Awesome, but for those who don't, it's an extremely easy-to-use icon resource on your sites, you copy a link into your html and that's it, you have access to a multitude of icons to use! Just use the identifier of the desired icon in the element you want and *voilà.* It is also possible to change the color, rotate, increase or decrease the icons... all without losing quality, as the icons are vectors.

---

### If you liked it, follow me on [github!](https://github.com/lucas-andre)
Lucid Stock
Tags: watercooler, stock
Published: 2021-03-16 17:22:51

I know this is "CodeNewbie" but I'm using the watercooler tag so HAH! (Don't worry GAMESTOPSTONKS are dead) I wanna talk about Lucid stock aka CCIV. Lucid is an electric car company that people say is the next Tesla. (Read this article for more: https://investorplace.com/2021/03/cciv-stock-jim-cramer-says-lucid-motors-could-be-the-next-tesla/) The stock is only $30.84, smart people like investors would buy stock from the data collected so far. The data says... The stock is going to skyrocket! IDK though are you interested in stock? If so, what do you think?
Start using Django in 2 mins
Tags: django, tutorial
Published: 2021-03-16 17:16:55

1) Create a Python virtual environment
```
C:\Users\Owner> cd desktop
C:\Users\Owner\desktop> py -m venv env
C:\Users\Owner\desktop> cd env
C:\Users\Owner\desktop\env> Scripts\activate
(env)C:\Users\Owner\desktop\env>
```

2) Install Django
```
(env)C:\Users\Owner\desktop\env> pip install django
```

3) Make sure Django installed
```
(env)C:\Users\Owner\desktop\env> pip show django
```

4) Create the Django project
```
(env)C:\Users\Owner\desktop\env> django-admin startproject mysite
```

5) Create a Django app
```
(env)C:\Users\Owner\desktop\env> cd mysite
(env)C:\Users\Owner\desktop\env\mysite> py manage.py startapp main
```

6) Run the local development server
```
(env) C:\Users\Owner\Desktop\Code\env\mysite>py manage.py runserver
Performing system checks...
System check identified no issues (0 silenced).
You have 17 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
February 26, 2019 - 09:54:26
Django version 3.0.6, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-C.
```

7) Open the development server address in your browser
Look for the address http://127.0.0.1:8000/ above in the CLI then copy and paste this URL in a new browser window. A web page with a rocket will appear stating your installation was successful.

8) Congrats! You now have a Django project. From here, you need to [configure your web app](https://www.ordinarycoders.com/blog/article/quick-start-django-configuration) to display your custom templates.

[Full tutorial](https://www.ordinarycoders.com/blog/article/quick-start-django-installation)
Personalised GIT CheatSheet(For Specific Situations)
Tags: github, cheatsheet, techblogs, devops
Published: 2021-03-16 17:03:42

In this post,I have considered all the common situations which i have come across while working as developer, curated all the commands and listed down according to the situation.
With more than 160 commands available, becoming a git expert takes time. But everyone has a few commands that they use frequently. In this post I’ll share mine.

# SITUATION 1:I want a clean working directory, but I don’t want to lose my current changes.
```
# save the current state of the working directory 
git stash

# apply the latest stashed change to your current working tree
git stash pop

# list stashed changes
git stash list
```
# SITUATION 2: I messed up my last commit message.
```
# change the latest commit's message 
git commit --amend -m "Fixed message"
```
# SITUATION 3: I accidentally pushed a file. Now I want to remove it from the remote branch (but not from my local branch).
```
git rm --cached <file-path>
```
# SITUATION 4: I made a bunch of changes to a file but I regret it 😱. I want to go back to the main branch version.
```
git checkout main <file-path>
```
# SITUATION 5: I want to take a commit from one branch and apply it onto mine.
```
git cherry-pick <commit-hash>
```
# SITUATION 6: I want my branch to be based off the most recent commit of the main branch.
```
# 1. Get the latest version of the main branch 
git checkout main
git pull origin

# 2. Checkout your branch
git checkout <my-branch>

# 3. Replay your changes on top of the main branch
git rebase main
```
# SITUATION 7:I merged my branch into main but I want to rollback the merge 
```
# 1. Checkout a new branch from the main branch
git checkout -b mybranch-rollback

# 2. Find out the commit hash that merged your branch to develop.
git log 

# 3. Revert the merge commit
git revert -m 1 <commit-hash>

# 4. Push the changes to your new branch
git push origin mybranch-rollback

# 5. Open a pull request to main for your new branch

```
If you liked it, follow me on [github](https://github.com/adityasharan01)
Would love to hear from you which commands you use daily so that i get to learn all those as well.
Comment down below 👇
Mais 5 sites úteis para devs FRONT-END
Tags: html, javascript, beginners, design
Published: 2021-03-16 17:02:43

## Olá, aqui vão mais 5 ótimas ferramentas para aumentar sua produtividade!

---

### [Codepen](https://codepen.io/)

Se você programa com html, css e Javascript, esse site será muito útil.
Basta abrir o editor online e programar. Não precisa nem linkar seus arquivos .css e .js no html, o Codepen faz isso para você! O melhor de tudo, tem um preview ao vivo do resultado do seu código.

Você também pode navegar pelos projetos de outras pessoas e ver code snippets!

&nbsp;  

### [Repl.it](https://repl.it/)

Simplesmente sensacional! Com o Repl.it, você tem mais de 50 linguagens de programação disponíveis, tudo no navegador. Pode também integrar ele à sua conta do Github, para fazer deploy e observar as alterações passadas no código.

&nbsp;  

### [Gitpod](https://www.gitpod.io/)

O Gitpod é um ambiente de desenvolvimento com o VS Code online, que pode ser executado diretamente pelo seu navegador. Sem complicações, em segundos você cria um ambiente totalmente funcional, com integração ao seu Github ou Gitlab. Você também pode baixar a extensão de navegador, que facilita ainda mais sua vida.

Uma grande contribuição para os softwares open source.

&nbsp;  

### [Canva](https://canva.com/)

Esse aqui é um queridinho meu. Serve para criar e editar imagens, pricipalmente para marketing, ponto muito importante para nós web designers. 
Conta com centenas de templates prontos para serem editados, o que vai te poupar tempo na hora de criar uma imagem de divulgação do seu novo projeto, melhorar seu marketing pessoal e até mesmo na hora de criar uma imagem de capa para alguma coisa, assim como eu fiz para esse artigo!

&nbsp;  

### [Font Awesome](https://fontawesome.com/)

Praticamente todos conhecem o Font Awesome, mas para os que não sabem, é recurso de ícones extremamente fácil de usar nos seus sites, você copia um link para dentro do seu html e pronto, tem acesso à uma infinidade de ícones para usar! Basta utilizar o identificador do ícone desejado no elemento que você quer e *voilà.* Também é possível mudar a cor, rotacionar, aumentar ou diminuir os ícones... tudo isso sem perder qualidade, pois são vetores.

---

### Se você gostou, me siga no [github!](https://github.com/lucas-andre)
The 7 Most Popular DEV Posts from the Past Week
Tags: top7
Published: 2021-03-16 16:54:23

---
title: The 7 Most Popular DEV Posts from the Past Week
published: true
description: A round up of the most-read and most-loved contributions from the community this past week.
tags: icymi
cover_image: https://thepracticaldev.s3.amazonaws.com/i/sfwcvweirpf2qka2lg2b.png
---
_Every Tuesday we round up the previous week's top posts based on traffic, engagement, and a hint of editorial curation. The typical week starts on Monday and ends on Sunday, but don't worry, we take into account posts that are published later in the week. ❤️_

## DIY React Router 

@thomascullen walks us through building a simplified version of React-router, based on the newer v6 APIs 🙌 


{% link https://dev.to/thomascullen/build-a-react-router-clone-from-scratch-38dp %}

## How to make a WebRTC video chat setup work in a production environment

"Our path to functioning video chat was long and winding; I want to outline what we learned to save other people from spending the same time and effort we did to come to that understanding."

- @lazerwalker

Super interesting and helpful!


{% link https://dev.to/lazerwalker/why-video-chat-is-a-hard-technical-problem-43gj %}

## Sometimes tutorials aren't enough

@vascoalramos shares the first installment in their periodic log of learning the concepts and tools behind Kubernetes orchestration. This is a great supplement to all those Kubernetes tutorials you've bookmarked!


{% link https://dev.to/vascoalramos/learning-kubernetes-concepts-part-1-pb0 %}

## No regrets, just lessons

@abdulbasit313 shares some insights from the past two years they've spent learning software development. It's always helpful to learn from others' "mistakes". 


{% link https://dev.to/abdulbasit313/5-mistakes-i-wish-i-didn-t-make-as-a-self-taught-developer-gjk  %}

## Be a TwitchStar with this setup

@whitep4nth3r was kind enough to share how exactly they set up their Twitch stream for maximized quality and efficiency. 🤩 


{% link https://dev.to/whitep4nth3r/my-twitch-live-coding-setup-in-obs-4he0 %}

## Easybase for easier project backend processes.

@mbagley1020 explains how the React library for Easybase.io provides developers with the ability to streamline their project backend processes visually. Find out how the free-tier makes serverless frameworks and scalable databases more accessible for all kinds of developers.


{% link https://dev.to/mbagley1020/adding-serverless-user-authentication-to-your-react-projects-jbe %}

## It's ok to hesitate along the way 

This diary entry-esque video and article by @kethmars shares insights for those of you who are looking to get more serious about software development — or those of you who want to reach the next level in your career.


{% link https://dev.to/kethmars/my-first-4-years-as-a-professional-developer-in-a-dream-company-and-why-i-left-166d %}

_That's it for our weekly wrap up! Keep an eye on dev.to this week for daily content and discussions...and if you miss anything, we'll be sure to recap it next Monday!_
AWS Services Supporting  "MultiCloud Strategy"
Tags: cloudskills, cloudnative, aws, multicloud
Published: 2021-03-16 16:49:26

Continuing my thoughts on multi-cloud strategy, I thought I would do a writeup on some of the key features and functionality that I came across within AWS that can be leveraged for a multi-cloud environment/strategies. But first, some rants on Corey's blog here: https://www.lastweekinaws.com/blog/multi-cloud-is-the-worst-practice/ and Ben Kehoe (https://twitter.com/ben11kehoe/status/1266085955070500864). 

Anyone, who has worked in a large enterprise, can simply reject these statements from the two gentlemen above because the person knows for a fact that: 
* Large org grows with acquisition too: Hence all possibility of multi-cloud. 
* Did someone say compliance? 
* Start development on AWS but what if you get significant discounts on placing Microsoft workload on Azure because of the EA. Or what if you have a data scientist team who tried and tested relevant GCP services. 

I like the blog https://cloudirregular.substack.com/p/aws-hearts-multi-cloud-its-gonna?opt_id=undefined from 
Forrest Brazeal who summed it up very nicely and practically. 

Researching on some of the AWS services that can be leveraged with "multi-cloud environment", I found them scattered across the following categories: 
* Compute: Amazon Kubernetes Service and EKS anywhere (To be released in 2021). Within serverless compute, unless your software is carefully crafted and you program through best practices (like interfaces, Open-Close principles) etc, you are coupled with the Lambda service. 
* Data Store: Elasticache and ElasticSearch for open source caching and searching respectively. Your applications could be written against Memcached/Redis but underlying infrastructure could be running within any cloud. Same goes with RDS services like Aurora for MySQL and PG, RDS MySQL/PG, and other enterprise databases. 
* Networking: Aside from the VPN setup, there is nothing much thats in place. Afterall, the CSPs have their own set of network infrastructure. There are certainly partners who can assist here. 

The way I see it, organizations need to protect, manage, enhance their business process and data. They must have organization policies/principles/SLA and regulations around it. Where their business services run should be secondary (supporting the business services). Because at the end of the day, whichever provider you choose for a specific workload or service, to a large extent you are already locked into the providers' technologies such as serverless function, monitoring capability, identity and authorization capabilities, networking, account and billing structures, etc. There is certainly no "cloud neutral" way around these aspects. You can possibly take help of the partners but I doubt even they are "true multicloud".
Easily make Airtable work like your website's database
Tags: airtable, database, cms, api
Published: 2021-03-16 16:45:38

Airtable is a great app to automate your workflow. You can keep your payment records, habit tracks, todos, estimations of your next project — all at one place. It is today's Excel. But unlike Excel, you can make airtable act like your database. 

Key Issue :— Airtable API is hard to integrate, because it has limits on calls and advance level documentation. For example 👇

_By default, every GET request has 60 seconds of caching which means that the first API call will come from a third party application API and other API calls under the next 60 seconds from the caching server._

Confusing ? It is ! Below is a work around to fetching airtable data to your website without getting into unnecessary details.

### Step 1 : Get your Airtable API Key

![image](https://nocodeapi.com/static/50eb2e6f58aa1af896351ee7d60eb82d/13e20/airtableAPIkey.png)

- Click here 👉 [airtable.com/account](https://airtable.com/account) to go to airtable account's page.
- Click on Generate API Key under the API heading.
- Click on password input field to pick your API Key.

### Step 2 : Get your Airtable Base ID

![image](https://nocodeapi.com/static/60b877f0a3be7eccf9591d2f1c16e749/b0122/airtable-base-id.png)

- Click here 👉 [airtable/api](https://airtable.com/api) · to go to airtable's API page.
- Click on your airtable base (Base is your file name).
- Copy your Base ID — It starts with letters `app`

### Step 3 : Add this data to NoCodeAPI

![image](https://nocodeapi.com/static/abd09571ebead401c5afb07d53bc819e/321ea/airtable-dashboard.png)

- Sign In to your nocodeapi dashboard.
- Go to Marketplace
- Activate your Airtable app
- Click on “Make Airtable API”
- Fill in API Key (from Step 1) and Base Id (from Step 2)
- Press the “Create” button 

### Step 4 : Test if it is working Ok

![image](https://res.cloudinary.com/miscellaneous/image/upload/v1615910108/nocodeapi/new_playground.png)

- Click on **“Use this API”** button just above your generated Api
- Select **“Get”** on the overlay just appeared
- Select **“Click & Test API”**
- Enter your **"tableName"** — this is the sheet name of your airtable base

![image](https://res.cloudinary.com/miscellaneous/image/upload/v1615910100/nocodeapi/airtable_name.png)

- Press “Execute” to test it

You should get a 200 response with all rows in your airtable listed in JSON format.

### You are done 😀

Through your airtable integration you can make GET, POST, PUT and DELETE requests to manage your database.

If finding something confusing, watch this video tutorial.

{% youtube IywkAWHGyiM %}

I hope you enjoyed this blog. You can contact us on telegram at [nocodeapi](https://t.me/NoCodeAPI).

Thank you. ✌️

___________________

### Advanced Readers

Paid users can customise caching time. Pass cacheTime (in seconds) as `query param` with your api end point.

`https://v1.nocodeapi.com/gitdansih/airtable/ePcgqeUWUNWgmPmN?cacheTime=900`

Now your endpoint will be cached for 900 seconds(15 minutes).