teleren/devto huggingface dataset:
npm install 101
Tags: npm
Published: 2022-03-11 00:28:28

## About this article

[How to Install npm Packages | CSS-Tricks - CSS-Tricks](https://css-tricks.com/how-to-install-npm-packages)
👆This article was very clear about what was happening with `npm install`, so I summarized the main points. 📝

## npm intall 101 🧑‍🏫

### Files/Folder 🗂

With `npm install`, following files/folder is created/updated.

- **package.json**
    - High level overview of packages
- **package-lock.json**
    - Technical specifics
    - In-depth, _precise snapshot of the project’s dependency tree_
    - Never supposed to be updated by hand
- **node_modules** folder
    - All the actual package code lives(Including dependencies)
    - The node_modules folder is not meant to be committed to Git or even shared

### What’s happening with `npm install` 🧐

1. Update the package.json file
2. Update the package-lock.json file
3. Installl the actual package files and dependencies in node_modules folder
4. Runs an audit of the installed package

### What is `npm audit`✅

- Packages with known vulnerabilities are called out
- It runs automatically any time you install a package
- `npm audit fix`: Let npm to update packages with vulnerabilities to a new _minor_ version
- `npm audit fix --force`: Let npm to update packages with vulnerabilities to a new _major_ version(※ Risky 💣)

### Tips ☝️

- To fix unexpected issues with npm project by deleting node_modules and re-running `$ npm install`

## Resources

[How to Install npm Packages | CSS-Tricks - CSS-Tricks](https://css-tricks.com/how-to-install-npm-packages/?utm_source=pocket_mylist)
Sanitizing background image url in Angular
Tags: angular, tips
Published: 2022-03-10 18:35:02

According to Angular documentation, you need to sanitize urls before you use them, one way mentioned is `bypassSecurityTrustStyle`, but they don't tell you how to use it. This is how:
```typescript
// inject DomSantisizer
 private sanitizer: DomSanitizer
```
Sanitize the style value, including "url":
```typescript
this.bgstyle = this.sanitizer.bypassSecurityTrustStyle(`url("${imageUrl}")`);
```
And in HTML template:
```html
<div [style.background-image]="bgstyle" ></div>
```

Resource: [Angular Docs](https://angular.io/guide/security)

## Update

Now I would usually by pass security when I know the source (not user generated content from storage), because I tend to be too lazy. Angular docs have since been updated, and it is now looking better. Here is what I tried with different `SecurityContext` to properly sanitize:

```ts
this.bgstyle = this.sanitizer.sanitize(SecurityContext.STYLE, `url("${this.source.url}")`);
```

This one works for background images set by style. For setting an image source, `HTML`, `NONE`, `URL`, and `STYLE` all worked. For `RESOURCE_URL` and `SCRIPT`, it shall fail to sanitize. Normally.

Shout out to @bagratzakaryan for reviving this old article and correcting me.
Day 547 : Back To Work
Tags: hiphop, code, coding, lifelongdev
Published: 2022-03-11 00:05:55

_liner notes_:
- Professional : For a day full of back to back meetings, I got some stuff done. I was able to speak with the SDK team about verifying some stuff I came across in my demo application. I also updated a blog post with some info for a new version. Even saw an old ticket for a typo in the docs that I think I saw before and fixed. haha.

- Personal : Last night, got quite a bit done. I finished the new t-shirt design and ordered a sample. I paid for express shipping so I will have it before I leave for my trip. I also got the admin dashboard to pull the likes and retweets from a tweet and then pick a winner. I got it all to save in the database. I then went to bed and watched an episode of 'Atlanta'.

![A lagoon in Phuket, Thailand with a large rock formation sticking out of the water.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gs190vt8oy4heh5dk835.jpg)

After dinner, it's back to work on pulling the tweet info from the database to show on the overlay page. Shouldn't be too bad since I did something similar with the audio chat and question highlight. I'll probably also do a quick ending screen for now and add to it later. Just want to get something up and the project as complete as possible. I still have some live streaming stuff to test next week to prep for my trip. Also want to watch an episode of Atlanta before going to bed.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube -6-olhfhxuU %}
Web2-vs-Web3
Published: 2022-03-10 23:58:11

## Web2-and-Web3
Web2 refers to the internet of now, the user wide web which contains interactive and social contents by the users. YouTube, Facebook, Twitter, Reddit platforms are great examples of Web2 application services. Web3 can be stated as the emerging internet of future, where decentralized consumer applications are created using blockchain technology. Web3 is a decentralized web such as the Ethereum network, Tron Network etc. 

## Web3 and Basic Principles
Web3 as a growing technology highlights some basic principles 
•	The technology is free and open source.
•	Permissionless: No restrictions and access control, the service is available and open to all.
•	Transparency: There is transparency of every transaction that occur on the network.
•	Native built in payment network.

## Web2-vs-Web3
•	The core difference between web2 and Web3 is the centralization of the former and Decentralization of the latter. No entity controls the network or have the servers and hardware centralized.
•	Web3’s evolution is a more intelligent version of the web2 internet, powered by Artificial intelligence systems.
•	 Web2 and its centralization poses a risk to data security and users privacy, Web3 systems leverages on blockchain technology as an open and trustless decentralized internet that ensures data privacy of its users.

In conclusion, Web3 is a change in paradigm of the web and how users interact with it.

This post is powered by the [**BlockGames Program**](https://blockgames.gg/) created by the [**Zuri Team**](https://nestcoin.com/) in conjunction with [**Nestcoin**](https://zuri.team/)
Shopify Hydrogen: Why is useShopQuery server-side only?
Tags: shopify, hydrogen, react, headless
Published: 2022-03-10 23:19:34

---
title: Shopify Hydrogen: Why is useShopQuery server-side only?
published: true
description: If want to understand the reasoning why useShopQuery and other Storefront API requests with Shopify Hydrogen, this post is for you.
tags: shopify, hydrogen, react, headless
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjcflmyh2h83322jb9jf.png
canonical_url: https://rafaelcg.com/blog/developer/shopify-hydrogen-useshopquery/
---

During the Shopify Hydrogen or headless development, you might have many architectural questions, this is this article’s topic. Probably you wondering why we should implement Storefront API requests from the server-side, including in **useShopQuery**. If you’re struggling to understand the reasoning that article is for you.

The quick answer is:

> Storefront API is a rate-limited API associated with the requesting IP.

React Server Components and their unlocking of the ability to make server to server requests provides a performance boost. An API request from the client browser to Shopify would generally be slower than a server-to-server request.

The [remix vs next blog post](https://remix.run/blog/remix-vs-next) (built on top of the Storefront API) did a great job illustrating the benefits of the server-to-server requests.

"The user's connection to the cloud is always going to be slower than your server's, probably best to keep the data fetching there".

It allows you to have requests from the client-side and use it during cart interactions though, just not with useShopQuery.

The data does need to get to the client eventually but with server and client components we can optimize that experience by leveraging a faster internet connection, per request caching. It delivers a smaller bundle size to the client browser. The performance wins in this area become more dramatic the slower the connection of the user interacting with the site is.

Do you want to learn more about this brand-new technology? Check out my [Shopify Hydrogen Course](https://rafaelcg.com/course-shopify-hydrogen-developer-2022/).
English quotes - Loveisaname
Tags: quote
Published: 2022-03-10 23:04:14


![Loveisaname](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7aw2k29hwv8bitgzumei.jpg)
1. [Friendship ](https://loveisaname.com/20-de-statusuri-in-engleza/)is important.
2. Dreams don’t come true. Goals do.

3. Relax and be happy.

4. Don’t look back – you are not going that way!

5. Follow your own footsteps.

6. Be a voice, not an echo.

7. You need to focus.

8. Have fun and stay young.

9. Relax and take time for yourself.

10. It doesn’t matter how slow you go as long as you don’t stop.

11. Gratitude is a powerful catalyst for happiness.

12. Laughter is the best medicine.

13. Let your faith be bigger than your fear.

14. If you’re looking for beauty, you’ll find it in nature.

15. Dance with the waves, move with the sea, let the rhythm of the water set your soul free.

16. Never give up!

17. Dreams don’t have expiration dates, keep going!

18. Strive for progress, not perfection!

19. It’s never too late!

20. Enjoy the taste of life.
[https://loveisaname.com/20-de-statusuri-in-engleza/](https://loveisaname.com/20-de-statusuri-in-engleza/)
movie Tickets Reservation system
Published: 2022-03-10 22:55:25


database diagram:- https://lnkd.in/gM2PiTRt
GitHub repo:- https://lnkd.in/gCZEUg46
Full Video:- https://lnkd.in/gbbB-8pD
in this project, you can buy tickets for any movie 
we use asp.net core MVC , SQL server
and also we used injection patterns ,solid principles
this project has a lot of functionalities For Example:
 user 
1-authentication
2-searching for any (movie, category, actor)
3-showing actors and producers for this movie
4-watch trailer 
5- buy ticket buy using stripe payment method
6-add any movie to your cart
and more...
 admin 
you can (create ,read ,update, delete ,search) for 
1-category
2-movie
3-cinema
4-Actor
and more ...
Top 10 habits of successful developers
Published: 2022-03-10 22:54:54

**Top 10 habits of successful developers**

A habit is something that runs on auto-pilot and brings benefits every day without much effort. They can be programmed, and then these actions will be performed by themselves.

⠀

0️⃣ Set aside time for regular training. At least half an hour or an hour a day, at a comfortable pace. Regularity is more important than quantity.

⠀

1️⃣  Surround yourself with useful information. Follow interesting channels, email newsletters, podcasts, communicate with like-minded people.

⠀

2️⃣ Keep a diary of your achievements. Read it when you feel unconfident and need support.

⠀

3️⃣ Preserve and organize useful materials - keep at hand articles that you can refer to, commands, docks.

⠀

4️⃣ Write down questions and topics that you want to deal with, and regularly return to them and work through them.

⠀

5️⃣ Estimate tasks by time and log the actual time spent on execution in order to learn how to give the most accurate estimate.

⠀

6️⃣ Document your tasks. This is necessary for colleagues and for your own convenience, if you need to return to the task after some time.

⠀

7️⃣ Ask yourself the question:

what problem am I solving now? can it be solved differently? what can be improved? Clarify all requirements before you start doing the task.

⠀

8️⃣ Develop soft skills, learn to convey your point of view.

⠀

9️⃣ Follow your schedule, get enough sleep, give yourself time to rest. The quality of work depends on physical and moral health.

⠀

What habits do you already have and what do you want to add to your life?  👇
AWS Community Builder Olarak İlk Yılım
Tags: aws
Published: 2022-03-10 22:05:18

Merhaba, 04.03.2022 tarihinde AWS üzerinden bir mail aldım, mail içeriği şu şekildeydi;

“Hi there Cengiz, you’ve made it. You’re an AWS Community Builder. Congratulations!“

Evet, Amazon tarafından AWS Community Builder programına dahil oldum, AWS Community olarak ilk yılım olacak 🙂 AWS Community olarak kategorim “Storage” olarak belirlendi.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yyk6ii3wcqy6t4o69geb.png)
AWS Community Builder Programı Nedir?
AWS Community Builders programı, bilgi paylaşma ve teknik toplulukla bağlantı kurma konusunda tutkulu olan AWS teknik meraklılarına ve gelişmekte olan düşünce liderlerine teknik kaynaklar, mentorluk ve ağ oluşturma fırsatları sunar.

AWS Community Builders | Worldwide Cloud Community | AWS Developer Center (amazon.com)

AWS servisleri ile ilgilenen ve bu topluluğu seven herkes bu programa başvurabilir. Program boyunca konu uzmanları, kategori liderleri mentörlük sağlıyor ve en son servisler hakkında güncel bilgiler ve teknik içerikleri elde edebiyorsunuz. AWS Community Builder programına her yıl binlerce kişi başvuruyor ve sadece sınırlı sayıda üye kabul ediliyor, eğer ikinci yıl AWS Community Builder olarak seçilmezseniz bundan sonraki hayatınız da bir daha bu programa başvuramıyorsunuz 🙁

Amazon, AWS Community Builder programına dahil olan herkese, hoşgeldin hediyeleri gönderiyor, çeşitli eğitim ve sınav voucherları veriyor.🤘🏼 Aynı zaman da sizi AWS Community Builder için Slack kanalına davet ediliyorsunuz, burada diğer topluluk üyeleri ile teknik konularda sohbet etme şansı yakalabiliyorsunuz.

AWS Community Builder Programına Kimler Seçiliyor?

AWS’nin tüm şeylerine olan heyecanlarını dünyanın geri kalanıyla paylaşmak isteyen tutkulu insanlar.

Şimdi, sizi AWS Community Builder Seçildikten sonra yapılan işlemleri anlatayım.

Fantastik bir Slack kanalına erişeceksiniz.
AWS hakkındaki bilginizi geliştirmenize yardımcı olabilecek birçok e-canlı etkinlik ve atölye çalışması.
Dünyanın dört bir yanından şampiyon Topluluk Oluşturucular, AWS kahramanları ve AWS uzmanlarıyla e-toplantılara katılın.
Tüm heyecan verici çalışmalarınızı paylaşabilmeniz ve başkalarından da öğrenebilmeniz için topluluk kanalının altındaki dev.to kendi blog hesabınızla sağlayacaksınız.
AWS Community Builders programı bu yıl boyunca sizden ne bekliyor?

Bloglarınız, podcast’iniz, videolarınız aracılığıyla ne kadar bilgi paylaşmak istediğinize dair kişisel hedefler belirlemeniz gerekecek.

Bu yıl için AWS Community Builders programına teşekkür ederim ve bu programa girmeye çalışanlar için iyi şanslar.
Why Team Arora is the best choice for your real estate needs
Published: 2022-03-10 21:42:28

Are you in the market for a new home? If so, you're not alone. According to recent studies, more and more people are choosing to buy homes rather than rent. And that's good news, because when you buy a home, you're investing in your future. 
At our company, we understand the importance of buying a home. That's why we're committed to helping our clients buy the property of their dreams with confidence and success. We'll work with you every step of the way, from finding the right property to securing financing to navigating the closing process. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5mt5vwh4a0w625c50l5.jpg)
We're here to help you achieve your goals and make your dream of homeownership a reality. So if you're ready to buy a home, call us today. We'd be happy to help you get started on the path to homeownership. As a potential homebuyer, you're likely wondering what the process of buying a home entails.

**Below, we've outlined the key steps involved in the homebuying process: **
1.Start by choosing a real estate agent. [Your real estate agent](https://www.teamarora.com/) will be your guide through the homebuying process, so it's important to choose someone you can trust. Your agent should be knowledgeable about the local market and have extensive experience helping people buy homes. 
2.Research neighborhoods and find the right property. Your real estate agent will work with you to identify neighborhoods that fit your needs and budget. Once you've found a neighborhood you like, your agent will help you find the right property. 
3. Secure financing. It's important to secure financing before you start shopping for homes. Your real estate agent can recommend lenders who are familiar with the local market and can help you get the best interest rate possible. 
4. Tour properties. Once you've found a few properties that interest you, it's time to tour them in person. Be sure to ask your real estate agent lots of questions about each property so you can make an informed decision. 
5. Make an offer and negotiate. If you decide to make an offer on a property, your real estate agent will help you negotiate with the seller.
Using Tailwind presets for multiple tenants in Next.js
Tags: nextjs, tailwindcss, webdev, multitenancy
Published: 2022-03-10 21:39:46

When I was tasked to build a multi-tenant SaaS application using Next.js + Tailwind on a monorepo, the internet disappointed me. There was nothing solid out there on how to load a specific Tailwind preset for a specific tenant. This was the solution I came up with, hope this helps ;)

Full repository available [here](https://github.com/itschrislow/multitenant-tailwind-preset-example).

Final result for default, Reddit and Discord themed tenants using the exact same codebase with different environment variables!

![Final result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9807dpyb6dm4vrchlmd.png)

Let's dive into it!

We will be starting with the [official Next.js with Tailwind example repo](https://github.com/vercel/next.js/tree/4d4f3093019179b1928ec07c16f38882241c0375/examples/with-tailwindcss). To clone the example, run the following command:

```bash
yarn create next-app --example with-tailwindcss with-tailwindcss-app`
```

### Setup environment 
Create a `.env` file and define a `NEXT_PUBLIC_TENANT` environment variable.

```bash
NEXT_PUBLIC_TENANT=reddit
```

### Setup Tailwind Presets
Add a `tailwind` folder to the root of your project with the following structure.

```bash
.
└── tailwind
    ├── default
    │   └── preset.js
    ├── reddit
    │   └── preset.js
    └── discord
        └── preset.js
```

Presets take the exact same shape as the configuration in a  `tailwind.config.js` file. Since presets are merged on top of the default, we only need to include the `theme` object.

```javascript
// default preset.js
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: "#2563EB",
      },
    },
  },
};
```

Add a `getPreset()` helper function in the `tailwind.config.js` file

```typescript
// tailwind.config.js
const getPreset = () => {
  if (!process.env.NEXT_PUBLIC_TENANT) 
    return [require(`./tailwind/default/preset.js`)];
  
  try {
    return [
      require(`./tailwind/${process.env.NEXT_PUBLIC_TENANT}/preset.js`),
    ];
  } catch (err) {
    return [require(`./tailwind/default/preset.js`)];
  }
};

module.exports = {
  presets: getPreset(),
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};
```

### You're almost there
Find and replace all `text-blue-600` from `index.tsx` with `text-primary`

### Yay
That's it! Restart the server when you change the value of `NEXT_PUBLIC_TENANT` to see the changes.

Note: The values of `NEXT_PUBLIC_TENANT` correspond to the folder names in `./tailwind`
My first baby project
Tags: javascript, beginners, programming, webdev
Published: 2022-03-10 21:36:56

My first project completed as of today and it was so fun to see my skills come to life on the DOM. What is the project? Well my project was a fortune generator that utilized a local server acting as a mock API. In the app the user could either get a regular fortune which included the proverb and lucky numbers, just the lucky numbers or just the proverb. the user could also add a proverb that would be added to the API and be in the pool of possible outcomes. I added a number generator that adds a set of lucky numbers for the users proverb before posting it to the local server. This project was built upon a code base written by **Jon Kantner** @ **https://codepen.io/jkantner** and the spicifick code base @ **codehttps://codepen.io/jkantner/pen/VJMGLR** highly recommend you check his stuff out. The intention for this project was to create my own local API or db.json file and utilize fetch calls and responses based of user input. I do not intend to utilize this project on my own professional portfolio nor do I intended to host a website that would utilize this project in terms of monetization. I simply was utilizing this project to expand my understanding of DOM manipulation and server calls. And I am grateful and excited that I could contribute, expand, and manipulate code from another creator to better conceptualize my understanding and my project vision. This process was a roller coaster, but I had such a fun learning experience. The biggest challenge I had was creating a process that would grab a random item from my local server but came up with a brute force solution that seemed to do the job. My solution was to make 2 separate calls to the local server. The first call would return the array of objects containing all the proverbs and lucky numbers, then a second request that would utilize the array Length to generate a random id number based of the length of the array and make a request to that end point. 

```
let newId = Math.floor((Math.random() * arry.length) + 1);
			fetch(`http://localhost:3000/fortune/${newId}`)
			.then((resp) => resp.json())
			.then((data) => (data))  

```
Again truly loved this project and looking forward to the next learning experience.
End the email signoff
Published: 2022-03-10 21:10:43

To whomstoever it mayeth concern,

“Thanks, regards, cheers, best wishes, as ever” What do those words mean? Nothing! There is some kind of complex obeisance system between professors and students, managers and employees, firms of different sizes, etc etc etc which is completely inscrutable to the autistic and ESL among us.

Consider this email:

from: employee@widgetco
to: manager@widgetco
subject: widget manufacturing details?
body:
What diameter and thickness should the widget be?
Error tolerance on those?
It is crisp like capn crunch. It says what must be said and nothing more.

Need to remind someone of something they forgot without being rude? Try sending the exact same one again with nothing changed.

Much appreciated,  
https://endthesignoff.com
DID linked NFTs
Tags: nft
Published: 2022-03-10 20:37:22

Hi there,

I have a bit of an odd request.

I am looking at coding an NFT smart contract created that has the mint functionality link to a verifiable credential issued to a decentralized identifier (outside of the smart contract I am assuming) instead of just an IPFS link. 

Therefore, there needs to be a new functionality coded that will be executed when a transfer of an NFT occurs, the verifiable credential is revoked and reissued to the new holder.

Is this possible at all?