teleren/devto huggingface dataset:
Is Your Dev Team TOO Big to Succeed? w/ SAIC’s Bob Ritchie
Tags: devops, podcast, techtalks, management
Published: 2022-03-25 20:58:46

Modern problems require modern solutions, right? 

The problem is, it’s becoming increasingly difficult to understand what solutions are required for a given problem and even harder to task a team with finding them. 

That’s why Bob Ritchie, VP of Software at [SAIC](https://www.saic.com/), thinks the top-down management model is dead. To replace it, Bob is championing a “team-of-teams” model that provides his developers with far more autonomy - so much, in fact, that they can even self-elect their leaders. 

On this week’s episode of [Dev Interrupted](https://devinterrupted.com/podcasts/), Bob discusses the challenges of software development in an increasingly dynamic environment, why he believes developers should be no further than 4 steps away from their CEO and the historical challenges of connecting results in Silicon Valley to those in the federal government. 

Who would've expected a federal government tech integrator (Science Applications International Corporation), to be on the leading edge of developer autonomy?

{% spotify spotify:episode:2dd0rL9FVLDKHbVH0XRgat %}

### Episode Highlights Include:
* (4:19) Team-of-teams model vs top-down leadership
* (10:17) Devs self-electing their team leads
* (15:21) Why no position should be more than 4 steps from the CEO
* (20:29) Invest in your teams until it hurts
* (34:00) Treat hiring like sports organizations treat the draft
* (35:45) Historical challenge of connecting results in Silicon valley to results in the federal government

## [You're Invited to INTERACT on April 7th](https://devinterrupted.com/event/interact/)

Join engineering leaders from Netflix, Slack, Stack Overflow, American Express & more at LinearB's virtual engineering leadership conference, [**INTERACT**](https://devinterrupted.com/event/interact/) on **April 7th, 2022.**

**1 day, 20 speakers, 1,000s of engineering leaders - all driven by the Dev Interrupted community.** If you are a team lead, engineering manager, VP or CTO looking to improve your team, this is the conference for you!

[**Learn more here**](https://devinterrupted.com/event/interact/)


![Join INTERACT at https://devinterrupted.com/event/interact/](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2xhtonct1vkpjhrtzfl3.png)
🚀 10 Awesome Websites for devs in 2022 ️
Tags: javascript, webdev, programming, productivity
Published: 2022-03-25 20:49:25

A list of 10 awesome websites, chrome extensions, web apps, and everything in between that will help you in your programming career.

## 1. [Whatruns](https://www.whatruns.com/)

A free browser extension that helps you identify technologies used on any website at the click of a button. 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/io2e36flh7lbak4jg88z.png)](https://www.whatruns.com/) 


## 2. [Sizzy](https://sizzy.co/)

The browser for developers. Stop wasting time and speed up your development workflow 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/73geqjuwi6e1uksoaocb.png)](https://sizzy.co/) 


## 3. [LogRocket](https://logrocket.com/)

LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6ci3ete5gxzn3qby9fbu.png)](https://logrocket.com/) 


## 4. [Sentry](https://sentry.io/)

Sentry's application monitoring platform helps every developer diagnose, fix, and optimize the performance of their code. 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o9y6dnlj5u09h4runv4p.png)](https://sentry.io/) 


## 5. [Can I Use?](https://caniuse.com/)

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ljyqcptdyk5bgygoszxg.png)](https://caniuse.com/) 


## 6. [Prettier](https://prettier.io/)

An opinionated code formatter, Supports many languages,Integrates with most editors,Has few options. 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/6u21bureeecjlpseay31.png)](https://prettier.io/) 


## 7. [CSS Scan](https://getcssscan.com/)

Goodbye to "Inspect Element" — Check the CSS of any element you hover over, instantly, and copy its entire rules with a single click. 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hp19t4ynedr98dce45de.png)](https://getcssscan.com/) 


## 8. [Bundlephobia](https://bundlephobia.com/)

Find the cost of adding a npm package to your bundle 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/skn4pre94fy3q4ezp45x.png)](https://bundlephobia.com/) 


## 9. [Cypress](https://www.cypress.io/)

Fast, easy and reliable testing for anything that runs in a browser. 
[![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zpl4pcg1tncaatywfz11.png)](https://www.cypress.io/) 


## 10. [ProgrammerHumor.io](https://programmerhumor.io/)
After a long programming session when you need a break, head over to ProgrammerHumor.io for best programming memes and fun stuff.
`Full disclosure: I built it.`
![ProgrammerHumor.io: Best programming memes for software engineers and developers](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4gc6fwil2ho9gcu41kru.png)
Trying to create an onboarding document for junior devs. What are the must-have items?
Tags: hire, onboarding
Published: 2022-03-25 20:30:16

Here are my 2 cents: 
* First of all I think the onboarding period is often too short. I observed that 3-4 weeks of preparations are of most help to new employees (with no or little professional experience)
* Onboarding activities should be well documented.

Here are several real-world examples I created for a node.js backend developer that takes ± a month:
* Development methodology
* Programming Paradigms (Event loop, Promise chaining (for legacy codes), async-await, functional programming, ES6, exception handling)
* Most frequently used libraries (mocha, sequelize, express, async etc.)
* Version Control System (Git)
* Tools (VS Code, ESLint, debugging)
* In house libraries
* Actual Code Structure
* A task in the sprint (TBD later on)
Create Popup or Modal Component in React
Tags: react, reactnative, webdev, beginners
Published: 2022-03-25 20:25:18

Popup is a UI Component which displays as window in different sizes and screen positions on websites or apps. We can display different any components like forms, boxes, images, videos, tables etc. in Popup. Here we will create popup component in react.

```typescript
class Popup extends React.Component {
  render() {
    return (
      <div className='popup'>
        <div className='popup_inner'>
          <h1>{this.props.text}</h1>
        <button onClick={this.props.closePopup}>Close</button>
        </div>
      </div>
    );
  }
}
```
Now, we have **&lt;Popup /&gt;** Component and we can use this in our class or functional components. We can also add any elements or components in our **Popup like offer details, images, videos, newsletter forms** etc. For example here we are using **&lt;Popup /&gt;** react component in App Component.

```typescript
class App extends React.Component {
  constructor() {
    super();
    this.state = {
      showPopup: false
    };
  }
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }
  render() {
    return (
      <div className='app'>
        <button onClick={this.togglePopup.bind(this)}>Show Popup</button>
        
        {this.state.showPopup ? 
          <Popup
            text='This is React Popup'
            closePopup={this.togglePopup.bind(this)}
          />
          : null
        }
      </div>
    );
  }
};
```

## React Popup Component CSS
```css
.popup {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  padding: 1rem;
  background-color: rgba(0,0,0, 0.5);
}

.popup_inner {
  position: absolute;
  left: 25%;
  right: 25%;
  top: 25%;
  bottom: 25%;
  margin: auto;
  background: white;
  padding: 1rem;
}
```

---

Please like share subscribe and give positive feedback to motivate me to write more for you.

For more tutorials please [visit my website](https://www.w3courses.org/tutorials/).

Thanks:)
Happy Coding:)
AWS CloudFront — Secure URL Methods of Generation
Tags: aws, cloud, security, cybersecurity
Published: 2022-03-25 20:05:02

AWS CLI on Mac OS

AWS CloudFront sign — URL https://<yourspecificvalueHere>.cloudfront.net/index.html — key-pair-id ZDC4U0AZQ1RGC — private-key file://DEMOPRIKey.pem — date-less-than 2023–01–01
Just a few things to mention about using AWS CLI on the Mac OS terminal
When you generate your signed URL, it may include something like % at the end, this should not be included or you may see an error when trying to use the URL.
For me, the key pair id IS NOT from my root security credentials-CloudFront Key Pairs, this is the ID from the public Key I created under https://console.aws.amazon.com/cloudfront/v3/home?region=us-east-2#/publickey
For me, the — private-key file://DEMOPRIKey.pem was generated along with my public key using this online tool — https://travistidwell.com/jsencrypt/demo/ more on that below. Remember to set the Key size to 2048, the default is 1024.
AWS CloudFront sign command can be run from your project folder which has all the required files such as keys.
If you haven’t used AWS CLI before you will need to install that first, and remember to set up your credentials using AWS configure, then enter specific info as prompted.
Using node js with Visual Studio Code
const AWS = require(‘aws-sdk’);
const fs = require(‘fs’);
const path = require(‘path’);
const distUrl = ‘<YourSpecificValueHere>.cloudfront.net’;
const s3Key = ‘<YourSpecificValueHereExindex.htmlindex>’;
const cfAccessKeyId = ‘<YourSpecificValueHere>’;
let cfPrivateKey = fs.readFileSync(path.join(__dirname, ‘<YourSpecificValueHereExprivate_key.pem>’));
const signer = new AWS.CloudFront.Signer(cfAccessKeyId, cfPrivateKey)
const thirtySeconds = 30 * 1000; // 30 seconds
let cfObjectUrl = ‘https://' + distUrl + ‘/’ + s3Key;
const signedUrl = signer.getSignedUrl({
url: cfObjectUrl,
expires: Math.floor((Date.now() + thirtySeconds)/1000)
})
console.log(signedUrl)
Fire up a terminal window, make sure you run npm i aws-sdk, or simply install AWS toolkit from the Extensions Marketplace.
From the terminal window, simply run node signed.js and if successful you will see the signed URL generated.
Cloudfront Restricting Access — If you restrict viewer access, viewers must use CloudFront signed URLs or signed cookies to access your content.
https://travistidwell.com/jsencrypt/demo/
https://console.aws.amazon.com/cloudfront/v3/home?region=us-east-2#/publickey
Create a new key — use public key info from the above tool
Create a new key group — specify the Public key created in step 1
Go to Cloud front distributions, Behaviors, under restrict viewer access, yes, Trusted Key Groups, Add Key Groups from the drop-down, save changes and wait a bit for CloudFront to finish deploying.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ecrab9dgdgwjvdpsv6ub.png)


