teleren/devto huggingface dataset:
Handling JSON in Python
Published: 2021-11-04 18:07:52

You might wonder, "json.load, json.loads, json.dump, json.dumps oh my!"  Which do I use for which situation?  

**json.load**
<- you want to read a json file and access its contents as a python object.  Example:

You have a file named 'some-json.json' which is a dict with properties "A" and "B".  In python you could access it this way:
```
import json
some_dict = json.load(open("some-json.json", "r"))

print(f"Property 'A' is {some_dict['A']}")
print(f"Property 'B' is {some_dict['B']}")
```

**json.loads**
<- you want to convert a json string into a python object.  Example:

You have a string like:
```
some-json-string = ‘{“A”: “BOB”, ”B”: “JOHN”, “C”: “SAM”}’
```

And you wish to access its properties.  You could do it with json.loads (where the 's' stands for string):

```
import json
some-json-string = ‘{“A”: “BOB”, ”B”: “JOHN”, “C”: “SAM”}’
some_dict = json.loads(some-json-string)
print(f"Property 'A' is {some_dict['A']}")
print(f"Property 'B' is {some_dict['B']}")
```

**json.dumps**
Next we have json.dumps, which allows us to make a json string (hence the 's' in 'dumps') out of a python object.  An example:

```
import json
some_dict = {
    'A': 1,
    'B': 2,
}

serialized-json-ready-to-send = json.dumps(some_dict)
```

**json.dump**
Last we have json.dump, which is used to write python to a json file.  Example:

```
import json

# content to write to json file:
some_dict = {
    'A': 1,
    'B': 2,
}

with open("output.json", "w") as outfile:
    json.dump(some_dict, outfile)

```
Automatic authorization in Postman 🔒
Tags: postman, javascript, jwt, api
Published: 2021-11-04 18:04:47

---
title: Automatic authorization in Postman 🔒
published: true
description: Automatically authorize API requests in Postman  
tags: #postman #javascript #jwt #api
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5f6afn9v824oev9pf0sw.jpg
canonical_url: https://softius.net/automatic-authorization-in-postman-%f0%9f%94%92/
---

Working with short lived JWTs can be painful when you don't have an automated mechanism in place to refresh the token. This is quite common when setting up a new collection in Postman. 

In this post we will be looking on how we can automate this, so that we retrieve, refresh and use the token right before each API call.

## Environment configuration

Before we get started, we need to define a few environment variables in Postman. These are:

* `baseUrl` API URL
* `username` The username to connect with
* `password` The password for the above username

Unfortunately, there's no way to display the password as a ... password field. Postman will store and display everything in clear text, so have that in mind.

## Pre-request script

Then, we need to edit the collection and configure the Pre-request script code. To do that, right click on the collection, select edit and then "Pre-request scripts"

Here is an example. As you can see the implementation is quite generic so most likely you will need to adjust a few things to make that work for you.

