teleren/devto huggingface dataset:
4 Strategies for Picking a Conference Talk Topic
Tags: speaking, techtalks
Published: 2022-11-02 13:00:00

As the organizer for [MagnoliaJS](https://magnoliajs.com) and as a conference speaker, the two questions I get asked most often from people wanting to get into conference speaking are "what should I talk about?" and "how do I pick a conference talk topic?" The only I answer I can really give is the typical senior dev answer... it depends. Here are a few things to consider when deciding on a conference talk.

## You could talk about something you're comfortable with.
I'd recommend talking about something you've already been working with and are at least somewhat knowledgable about. Agreeing to give a conference talk is already nerve-wracking without having to learn a new skill or technology to give the talk.

## Or you could talk about something completely new!
On the other hand, agreeing to talk about something you're not very comfortable with *can* push you to learn more about that topic, if that's what motivates you! If you've been excited to try a new JavaScript framework but haven't quite had the time to devote to it, submitting a Call for Papers (CFP, also could stand for Call for Proposals) about it gives you the perfect excuse to build something with it! 

*(Please don't do this if it will cause you too much stress! ❤️)* 

## You could talk about something you're passionate about.
Giving a conference talk on something that gets you excited will make preparing and giving the talk so much easier. The audience will be able to sense your enthusiasm and help energize you throughout the talk.

**Do you love CSS?** Give a talk about animations, grid vs flex, or whatever cool thing you've learned CSS can do! 

**Are you excited about accessibility?** Talk about how to make sites more accessible! 

**Do you enjoy mentoring others?** Talk about how to be a better mentor or mentee!

## Talk about your experiences.
Not every tech conference talk has to be a technical talk. In fact, I believe I learn far more from the ones that *aren't* technical! You could talk about how you got into tech or things you've learned from video games that translate well into development or career skills.


The hardest part about speaking at conferences is picking a topic (and the 20 minutes before you get on stage when you're wondering why you agreed to do this 😅). Hopefully this post has given you some ideas for your first CFP. If you've got one in mind, [MagnoliaJS's CFP](https://sessionize.com/magnoliajs-2023/) is open now! 

Some of the topics covered in this post were given at [MagnoliaJS 2022](https://www.youtube.com/watch?v=CuXySKar5t0&list=PL3AGFUw2kOSOHsZgebsiOcbs8wxcCF1LG). All of the talks are on YouTube so go check them out!

*Cover image from [unDraw](https://undraw.co/illustrations).*
How to Make Calculator in React
Tags: javascript, react, beginners, programming
Published: 2022-11-02 12:44:35

In this article, we are going to make a calculator in react. It will be similar like an android calculator application where you put your values which remains on screen and shows the result straight away as you put values along with some operation. Its logic should be easy, as we do in most of our programming languages. The only difference is that, we will make an UI like any other calculator have.

So basically this is going to be a beginner-friendly project, so let’s make this project step-by-step.

##Pre-requisites to Make Calculator in React

- Basic knowledge of ReactJS.
- Basic knowledge of CSS.
- Basic knowledge of React hooks.
- Good knowledge of React Components.
##Creating Basic Structure For Calculator
Now let’s head to our App.js Component to create the basic structure for our calculator. For that we will go in return statement, here we have added a div for calculator. In this, we have added another div for display to create our display. Here we have added a span for where we will show the result, which will be dynamic, which means it will update as we write something in here. For now, we have added a static value here, nothing else.

Now we have added buttons for operator and some symbols like dot(.) and equal(=) along with delete. After that, we need to put all 9 digits, for that we have added a function named createDigits, in this we have used a loop to add 1-9 digit button and added them to application using push() method. [Read More](https://reactjsguru.com/how-to-make-calculator-in-react/)
Setting Up A Cookie From NEXT.JS Back-end
Tags: webdev, nextjs, javascript, beginners
Published: 2022-11-02 12:43:53

Hello there, good people! I was literally stuck for a couple of hours on this issue and as a beginner, I am pretty sure most of us will be facing or already faced these kind of cookie setting troubles in NEXT.JS server-side.

To set a cookie, you just need one package, `cookie`. And remember, <u>serious cookies should be sent from the server</u>. In Express servers, it is pretty easy; just `res.cookie()` and you are ready to go. But, in NEXT.JS, you can not just use `res.cookie()` directly as far I am concerned. So, here's a solution instead: 


```
import cookie from "cookie";

// token = your JWT signed token  
res.setHeader("Set-Cookie", cookie.serialize("token", token, COOKIE_OPTIONS));
```

1. "token" : the name of the token.
2. token : jwt signed token, STRING, which will be stored inside the token.
3. COOKIE_OPTIONS : this is my current cookie option:

```
const COOKIE_OPTIONS = {
    httpOnly: true,
    secure: process.env.NODE_END !== "development",
    sameSite: "strict",
    maxAge: 3600,
    path: "/",
  };
```

This is how I stored my cookies.

To remove this cookie:

```
const COOKIE_OPTIONS = {
    httpOnly: true,
    secure: process.env.NODE_END !== "development",
    sameSite: "strict",
    maxAge: 0, //make sure this is 0
    path: "/",
  };
res.setHeader("Set-Cookie", cookie.serialize("token", "", COOKIE_OPTIONS));
```
This is how the whole login and logout cookie process works. Thanks! Hope this will help someone like me!
muzv.net
Published: 2022-11-02 12:20:07

Для чего нужны музыкальные сайты?

Интернет предлагает множество музыкальных сайтов, где можно прослушать или скачать нашу любимую музыку.
Не все из них легальны и не все предоставляют именно ту музыку, которая вам нужна, те функции, которые будут удобны и комфортны для вас, не маловажный фактор – оформление сайта и удобный интерфейс, так же доступность пользования 24/7, и без порой проблематично регистрации.

Что даёт музыка нам?

Музыка - неотъемлемая часть жизни для большинства из нас. Она заставляет нас чувствовать, хорошее или плохое настроение, порой вызывает ярость, бешенство или жгучую ностальгию по определенным временам или действиям.
Музыка заставляет нас двигаться дальше, несмотря ни на что, либо остановиться и оглянуться вокруг.
Музыка – часть жизни практически каждого человека, которая по-своему помогает и направляет.

Итог
Кому-то нравиться иметь огромный музыкальный запас у себя на телефоне, планшете, компьютере, ноутбуке или на другом электронном устройстве.
Другие же не любят или не имеют возможности заполнять музыкой пространство своего устройства, поэтому слушают музыку онлайн, сохраняя свои плейлисты на сайтах или пользуясь поисковиком, каждый раз находить музыку вручную.

[muzv.net](https://muzv.net/)
Не самый знаменитый сайт для прослушивания и скачивания музыки, но один из самых удобных и комфортабельных ресурсов, которые могут нам предложить просторы огромного интернета.
•	Комфортное и современное оформление сайта.
•	Удобный и понятный интерфейс, с которым справиться любой человек, вне зависимости от возраста.
•	Постоянное пополнение музыкальной библиотеки.
•	Помимо обычного прослушивания, есть возможность посмотреть клип или музыкальное сопровождение – встроенный YouTube.
•	Слушать или скачивать? Выбирать тебе.
•	Высокоскоростная линия, никаких лагов или подвисания во время прослушивания.
Binary Search: Recursive and Iterative method
Tags: java, leetcode, algorithms, programming
Published: 2022-11-02 12:09:39


[LeetCode discussion](https://leetcode.com/problems/binary-search/discuss/2015726/Java-C%2B%2B-reversive-and-iterative-solution-with-a-simple-explanation-to-avoid-overflow-error. )
```
 
class Solution {

	// iterative
    public int search(int[] nums, int target) {
        
		// Corner case
        if(nums == null || nums.length == 0) return -1;
        
        int low = 0;
        int high = nums.length-1;
        
        while(low <= high){
            int mid = (high-low)/2 + low;
            if(nums[mid] == target) return mid;
            if(nums[mid] < target) low = mid + 1;
            else high = mid  - 1;
	    }
        return -1;
    }

	// Recursive 
	public static int Rsearch(int[] nums, int low, int high, int target){

		if(low > high) return -1;

		int mid = low + (high-low)/2;
		if(target == nums[mid])
			return mid;
		else if(target < nums[mid])
			return Rsearch(nums, low, mid-1, target);
		else
			return Rsearch(nums, mid+1, high, target);
	}
}
```

A good blog to read about binary Search [callicoder](https://www.callicoder.com/binary-search-implementation-iterative-recursive/)
YugabyteDB in-database visible object sizes
Tags: yugabyte, dba
Published: 2022-11-02 11:55:26

The PostgreSQL database has a number of very useful functions to calculate the size of the objects on disk. Examples of such functions are `pg_table_size()`, `pg_indexes_size()`, `pg_tablespace_size()`, etc, but also the ysqlsh/psql utility `\d[tibm]+` commands to show the sizes of objects.

In [YugabyteDB](https://www.yugabyte.com) starting from version 2.15.3.0, YugabyteDB YSQL added the functionality to show the object sizes too.

If you wonder why this wasn't done before, it should be noted that because the storage of YugabyteDB via DocDB is so fundamentally different, it's impossible to just implement the PostgreSQL code. In fact, the code in PostgreSQL goes to the files for the given object, and measures the file sizes. 

In YugabyteDB, such a request must be requested via an RPC message to DocDB, and the DocDB cluster must perform the size calculation.

The current implementation calculates the WAL file size plus the (compressed) SST file size for the leader tablets of an object.

This means the size calculation gives a close approximation of an object in an replication factor 1 cluster or in a table space with replication factor set to 1. If the replication factor is set to 3, then essentially the size must be multiplied by the replication factor to get an approximation of the object size/storage footprint.

There are some other caveats that must be taken into account:
- For objects that are colocated, the size will be zero, because the WAL and SST files are shared with other objects.
- For partitioned objects, the size of the parent does not include the size of the children.
- YSQL will show the table and a primary key (_pkey) for a table with primary key, in reality there is no separate primary key index because the table rows are stored to be easy to be fetched via the primary key. Therefore the size of the primary key index will show 0.

ps. The functionality is available in YugabyteDB version 2.15.3.0, but is fully working with the latest preview release 2.15.3.2.
How to have success with Angular in an Enterprise
Published: 2022-11-02 11:54:05

How to have success with Angular in an Enterprise



⚙️ Monorepo with Nx

🚚 Continuous delivery

✅ Feature toggling

🧪 High ROI testing

𝌔 Reactive Architecture

🧑‍💻 Efficient development process

👩‍🎨 Design system and UI kits

🚀 Monitoring and optimizing performance


Watch the video here:

https://www.youtube.com/watch?v=fGWtnMjYkTw&t=913s&ab_channel=ChristianLydemann



#angular
Eliminating unused selectors from Sass
Tags: sass, css, purgecss, sourcemap
Published: 2022-11-02 11:37:32

---
title: Eliminating unused selectors from Sass
published: true
description: 
tags: sass, css, purgecss, sourcemap
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-02 11:19 +0000
---

For CSS, there is https://purgecss.com.

But what about Sass?
You want to eliminate unused selectors not only from the built result, but also from the Sass source code.

I tried it. [cc-kawakami/uchini: Find unused Sass codes](https://github.com/cc-kawakami/uchini)

```bash
npm i -g uchini
```

("Uchini" is Japanese for unloading cargo from a ship that is about to sink.)

```bash
$ uchini ls --help
List CSS selectors usage

USAGE
  $ uchini ls --scss <value> --content <value> [--output
    <value>] [--unusedOnly]

FLAGS
  --content=<value> (required) Path to content file
  --output=<value> Path to output file
  --scss=<value> (required) Path to CSS file
  --unusedOnly Unused selectors only

DESCRIPTION
  List CSS selectors usage

EXAMPLES
  $ uchini ls --css path/to/css --content path/to/content --output path/to/output --unusedOnly
```

````bash
uchini ls --scss path/to/scss --content 'path/**/*.html' --output output.json
```

```json:output.json
[
  {
    "selector": ".header",
    "positions": [
      "frontend/stylesheets/_layout.scss:20:2"
    ]
  },
  {
    "selector": ".card",
    "positions": [
      "frontend/stylesheets/_card.scss:1:0"
    ]
  }
]
```

Internally we use the following.

- [sass - npm](https://www.npmjs.com/package/sass)
- [purgecss - npm](https://www.npmjs.com/package/purgecss)
- [source-map - npm](https://www.npmjs.com/package/source-map)

First, compile Sass.

```javascript
const compiled = sass.compile(
  scss,
  {
　  style: 'compressed',
 　 sourceMap: true,
    logger: sass.Logger.silent
  }
)
```

Then, the source-map creates a consumer.

```javascript
const consumer = await new sourceMap.SourceMapConsumer(compiled.sourceMap)
```

Next, we identify the CSS selectors that are not being used by purgecss.

```javascript
const rejectedCSS = await new PurgeCSS().purge({
  content: [content],
  css: [{ raw: css }],
  rejected: true
})[0].rejected
```

Then, the consumer can use the source map to traverse the Sass lines corresponding to a given line of CSS.

```javascript
const position = this.consumer.originalPositionFor({
  line: 1, // since the source map is a single line in compressed
  column: startOfSelector
})
```

That's it.

Thank you for reading.
My first month as a junior front end dev
Tags: beginners, journey, firstdevjob
Published: 2022-11-02 11:51:11

## Introduction

So I have officially survived the first month as a junior front end developer. I thought the first month will not give me so much extra, but I was wrong. Here is a list what I have done, learned and got better at. 

- I could make a setup for the project

- I got more insight and better how to use Git and GitHub as a version control and as a part of a team.

- I am getting familiar with the project, but I still does not understand some parts and I still feel lost sometimes. The project is way bigger than I have ever worked on. It scares me sometimes...

- I got some insight to micro-services and web services

- I updated and made new "catalog" both server side and on the GUI.

I am looking forward what the future brings, what tasks I will get and how much I am going to improve.
What is the structure of a scss mixin and how to create it?
Tags: scss, css, webdev
Published: 2022-11-02 11:48:54

We frontend developers do most html css coding while coding in general. When coding, instead of writing repeated structures over and over again, we prepare them as a component structure and include them in the coding, that is, we do the inclusion process.  We usually use sass or scss tools when coding css. Within these tools, there is a mixin structure, a structure where we can create repeated structures.

> ## What is scss mixin? 

When css coding, we repeat a lot of coding, for example, we use the following codes to combine objects in a box in the middle.

``` scss
.box {
  display: flex;
  justify-content: center;
  align-items: center;
}
```

Creating a mixin called BoxCenter and including it when we need to create these codes will make our job a little easier than rewriting these codes many times. In addition, it will minimize the time we lose in writing the same codes.

> ## Mixin Structure and Creation

Creating and using mixin in scss is actually very simple.  If a function is created in a programming language, a mixin structure can be created in a similar structure in scss. 

```` scss
@mixin isim(parameter or parameters){
   // Css Code
}
```

You can create a mix with or without parameters. This is completely up to you. I will be explaining both uses.

> ## Creating and using a mix without parameters

We create a mixin called BoxCenter. Then we include the mixin we created " @inculude BoxCenter() " in the .box. That's how simple it is.

``` scss

@mixin BoxCenter() {
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 100px;
  height: 100px;
  color: red;
  @include BoxCenter();
}

```

> ### Output

Let's look at the css output. While reading this article, I assume that you know how to compile scss and get css output.

``` css

.box {
  width: 100px;
  height: 100px;
  color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}

```

> ## Creating and using a parameterized mixin

In general, it is more preferred to create mixins with parameters.

``` scss

@mixin BoxCenter($d, $jc, $ai) {
  display: $d;
  justify-content: $jc;
  align-items: $ai;
}

.box {
  width: 100px;
  height: 100px;
  color: red;
  @include BoxCenter(flex, start, end);
}

```

> ## Output

The output of the above code will be as follows.

``` css

.box {
  width: 100px;
  height: 100px;
  color: red;
  display: flex;
  justify-content: start;
  align-items: end;
}

```

Yes, in this blog post you have learned how to create and use mixins with or without parameters in scss. I agree that you will definitely create your own mixins while using scss. 😁 Goodbye to see you in my next blog post. 

## [https://en.musayazlik.com/what-is-scss-mixin-how-to-create-it/](https://en.musayazlik.com/what-is-scss-mixin-how-to-create-it/)
Three Changes Are Required for the Adoption of Web3 Wallets
Published: 2022-11-02 10:57:18

Because they serve as a springboard for the development of Web3 wallets, crypto wallets that store cryptocurrencies, digital identities, and non-fungible tokens (NFTs) are expected to be crucial in the near future. Similar to how traditional wallets are crucial for protecting cash and cards from theft, loss, or damage, this is necessary. The foundation of the blockchain sector is the digital wallet.
Without them, encrypted transactions like peer-to-peer transfers and trustless logins for Web3 apps would be all but impossible.

In an effort to support the creation of [Web3 wallet development](https://www.suffescom.com/product/web3-wallet-development-company/) and the Metaverse, Facebook changed its name to Meta in October 2021. The acceptance of NFTs by Twitter and Instagram also indicated that Web3 was beginning to gain traction. Enterprises of all sizes might utilize cryptocurrency wallets to communicate with their consumers and understand how they behave, just like Web2 businesses do now with cookies, as the world proceeds toward the inevitable transition to the next generation of the internet.

Since Web3 is still in its early stages and isn't widely used, this article discusses the adjustments that crypto wallets should implement to help Web3 get more users. We appreciate having you.

Also Read : [Social Networks Will Be Added to the Blockchain](https://tech95zone.com/social-networks-will-be-added-to-the-blockchain/)

## Cryptocurrency wallets are necessary but boring.

For the purpose of managing, storing, and protecting digital assets like cryptocurrencies, NFTs, and more, crypto wallet owners must sign and authenticate using cryptography. Because crypto wallets were formerly primarily used to hold cryptocurrency assets, they are now necessary because you cannot store digital assets in a physical wallet or under your pillow.

## Combining and Working Well

The majority of Web3 projects are constructed using distinct blockchains that are not interoperable. Most consumers find it challenging to transfer their virtual currency to other crypto wallets as a result. Because some project groups can communicate with one another while others can't, tribalism has increased in Web3. This lessens the likelihood that Web3 adoption will increase soon.

## Simple Procedures to Get Going

If Web3 businesses and developers want to make it simple for new users to sign up, they must immediately address any issues that they encounter. The technical requirements of DApps and cryptocurrency wallets have not been met by the hoopla surrounding Web3 technologies like cryptocurrencies, NFTs, and the Metaverse. Web3 hasn't taken off as much as it could, even if more people are starting to use it because wallets don't have decent user interfaces or experiences.
Forest Admin, the pioneer of low code internal tools, is now free with unlimited users
Tags: news, webdev, node, javascript
Published: 2022-11-02 10:55:53

In the last couple of weeks, the tech industry has witnessed several announcements about increasing prices of popular tools. Heroku has canceled its free plan after offering it for over a decade. Slack has increased its price and limited its free plan to only 3 months. Figma lovers are worried if Adobe – the new owner of their essential design tool – is going to limit its free plan as well, even if there are no such talks at the moment.

Forest Admin, the pioneer of low code internal tools, has made the decision to go against the trend and offer a fully-functional and customisable admin panel solution for free for unlimited users. It means that regardless of how many people use Forest Admin in a given company, it will be free of charge. This update reflects the long-term mission of Forest Admin to make developers’ lives easier and, even more importantly, they feel that it better fits its users’ different stages of growth.


> “We want as many people as possible to be able to use Forest Admin and reap the benefits of having a powerful, easy-to-use admin panel from day one.”
Sandro Munda, Forest Admin’s CEO

Now, developers can sign up for a free account (no credit card required), set up a fully-functional internal tool in the blink of an eye, and invite an unlimited number of users. All of it for free – no catch.

Forest Admin also has a paid offer for businesses that need more than what the free plan offers. The paid version enables setting up roles and permissions to determine who can do what on the admin panel and quickly adjust it when needed. For example, a C-level executive will not see or use an admin panel in the same way as a developer who needs more technical data. Likewise, an operational person will need to see the data in a specific way to do their work efficiently. This feature is a part of a Team plan that costs $12 per user.

On top of that, there are advanced functionalities for established businesses that need advanced security features like SSO or IP Whitelisting, approval workflows, collaborations features, and more. These can be found in a new Plus plan that costs $48 per user. All details can be found on the [pricing page](https://www.forestadmin.com/pricing?utm_source=referral&utm_medium=devto&utm_campaign=new-pricing&utm_term=new-pricing-2022).



## About Forest Admin

Founded in 2017, [Forest Admin](https://www.forestadmin.com/?utm_source=referral&utm_medium=devto&utm_campaign=new-pricing&utm_term=new-pricing-2022) is a low-code internal tool solution that helps developers save time and provide their business’ teams with internal tools such as fully-featured admin panels, dashboards and database manipulation tools that are tailored to their operations and ready to scale. Thanks to its unique hybrid architecture, Forest Admin offers a business-grade level of security as user data never reaches Forest Admin servers.