https://<yourspecificvaluehere.cloudfront.net/login?client_id=4b5bddk6m0rfk<yourspecificvaluehere>&response_type=token&scope=email+openid+phone+profile&redirect_uri=https://www.test.com/index.html?Expires=167200&Signature=<Removed-YourspecificValueHere>
Matty Stratton - DevOps Expert, Sage, or Passionate Advocate - You Decide
Tags: pulumi, devops, cloud
Published: 2022-03-25 20:00:33

You may have heard the name Matty Stratton in passing, on [DevOps days](https://devopsdays.org) event advertisements, associated with [Arrested DevOps](https://www.arresteddevops.com/), or perhaps in an episode of [PulumiTV](https://www.youtube.com/pulumitv). But, have you had the opportunity to meet him? I’m lucky enough to be in his orbit as a coworker, I can tell you first-hand meeting with him is like dropping a quarter in a candy machine and getting landed with a giant bag of candy! I’m sure he’s forgotten more about infrastructure and operations than I will ever know, here is an article he authored “[What Exactly is Cloud Engineering](https://www.pulumi.com/blog/what-exactly-is-cloud-engineering/)”.

But wait, there’s more!

You can visit [Matty Stratton’s website](https://speaking.mattstratton.com/) to learn more about him and where he’s been, or check out his [author page at Pulumi](https://www.pulumi.com/blog/author/matt-stratton/), but if you ever have the opportunity for a 1:1 with him: **take it**. I did, and it inspired this article. Normally, as a neophyte in the cloud engineering world, the opportunity to spend time with someone as well-traveled and experienced as Matty is reminiscent of that scene from Wayne’s World. 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zeiohdfu58h9nryyyv7d.gif)

When I say neophyte, I’m referring to myself, an SEO expert. In a very pleasant turn of events, his warm smile, and cheery disposition instantly dispelled the anxiety around meeting with Matty Stratton, DevOps titan. The topic of our discussion was PulumiVision, SEO, and promotion, an introductory conversation. 

We talked about enhanced video transcripts and how important it is to capture that natural, human-spoken language. The process for inserting it into an accordion beneath the embedded video so users can access the written word if they so choose, and so can search engines. 

One of the main takeaways from the conversation was the importance of creating a page dedicated to each individual episode, to create an experience around it. To offer educational links for deeper investigation, references & related opportunities. Rife with best practices for SEO beyond the scope of our delightful forum.

My experience was incredibly educational, I’m proud to collaborate with him. Have you met Matty in person, during a small Zoom meeting, or at an event? What was your first Matty Stratton experience like? How do you see Matty, DevOps Expert, Sage, or Passionate Advocate?

If you haven’t met Matty yet, here are some quick pointers:

- Some professionals meet over coffee or a meal, offer Matty a Diet Coke.
- Don’t be shy when it comes to asking questions!
- You are worthy.
Codery - Extract And Collect Data From Any Website
Tags: javascript, programming, css, api
Published: 2022-03-25 19:47:18

We are excited to share Codery! The free, powerful REST API for extracting and collecting data from any website. Use this API and turn websites into accurate data in only seconds.
The Codery API crawls a webpage and gets all structured data from it. You provide the URL, we do the rest.

Codery's Functionalities:

- Web Crawling API

- Monitoring of Search Engine Result Pages

- Javascript Rendering

Also, you can use this tool for different purposes such as:

- Based Data From Geolocation

- Rule-Based System

- Full Documentation Data

- Blocking Ads

- Blocking Images and CSS

Your feedback would be extremely beneficial to us, as our primary goal is to provide the greatest possible experience to our consumers!

You can try it out for free, without an account, here: https://app.mycodery.com/scrape.
Top 3 Casts of the Week #3
Tags: typescript, javascript, tutorial, webdev
Published: 2022-03-25 19:36:56

It's that time of the week again where we give our love to our top 3 Casts of the week on [CodeCast](codecast.io)! This week, we have some great videos in store for you, so let's get right into it.

## [Tailwind Essentials: Typography](https://www.codecast.io/casts/9VopvYZq5Oda-tailwind-essentials-typography) by [@shahzaibkamal](https://www.codecast.io/users/shahzaibkamal)

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

This is one of the videos in his [Tailwind Essentials Series](https://www.codecast.io/series/81-tailwind-essentials-spacing-sizing-and-typography), dealing with spacing, sizing and typography. While the entire series is absolutely worth the watch, this one is a great one to watch alone if you're looking for some specific information on working with typography in Tailwind CSS.

## [Introduction to Fetch API](https://www.codecast.io/casts/jZrpNPxjLo78-introduction-to-fetch-api) by [@kauress](https://www.codecast.io/users/kauress)

![Fetch Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoxs3cgzrtvxm1zsex32.png)

This video goes over the first part of working with the fetch API, and is a prefect prerequisite to prepare yourself for Jannat's upcoming content on working with different API's!

## [JavaScript's every() Method](https://www.codecast.io/casts/KPjp7XGPQw2A-es5-every-method-in-javascript) by [@kauress](https://www.codecast.io/users/kauress)

![Every Cover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4wxmk50o63r13evu3wqx.png)

This video goes into using the built in `.every()` method in JavaScript. Jannat has a series of videos on different built in methods in JavaScript, and they are all well worth checking out.

Be sure to follow us here and [everywhere](https://linktr.ee/codecastapp) to stay up to date with our latest features!
How to expose local service using nginx and SSH
Tags: nginx, web, ssh
Published: 2022-03-25 19:29:40

---
title: How to expose local service using nginx and SSH
published: true
date: 2022-03-25 19:20:00 UTC
tags: nginx,web,ssh
canonical_url: https://banach.net.pl/posts/2022/how-to-expose-local-service-using-nginx-and-ssh/
---

One of my colleagues needs to expose the local running app to an external service. There were simple constraints - the domain name under which service was exposed cannot change (because it needs to be whitelisted) and need to be a subdomain of the company domain. 

They already have some virtual machines for developers with external IP adresses and SSH access running. I’ve proposed using them to solve this task - below you can find the solution that can be applied.

What will be needed:

- publicly available server (external IP) with (GNU/)Linux and nginx (for this post I’m assuming it is Ubuntu),
- user and permissions to change nginx configuration (sudo/root),
- SSH access for that server,
- some domain name, for example - `some.domain.tld` - pointing to the server external IP.

Let’s start with configuration - in `/etc/nginx/sites-available/some.domain.tld` write:

```
server {
  listen 80;
  listen [::]:80;

  gzip on;
  server_name         some.domain.tld;

  location / {
    proxy_pass http://127.0.0.1:8080;
    proxy_redirect off;
    proxy_set_header Host 127.0.0.1;
    proxy_set_header X-Original-Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
  }
}

```

This configuration will proxy requests for `some.domain.tld` to the local port 8080 on the server.

To enable it we need to link this configuration to `sites-enabled` directory using command:

```
ln -s /etc/nginx/sites-available/some.domain.tld /etc/nginx/sites-enabled/some.domain.tld

```

and restart nginx - `systemctl restart nginx`. Now under domain `some.domain.tld` visitors will see an error page with the message “bad gateway” - all because on 8080 port there is nothing.

Now, with the power of a ssh tunnel, we will make this 8080 port on remote server will point to some port on our local machine.

To expose our local service we can use the command:

```
ssh -N -R $PORT_ON_SERVER:localhost:$LOCAL_PORT $LOGIN@$SERVER
```

where:

- $PORT\_ON\_SERVER is the port which we forward request to on server,
- $LOCAL\_PORT - local port on dev machine where something is running,
- $LOGIN and $SERVER are the username and address of the server running proxy.

Assuming that username is `alice`, the server is available under `some.domain.tld` domain and our local service is available under port 4502:

```
ssh -N -R 8080:localhost:4502 alice@some.domain.tld
```

And that’s all - after opening the domain in the browser we will see our local service. And anybody on the Internet can also view it, so watch out! ;-)
Accordion FAQ Menu By @itsrehanraihan
Tags: codepen, accordion, tutorial, dropdown
Published: 2022-03-25 19:11:13

### we will be taking a look at how we can create a responsive FAQ accordion using  HTML, CSS, and JavaScript.

Tutorial Link {% youtube https://youtu.be/bW6gg7YGM9E %}

{% codepen https://codepen.io/itsrehanraihan/pen/GRyNzxZ %}
Tip: Avoid using bare except in Python
Tags: python, programming, beginners
Published: 2022-03-25 19:06:23

In Python, keyboard interrupts and system exits are propagated using exceptions (i.e. `KeyboardInterrupt` and `SystemExit`). As a result, a bare `except` clause is going to catch something like the user hitting <kbd>Ctrl</kbd> + <kbd>C</kbd>.

Consider the following code. If the user were to try exiting the program, the keyboard interrupt would be caught by the `except` clause. This would be undesirable, as it prevents the user from actually exiting the program until they provide valid input.

```py
while True:
  try:
    s = input('Input a number:')
    x = int(s)
  except:
    print('Not a number, try again!')
```

A way to prevent this would be to use `Exception` which will ensure that the user will not be trapped. The only problem with this approach is that `Exception` is generic and will handle pretty much anything thrown at it.

```py
while True:
  try:
    s = input('Input a number:')
    x = int(s)
  except Exception:
    print('Not a number, try again!')
```

The correct way to handle errors is to specify the type of error you expect. For example, in this code sample, `ValueError` would be appropriate.

```py
while True:
  try:
    s = input('Input a number:')
    x = int(s)
  except ValueError:
    print('Not a number, try again!')
```

As a rule of thumb, you should only handle expected failure states using `except` with an appropriate error type. In the case of unexpected errors, it might be better to simply let the program fail naturally and exit.

---

_Do you like short, high-quality code snippets and articles? So do we! Visit [30 seconds of code](https://www.30secondsofcode.org/) for more articles like this one or follow us on [Twitter](https://twitter.com/30secondsofcode) for daily JavaScript, React and Python snippets!_ 👨‍💻