{% gist https://gist.github.com/softius/9b5ad9763c26e5a0d02924d5b5450438 %}

## How it works

Initially we check whether we have a token stored. If not we go ahead and retrieve a new one along with expiration time.

We store both in environment variables. You don't need to create these variables, the script will create them whenever necessary.

If the token exists, we check also whether it has expired.  In that case, we refresh the token and similarly to above we store the new token and its expiry date.

In either case, the token will be stored in a new environment variable called `accessToken`. This can be used to define the default authorization method. To do this right click on the collection, select edit, then Authorisation and use the variable `{{accessToken}}`.

## Conclusion

I hope you find this approach useful and hopefully it will save you from some time from manual actions.

Make sure to follow me on [dev.to](https://dev.to/iacons), [Medium](https://medium.com/@softius) or [Twitter](https://twitter.com/iacons) to read more about PHP, Docker and other dev topics.
How to stop infinite loop without breaking React's rule of hooks (useEffect)
Tags: react, typescript
Published: 2021-11-04 18:04:34

I have many different places where I have to use the same logic, so I have generalized my logic system into a class...

```tsx
...
const contextLayer = new contextLayerCore(...useState([]));
...
```

This class provides me with a bunch of functions like `addContext`, `removeAll`, etc. However, the `addContext` function is a bit problematic...

```tsx
...
addContext(context: listing) {
  this.setState([...this.state, context]);
}
...
```

Simple enough; all it does is append an object using the `setState` function which should re-render any components using the `state`. Here's the problem, this causes an infinite loop...

```tsx
...
this.setState([...this.state, context]);
//                     ^
// also updates when state updates, hence re-runs the setState function
...
```

This causes and infinite loop. I could using `useEffect(..., [])` to make it not be dependant, however, this is a function inside a class, thus it breaks React's rules of hooks.

I have to retain the functionality of this class, so I cannot move the function up into the component(s) as a lot of components use this class and would simply create duplicate code.

And example of where it is used...
```tsx
...
<ContextSuperContainer render={contextLayer.state} />
...
```

What should I do? Is there an alternative of `useEffect`? Should I be using a different system for this purpose?

# Edit: Solution
Convert it to a custom hook!
```tsx
export default function useContextLayer (initialState: Array<listing>) {
  const [state, setState] = useState(initialState);

  return {
    removeAll: () => {...},
    addContext: () => {...},
    // doesn't even need an useEffect anymore
  }
}
```
Inviting you guys to take part in OctaHacks4.0
Tags: beginners, webdev, programming, computerscience
Published: 2021-11-04 17:39:29

**GDSC CIET** is organizing their annual flagship hackathon - **OctaHacks4.0** 🚀🚀. The event is **free** of cost and is sponsored by **Devfolio**.
It's going to be **bigger**😎 and **better**😎 this year and most important of all there are prizes for **non-coding** 🔥 tracks too... per personal experience, I'd recommend you guys to have a look at our website [OctaHacks4](https://octahacks4.tech/). Let me know in the comments or DM's if anyone's interested.
1 line of code: How to the get length of the shortest string of an Array
Tags: javascript, webdev, performance, codequality
Published: 2021-11-04 17:38:37


```javascript
    const shortestStringLength = (arr, curr = Infinity) => (arr.forEach(el => { if (el.length < curr) curr = el.length }), curr);
```
Returns the length of the shortest string entry of an Array of strings.

---

## The repository & npm package

You can find the all the utility functions from this series at [github.com/martinkr/onelinecode](https://github.com/martinkr/onelinecode)
The library is also published to [npm as @onelinecode](https://www.npmjs.com/package/@onelinecode/onelinecode) for your convenience.

The code and the npm package will be updated every time I publish a new article.

---
Follow me on [Twitter: @martinkr](http://twitter.com/_martinkr) and consider to [buy me a coffee](https://www.buymeacoffee.com/martinkr)
Photo by [zoo_monkey](https://unsplash.com/@zoo_monkey) on [Unsplash](https://unsplash.com/s/photos/fuji)

---
Created my own React Boilerplate
Tags: react, webdev, beginners, tutorial
Published: 2021-11-04 17:27:06

A good way to learn how some tech works is drilling it until you get inside. So I've decided to build my own react boilerplate.

Actually I'm using it only for personal projects, but I'm keen to share it and get some feedbacks from other devs.

[App](https://cl4pper-react-boilerplate.herokuapp.com/), [GitHub](https://github.com/cl4pper/react-boilerplate)

Feel yourself free to use it.
Help us understand how you use Open Source Puppet
Tags: puppet, opensource, roadmap
Published: 2021-11-04 17:13:52

---
title: Help us understand how you use Open Source Puppet
published: true
description: Take the 2021 Open Source Puppet user survey to help direct our roadmap.
tags: puppet, opensource, roadmap
cover_image: https://media.webteam.puppet.com/uploads/2021/11/OSP-user-survey-2021-blog.jpg
---

The core of Puppet is an open source story. In the years that Puppet has existed — first as a project that Luke built a consultancy around, and then later as the core of our product as Reductive Labs evolved into Puppet Labs and then Puppet, Inc. — we have relied on the vision and expertise of our open source community. It’s a symbiotic relationship and the very definition of an ecosystem.

After all, Puppet was built by practitioners for practitioners. Our pain points were your pain points because you were right there in the trenches with us. Many core features, like [PUP-1072](https://tickets.puppetlabs.com/browse/PUP-1072), were originally contributed by community members solving their own problems. And as we grew, your bug reports and feature requests guided our development trajectory.

Today, we'd like to ask for some product roadmap feedback. If you’re using Open Source Puppet (OSP), please take a few minutes to respond to our brief survey and make your voice heard. We want to hear from you about how you’re using it, which features you focus on, the breadth and depth of your usage, and much more. Understanding your needs and implementation enables us to build the best possible roadmap for the future of Puppet.

For each survey response, Puppet will donate $1 to [Vox Pupuli](https://voxpupuli.org/) via [Software in the Public Interest (SPI)](https://www.spi-inc.org). Plus you can opt in to a raffle to win a new Apple Watch Series 7.

This survey takes less than 15 minutes to complete. This research is being conducted by an independent research firm for internal use only. All responses will remain anonymous, of course.

Take the [Open Source Puppet user survey](https://clearpathstrategies.sjc1.qualtrics.com/jfe/form/SV_71WebwzdacZtYjA) by Friday, 19 November, 2021, at midnight PT.
Software Complexity, Facebook’s Facial Recognition System, & more on DevNews!
Tags: news, podcast
Published: 2021-11-04 17:12:38

---
title: Software Complexity, Facebook’s Facial Recognition System, & more on DevNews!
published: true
description: Listen to S6E2 of the DevNews pod wherever you get your podcasts.
tags: news, podcast
series: DevNews Season 6
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/zoxvbu0494gq3sxtjp4v.png
---

Don't miss this week's episode of DevNews — the podcast where we read between the lines of today's most pressing software development-related stories

{% podcast https://dev.to/devnews/s6-e2-software-complexity-facebook-s-facial-recognition-system-and-the-use-of-ai-in-a-mass-layoff %}

**Hosts:** @saronyitbarek & @joshpuetz 

**Guest:** 
- [Scott Carey](https://twitter.com/scarey102), enterprise technology journalists at InfoWorld,

In this episode, we talk about Facebook’s plan to shut down its Facial Recognition System, and a mass firing at a Russian payment services company fueled by AI productivity measurement tools. Then we speak with Scott Carey, enterprise technology journalists at InfoWorld, about how the growing complexity of modern software systems might be “killing” software developers.

---

_You can [follow DevNews](dev.to/devnews) to get episode notifications and listen right in your feed_ _— or subscribe on your platform of choice! Plus, if you leave us a review, we'll send you a free pack of thank-you stickers. Details [here](https://airtable.com/shr8oKAIMZgdYnBxx)._ 

## **Quick Listening Links**
- [Apple Podcasts](https://podcasts.apple.com/us/podcast/s6-e2-software-complexity-facebooks-facial-recognition/id1525581923?i=1000540728305)
- [Spotify](https://open.spotify.com/episode/3DxXvByISHHZLtbachDJ00)
- [Google](https://podcasts.google.com/feed/aHR0cDovL2ZlZWRzLmNvZGVuZXdiaWUub3JnL2Rldm5ld3NfcG9kY2FzdC54bWw/episode/aHR0cHM6Ly9kZXZwb2RzLmRldi9wb2RjYXN0cy9kZXZuZXdzLzQy?sa=X&ved=0CAQQkfYCahcKEwiA0ee3mf_zAhUAAAAAHQAAAAAQCg)
- [Stitcher](https://www.stitcher.com/show/devnews/episode/s6-e2-software-complexity-facebooks-facial-recognition-system-and-the-use-of-ai-in-a-mass-layoff-88043659)
- [Listen Notes](https://www.listennotes.com/podcasts/devnews/s6e2-software-complexity--hU63i8N4Xe/)
- [TuneIn](https://tunein.com/podcasts/Technology-Podcasts/DevNews-p1352512/?topicId=167486558)
- [RSS Feed](http://feeds.codenewbie.org/devnews_podcast.xml)
- [DEV Pods website](https://devpods.herokuapp.com/podcasts/devnews/episodes/227)

#### _Acknowledgements_ 
- _@levisharpe for producing & mixing the show_ 
- Our Season 6 sponsor: [Cosmos HackAtom](https://www.hackatom.org/)


We hope you enjoy the show this week! 📰
How to configure import aliases in Vite, TypeScript and Jest
Tags: vite, typescript, jest, javascript
Published: 2021-11-04 17:06:04

Most people have seen them, those immensely long import paths like the example below:

```typescript
import module from "../../../../../modules/module.ts";
```

To improve this, you can use import aliases and make it look like the example
below:

```typescript
import module from "@/modules/module.ts";
```

The benefit of this is readability and that you can move files and folders to sub or parent directories without changing the import paths.

Tools like Vue CLI are supporting this out-of-the-box, but if you want to use the new blazing-fast build tool Vite, you'll need to _(at the time of writing)_
configure it manually. I've included TypeScript and Jest because they are often used in combination.

For this to work, all tools need to know that import aliases are used by modifying each tool's configuration file.

Vite has a configuration file called `vite.config.ts` and by adding the `resolve` object Vite will know that import aliases are being used:

```typescript
// vite.config.ts
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src"),
    },
  },
});
```

By adding a `paths` object to the `compilerOptions` inside the `tsconfig.json` like the example below TypeScript will also know that import aliases are being used:

```json
// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src"]
    }
  }
}
```

At last Jest knows that aliasses are being used by adding the `moduleNameMapper` to the `jest.config.ts` configuration file like the code below:

```typescript
// jest.config.ts
module.exports = {
  moduleNameMapper: {
    "^@/(.*)$": "<rootDir>/src/$1",
  },
};
```
P-PL.com Seeking JS and Python Experts
Tags: javascript, python, react, nextjs
Published: 2021-11-04 17:04:44

**Calling All Developers!**

So very recently, a small crew of some very talented Devs and I put together a little project called P-PL.com

This platform is designed for code experts and experienced/seasoned programmers to be able to sell their expertise and time to others that are seeking knowledge within that code base. Currently, at launch we are focusing heavily on two languages:
-JavaScript
-Python

If you're great at slinging code and would like to freelance some of your time, at your own convenience, P-PL.com is the site for you! Help others solve their code issues, or tutor someone looking to learn. We are looking to onboard as many seasoned coders as possible, so please feel free to share our content within your circles!

Check out our socials: @p_pl_talk on Instagram and Twitter. Search 'P-PL' on Youtube for a 5 minute rundown tutorial of our super easy-to-use webapp.  

Sign up, give yourself a title, a brief description about yourself, and choose the code/tech categories you're interested in. Give yourself an avatar, and you're rockin' 'n rollin'!

For the best experience, we ask that you access the platform from a Desktop Machine or Laptop, and utilize a browser like Chrome.

Happy Coding!
JavaScript vs React Fundamentals
Tags: beginners, javascript, react, webdev
Published: 2021-11-04 16:46:56

I recently completed a React Portfolio project and thought it would be fantastic to share my journey with the rest of the world.

##**Basic JavaScript Concepts**

My initial project was JavaScript(JS)-based, and it should be considered garbage in the world of web developers. At the time, I thought I had mastered the frontend web development by creating a simple [JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript) app. Friends, that's an example of "a little knowledge is dangerous" and please do not be this guy :).

Anyway, what are some of the fundamental JavaScript concepts that every programmer should understand? The next stage of web development would be incredibly difficult without a thorough knowledge of these [fundeamentals](https://www.geeksforgeeks.org/7-javascript-concepts-that-every-developer-must-know/). So, the followings are the basics of JS:

  - Variables
  - Comparisons
  - Logical Operators 
  - Functions(callback function)
  - Data Structures & Types

**Note 1:** I cannot emphasize enough the importance of networking and participating in various web development communities in order to enhance one's coding skills - a lesson I learnt the hard way.
**Note 2:** Understanding [GIT](http://git-scm.com/book/en/v2/Getting-Started-A-Short-History-of-Git) and [GITHUB](https://docs.github.com/en/get-started/using-git/about-git#how-github-works) as well as learning programming languages, go hand in hand.

##**Basic React Concepts**

I didn't appreciate the significance of JS core concepts until I began working with [React](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/React_getting_started), the next stage of frontend web development. At a high level, I picture JS being the backbone of React just as HTML is for JS. 

Similarly, in order to have a solid understanding of React's essential notions, one must be familiar with the following [core concepts](https://reactjs.org/docs/introducing-jsx.html):

  - JSX(JavaScript XML)
  - React Elements
  - Components & Props
  - State & Lifecycle
  - Handling Events
  - Conditional endering
  - Lists & Keys
  - Forms
  - React-router

Finally, if you feel you have completed React, you should be able to explain:

  - The difference between React and plain JS 
  - Types of React hooks
  - How to modify React State hooks
  - The three ways to use React useEffects
  - The difference between Props and States
  - The difference between HTML DOM(Document Object Model) & 
     Virtual DOM
  
##**Conclusion**

If I could start over my programming journey, I'd start with HTML(HyperText Markup Language) and CSS(Cascading Style Sheets), then go on to JavaScript. Before diving into React, I'd make sure I understand the connection and interdependencies between HTML, CSS, and JavaScript. More importantly, I won't start React if I'm not comfortable with JavaScript.
How to add LottieFiles Animation in HTML
Tags: css, webdev, beginners, html
Published: 2021-11-04 16:37:01

In this video we will show you how to add animated icons or illustrations to HTML . We will use #lottie file Animation its very easy to use .which is free to use! It allows you to create animation. You can export them as high framerate MP4's, as well as export the CSS animation code (and JSON)!

How to use Lottie files animation.
how to add lottie animation in website.
lottie aniamtion in html

Links:
LottieFile : 
https://lottiefiles.com/

Watch More Animation web Tutorials :
Glitch Text Animation Using Baffle.js | HTML & CSS 
https://youtu.be/YTXxbusCCr0

Infinite Marquee Animation Using jQuery.Marquee | HTML & CSS
https://youtu.be/33qPfl16tZw

I'm on some other places on the internet too!

Follow on Instagram
https://www.instagram.com/uigeeks

DEV Community
https://dev.to/uigeeks
Have your say on my Github profile 
Tags: webdev, github, productivity, développement
Published: 2021-11-04 16:16:48

---
title: Have your say on my Github profile 
published: true
description: Get feedback on my github profile
tags: #webdev #Github #productivity #développement
---

Hello everyone, I have a lot of questions about my Github profile. I would like to have some feedback on my projects like for example, if the documentation is clean, if I have to remove some things for the recruitment. Or issues not detailed enough...

If there are projects that interest you, please contribute. 

I'd really like your opinion, don't hesitate. In return, I will answer your questions or remarks you wrote to me. 

My github : https://github.com/Grezor

Thank you !
How to handle hypergrowth like Grammarly
Tags: podcast, writing, hiring, techtalks
Published: 2021-11-04 15:54:54

{% spotify spotify:episode:06eskakYqow16OTDXWPvx7 %}

Grammarly has a simple but ambitious goal: turn all of its users into great writers. 

Their product has become synonymous with quality and working professionals the world over depend on the digital writing assistant to improve their grammar, catch spelling mistakes and write engaging content. 

Until recently, Grammarly was focused solely on consumers and individuals, but that all changed when they brought Heidi Williams on board. Hired as the new Head of Engineering for B2B and Platform, Heidi knew that in order to keep up with demand her engineering teams would have to enter a hypergrowth phase.

Then the pandemic changed everything. Suddenly, in the midst of gearing up for an explosion of hiring and onboarding, Grammarly found themselves gearing up for the transition to a remote organization instead. 

Listen to Heidi as she details Grammarly's sprint to become a remote organization, what it's like to build a product for the world's one billion English speakers and why it's so important to search for engineering talent outside of Silicon Valley.

## Episode Highlights Include:
* Why diverse teams make the best teams
* Hypergrowth best practices in a remote world
* How to preserve team culture when you're not in the office
* Looking for talent outside of Silicon Valley zip codes
* Building an AI and ML powered writing assistant

## Check out a clip from our YouTube channel:
{% youtube cIkd2Gk84t4 %}

## Join the Dev Interrupted Community
With over 2000 members, the Dev Interrupted Discord Community is the best place for Engineering Leaders to engage in daily conversation. No sales people allowed. [Join the community >>](https://discord.com/invite/devinterrupted)

![https://discord.com/invite/devinterrupted](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/re07tyc958rf8gkfhs2b.png)