teleren/devto huggingface dataset:
How to use @next/font, from Next.js 13, with TailwindCSS
Published: 2022-11-08 12:13:55

Recently, [Next.js released their latest version, Next.js 13](https://nextjs.org/blog/next-13). One of the new features is the [Fonts Optimization](https://beta.nextjs.org/docs/optimizing/fonts). It removes the external requests for custom fonts, improving performance and privacy. According to the docs:

> @next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS size-adjust property used.

> This new font system also allows you to conveniently use all Google Fonts with performance and privacy in mind. CSS and font files are downloaded at build time and self-hosted with the rest of your static assets. No requests are sent to Google by the browser.

The usage is very simple: 

1. Install the package:
`pnpm add @next/font`

2. Then import it and apply to your root node:
```tsx
import { Inter } from '@next/font/google';
import { PropsWithChildren } from "react";

const inter = Inter();

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html lang="en" className={inter.className}>
      <body>{children}</body>
    </html>
  );
}
```

But if you are using TailwindCSS in your project, things can be a bit different. You can't import this font directly in your `tailwind.config.js`. So what you need is apply the font-family to a CSS variable, and use this variable in your config.

Your layout:
```tsx
import './globals.css';
import { PropsWithChildren } from "react";
import { Inter } from "@next/font/google";

const inter = Inter({ variable: "--inter-font" });

export default function RootLayout({ children }: PropsWithChildren) {
  return (
    <html className={inter.variable}>
      <head></head>
      <body>{children}</body>
    </html>
  );
}
```

Your `tailwind.config.js`:
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx}",
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    fontFamily: {
      sans: ["var(--inter-font)", "ui-sans-serif", "system-ui"],
      display: ["var(--inter-font)", "Oswald"],
      body: ["var(--inter-font)", '"Open Sans"'],
    },
    extend: {},
  },
  plugins: [require("daisyui")],
};
```

Hope it could help your setup!
Cyber Security Market is estimated to be US$ 471.49 billion by 2030 with a CAGR of 9.0% during the forecast period.
Tags: trends, forecast, analysis, size
Published: 2022-11-08 12:12:24

The rise in malware and phishing threats among enterprises, as well as the increased adoption of IoT and the BYOD trend, are propelling the cyber security market forward. Furthermore, the increased demand for cloud-based cyber security solutions has a positive impact on market growth. However, organisational budget constraints and the complexities of device security are impeding market growth. On the contrary, the increased adoption of mobile device applications and platforms, the need for strong authentication methods, and the transformation of the traditional antivirus software industry are expected to provide lucrative opportunities for market expansion during the forecast period. Furthermore, market vendors are developing innovative solutions to combat such malware and phishing attacks, driving global market growth. For instance, Tech Mahindra announced the launch of a new cloud security offering called 'CLOUDEFENDER' in March 2021. It is a cloud-based service for attack mitigation. The solution is powered by Radware, a provider of cybersecurity and application delivery solutions, and is an extension of Tech Mahindra's global partnership with the company to provide a full suite of cloud-based cyber security services.
YouTube Shorts Come to YouTube TV
Tags: youtube, shorts
Published: 2022-11-08 12:11:41

YouTube Shorts, meet YouTube TV. YouTube TV, meet YouTube Shorts. The Google-owned video platform brought its short-form video offering to its television application Monday for TV models 2019 and later and newer game consoles. User experience directors Brynn Evans and Melanie Fitzgerald wrote in a blog post Monday, “To make this moment happen, product managers,…[READ MORE](https://blockchainwebbag.com/2022/11/07/youtube-shorts-come-to-youtube-tv/)
Will 3.36 million FTX Tokens be let out in the market in 24-hours?
Tags: ftx, token
Published: 2022-11-08 12:10:17

FTX, its sister company Alameda, and Binance have been the talk of the crypto town over the last couple of days. Well-known decentralized autonomous organization BitDAO stepped into the picture and gained limelight on Tuesday.

In just the past few hours, the DAO’s native token BIT dropped from a $0.41 to a low of $0.307. Despite the slight recovery noted, the token was trading 8.5% down on the daily at at press time.

[Source](https://blockchainwebbag.com/2022/11/08/will-3-36-million-ftx-tokens-be-let-out-in-the-market-in-24-hours/)
legacy-install-failure Encountered error while trying to install package:psycopg2-binary
Tags: ubuntu, errors, django, postgres
Published: 2022-11-08 12:10:10

#Shortnote

Install When you're using Ubuntu 22.04/ubuntu 22.10
```bash
sudo apt-get install libpq5=14.5-0ubuntu0.22.04.1 && sudo apt-get install libpq-dev
```
**Bonus** 
Django old version doesn't work well with psycopg2-binary latest or `version > 8`
You can resolve this issue by installing 
```py
pip install psycopg2-binary==2.8.6
```
Hope it will save you some time
Minimum Addition to Make Integer Beautiful
Tags: javascript, leetcode
Published: 2022-11-08 12:02:43

[Minimum Addition to Make Integer Beautiful](https://leetcode.com/problems/minimum-addition-to-make-integer-beautiful/)
```js
const makeIntegerBeautiful = (n, target) => {
  // calling digit function which will give us all number in array format
  let d = digits(n);
  // checking sum of all current digits
  let s = d.reduce((a, b) => a + b);
  // this is to check what sum we have to add to make it beautiful
  let beautifier = 0;
  // index to keep 0th tenth, hundredth place in number system
  let i = 0;

  // looping till s is greater than target
  while (s > target) {
    // talking the last digit of n i.e.. 0 index from digit array
    // subtracting it from 10 to get number which we can add to make it 10
    const m = (10 - d[0]) % 10;
    // adding it to beautifier to count sum & Math.pow will give us place of number i.e.,0th tenth, hundredth place in number system
    beautifier += m * Math.pow(10, i++);
    n += m;
    // this is to remove the last 0 from number if number is suppose 470  then will make n to 47
    n = n / 10;
    d = digits(n);
    s = d.reduce((a, b) => a + b);
  }

  return beautifier;
};

