teleren/devto huggingface dataset:
Using DeLab Connect with Next.js
Tags: ton, nextjs, delab, connect
Published: 2022-11-12 10:02:48

Recently I've seen a release of an awesome repository enabling single-page React apps to seamlessly integrate authentication with a number of TON wallets.

Kudos to DeLab team ❤️
https://github.com/delab-team/connect

I plan to record a video soon where I will go into more detail on when this is a good lib to use and when we should go with the standard "per-wallet" authentication approach. Subscribe to my Telegram channel if you don't want to miss it https://t.me/markokhmandev

Because I'm using Next.js for most of my web projects, I've run into some issues using DeLab Connect. However, a single React hook solves those issues. This hook makes sure that we are importing the DeLab Connect only on the client side. Furthermore, our hook has an interface (connectInfo and callbacks) to interact with the DeLab Connect instance.

Before we get to the hook's code, let's do some preparation. You will need to prepare the delab's module before passing it to Next.js. For this you need two things:

- Install `next-transpile-modules`:
```
yarn add next-transpile-modules
```

- Replace default next.config.js with following code:

```
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
};
const withTM = require("next-transpile-modules")(["@delab-team/connect"]); // pass the modules you would like to see transpiled
module.exports = withTM(nextConfig);
```
Now we are good to go with the Hook's code:

