teleren/devto huggingface dataset:
A tip on using peer dependencies with TypeScript
Tags: npm, typescript
Published: 2022-08-30 04:00:05

---
title: A tip on using peer dependencies with TypeScript
published: true
description: I encountered this issue recently and felt pretty silly when I realized the simple mistake I was making, so allow me to share how you can make sure your peer dependencies don't cause TypeScript issues in development.
tags: npm, typescript
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
---

I encountered this issue recently and felt pretty silly when I realized the simple mistake I was making, so allow me to share, in hopes that it saves someone else time...

When you're developing an NPM package that makes use of a dependency also used by the main application, you might consider listing it as a peer dependency.

Take this example, where we move React from "dependencies" to "peerDependencies":

```diff
-  "dependencies": {
-    "react": "^16.8.4 || ^17.0.0"
-  },
   "devDependencies": {
     "@docusaurus/theme-classic": "^2.0.1",
     "@types/react": "^18.0.17"
+  },
+  "peerDependencies": {
+    "react": "^16.8.4 || ^17.0.0"
   }
```

React is now a peer dependency, which means the main application needs to list it in its own dependencies. Additionally, we're able to keep developing this package with no issues from TypeScript (can you see why?).

Now notice that other package, `@docusaurus/theme-classic`. I wanted to make this one a peer dependency as well, so I did just that:

```diff
   "devDependencies": {
-    "@docusaurus/theme-classic": "^2.0.1",
     "@types/react": "^18.0.17"
   },
   "peerDependencies": {
+    "@docusaurus/theme-classic": "^2.0.1",
     "react": "^16.8.4 || ^17.0.0"
   }
 }
```

But after I made this change, TypeScript wasn't happy. 😔 When I tried importing from that module I got the typical "Cannot find module or its corresponding type declarations" error. I spent quite a while scratching my head, trying to understand peer dependencies. I knew package manager CLIs don't automatically install peer dependencies, but I couldn't figure out why other packages, such as React, were working while this one wasn't.

And this is where I felt silly after figuring it out: the `@docusaurus/theme-classic` package was supplying its own type declarations, so moving it over to peer dependencies was eliminating its types altogether.

To address this, the simplest solution I've found is to duplicate that dependency over to "devDependencies". Doing this makes sure that it is installed locally while you develop the package, while also maintaining its status as a peer dependency when the main application consumes it.

```diff
   "devDependencies": {
+    "@docusaurus/theme-classic": "^2.0.1",
     "@types/react": "^18.0.17"
   },
   "peerDependencies": {
```

I've also tried playing with the [install-peers](https://www.npmjs.com/package/install-peers) package, that claims to install all your peer dependencies as dev dependencies, but wasn't having much success with it.

If you have your own solution for this problem, I'd love to hear it!
How To Have Django Packages in Flask
Tags: flask, django, shopyo
Published: 2022-08-30 03:50:48

---
title: How To Have Django Packages in Flask
published: true
description: In this post we explore how we can integrate Django packages in Flask using the newest release of shopyo.
tags: flask, django, shopyo
cover_image: https://images.unsplash.com/photo-1587654780291-39c9404d746b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8bGVnb3xlbnwwfDB8MHx8&auto=format&fit=crop&w=500&q=60
canonical_link: https://www.pythonkitchen.com/how-to-have-django-packages-in-flask/
---