const digits = (n) => {
  const digist = [];
  while (n !== 0) {
    digist.push(n % 10);
    n = Math.floor(n / 10);
  }
  return digist;
};

console.log(makeIntegerBeautiful(16, 6));

```
5 frontend project ideas
Tags: webdev, web3, javascript, programming
Published: 2022-11-08 11:48:00

One of the best ways for you to acquire skills is to put the acquired knowledge into practice. If you're new to technology, it can be hard to come up with any ideas on how to apply what you've learned. One of the ways to put it into practice is by working on simple projects that you can do yourself.

This will not only boost your confidence, but it will also make your portfolio more eye-catching for the job market.

Landing page.
A very common project that you can use to practice is creating a landing page. It is a static page used for lead capture. The cool thing about this project is that it is very complete and helps you learn the concept of grids. A tip is to make it responsive, so that it adapts to different devices.

Registration Form.
Every system has a registration, it is very important that you know how to create a form for registration. You can create a registration system that is done in stages, so you will need to take data from one screen to another. You can still do validations on that form, where the screen will display an error message for any incorrect input or output.

Interface clone.
Building a clone of a website is an excellent way for you to practice. You'll learn more about page structure fundamentals, colors, fonts, media, tables, and other design elements.

Building your own portfolio website.
Building a portfolio website is one of the most common project ideas. You can start by using your website as a resume, where you will add information about yourself, your experiences, skills and specializations.

Consume an API.
Many websites require some form of communication with a backend server, where data obtained from a server is displayed. For this you need to use an API. With the API you have an interface for a system to communicate with another system, sharing its actions.

Through the APIs you will be able to collect, modify and delete data from a database, creating a website that consumes an API to display data is a great project to include in your portfolio.

These are some project ideas that you can practice, which cover fundamental concepts for you to practice and develop, but you can do any other type of project you feel like, the important thing is to practice.
Hey @everyone, can anyone help me to solve the problem in #JavaScript
Tags: javascript, beginners, node, tutorial
Published: 2022-11-08 11:35:51


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0kt5tazj8zi7sm83ssik.jpeg)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o82qaq08f6b7cuf9g40a.jpeg)
How I Used Scrum to Save My Marriage
Tags: scrum, scrummaster, agile
Published: 2022-11-08 11:28:52

My marriage was in trouble. I’ve heard that having your first child can really put stress on the relationship, but I had no idea just how much. 

At one point, after having a really bad fight with my wife, I realized that I couldn’t take it any more. There had to be a better way. 

Then it came to me: what if I used Scrum in our marriage? After all, what is Scrum if not a framework to solve complex problems, in a transparent, inspective, and adaptive way?

## The Family Scrum Master

The first order of the day: big kickoff meeting. We set our intentions to get back to the team mindset, or “the fun & love path” as we like to call it. 

We then took turns speaking and listening to surface major pain points. We discussed it together, keeping a constructive mindset to focus on the issue rather than blaming the other person, and came up with effective solutions.

This was an excellent start. We were both fighting less, felt like we were being seen, and that the workload was finally fairly distributed. Nonetheless, how would we make sure to stay on the fun & love path instead of regressing to the fighting & bickering path? 

Enter Scrum:

- Since there was so much going on, we initiated one week Sprints
- To get a grip on todos, we created a ticket backlog
- We scheduled regular Retros on Sundays to inspect and adapt
- We set up Sprint Planning following the retros to plan the upcoming week

## Scrum or ScrumBut?

What about Dailies and Sprint Reviews? Wasn’t this yet another good old case of the [ScrumButs](https://www.wunderdog.fi/blog/scrum-or-scrumbut)? 

From a dry perspective, yes, it was. However, while Scrum was very helpful, it didn’t fully translate to my marriage. We were having dailies over breakfast anyway, even talking too much as my wife once humorously said. Sprint reviews were irrelevant since we are both the Scrum Team and stakeholders.

The goal is not to be a stickler to the Scrum Guide, but to use it as a starting point. I made adjustments depending on the situation, and did so consciously while inspecting and iterating over the results. To me, at least, that’s the spirit of Scrum. 

## The Product Goal

Of course, Scrum alone can't save an entire marriage—we also started going to couple’s therapy, improving our communication, and working on our personal issues, amongst many other things. Yet Scrum has really helped us reach closer to our Product Goal: to save our marriage and get back to the fun & love path.

_(Photo by <a href="https://unsplash.com/@alysa?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Alysa Bajenaru</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>)_
Iniz: Makes ReactJS actually reactive
Tags: react, webdev, javascript, typescript
Published: 2022-11-08 11:14:24

[Iniz](https://iniz.netlify.app/) is a state library that brings reactivity to ReactJS.

{% embed https://codesandbox.io/embed/broken-rgb-24ezu5?fontsize=14&module=%2FApp.tsx&hidenavigation=1&theme=dark %}

## Motivation

ReactJS is a view library that uses "Push" strategy to detect changes and apply to actual DOM.

For developers to "push" state through components, different patterns such as HOC, render-props, Context are introduced.
These top-down approaches all have different drawbacks such as extra re-renders and "Provider Hell".

Iniz takes a different approach by treating ReactJS "Component"" as "Effect" and variable update as "Exception" in FP.

When a ReactJS "Component" is first rendered, Iniz collects its dependencies automatically and trigger re-render when the dependencies are updated.

## Primitives

Iniz provides a few primitives to describe state: `atom`/`state`, `effect` and `computed`.

### atom

To create a state, call `atom()` with first argument as initial value.

If you use TypeScript, Iniz already infers the inital value as type. You can optionally pass in a type as generic.

You can then call an "Atom" as function to get it's value. To update it, simply pass the value in the function call.

{% embed https://codesandbox.io/embed/mystifying-mclean-tdiblu?fontsize=14&hidenavigation=1&theme=dark %}

### effect

After an `atom` is declared, it's value can be tracked with an `effect`.

`effect()` accepts function as argument and executes it once immediately.

During execution, it collects all `atom`'s used, and triggers again whenever the `atom`'s are updated.

{% embed https://codesandbox.io/embed/great-elion-e5ffrj?fontsize=14&hidenavigation=1&theme=dark %}

### computed

You can also combine atoms to become a `computed` value.

`computed` accepts a function as well. But unlike `effect`, it returns an `atom` with computed value.

{% embed https://codesandbox.io/embed/naughty-sunset-icuehg?fontsize=14&hidenavigation=1&theme=dark %}

## React

To use Iniz primitives in ReactJS, simply replace `@iniz/core` with `@iniz/react` and replace `effect` with a component.

{% embed https://codesandbox.io/embed/twilight-paper-e1svs0?fontsize=14&hidenavigation=1&module=%2FApp.tsx&theme=dark %}

Souce code is available on [inizio/iniz](https://github.com/IniZio/iniz)
CSS-GRID বাংলায়
Tags: css, cssgrid, grid, cssbangla
Published: 2022-11-08 11:07:04

**Modern Web Design Layout** তৈরী করার জন্য খুব ই কার্যকরী একটি layout system হলো “CSS Grid”.  এই জিনিসটা ভালভাবে জানলে এবং practice করলে, শুধুমাত্র Layout বানানোর জন্য আর কোন CSS Framework ব্যবহার করার প্রয়োজন পড়বেনা! এটা আরেকটি জনপ্রিয় Layout System - “CSS Flexbox” এর থেকে powerful কারণ এটার মাধ্যমে two-dimensional layout তৈরী করা সম্ভব মাত্র ২-১ লাইন CSS লিখে। এটার browser support ও যথেষ্ট ভাল। আমি মনে করি, একজন Front End Developer এবং Full Stack Web Developer এরও এটা ভাল করে জানা উচিৎ। তাহলে যেমন খুশি তেমন complex layout বানানো একেবারেই সহজ হয়ে যাবে।

Grid সিস্টেমে অবশ্যই একটা কন্টেইনার লাগবে প্যারেন্ট DIV হিসাবে ।  তার ভিতর কিছু এলিমেন্ট DIV থাকবে । আমাদেরকে প্রথমেই কন্টেইনার DIV কে স্টাইল করতে হবে । 

কয়টা Column বানাতে হবে  সেটা উল্লেখ করে  দিতে হবে grid-template-columns: 200px 200px 100px; 
এখানে তিনটি মান দেয়া হয়েছে তাই তিনটি Column হবে । 
আমরা ROW বানাতে চাইলে grid-template-rows: 100px 100px ; এখানে দুটি  মান দেয়া হয়েছে তাই দুটি  ROW  হবে ।

Grid এ ROW বা Column মাঝে গ্যাপ দিতে চাইলে grid-row-gap: 5px  ;  grid-column-gap: 3px ; এভাবে উল্লেখ করে দিতে হবে ।  কিন্তু প্রত্যেকের মাঝে যদি সমান গ্যাপ দিতে হয় ,তাহলে grid -gap: 3px উল্লেখ করতে হবে ।
 
আমরা যদি এখন Grid এ  ROW বা Column কে রেস্পন্সিভ করতে চাই । তাহলে আমাদের কে আনুপাতিক হারে বলে দিতে হবে । এখন এখানে যদি বলা হয় প্রথম Column 1fr নিবে দ্বিতীয় Column 2fr নিবে । এখানে পুরো জায়গা কে ৩ ভাগ করে প্রথম Column কে ১ ভাগ এবং দ্বিতীয় Column কে ২ ভাগ দিবে ।

আমরা চাইলে এক লাইনে ROW এবং Column লিখতে পারি grid-template : 1fr 2fr / 1fr 2fr আগে  ROW এর মান লিখতে হবে , পরে Column এর মান লিখতে হবে । 

একই জিনিস বার বার ব্যবহার করতে হলে repeat() দিয়ে করা যায় । grid-template-columns: repeat(3,1fr); এখানে ৩ টি কলাম 1fr করে রিপিট করতে বলা হয়েছে ।
Future Proof is good
Tags: future, modeling, database, architecture
Published: 2022-11-08 11:04:38

Future Proof is to make your data modeling and code good enough to support new use cases in the future.

## Example of non-future-proof design

You are building a general ledger system to work with Pix (Instant Payments) transactions.
You design your ledger to only work with Pix transactions.
Your startup keeps growing, and now you want to use the same ledger to work with other Instant Payments system, like US and Colombia.
As you make the ledger too specific for the Pix transaction type, it is hard to make it work with other Instant Payments system.

## How to make a system future-proof?

To make a system future-proof, you need to make it generic enough to support new use cases in the future.
You need to research all the possible use cases, focus on real use cases not imaginary ones, and design your system to support them.

If you can't predict the data format, you can use a [schemaless](https://dev.to/woovi/schemaless-to-the-rescue-26cd) approach to handle it.

## How to avoid overengineering?

If you plan for a future that won't happen, you end up with a lot of technical debt and overengineering. To avoid this, you  design with future-proof in mind, but when implementing you try to cut it off everything that won't be used right now, but you enabled extensions in the right parts.

---

[Woovi](https://www.woovi.com) is a Startup that enables shoppers to pay as they like. To make this possible, Woovi provides instant payment solutions for merchants to accept orders.

If you want to work with us, we are [hiring](https://woovi.com/jobs/)!

---
Photo by <a href="https://unsplash.com/@dbeamer_jpg?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Drew Beamer</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Chamy css-framework launched at npm
Tags: opensource, css, webdev, productivity
Published: 2022-11-08 11:01:09



## Intro Chamy
chamy is non-responsive css framework. it's really helpful to build a sites without need of separate stylesheets

## Highlights
easy to use
lightweight file size
you can use any colors - hex,rgb,hsl
supports units like px,rem, %
override a css class

## Examples:

![c](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fndq9mmd9xywbv17157r.jpg)


![ex2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vp9p38hoqnuhblonwei3.jpg)


![ex3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/79peyxbjx10dlkpwt3ld.jpg)


![ex4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5etrmmmntn7ihn12v28v.jpg)


for more information visit a **npm site** and search for **package name is chamy**
Ultimate Guide to Shortcodes
Tags: programming, tutorial, wordpress, shortcodes
Published: 2022-11-08 10:56:05

Are you looking to create shortcodes in your WordPress site? If so, you've come to the right place! In this[ documentation](https://user-meta.com/documentation/), we will learn about everything you need to know about user meta shortcodes, including how to create them, how to use them, and how to customize them to Suit Your Needs!

User Meta is a powerful WordPress plugin that allows you to add custom user fields to your WordPress site. It also allows you to add shortcodes to your site so that you can display user information in a variety of ways.

In [video](https://www.youtube.com/watch?v=Dfrz2gWt0Hc), we explain about some of the most useful User Meta shortcodes that you can use on your WordPress site. The most common shortcodes are including login, registration, public profile and so on. So don't miss out and watch this video today!
Django shorts: #5 Useful packages
Tags: webdev, django
Published: 2022-11-08 10:52:32

**Preface**

Django is such a diverse and intricate back-end web framework. One of the best things that we can do with Django is that we can install various packages/apps. These packages and apps help to provide our application with additional out of the box functionality. 

---


.

.

.

---

**Package #1 - Django REST framework (DRF)**

The DRF allows Django developers to build any HTTP-based RestAPI. DRF is applauded for providing developers with potent and flexible tools. It also comes with detailed documentation.

https://pypi.org/project/djangorestframework/ 

---

**Package #2 - Celery**

Celery is a distributed task queue that can be used to assist Django web applications with multi-threading. In the process Celery also helps to offload work from our apps, since we can send tasks that are time intensive to Celery's task queue.

https://pypi.org/project/celery/ 

---

**Package #3 - Django channels**

Django channels provides WebSocket async support in Django. It is also highly customizable so it can be used for a variety of use cases.

https://pypi.org/project/channels/ 

---

**Package #4 - Django-environ**

Although, there are many packages that can be used to help us to configure environment variables within our Django applications. Django-environ is one of the simplest and most effective packages that allows us to do just that.

https://pypi.org/project/django-environ/ 

---

**Package #5 - Django-two-factor-auth**

One of my favourite packages. The best part of this package is in the fact that you can configure two factor authentication in multiple ways, not just via a typical token generator.

https://pypi.org/project/django-two-factor-auth/ 

---

**Package #6 - Django-crispy-forms**

If you want to improve the styling of your user forms, then Django-crispy-forms is an absolute must use. It provides our users with a clean and pleasant form for our users to work with.

https://pypi.org/project/django-crispy-forms/ 

---

**Package #7 - Django-simple-captcha**

User forms can be used by bots, therefore it's important to somehow verify that the user submitting the form is indeed a human. A good way to test this is to make use of a simple captcha. 

https://pypi.org/project/django-simple-captcha/ 

---

**That's that! Happy learning!**

---

**Final note:**
For those that are interested in learning more about Django. Feel free to check out my courses below:

[Python Django courses](https://www.cloudwithdjango.com/courses)
Codevember Day 27
Tags: codepen
Published: 2022-11-08 10:51:07

<p>3D Cube heart</p>

<p>Loosely based on this <a href="http://giphy.com/gifs/daily-tumblr-featured-1FZ9bj1HomzCg">giphy</a></p>

{% codepen https://codepen.io/maicodes/pen/ojrORB %}