teleren/devto huggingface dataset:
CallBack Function
Published: 2022-11-24 03:06:36

Javascript Callback functions has come in to importance the more I continue my lessons with Flatiron School.

A Callback function is a function that is passed as an argument to another function.

This allows you to call a function from another function

A callback function can run after another function has finished.

Function-Ception

It was used during my lessons in regards to Event Listener

For instance. This code will allow me to analyze which button im Clicking Down and give me the Key ID

document.AddEventListener('clickdown', function (event) {
         console.log(event);
})

The above Code, which need to be pasted on the console will allow event listener to give me the key name of the keyboard keys i'm pressing.

Key = ArrowUp, ArrowDown, ArrowLeft, ArrowRight
Online Business and Website Directory
Published: 2022-11-24 03:03:54

eTradeList.com is the most comprehensive website for online business listings in India and it provides information on more than 4 million companies across 1,100 cities. eTradeList.com has been designed by an experienced team of businessmen and Internet professionals. The goal is to bring all the 3,000,000 business listings available with variousstate governments' websites onto one platform to help businesses quickly find what they are looking for and make their lives easier.
[List Your Site](https://www.etradelist.com)
player-dt-v-1
Published: 2022-11-24 02:46:18

<html>
	<head>
		
		<title>HBO DTV</title>
<meta content='width=device-width, initial-scale=1' name='viewport'>	
<meta http-equiv="Content-Language" content="es" />	
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">	
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-0QDELNE5D8"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-0QDELNE5D8');
</script>
	</head>

<body  style="padding: 0px; margin:0px;">
<script src="//ssl.p.jwpcdn.com/player/v/8.21.0/jwplayer.js"></script>
<script> jwplayer.key = 'XSuP4qMl+9tK17QNb+4+th2Pm9AWgMO/cYH8CI0HGGr7bdjo';
</script>
<div id="player"></div>
<script>

    var playerInstance = jwplayer("player");

    playerInstance.setup({

        playlist: [{
            "title": "HBO DTV",
            "sources": [
                {
                    "default": false,
                    "type": "dash",
                    "file": '//dtvott-abc.akamaized.net/dash_live_1140/manifest.mpd',
                    "drm": {
                        "clearkey": { "keyId": "99eefc068db3509b9f0cf5b34114219d", "key": "6c23e31a4d83b568e84aec609a63ebc9" }
                    },
                    "label": "0"
                }
            ]
        }],
        width: "100%",
        height: "100%",
        aspectratio: "16:9",
autostart: false,
			 logo: {
 					 file: '',
 					 link: 'https://telegratis.net/',
  						position: 'top-right'
  					},
			cast:{},
			sharing: {}
    });
</script>


<body>

</html>
Best Clipping Path Service BD
Tags: clippingpathservice, bestclippingpathservice, clippingpathservicebd, shadowmaking
Published: 2022-11-24 02:37:32

One of the most admired photo editing services around the globe is Clipping path. We are offering this service at an economical price and in a committed way. We can offer you excellent work and promise that you will be happy with our integrated work. The service of the Clipping path is used for a specific portion of a picture. Here we are offering you this service at a reasonable price. We choose that portion of the picture which is desired by our clients and that could be any portion of the photo……


https://bestclippingpathbd.com/
How to delete snapchat group | How to delete Snapchat group I created 2022 Best info
Published: 2022-11-24 02:31:36

<h2>How to delete snapchat group | How to delete Snapchat group I created 202</h2>
<strong>how to delete Snapchat group</strong>: Today's article, we are going to inform you that how <strong>you can delete the group created on <a href="https://themoderndaytech.com/how-to-delete-tiktok-account/">Snapchat</a>,</strong> we are going to tell you complete information about it in today's article, only then the article will be on till then you will get complete information will be known

&nbsp;
<h1>What is SnapChat?</h1>
&nbsp;

You all know  snapchat is a social media platform on which you can share different types of images and videos, through Snapchat, you can work on it just like Instagram and it is a social media platform. And on this you can also create your own groups, you can also create your own pages and in today's article we are going to tell you <strong>how to delete Snapchat group</strong>, let's know the complete information.

<img class="alignnone size-medium wp-image-9512" src="http://themoderndaytech.com/wp-content/uploads/2022/10/jpg_20221022_201923_0000-300x169.jpg" alt="how to create group on snapchat in 2022 | best info" width="300" height="169" />
<h2>How to delete Snapchat group I created 202</h2>
Snapchat app is a social media platform in which you see different types of videos and photos on which you can also create your videos by opening an account and you can also create your groups in which you can add your friends and their friends. You can talk together, if you do not want to talk to anyone, then you can remove them from that group, if you want to delete the whole group, then how to do this, we are going to tell you in today's article on Snapchat. You can also create stories just like you can create stories on Instagram, in the same way you can create stories on Snapchat

&nbsp;

&nbsp;
<h2><strong>how to delete Snapchat group</strong></h2>
<strong> </strong>
<ul>
 	<li>how you can delete or leave a group chat make sure you read the article till the</li>
 	<li> first of all you just have to open the on SnapChat so if you are interested end and now let's get started and</li>
 	<li>then you have to go to the chat section so tap the chat icon given at Snapchat app the bottom bar and</li>
 	<li>here you just have to open the group that you want to delete or exit now here you simply have to tap on the group name given in the top right and</li>
 	<li>then you have to tap the three dots doing that will give you a few options and you just have to choose the first one that says leave group so it will tell you what will happen when you leave this group</li>
 	
[Read more](https://themoderndaytech.com/how-to-delete-snapchat-group/)
The Top White Hat SEO Agency in Queensland
Published: 2022-11-24 02:08:19


If you're looking for an [White Hat SEO Agency in Queensland](https://purplecow.digital/white-hat-seo-agency-in-queensland/), you need to look no further than The Top White Hat SEO Agency. Our team of SEO experts brings years of experience and knowledge to the table and is dedicated to helping our clients reach their SEO goals. We have extensive expertise across SEO disciplines such as link building, content marketing, SEO copywriting, SEO audits, and more. 



Our SEO strategies are tailored on an individual basis for each client, taking into account their unique business objectives and budget conditions. Whether you need help developing a website from scratch or optimizing your existing website for better rankings on search engines, we can provide the services that will help your business succeed online. 



At The Top White Hat SEO Agency, we are committed to providing our clients with SEO services that are ethical and compliant with search engine guidelines. We only use SEO practices and methods that are approved by Google and other major search engines, so you can be sure your SEO efforts will remain in line with industry standards. 



Our SEO campaigns have helped many businesses succeed online, resulting in increased website traffic and improved visibility on the web. With our comprehensive SEO services, you can rest assured that your website will get noticed by the right audience and rise up the ranks of search engine results pages (SERPs). 



The Top White Hat SEO Agency is ready to help you achieve your SEO goals. Contact us today for a free consultation or to learn more about how we can help you reach success online. We look forward to hearing from you!
Inhumane Cards Release!
Tags: gamedev, showdev, webdev
Published: 2022-11-24 02:07:55

## Intro
I am making an online implementation of Cards Against Humanity.

Its at the point where I feel pretty confident in it being stable now. So check it out with a couple friends at [inhumanecards.com](https://inhumanecards.com)

I wont be posting blogs specifically about the site here though, I will be doing all change logs inside my [ko-fi for the server costs](https://ko-fi.com/post/Inumane-Cards-v0-5-1-R5R3GKQ9A), and keep posting tutorials/walk throughs from stuff I learn here.

That's just because I want to keep my blog here more focused on tutorials rather than showcasing what I am doing.

## Meta
Been awhile since I have had a non-tutorial post, so quick update.
- I have 95 followers now, which is fucking crazy, thanks!
- I graduated from Flatiron!!!!!!
- I am abandoning SlackMod because I am not going to be using Slack anymore because I graduated
  - [You can install it here, it will probably work for a long time](https://dev.to/f53/slackmod-release-3kfp?preview=c8dd1a70e3528d6fd4506855bb42086d05021bdc9dbb4843b25d747f82e07d22ea818868a1299e0a83e6522a9b7d9cd8cec23414e652af5258b21655)
  - I may pick it back up if I have to use it for a Job though
Excited and a bit Nervous
Tags: webdev, beginners, career, productivity
Published: 2022-11-24 02:02:04

**Hello fellow Coders and Enthusiasts**,

This is the marking of my first post into this community filled with professionals as well as beginners like me.
I am very excited to step into this new world with motivation and to develop and create artistic web-apps as well as mobile apps. I aim to elevate the level of details in user experience as well as to boost the productivity while at it.

**Why Nervous then many may ask?**

This recent lay-offs in the tech space and the widespread news of freezing hiring has got me thinking whether I would be able to land a beginner-level job. Although I am very optimistic as at the end of the night, sun rises. With this I look forward to approaching this challenges with utmost determination and strive to enter the professional atmosphere and gain much needed experience from my seniors. 

**Would love if you guys can share your experiences and motivation or guide students like me towards landing their first job/internships!**

[LinkedIn](https://www.linkedin.com/in/jivtur/) `Open to Connect`
Skipping E2E tests
Published: 2022-11-24 01:54:36

As one of the submissions I had to do for my course was a contribution to some repository. I found one of my classmates worked on the [chunk](https://github.com/cuducos/chunk) repository so I decided to take a look at what kind of issues they have and found one that seemed to be suitable for me.

## Overview 
The [issue](https://github.com/cuttle-cards/cuttle/issues/192)itself was about putting some e2e tests to some code block that gonna be skipped on the CI, because these tests don't provide any additional value if you just run them on CI for each PR, but might be useful for some developers in some cases. 

## Implementation  
The repository maintainer recommended me to put tests that they don't want to run in "skip block". It turned out that you can do it using [desribe.skip](https://jestjs.io/docs/api#describeskipname-fn). I didn't know that it was a thing before so it was my many "take-away" from this task. 

## PR
When I was done I created the [PR](https://github.com/cuttle-cards/cuttle/pull/228) and now I wait for maintainers to take a look at it and hope it gonna be merged soon.
Dummy Proof: Callback Functions
Tags: beginners, callbackfunctions, javascript
Published: 2022-11-24 01:47:23

What is a callback function?
- A function passed as an argument inside of a function that will be executed later


When to use a callback ?
-  You can use callbacks in asynchronous functions, where one function has to wait for another function to invoke.



> Regular Function :

```
function name(argument){
   //do something 
}
```

> Callback Function :

```
//Defining functions
function prepare(ingredients, callback) {
       console.log("Preparing " + ingredients);
       callback();
}

//callback function
function chop(){
       console.log("Chopping");
}

//Calling the function
prepare("onions and garlic", chop);
```

```
function createQuote(quote, callback){ 
  var myQuote = "Like I always say, " + quote;
  callback(myQuote); // 2
}

function logQuote(quote){
  console.log(quote);
}

createQuote("eat your vegetables!", logQuote); // 1

// Result in console: 
// Like I always say, eat your vegetables!
```

Things to know about callback functions :
- It's a function that is passed as an argument to another function
- Does not have to be named 'callback' in the argument
- This function is called a higher-order function which contains the logic for when the callback function gets executed
- JavaScript has anonymous functions which lets you declare and execute functions without naming them.
- Callback functions can be anonymous functions 

<u>Resources:</u>
- https://www.freecodecamp.org/news/javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/#:~:text=As%20we%20can%20see%2C%20the,task%20as%20the%20example%20above.
- https://developer.mozilla.org/en-US/docs/Glossary/Callback_function#:~:text=A%20callback%20function%20is%20a,kind%20of%20routine%20or%20action.&text=The%20above%20example%20is%20a,as%20it%20is%20executed%20immediately.
- https://www.w3schools.com/js/js_callback.asp
Working on Seneca's VS Code extension
Tags: opensource
Published: 2022-11-24 01:37:22

This week I was working on my school's vs code extension which is open-sourced and hosted on the [github](https://github.com/Seneca-CDOT/vscode-seneca-college). 

## Overview
The feature I decided to implement came to somebody in the discussion in our school community and the [idea](https://github.com/Seneca-CDOT/vscode-seneca-college/issues/5) was to make some functionality that will allow people to have some 'header' with some student information on the top of it (some sort of header). It had to include the student's name, email, the path to the file etc. 

## How to implement
The perfect implementation that I had in my head was -> user creates the file and the header with information about him is automatically inserted on the top of the file. Unfortunately, we live in the real-world where I had almost zero knowledge about making vs code extensions so as the first iteration of this feature I decided to make just a code snippet. Luckily, vs code provided some good documentation about creating code [snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets) for your code extension and also I find one very useful [youtube video](https://www.youtube.com/watch?v=TGh2NpCIDlc&t=158s) about it. 

## Implementation 
Implementation itself wasn't very complicated and I just had to create the `.json` file with snippets, the snippet itself and associate the snippet with the project in `package.json` and list supported programming languages which will work with it. 
The snippet itself ended up looking like this:
```
"Student File Header Template": {
		 "prefix": "!fhead",
		 "body": [
		 "$LINE_COMMENT $RELATIVE_FILEPATH",
		 "$LINE_COMMENT Created on: $CURRENT_MONTH_NAME $CURRENT_DATE $CURRENT_YEAR",
		 "$LINE_COMMENT Student name: ${1:fullname}",
		 "$LINE_COMMENT Student email: ${2:email}@myseneca.ca",
		 "$LINE_COMMENT Course: ${3:coursename}",
		 "$LINE_COMMENT Section: ${4:section}"
		 ],
		 "description": "Place file header with student info"
		 }
```

## Testing 
The best way I found to test it was like this: 
I tested it manually way just by copying the project's directory and pasting it to the extensions folder in `~/.vscode/extensions` and reloading vs code after that. The newly created snippet `!fhead` should become available for you (refer to `package.json` for supported languages)

## PR
When I was done I created the [PR](https://github.com/Seneca-CDOT/vscode-seneca-college/pull/14), where some of my peers left some comments with some minor proposals, which I resolved and the PR got approved and merged.

## Conclusion 
I have never worked with vs code extensions before and I find this experience very interesting. I would love to work on this kind of project more.
Design inclusivo, gamificação, segurança e pessoas idosas
Tags: a11y, react, webdev, programming
Published: 2022-11-24 01:06:52

Em meados de julho desse ano tive a oportunidade de apresentar a pesquisa, para conclusão da minha graduação, realizada por aproximadamente 1 ano e meio. Ela foi intitulada como: A pessoa idosa e a segurança na internet - Design Inclusivo aplicado no desenvolvimento de uma ferramenta gamificada que estimula o uso seguro da internet. O objetivo da pesquisa foi desenvolver uma gamificação baseada nos princípios de design inclusivo, que tem como objetivo estimular pessoas idosas a utilizarem a internet de forma segura.

As telas foram projetadas no Figma, seguindo padrões de design centrado no usuário, principalmente os estabelecidos por Don Norman e visando tornar a aplicação acessível a todos, as diretrizes do WCAG foram adotados. Para o desenvolvimento foi utilizada a biblioteca Java Script, React. 

O mais legal foi poder estudar diversos assuntos e conecta-los na pesquisa, além disso, ao final do desenvolvimento a aplicação foi testada por pessoas idosas e obteve um percentual de aceitação e aprovação bem significativo por esses usuários! :)

Você pode conferir [aqui](https://drive.google.com/file/d/1QiZJnbf7rehXkx4XU7Omp5cbTrhOd4KP/view?usp=sharing) a monografia completa.

Você pode conferir o resultado final [aqui](https://mipiguedes.github.io/idoso-seguro/) (a experiência fica melhor se você acessar por meio de um dispositivo móvel, já que o objetivo era o desenvolvimento em telas menores).

[Repositório no Github](https://github.com/mipiguedes/idoso-seguro)

Obrigada por ler até o final! Tchauzinho ;)
Let's write stories together. | "Novel", a collaborative story-telling
Published: 2022-11-24 00:41:35

Hi folks,
hope you're doing well.

Recently I had this idea for a platform where people can create stuff together, and since I like writing, I decided to create ["Novel"](https://thenovel.netlify.app). A platform where folks like you write an story together, part by part.

When you open Novel, you can find stories create by others that you can collaborate on them, or even start your own story and let others join you on continuing it.

Novel is open-source so you can checkout its [source code](https://github.com/thevahidal/novel) and contribute on making it if you like.

Please let me know if you find any issues, or if you have ideas on how to improve it.

Take care, and I see you in the next one!
Next.js - Switch Theme Mode
Published: 2023-08-04 06:06:33

---
title: Next.js - Switch Theme Mode
published: true
date: 2022-11-24 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/javascript/nextjs/tips/add-theme-mode-switch-to-blog
---

## 前置

[【上一篇】](https://manon.icu/blog/javascript/nextjs/tips/build-blog-with-nextjs)完成了使用 Next.js 构建 blog。

**注意**

主题切换基于`chakra-ui`、`tailwindcss(可选)`，chakra-ui 和 tailwind.css 都内置支持颜色模式

> chakra-ui 将颜色模式变量值存储在`localstorage`中，以确保持久化

详细文档参考[Color Mode](https://chakra-ui.com/docs/styled-system/color-mode)

```bash
pnpm install react-icons
```

## 设置

新增`utils/theme.ts`

```ts
import {extendTheme, type ThemeConfig} from '@chakra-ui/react'

const theme = extendTheme({
  config: {
    initialColorMode: 'system',
    useSystemColorMode: true
  } as ThemeConfig,
  fonts: {
    heading: `'Dosis', sans-serif`
  }
})

export default theme
```

## 修改\_document.js

```tsx
// pages/_document.js

import {ColorModeScript} from '@chakra-ui/react'
import NextDocument, {Html, Head, Main, NextScript} from 'next/document'
import theme from './theme'

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang="en">
        <Head />
        <body>
          {/* 👇 Here's the script */}
          <ColorModeScript initialColorMode={theme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

新增`components/DarkModeSwitch/index.tsx`

```tsx
import {useColorMode, Box} from '@chakra-ui/react'
import {BsMoonFill, BsFillSunFill} from 'react-icons/bs'

const DarkModeSwitch = () => {
  const {colorMode, toggleColorMode} = useColorMode()
  return (
    <Box
      as="div"
      position="absolute"
      top={4}
      right={4}
      zIndex={9999}
      onClick={toggleColorMode}
    >
      {colorMode === 'light' ? (
        <BsMoonFill size={18} />
      ) : (
        <BsFillSunFill size={18} />
      )}
    </Box>
  )
}

export default DarkModeSwitch
```

修改`pages/_app.tsx`

```tsx
import dynamic from 'next/dynamic'
import Head from 'next/head'
import React from 'react'
import {ChakraProvider} from '@chakra-ui/react'
import theme from 'utils/theme'

// 新增
const DarkModeSwitch = dynamic(() => import('components/DarkModeSwitch'), {
  ssr: false
})

const App = ({Component, pageProps, router}) => {
  const {route} = router
  const url = `https://manon.icu${route}`

  return (
    <>
      <Head>
        <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=5"
        />
        <meta httpEquiv="X-UA-Compatible" content="ie=edge" />
        <meta name="description" content="Manon.icu,homepage" />
        <title>Manon.icu | Home</title>
      </Head>
      <ChakraProvider theme={theme}>
        {/* 新增 */}
        <DarkModeSwitch />
        <Component {...pageProps} canonical={url} key={url} />
      </ChakraProvider>
    </>
  )
}

export default App
```

[Source Code](https://github.com/Manonicu/blog-demo/tree/feat-switch-theme-mode)
Next.js - Add Next-seo
Published: 2023-08-04 06:04:53

---
title: Next.js - Add Next-seo
published: true
date: 2022-11-24 00:00:00 UTC
tags: 
canonical_url: https://manon.icu/blog/javascript/nextjs/tips/add-seo-to-blog
---

## 前置

[【上一篇】](https://manon.icu/blog/javascript/nextjs/tips/add-theme-mode-switch-to-blog)完成了使用 Next.js 构建 blog 并添加了主题切换功能。

好的 SEO 将有助于提高网站权重，带来更多流量。作为前端工程师的我们，就有着得天独厚的优势，我们不需要做到优化工程师的级别，我们只需要做好几个方面，就能完成一个网站 80%左右的 SEO 优化工作了～因为我研究下来发现 SEO 针对点大部分都是前端基础～

## 创建组件

创建`components/SEO/index.tsx`

```tsx
import {NextSeo} from 'next-seo'

export default function SEO(props) {
  const {url, cover, description, title} = props
  return (
    <NextSeo
      titleTemplate="%s - Manon.icu"
      openGraph={{
        type: 'website',
        url,
        description:
          description ??
          'The personal website for Manon, Frontend Web Developer.',
        site_name: title ?? 'Manon | manon.icu',
        images: [
          {
            url: cover ?? 'https://cdn.jsdelivr.net/gh/manonicu/pics@master/uPic/9oh25b.jpg',
            width: 900,
            height: 900
          }
        ]
      }}
      canonical={url}
      twitter={{
        handle: '@Manonicu',
        cardType: 'summary_large_image'
      }}
    />
  )
}
```

修改`pages/_app.tsx`，引入`components/SEO/index.tsx`，在`Head`下添加 SEO 组件，组件加上 props`url`

在 blog 内页同样引入，分别传入`title`、`description`、`cover`

```tsx
// pages/[...slug].tsx
// <SEO
//   title={title}
//   description={description}
//   cover={cover}
//   openGraph={{title, description}}
// />
```

[Source Code](https://github.com/Manonicu/blog-demo/tree/feat-seo)
A dream of scalable and enriched GraphQL subscriptions
Tags: graphql, javascript, redis, go
Published: 2022-11-23 23:44:21

In my last article, I wrote about our five-year journey with GraphQL at Pipedrive. Now, I’d like to tell you about a ten-year journey of delivering websocket events to the frontend. Hopefully, it’ll be of some help to you, too.

[Original post in Medium](https://medium.com/pipedrive-engineering/a-dream-of-scalable-and-enriched-graphql-subscriptions-724284448e65)