Django packages in Flask seems like a far-away dream, but [shopyo](https://pypi.org/project/shopyo/) 4.6.0 allows you to install Shopyo apps from pypi.

## What is Shopyo?

Shopyo implements Django functionalities such as the admin panel etc by using existing Flask packages. But, it also implements Django-specifics like the `collectstatic` command, migrations, apps, even new concepts like boxes etc.

## What the fuss about django packages?

Shopyo allows you to use apps in your project. Shopyo apps are in the format

```
demo/
├── forms.py
├── global.py
├── info.json
├── models.py
├── static
├── templates
│   └── demo
│       ├── blocks
│       │   └── sidebar.html
│       └── dashboard.html
├── tests
│   ├── test_demo_functional.py
│   └── test_demo_models.py
└── view.py
```

Until now, shopyo apps could not be installed but used locally. Now, the project has been updated to allow it! You can examine [shopyo-demo](https://github.com/shopyo/shopyo-demo) the first shopyo app to get a feel of what it's like. Yes, you even have a sandbox to test the app, just like Django apps.

## What to change from older projects?

`init.py` has a new variable called `installed_packages` which should contain the installed app you want to add.

Then, nothing to change really, just imports and in `info.json` make sure to set module name as `shopyo_<your module name>`

## Conclusion

Having such a system for Flask is very convenient instead of having to build components from scratch time and again. Sites like [djangopackages.com](https://djangopackages.org/) are very useful to find what we need real quick.
Recursive Digit Sum - I
Tags: javascript, hackerrank
Published: 2022-08-30 03:37:41

```
const superDigit = (n, k) => {
  n =
    n.split("").reduce((a, b) => {
      return +a + +b;
    }) *
      k +
    "";
  return n.length > 1 ? superDigit(n, 1) : n.charAt(0);
};
console.log(superDigit("148", 3));

```
The Tech behind Disposable Email Addresses
Published: 2022-08-30 03:28:26

The Tech behind[ Disposable Email](https://tenminutesmail.net/) Addresses
Everyone owns an email address each and every hour, for everything from connecting at work, with business prospects, reaching out to friends and colleagues using the email address as an online passport. Nearly 99% of all apps and services we sign-up today required an email address, likewise to most shoppers loyalty cards, contest and offer entries, and more.

We all enjoy having an email address, but getting tons of spam emails each day doesn’t feel comfortable. Furthermore, it’s entirely common for stores to have their databases hacked, leaving your business email address at risk and more likely to end up on spam lists. Still, nothing done online is 100% private. Thus you need to protect your email contact identity and best done using disposable emails address,[Free temp mail](https://email10min.com/).

5 great [temp mail](https://www.mailtemp.net/) websites:

https://email10min.com/
https://www.mailtemp.net/
https://10minmailnet.com/
https://email10min.net/
https://tenminutesmail.net/
What is an Object? - Part I
Tags: javascript, beginners, programming, tutorial
Published: 2022-08-30 02:38:00

![objects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1dhr8bqxi03w0zies4fg.png)

### Objects

An object is a data type that allows you to combine several variables into a single variable with keys and values. This is frequently used to represent or describe an entity.

Example:

```javascript
const user = {
   id: 1,
   firstName: 'Charlie',
   age: 21
};
```
### Read the value of a property

Use the dot notation to read the value of a property in an object.

```javascript
const user = {
   id: 1,
   firstName: 'Charlie',
   age: 21
};

user.id; // 1
user.firstName; // 'Charlie'
user.lastName; // 'undefined'(property does not exists)
```
###Updating Property Value

The same dot notation followed by an equal sign can be used to update a property value as well:

```javascript
const user = {
   id: 1,
   firstName: 'Charlie',
   age: 21
};

user.firstName = 'Brody';
user.age = user.age + 1;
console.log(user); // {id: 1, firstName: 'Brody', age: 22}
```

`const` does not imply that a variable is a constant; it only indicates that you cannot reassign it, therefore you are able to change the property value of an object defined by `const`. As a result, even if the variable's content (properties) can change, it is always an object.
Download Single or Multiple Files from Github
Tags: github, devsuggest
Published: 2022-08-30 02:14:00


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

There are many ways to download files from Github (using command line, browser dev tools, etc).

But these methods are timeconsuming and you need to have some technical knowledge. So, to download single or Multiple files from Github you can use [Git Downloader](https://tools.devsuggest.com/git-downloader/)


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


[Read Original Post](https://devsuggest.com/question/how-to-download-single-or-multiple-files-from-github-repo/)
Articles Discovery Engine
Tags: redishackathon, programming, go, dotnet
Published: 2022-08-30 01:59:19

### Overview of My Submission

Search engine system for articles using the redis technology stack. A tool that extracts articles and streams this information to the redis cluster, where processing is done with Redis Gears to add the data as JSON documents in RedisJson and indexes it to enable search with RediSearch.


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

This Project is using the RedisStack features 
- Storing Data in database with the help of JSONModels ✅
- Ads and Recommendation Engines are using features like Querying and indexing ✅
- Data Processing with Gears function ✅

### Submission Category: 

Wacky Wildcards

### Language Used

**Back-end:** Golang, Dotnet and Python
**Front-end:** Vue.js and Tailwind.js

### Link to Code

{% embed https://github.com/leoguilen/search-engine-microservices-with-redis-stack.git %}

### Additional Resources / Info

Primary functionally demo:

![Primary functionally demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7tilc8nxajxc8korpcfs.gif)

### Collaborators

Solo project by @lguilen 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
I finished a complete course on HTML and CSS and am happy with the results!!!
Tags: html, css
Published: 2022-08-30 01:31:00

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

So a great instructor that I have been learning from for over a year now is Mosh Hamedani.  His courses are easy and fun to follow along with.  A while ago, I decided to go through his HTML and CSS full course, which consisted of 3 parts, all totaling around 14 hours of material.  The skills I have learned in that time have been absolutely critical for me as a developer!

We started with the basics, but quickly moved into great techniques and tips and tricks to make my developer skills shine above the average programmer.  I have since been referencing the guides from his course in all other projects I have been working on, and plan to continue moving forward.

As the final project, we built a static example webpage as if we were a company selling Cloud Hosting for customers.  From navigation bars, to main content, to testimonials, and footers.  I also learned styling skills, such as animations, SVG files, importing new texts from the web, creating components that can be re-used as often as necessary.  

I am discovering a real passion for front-end web development I never really knew about till recently!  


https://jacksondynamics.netlify.app/
First steps into Learning React
Tags: react, html, css, javascript
Published: 2022-08-30 01:03:00


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kx5yqnejv9gau6i3vdag.png)I was first introduced to React during my Thinkful Engineering Immersion program last year.  We built a Digital Flashcards project, which really opened my eyes to the potential React has.  I found it perhaps my most favorite subject in my entire program and always wished I had more time to delve into it. Well... the time has now come where I can do just that!!

I have now completed a very basic static webpage using React. I do love React and look forward to enhancing my skills much further than this, but here is a launching point!

The main principles I worked on was learning how to utilize components, style my page with CSS, add images using the correct relative paths (which by the way was a lot different in React than I had experience before with just basic HTML/CSS files). After my project was complete, I also delved into a new way of deploying my site that I had not utilized before, using Netlify.  

[react-info-sitefacts.netlify.app](https://react-info-sitefacts.netlify.app)

Although this is just a static webpage, the foundations are now set and I plan on building on top of these skills very soon!
Fanboys can't be seniors
Tags: jobs, seniority
Published: 2022-11-08 08:18:35

---
title: Fanboys can't be seniors
published: true
cover_image: https://jhall.io/images/bn-big-bang-theory-tng.jpg
date: 2022-08-30 00:00:00 UTC
tags: jobs,seniority
canonical_url: https://jhall.io/archive/2022/08/30/fanboys-cant-be-seniors/
---

Time for a hot take:

## Fanboys can’t be seniors

What do I mean?

First, what I don’t mean:

I don’t mean you can’t have a favorite tool, language, framework, IDE, tech stack, RDBMS, or whatever. Favorites are fine. In fact, most highly-qualified professionals have favorites, for very legitimate reasons.

What I do mean:

Given that you (probably) have a favorite tool in every one of the above mentioned categories, can you be critical of it? Can you see the merit in using alternatives? Can you respect those who don’t agree with your choice of favorite? [What is your least favorite thing about your favorite thing?](https://jhall.io/archive/2021/09/24/what-are-your-least-favorite-things/)

I really like the Go language. For the last several years it has been my go-to language for most programming tasks. But there are things I dislike about it. I often wish some functional programming paradigms were available to me. I dislike many features of the standard library (the default JSON (de)coder must read the entire stream into memory before parsing… WTF?) I could go on-and-on.

So I like Go, yes. But I’m not a Go fanboy, at least as I understand the term.

I don’t like Go to the point of being blind to flaws, or unable to criticize it. I don’t like Go to the exclusion of other languages. I certainly don’t try to belittle people who are more comfortable with some other language.

* * *
_If you enjoyed this message, [subscribe](https://jhall.io/daily) to <u>The Daily Commit</u> to get future messages to your inbox._
Top-20 "Sponsored-By" from Git commit logs with Redis
Tags: redishackathon
Published: 2022-08-30 00:00:00

[Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


### Overview of My Submission

https://github.com/cnst/sponsored-by.redishackathon2022

Using RediSearch to find the top `Sponsored by:` mentions in the git logs!


### Submission Category: 

[Note]: # Random

### [Optional: Video Explainer of My Project]

[Note]: # (This is where you can embed the optional bonus video you created to accompany your submission. Ensure your video is published publicly to YouTube and you’ve used the embed tag here to share it with us. By opting to include a video, you will be eligible for BONUS prizes. Learn more in the announcement post.)

### Language Used
Golang, Redis, Shell


### Link to Code

https://github.com/cnst/sponsored-by.redishackathon2022
Chrome插件开发 - Hooking into installs
Published: 2023-08-13 02:16:01

---
title: Chrome插件开发 - Hooking into installs
published: true
date: 2022-08-30 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/translate/build-chrome-extensions/hooking-into-installs
---

当你想为用户提供一些额外信息的时候

当你想在用户卸载的时候触发某个操作

当你希望在更新的时候重定向到更改日志

扩展 hooks 将非常有必要

## 在浏览器扩展中捕获`onInstall`操作

打开`public/background.js`

```js
chrome.runtime.onInstall.addListener((details) => {
  // do something
})
```

触发`onInstall`的可能操作

- install
- update
- chrome_update
- shared_module_update

以下代码展示了捕获安装和更新的动作

```js
chrome.runtime.onInstalled.addListener((details) => {
  if (details.reason === 'install') {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon-48.png',
      title: 'Hi there 👋',
      message: 'Welcome to the best extensions you ever installed',
      buttons: [{title: 'Thanks 😅️'}],
      priority: 0
    })
  }

  if (details.reason === 'update') {
    chrome.notifications.create({
      type: 'basic',
      iconUrl: 'icons/icon-48.png',
      title: 'Thank you',
      message: 'For updating this extensions',
      buttons: [{title: 'Cool'}],
      priority: 0
    })
  }
})
```

当你想在用户卸载的时候，可以重定向到某个 url

```js
chrome.runtime.onInstalled.addListener(details => {
    chrome.runtime.setUninstallURL('https://manon.icu/');
}
```

## Source Code

[【Source Code】](https://github.com/rebelchris/popup-extension/tree/installs)
#RedisHackathon - Comics Auctioning System
Tags: redishackathon
Published: 2022-08-29 23:59:39

### Overview of My Submission

https://redis-auctioning.alxgrk.de/


### Submission Category: 

Microservice Mavens


### Language Used
* Kotlin/Ktor
* React/TS

### Link to Code

{% embed https://github.com/alxgrk/redis-dev-to-hackathon-auction-system %}`

BTW, your Github code’s README file should contain the details as [per this template](https://github.com/redis-developer/hackathon-docs/blob/main/README.md).

### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note:] # Screenshots/demo videos are encouraged!

- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
Redis x Dev Hackathon 2022 - The Submission ✅
Tags: redishackathon, beginners, webdev
Published: 2022-08-29 23:58:00

[Instructions]: # (To submit to the Redis Hackathon on DEV, please fill out all sections. DELETE ALL NOTES, reminders, and guidelines before publishing.)


### Overview of My Submission -
I built a "To Do" App using the **Django-Python** framework with **Redis** as primary database using **Redis OM**. The user models are implemented using the _default_ **SQLite3** database on Django to utilize the advantages of its built-in User Creation & Authentication modules.

Also, implemented elements of **Bootstrap5** and **Crispy Forms** for basic beautification of the app.

### Features -
• A “To Do” webapp which lets you create lists and tasks associated with the lists.
• Every list and task created is tied to a user account.

### Architecture -

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ornorwyzs7ai9lzyxjw.jpg)

### Data Models -
#### List Data Model

username: string type -> indexed
list_name: string type

#### Task Data Model

list_pk: string type -> indexed
task_name: string type
task_complete: Optional boolean type

My first hackathon ended up being a great learning experience. I look forward to more such events on Dev. Cheers :)


### Submission Category: 

_Wacky Wildcards_


### Language(s) Used:

_Python_, _HTML5_,

### Framework(s) Used:

_Django_

### Database(s) Used:

_SQLite3_, _Redis_


### Link to Code:

{% embed https://github.com/Asif-GD/a-django-to-do-list %}

### Additional Resources / Info:

_Bootstrap5_ - {% embed https://getbootstrap.com/docs/4.3/getting-started/introduction/ %}

_Django Crispy Forms_ - {% embed https://django-crispy-forms.readthedocs.io/en/latest/ %}

- - - 


* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._
HuMaps, Discover people through maps
Tags: redishackathon, nextjs, tailwindcss, maps
Published: 2022-08-29 23:56:59

### Overview of My Submission
HuMaps tries to give you a nice experience when looking for people who have common interests as yours.
You can use the search bar to type things like Doctor, Software engineers, Optometrist, etc. You can type specific names as well. Then you get, on the sidebar a list of people who match what you typed. And the same list gets visualized on the maps using exact coordinates.


### Submission Category: 
Wacky Wildcards

[Note]: # (This is where you can embed the optional bonus video you created to accompany your submission. Ensure your video is published publicly to YouTube and you’ve used the embed tag here to share it with us. By opting to include a video, you will be eligible for BONUS prizes. Learn more in the announcement post.)

### Language Used
Typescript

### Link to Code
{% embed https://github.com/f0lio/humaps %}


### Additional Resources / Info
open source projects used to build this
Redis
Redis Cloud
Redis OM for Node
NextJS
Tailwind
Vercel


![search for user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qhgfnb2eqxokfv0y192y.png)


![select a user](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpuivuleidixodf6guhl.png)

### Collaborators
[F0lio](https://github.com/f0lio)

- - - 

* _Check out [Redis OM](https://redis.io/docs/stack/get-started/clients/#high-level-client-libraries), client libraries for working with Redis as a multi-model database._
* _Use [RedisInsight](https://redis.info/redisinsight) to visualize your data in Redis._
* _Sign up for a [free Redis database](https://redis.info/try-free-dev-to)._