{% embed https://gist.github.com/markokhman/778e670b31802f2bd1a6b2142436302a.js %}

You can place this hook anywhere in your project (ex. `/shared/hooks/useDeLabConnect.ts`) and then import it on your page.

##How do we use it?

Inside of our page component we are placing the use of our hook:

```
 const { DeLabConnector, DeLabModal, DeLabButton } = useDeLab({
    connectInfo: {
      url: "https://example.com",
      name: "Example",
      network: "testnet",
    },
    callbacks: {
      onConnect: async (event: DeLabEvent) => handleConnect(event),
      onDisconnect: () => {
        console.log("disconect");
      },
      onErrorTransaction: (event: DeLabEvent) => handleErrorTransaction(event),
      // ... other callbacks handled in our hook
    },
  });
```

Our hook returns 3 important instances:
**DeLabConnector** - of type DeLabConnect, we will use this one to request transactions etc.
**DeLabModal** & **DeLabButton** - Elements, we will simply put them on the page 

Here is a full example of our Next.js page using the useDeLabConnect.ts

{% embed https://gist.github.com/markokhman/ce9e2fa7af26c30b9aa1ea4efb996a20 %}

That's it :) Let me know in comments, what you think about this.
And bro, please subscribe to my Telegram channel: https://t.me/markokhmandev
🆕What's new with Bootstrap Icons v1.10.0🆕
Tags: icons, webdev, design, bootstrap
Published: 2022-11-12 09:53:31

[Bootstrap](https://en.musayazlik.com/category/software/css/bootstrap/) Icons library continues on its way with the v1.10.0 version with the addition of approximately 150 icons. This version includes the addition of new similar icons such as person, building and database icons, as well as new brands, rockets, road signs, spheres and much more. Let's see exactly what kind of icons have come to the bootstrap Icons library, which currently has over 1,900 icons, with the v1.10.0 version.

> ## 150 icons were added to the Bootstrap Icons library.

With the Bootstrap Icons library v1.10.0 version, 150 new icons were added to the library. You can take a look at the added icons below.


![What’s New With Bootstrap Icons V1.10.0 Musa Yazlık](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b25yxcp7wvfl5cj6x3yo.png)

Here are some features for the newly added icons;

- 22 new person icons have been added.
- 26 new house icons have been added.
- 24 new building icons have been added.
- 22 new database icons have been added.
- 24 new street sign icons have been added.
- New globe icons have been added.
- New electric vehicle, taxi, bus and scooter transport icons have been added.
- New rocket icons have been added.
- And many more icons were added. 😁

> ## Minor Adjustments Were Made To The Documentation.

- Brand and Brands category names have been changed to Brand only.
- The labels on the various icon pages for additional aliases have been updated again.

> ## Bootstrap Icons Project Setup

Installation with npm package manager;

````
npm i bootstrap-icons
```
Installation with Composer;
```
composer require twbs/bootstrap-icons
```
You can download version files from GitHub, or you can download only SVGs and fonts (without the rest of the repository files).

> ## Bootstrap Icons Included in Figma Community.

The Bootstrap Icons library is now live in the Figma Community. Now you designers will be able to include Bootstrap icons in your projects through the Community and use them easily.

In this article, I have given you information about the innovations that came with Bootstrap Icons v1.10.0. See you in my next blog post…

[Go to Bootstrap Icons](https://icons.getbootstrap.com/)

Content Source : [https://en.musayazlik.com/whats-new-with-bootstrap-icons-v1-10-0/](https://en.musayazlik.com/whats-new-with-bootstrap-icons-v1-10-0/)
How to create function in MySQL
Tags: sql, programming, database, mysql
Published: 2022-11-12 09:49:44

## 1. Syntax

```
drop function if exists function_name ;
delimiter $$
CREATE FUNCTION function_name [ (parameter datatype [, parameter datatype]) ]
RETURNS return_datatype
BEGIN
    -- statements
END
$$
-- for use the function 
select function_name(parameter);
```

## 2. example

```
drop function if exists countscoll;
delimiter $$
CREATE FUNCTION countscoll( cit int ) 
returns int 
begin 
   declare tota int ;
   set tota = ( select count(*) from school 
   where city = cit );
   return tota ;
end
$$
delimiter ;
select countscoll("new york");
```

## 3. remark
we use function when we return value or Variable
## 4. i explaine how to create function in MySQL on youtube
click this => [vidéo](https://www.youtube.com/watch?v=PHnX5WppiBA&t=5s)
## 5. this is my channel on youtube 
click this => [The Dream Coding](https://www.youtube.com/channel/UC7EawDV9gGzPcYOLN3FrASQ)
How to install and configure git?
Tags: git, gitinstallation, gitconfiguration
Published: 2022-11-12 09:34:35

Git official documentation provides exact steps which everyone can follow to install Git on their system based on their system configuration (OS).

You can find the documentation to install Git from here
[**Git - Installing Git**](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)

To check if git is installed on your system, run the following command on terminal / command prompt. This command will return the version of git installed on your system

    git --version

I have a script which I’ll run to install git whenever I’m switching to a new laptop. I’ll attach the script file below, you can use it too. This script can run only on Linux (especially Ubuntu flavor). As most developers use Linux and I love using it, I written this script.

Follow the below steps to install Git via script
{% gist https://gist.github.com/5minslearn/b0349d64f0b9931fe1776f5142fb78bf %}

 1. Copy the above content to a file

 2. Replace “your_name” and “your_email” with your name and email respectively

 3. Save the file as install_git.sh

 4. On terminal, navigate to the folder where you saved the file

 5. Make the file executable by running the below command on terminal

```
sudo chmod +x install_git.sh
```

Note: This step will ask you to enter your system password

6.Run the file using the below command

    ./install_git.sh

Run `git --version` to verify the installation of Git. This command will return the version of git installed on your system.

That’s it. We’re done with setting up git on your local machine.

Remember to save the `install_git.sh` file in a safe place to install git quickly in your system, if you switch your laptop in future.

Subscribe to our [newsletter](https://5minslearn.gogosoon.com/?ref=devdotto_how_to_install_and_configure_git) to receive more such insightful articles that get delivered straight to your inbox.

Please follow my [instagram](https://www.instagram.com/5minslearn/) account to receive quick updates
Docker Image Import and Export to another Machine
Tags: docker, kubernetes, devops, microservices
Published: 2022-11-12 09:26:12


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

We faced daily challenges while working with docker many times we want to save our running images and want to import/export them to another machine and load them on that machine and used them directly without too much configuration.

So Let’s start,

To commit the running container to an image with the new tag you can use this command :

`docker commit <containerID> new_image_name:tag`

If you want to know the running container id then use the following command

`docker ps`

To save the replica of the image which we created using the above command using the following command

`docker save -o new_file_name.tar new_image_name:tag`

After executing the above command you can see the .tar file of your image on your machine from the location where you executed the above command

Now you can move your docker-compose.yml to the same folder on another machine and your new_file_name.tar too. On your machine where are these files run :

`docker load --input new_file_name.tar`

Change all docker-compose.yml files as per image we load with name and its tag

If you lost the name used:

`docker images`

The last step is run :

`docker-compose up -d`

I hope you understand all the things which I discussed in this article.

**Happy Learning!**
Union Type in TypeScript
Published: 2022-11-12 09:18:37

In TypeScript, the union type allows us to combine two or more types separated by a pipe symbol ('|').Before moving further, some prior knowledge of typescript is required.

**Basic Union Type:**


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

In the above example, we can see that we declared a variable named "id" by using a union type. As we can see now, we can assign either string or number values to that particular variable.


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

As we can see above, typescript throws an error if we try to assign a value of some other type; in our case, we are trying to assign a boolean value to "id," which is not possible because we declared "id" as the union type of string and number.

**Union Type as an argument to a function:**


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

As we can see above, the function myId takes "id" as an argument, which is a union type of string and number.


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

In the above example, we can see that typescript throws an error when we try to pass a boolean type as a parameter to the myId function.

**Arrays with a union type:**


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

As we see above, "id" is declared as an array with a union type of string and number.


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

When we try to add a boolean type to an array with a union type of string and number, typescript throws an error. 

**Union type as type aliases:**


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

If we take a closer look at the above example, we can see that we are using myIds as a type alias. Type aliases are most useful when you want to chain many data types. As we see above, we are defining argument "id" using a type alias myIds.
<<C Primer Plus>>笔记
Tags: c
Published: 2022-11-12 09:09:05

2.2对简单程序的示例解释
 2.2.1 第一遍:快速概要
一.#include<stdio.h>          包含另一个文件
该行告诉编译器把stadio.h中的内容包含在当前程序中.stadio.h是C编译器软件包的标准部分,它提供键盘输入和屏幕输出的支持.
二.int main(void)            函数名
int和void是标准的ANSIC定义main()的一部分.
三.
注释
/*一个简单的C程序*/            注释
注释在/*和*/两个符号之间,这些注释能提高程序的可读性.
四.
{   函数体开始
int num;     --声明函数
该声明表明,将使用一个名为num的变量,而且num是int(整数)类型.
num=1;               --赋值表达式语句
printf("I am a simple");        --调用一个函数
printf()是标准的C库函数.在程序中使用函数作调用函数.
*  printf("computer.\n")       
\n告诉计算机另起一行,即把光标移至下一行.
*  %d告诉计算机以何种形式输出num的值.
*  return 0;     --return语句
目前,可暂时看作是结束main()函数的要求.
*   }
必须以右花括号表示程序结束.

2.2.2  第2遍:程序细节
1.#include指令和头文件
#include<studio.h>


2022//11//12,因为python普遍被认为易学,我将先学习python<<python编程从入门到实践第2版>>
I got it!
Tags: hacktoberfest, github, 2022, forem
Published: 2022-11-12 08:11:43


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h59npa41069lhsdodcz4.png)Thank you DEV Hacktoberfest 2022! for providing me as a part of #hacktoberfest2022 event.
On completing Hacktoberfest 2022! been awarded a prize kit – a t-shirt, the Tree Planted, DEV Hacktoberfest Badge, Surfer Moby Dock Badge from Docker for Hacktoberfest participants, and many more.
Thanks GitHub for giving me such good platform to learn opensource.
What I've been reading (week 45, 2022)
Tags: watercooler, news, discuss
Published: 2022-11-12 08:00:15

Each week I share a few things that I've been reading. Here's six from this week:

## [Inside the mind of a frontend developer: Hero section](https://ishadeed.com/article/inside-frontend-developer-mind-hero-section)

This is a nice article for people in early/mid frontend careers, or perhaps non-frontend specialists, explaining the thought and design process behind coding a resilient Hero component with CSS.

## [Server-side rendering micro-frontends – the architecture [on AWS]](https://aws.amazon.com/blogs/compute/server-side-rendering-micro-frontends-the-architecture)

It's good to see more microfrontends articles talking about doing the stitching-the-page together work on the server (or edge), rather than earlier articles which relied on things like iframes (!) or lots of client-side requests to fetch data (and therefore lots of loading spinners and layout shift)

## [The new wave of Javascript web frameworks](https://frontendmastery.com/posts/the-new-wave-of-javascript-web-frameworks)

This is a very good (but not a quick read) overview of where frontend is at with frameworks and meta-frameworks, how we got there, how Facebook pays away the pain of React's limitations, and what the future of edge/resumability vs hydration/hybrid MPA-to-SPA might look like.

## [New Ways of Working Playbook](https://newwaysofworking.notion.site/newwaysofworking/New-Ways-of-Working-Playbook-dc607e37f7894f4a9be698a6573cb97b)

I'm bookmarking this as more of an aspirational one, rather than something I've fully read right now. But it looks like it could be really useful/interesting, and in line with much of what we try to do at @CoopDigital.

## [Buid a CSS Theme Switcher With No Flash of the Wrong Theme](https://www.learnwithjason.dev/blog/css-color-theme-switcher-no-flash)

EDGE FUNCTIONS FOR EVERYTHING!

## [The anatomy of visually-hidden](https://www.tpgi.com/the-anatomy-of-visually-hidden)

A deconstruction of the `visually-hidden` or (poorly named) `sr-only` CSS classes that we've all used so many times without taking the time to pick apart line-by-line.

---

I also [tweet these as I find them (@philw_)](https://twitter.com/philw_) and post them on my personal site at https://wolstenhol.me/#reading.

What were your favourites? Was there anything you found useful?

{% user philw_ %}
Amazon S3 - Managing
Tags: s3inventory, s3select, s3batch, s3tagging
Published: 2022-11-12 07:26:28

## AWS S3 Managing:

### Managing object tagging:
Tagging used to Manage/search/filter resources (including S3 object).
10 tags per object. 50 tags per bucket.
Tag Key - 128 chars; Tag Value - 256 chars.

_Tagging in Access control_ - In IAM policy use tag and its value as condition for fine-grained permission to allow/deny actions. 

_Tagging in Lifecycle management_ - use tag to filter subset of objects to apply rule.

_Tagging in Replication_ - filter by tag

### Amazon S3 Inventory:
Get list of objects and corresponding metadata from a bucket or prefix on a daily/weekly basis. A less costly alternative is S3 inventory compared to List API. Use it to audit the replication/encryption/compliance/regulatory status of objects.
It may take up to 48 hrs for inventory to delivery first report. Inventory can be queried using Amazon Athena. Create a table, load inventory and query.

### Amazon S3 Select:
Filter contents of S3 objects and retrieve subset of data instead of downloading entire object using SQL statements.
Reduces transfer costs.
Works on only CSV, JSON, Apache Parquet objects

### Amazon S3 Event Notification:
Notifies object creation regardless of API used PUT, POST, COPY. Similarly event notification can be sent for DELETE, REPLICATION events etc.

### Amazon S3 Batch Operations:
To perform a single API action like Copy/Delete/Tags related etc. or invoke a Lambda to perform on a list of S3 objects (can be billions of objects) you specify.
Auto retries on failure.
S3 tracks progress, notifies and stores report of actions.
Fully managed.

## Amazon CloudWatch:
Which objects are accessed the most or the least and who is accessing.

Amazon S3 server access logging provides info about customer base.
Using CSS Class to Show/Hide an Element by Login Status in Elementor
Tags: elementor, css, wordpress
Published: 2022-11-12 07:25:21

Say you have a WordPress-based blog created with Elementor. Your blog relies on ads to generate revenue. Suddenly, you have an idea to accept membership on your blog. One of the features you plan to offer is an ad-free reading experience. Unfortunately, Elementor has no built-in feature to cover such a need.

A simple solution to the above case is by installing a third-party add-on. Alternatively, you can add an additional function to handle the job. In this post, I will show you how to show/hide an element in Elementor by taking advantage of CSS class selector.

## Step 1: Add a New Function to WordPress

First, you need to add a custom function on your WordPress blog. In WordPress, you can add a new function by editing the _functions.php_ file of your theme. Or you can also use a plugin like Code Snippets to add a custom function without editing a theme file (_functions.php_).

Here the code of the function:

`add_filter('body_class','er_logged_in_filter');
function er_logged_in_filter($classes) {
if( is_user_logged_in() ) {
$classes[] = 'logged-in-condition';
} else {
$classes[] = 'logged-out-condition';
}
// return the $classes array
return $classes;
}`

The above code will check the class of the element (`logged-in-condition` and `logged-out-condition`). If the class is `logged-in-condition`, the element will not be shown. Conversely, if the class is `logged-out-condition`, the element will be shown.

## Step 2: Add the CSS Classes to Your WordPress Blog

Once done with step one above, you can go to theme customizer to add the following CSS code. The below code adds two CSS classes to your WordPress website as covered above.

`.logged-in-condition .hide-logged-in {
  display: none!important;
}
.logged-out-condition .hide-logged-out {
  display: none!important;
}`

To add the code above, you can go to theme customizer (**Appearance -> Customize**). Open the Additional CSS block and paste the code to the available field. 


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

Click the **Publish** button to apply the code.

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

## Step 3: Apply the CSS Class

Once done with the two steps above, the last step is to apply the CSS class. Edit an Elementor page (or custom template) containing an element you want to hide. Select the element (section, column, or widget) and go to the **Advanced** tab on the settings panel. Paste the CSS class to the **CSS Classes** field.

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

You can paste the `hide-logged-in` to hide the element. While to show the element, you can paste the `hide-logged-out`

You can use the above custom function to page builders other than Elementor such as Divi , Breakdance, to Brizy. You can even use it on Gutenberg as Gutenberg also allows you to add a CSS class to an element (block.)
The Syntax highlighting highlight.js is now available on Medium
Tags: opensource, medium, writingtips, javascript
Published: 2022-12-24 04:25:33

---
title: The Syntax highlighting highlight.js is now available on Medium
published: true
date: 2022-11-12 06:43:52 UTC
tags: opensource,medium,writingtips,javascript
canonical_url: https://balajidharma.medium.com/the-syntax-highlighting-highlight-js-is-now-available-on-medium-58f672595691
---

[![](https://cdn-images-1.medium.com/max/2600/0*jN-T-xbinkek7VXN)](https://balajidharma.medium.com/the-syntax-highlighting-highlight-js-is-now-available-on-medium-58f672595691?source=rss-17217f29618a------2)

Syntax highlighter on Medium

[Continue reading on Medium »](https://balajidharma.medium.com/the-syntax-highlighting-highlight-js-is-now-available-on-medium-58f672595691?source=rss-17217f29618a------2)
THIS tool will SAVE you 70% of your TIME as a developer
Tags: webdev, programming, tutorial, devops
Published: 2022-11-12 06:34:52

Every developer gets FRUSTRETED creating user-guides for their audience. But this tool will create guides within NO TIME. Take a look below.

Unlike other articles, I'm not going to tell you a long old story. INSTEAD if you stick to the end. You will save a great amount of time as a developer or if you're a product manager or someone who teaches people how to use their product or service.

## The Problem 😫
When it comes to creating user guides for an audience the typical process goes like this.

1. Record the video of the whole process OR take a screenshot of each process.
2. Place text at each point.
3. Combine them (🙄)
4. Gives you a long video OR a pdf. Which isn't cool (at least for me).

This process is so lengthy and time consuming.

![coding](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4fg3n0nyqohn6fayprpv.jpg)

## The solution I found 😀
Tango is a tool to create user-guides which record each step and it adds text and step by step commands for user to follow. And it saved my time a lot. It's free to use. And also you can share not a big pdf but a link!

## See this example 🤖
In this example, I'll build a workflow for [Super URL](https://superurl.pythonanywhere.com/).


![tutorial](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nhjs06bp2uwwobutmd1s.gif)

## What i really liked 😍
Ofcourse this simplifies creating user-guides for users but one more thing which impressed me was different types of export options.

- Export HTML / Markdown
- Download as PDF
- Embed live guide

## One more thing 💌
I always write about new tech & interesting things happening on internet. So if you don't want to MISS OUT. [_Subscribe to the newsletter (it's free)_](https://www.getrevue.co/profile/ananasraza)

Also if you forget to do things, don't forget to checkout [todo stack](http://todostack.vercel.app/)

`Thanks for reading!`
How a Coding Boot Camp Helped This Learner Upskill Fast, Kickstart His Career, and Get Back on Track for College
Published: 2022-11-12 06:27:15

https://blog.edx.org/how-a-coding-boot-camp-helped-this-learner-upskill-fast-kickstart-his-career-and-get-back-on-track-for-college

click the link above to read the story.
Image Path Extension
Published: 2022-11-12 06:21:12

https://github.com/VB10/Flutter-Full-Learn/blob/main/lib/202/image_learn_202.dart

https://youtu.be/W2zCsxTVVDE?list=PL1k5oWAuBhgXdw1BbxVGxxWRmkGB1C11l&t=206