teleren/devto huggingface dataset:
New Jekyll Plugin for Link Attributes
Tags: jekyl, ruby, seo, rubygem
Published: 2022-11-11 16:01:21

Our website uses [Jekyll](https://jekyllrb.com/), a static site framework. 
I chose Jekyll to help us manage a large amount of content.
Managing all of our site content in a code repository means we can manipulate all sorts of things with a little bit of code.

One thing I've wanted to do is ensure that all of our [external links](https://moz.com/learn/seo/external-link) default to having reasonable attributes.
For example, all of our external links have a `rel="noopener"` attribute to prevent [tabnabbing](https://developers.google.com/web/tools/lighthouse/audits/noopener).
I also  wanted to add a `target="_blank"` attribute so external links open in a new tab instead of sending visitors away from our site.

Adding the attributes to every link on the site was cumbersome, and we would miss some links sometimes.
Though my primary goal was to increase consistency across all of our pages, proper link attributes also offer some minor [SEO benefits](https://moz.com/blog/nofollow-sponsored-ugc).

I found a Jekyll plugin that would do most of what I wanted, but it was not compatible with the latest Jekyll version.
Instead of settling for a partial solution and trying to make it work with our site, I decided to create a new plugin.

The [jekyll-link-attributes plugin](https://github.com/twinsunllc/jekyll-link-attributes) automatically adds your desired `rel` and `target` attributes to all external links on your site.
This happens during the build process, ensuring we catch every external link every time.

The plugin's default configuration is a good place to start, but it is easy to customize your link attributes.
You can add any `rel` or `target` attribute you like and exclude links that you don't want to modify.
If you use Jekyll, [give it a try](https://github.com/twinsunllc/jekyll-link-attributes)!
I wanted to learn typescript so I built an npm package
Tags: typescript, webdev, javascript, programming
Published: 2022-11-11 15:33:30


So you want to learn typescript 🤔

You don't want to read the 30 min handbook because reading is boring 😃

I have have the perfect solution for you... 

.
.
.
.
.
.
.
.
.


🤓🤓🤓 Create a very complicated [data-structures npm package ](https://www.npmjs.com/package/@ahmeds.gaafer/ts-data-structures)fully document & test it. And create a full ci/cd pipe line to automate the docs and the tests and take 3 month doing that 🤓🤓🤓

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


That is exactly what I did and I love doing it 
although the learning curve of the basics of the new subject is slower but the knowledge that I gained creating the npm package it huge.

I learned:
 - typescript ofc
 - testing typescript with jest
 - how amazing strongly typed JS is
 - how to publish a TS package that works on both TS and JS
 - data structures in depth
 - documentation 
 - CI/ CD

And more… 

all of this from a single side project.

Check out the package here and tell me what you think.

https://www.npmjs.com/package/@ahmeds.gaafer/ts-data-structures
Being a Developer Advocate: Week 10
Tags: devrel, learninpublic
Published: 2022-11-11 15:30:04

This week it was conference time again. The last two days I spend all over the place. But let me structure that for this post ☺️

## Conference ct <webdev>
This is a front-end-centric conference with lots of niche talks. I could not follow some talks because of that 😅

Interestingly it had three talks and one keynote about accessibility. This seems to gain traction in Germany. I learned a lot about how to **not use** Personas to model your audience. [Check her webpage out!](https://www.marievandriessche.nl/)

Then I learned a ton about keyboard accessibility from Tanja Ulianova.

And after my talk Lenz Weber-Tronic, the one with the geekiest name I know of explained to me how he uses the [accessibility tree](https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/test-accessibility-tree) to automate his tests with Playwright.

My favourite talk was from [Ulrike Rausch](https://liebefonts.com/about) about _Fonts_. She showed how she creates fonts and what is possible. The examples where nothing short of amazing!

## Getting into Giving Feedback
Most often Developer Advocates are the ones giving talks at conferences. At least that is what you see. While this is one part there is an equally important one.

Advocating for developers using your product _internally_!

I am getting into this by testing functionality, giving feedback on documentation, and helping our community out.

Sometimes this is funny, sometimes it is tedious because you try to figure out stuff and the documentation confuses you. Then you start to write a blog post explaining how this feature can help users to achieve more. Only to find out that it does not work as you understood earlier 🤓

Either way, it feels great to be involved in so many different things!
Pulse —CSS Animation
Tags: css, webdev, design
Published: 2022-11-11 15:27:53

A pulsating circular element in the UI is an indicator of something real-time. Adding such an element next to charts with constantly updating data is a fine visual cue.

- Box Shadow: Cast shadow around the element
  ```css
  /* offset-x | offset-y | blur-radius | spread-radius | color 
  */
  box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
  ```

- Scale3d: Resize the element in 3D space
  ```css
  scale3d(sx, sy, sz)
  ```

{% codepen https://codepen.io/deepakdevanand/pen/qBKbpPV %}
Product Development Life Cycle
Tags: ux, design, product, writing
Published: 2022-11-11 15:14:26

The process used to take a product from an idea to reality.

**1. Brainstorm**
An active discovery stage that's all about generating ideas about the user and the potential needs or challenges the user might have.

**2. Define**
Using the insights from the brainstorming stage and starting to narrow the focus.

**3. Design**
Implementing insights into new designs using various tools

**4. Test**
Evaluating the product design based on the feedback of potential users

**5. Launch**
Sharing a finished version of the product with the public

---

{% user moazamdev %}
I Need help with typescript classes
Tags: typescript, node
Published: 2022-11-10 17:04:58

Someone may help me?

I'm learning typescript and I have some trouble with classes.
here's my code:

Command Class
```js
import Diagram from "../diagram/Diagram";
import MainEngine from "../MainEngine";
import { CommandData } from "../managers/CommandManager";
import User from "../core-models/UserModel";

export default abstract class Command<D>{
    function: Function;
    data: D;
    user: User;
    engine: MainEngine
    diagram: Diagram
    constructor(commandData:CommandData){
        this.function = async () => {};
        this.data = commandData.data;
        this.user = commandData.user;
        this.engine = commandData.session._engine;
        this.diagram = commandData.session._diagram;
    }

    public async execute(){
        await this.function();
    }

}
```
and This CommandGetVncUrl that extends Command<any>

```js
import Command from "./Command";
import { CommandData } from "../managers/CommandManager";
import ResponseCommand from "./ResponseCommand";

export default class CommandGetVncUrl extends Command<any>{
    
    constructor(commandData:CommandData, response:ResponseCommand){
        super(commandData);
        this.function = async () => {
            try {
                const device = this.diagram.selectDeviceById(this.data);
                if(device){
                    const url = await this.engine._cloudMngr.getConsoleUrl(device.getDeviceData(), this.user);
                    response.setData({url}).send();
                }
            } catch (error) {
                throw Error();
            }
        }
    }

}
```

when I call the function .execute() I have this error:

Property 'execute' does not exist on type 'CommandGetInstanceStatus | CommandDiagramLoad | CommandCreateInstance | CommandChangeDevicePosition | ... 10 more ... | CommandReboot'.
  Property 'execute' does not exist on type 'CommandCreateLink'.

74         await this.make(commandData)[commandData.command].execute();
How to Make a Responsive Education Website Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-11-11 15:01:16

{% youtube _7X7D631uQU %}

How to Make a Responsive Education Website Using HTML CSS JavaScript

This video will show you how to build a responsive education website using html css javascript

---


⏱️ Timestamps
-----------------------------
0:00 - Demo
4:12 - Download starter file
5:18 - Project initial
11:57 - Preloader
17:48 - Header
36:34 - Hero section
45:28 - Category section
55:36 - About section
1:03:09 - Course section
1:16:17 - CTA section
1:18:14 - Footer
1:27:28 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Function Friday – Chunk, Sort & Reverse
Tags: development, flow, functionfriday, powerautomate
Published: 2022-11-15 16:32:44

---
title: Function Friday – Chunk, Sort & Reverse
published: true
date: 2022-11-11 15:00:00 UTC
tags: Development,flow,FunctionFriday,PowerAutomate
canonical_url: https://barretblake.dev/2022/11/function-friday-chunk-sort-reverse/?utm_source=rss&utm_medium=rss&utm_campaign=function-friday-chunk-sort-reverse
---

Power Automate has added a number of new expression functions and features recently. This time around I’ll take a look at three of those new functions: chunk, sort and reverse.

## Chunk

The chunk function lets you break up strings or arrays into blocks of equal length. The format is as follows:

```
chunk(<string>, <length>)
chunk(<array>, <length>)
```

The first parameter is the string or array you want to break apart. The second parameter is the length you want for each chunk. The result that is returned is an array of chunks. If the array or string doesn’t break apart evenly based on the requested length, the remainder will be in the last array element.

Examples:

```
chunk([0,1,2,3,4,5,6,7,8,9], 3) // returns [[0,1,2],[3,4,5],[6,7,8],[9]]
chunk('Hello there my friend', 5) // returns ['Hello',' ther','e my ','frien','d']
```

## Sort

This one is a long overdue function. It does exactly as promised. It takes an array of objects and sorts them. The pattern is as follows:

```
sort(<array>, <sortBy>)
```

The first parameter is the collection of objects you want to sort. The second parameter is optional and defines the key you want to use for sorting the objects. This parameter is only needed when the collection is an array of JSON objects. For arrays of numbers or strings, the sorting is done as you would expect, by numerical order or by alphabetical order.

Examples:

```
sort([1,5,3,2,0]) // returns [0,1,2,3,5]
sort(['Frank','Garth','Albert','Amanda','Emily']) // returns ['Albert','Amanda','Emily','Frank','Garth']

sort(createArray(json('{ "first": "Amanda", "last": "Blake" }'), json('{ "first": "Caleb", "last": "Anders" }'), "last")  
   // returns [{ "first": "Caleb", "last": "Anders" }, {"first": "Amanda", "last": "Blake" }')]
```

## Reverse

Another long overdue function, reverse takes a collection and returns it in reverse order. The pattern:

```
reverse(<array>)
```

Example:

```
reverse([0,1,2,3,4]) // returns [4,3,2,1,0]
```

It doesn’t matter what the array data type is. This function just reverses the order of the elements in that array.

## Conclusion

So there we have 3 of the new functions for Power Automate. While the usefulness of chunk is somewhat limited, sort and reverse have been wanted for quite a long time and they will come in quite handy for many use cases. I’m glad to see them finally arrive.

The post [Function Friday – Chunk, Sort & Reverse](https://barretblake.dev/2022/11/function-friday-chunk-sort-reverse/) first appeared on [Barret Codes](https://barretblake.dev).
3D cubes
Tags: codepen
Published: 2022-11-11 14:44:14

{% codepen https://codepen.io/ricardo55833438/pen/eYyKzJr %}


Joder

{% embed https://glitch.com/edit/#!/part-1---boilerplate?previewSize=100&attributionHidden=false&sidebarCollapsed=false&path=index.html&previewFirst=false %}
Verifying identity
Published: 2022-11-11 14:34:52

---
title: Verifying identity
published: true
description: 
tags: 
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-11 14:34 +0000
---

https://keyoxide.org/6529B08F20194D84FFAC7C5850F46247289D3110

(please feel free to ignore this!)
The best sources for AI news updates?
Tags: discuss, ai, bot, news
Published: 2022-11-11 14:32:39

It could be a Twitter account, an online blog, a YouTube channel, news site, or literally any other online source.

I'm compiling a list of the best sources of AI news updates and possibly creating a bot (open source, of course!) that curates the news and updates any subscribers.

Currently, I know of @ai__pub on Twitter, but I'd like multiple new sources.

Example: (@ai__pub on Twitter):
{% embed https://twitter.com/ai__pub/status/1587077146182238208 %}

All suggestions welcome, thanks in advance!
MySQL Learning websites
Tags: mysql
Published: 2022-11-11 14:24:33


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

[w3Schools](https://www.w3schools.com/mysql/default.asp)
[sqlbolt](https://sqlbolt.com/)
[sqlzoo](https://sqlzoo.net/wiki/SQL_Tutorial)
[databasestar - sql-practices links ](https://www.databasestar.com/sql-practice/)
[w3resource](https://www.w3resource.com/mysql/mysql-tutorials.php)
[quackit](https://www.quackit.com/mysql/tutorial/)
[techonthenet](https://www.techonthenet.com/mysql/index.php)
[javatpoint](https://www.javatpoint.com/mysql-tutorial)
I updated my Portfolio (based on Feedback)
Tags: webdev, showdev, career, javascript
Published: 2022-11-11 14:23:55

I've updated my Portfolio quite a bit, based on the amazing feedback this community has given me

The site features an improved About me section and is totally responsive 
It also has an improved dark mode interface and title attributes on the navigation icons

To those who missed the previous post or the link to the site
https://abhijitbiswas.deta.dev

There are a few things left out such as making the site accessible. I will work on these in future updates

__Note: Trying the console way of checking responsiveness doesn't work unless you reload the page with the mobile responsiveness feature of the console on__

## Any and All Feedback Would be Appreciated :smile:
How do you glue APIs together?
Tags: discuss, productivity, programming
Published: 2022-11-11 13:56:44

Say you want to connect two or more APIs, for example:

- Whenever someone submits a form on our website, add their contact to HubSpot (or other CRM) and email them.
- When someone gives a star to my repository on GitHub, send me a Telegram message.
- Post a tweet when there's a new post on our blog.

**How do you connect these different API integrations together?**

Do you use some low-code platform like Zapier, [n8n](https://n8n.io/), or [Node-RED](https://nodered.org/)? Or do you prefer to “glue” the code manually? Or do you have a magical framework which does the hard work for you?

And importantly, how much you like/hate your current approach, and how do you think it _should_ work?

I am curious to know!
SvelteKit with Vercel and Supabase
Tags: sveltekit, vercel, supabase, webdev
Published: 2022-11-11 13:53:12

I've been learning how to create SvelteKit apps with Vercel and Supabase, and although the Supabase docs are great, there's a couple gotchas.  If you follow the Supabase Quickstart for SvelteKit, it starts by asking you to create a SvelteKit Skeleton Project.  It says you don't need typescript, which is true in general, but the example files in the quickstart do use typescript.  So to start off as smoothly as possible, you should choose `Yes, using Typescript syntax` when creating the SveltkeKit app.

The most important gotcha is in creating `src/lib/supabaseClient.ts`, which according to the quickstart should be

```
import { createClient } from '@supabase/auth-helpers-sveltekit'
import { env } from '$env/dynamic/public'

export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
```

My experience was this worked locally but not in production, and I couldn't definitively determine why.  I believe it has to do with server side rendering working differently in the two environments.  You get a `supabaseUrl is required` error, and there are various reports of problems around this scenario online.  Some of the solutions seems to be red herrings for this exact configuration, like using `.env.local` rather than `.env`, or prefixing the environment variables with `NEXT_`, which don't apply to SvelteKit.  I got it working with the following `supabaseClient.ts`

```
import { createClient } from '@supabase/auth-helpers-sveltekit'
import {PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY} from '$env/static/public'

export const supabaseClient = createClient(PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY)
```

It's not clear why the server side version is necessary; it may have to do with the build process, and something that needs to be done differently with Vercel.  Note that I also had to add these two environment variables to the Vercel settings.  That may be fairly obvious, but still worth noting when just following the Supabase quickstart guide.
This Week In Python
Tags: python, thisweekinpython, discuss
Published: 2022-11-11 13:43:14


**Fri, November 11, 2022**


This Week in Python is a concise reading list about what happened in the past week in the Python universe. 

**I have received some good suggestions for this week's content. Thank you.**

**Did I miss anything from the Python universe this week? What did you read or tried out?**



## Python Articles


- [Python Asyncio: The Complete Guide](https://superfastpython.com/python-asyncio/)
- [Develop your pipelines as code with the Dagger Python SDK](https://dagger.io/blog/python-sdk)
- [Good old-fashioned code optimization never goes out of style](https://pythonspeed.com/articles/old-fashioned-software-optimized/)
- [Greedy vs. Lazy Operators in Regex (Python) ](https://python.plainenglish.io/greedy-vs-lazy-operators-in-regex-python-2b63729d7a0)
- [Trie in Python](https://softwaremaniacs.org/blog/2022/11/10/python-trie/en/)
- [Custom Sorting of Django Models](https://tech.s2k.digital/2022/10/custom-sorting-of-django-models/) *





## Projects



- [dinghy](https://github.com/nedbat/dinghy) – A GitHub activity digest tool
- [socketify.py](https://github.com/cirospaciari/socketify.py) * – Bringing WebSockets, Http/Https High Peformance servers for PyPy3 and Python3
- [dubbing-ai](https://github.com/mfranzon/dubbing-ai) * – dubbing a video in many languages and with many different voices with the power of the AI
- [drgn](https://github.com/osandov/drgn) – Programmable debugger
- [hstream](https://github.com/conradbez/hstream) – Streamlit alternative using htmx 


**Did I miss anything from the Python universe this week? What did you read or tried out?**
My first post...
Published: 2022-11-11 13:38:38

Yikes! So I've signed up to a bootcamp and they recommend I keep a blog of everything I'm trying to learn to hopefully benefit others.

I've been in Web development for about 20 years, I've suffered from _imposter syndrome_ for almost my whole career.

I joined the bootcamp to upskill or at least get my foot into trying out a different career path that the one I've been on. 

For the past 10 years or so, I have been the solo dev (often), for a small clothing company here in the UK. We used Magento 1 & 2 but they decided to move over to Shopify. Whilst I am still doing some web dev, it's not what I enjoy and I really just want to get back into "proper" web development - in my mind, that's coding away, in an IDE, debugging. I mean, I still kind of do that, but it is not a dedicated role.

Anyway, this is my first blog post. I would love to look back after the bootcamp has finished and reflect on this post. Hopefully for the better as things progressed.
Why TabIndex = '0' in Divs for keyboard events (onKeydown) in js ?👨‍🎓
Tags: javascript, react, productivity, programming
Published: 2022-11-11 13:37:41

## First thing first What and Why TabIndex?

TabIndex is a property in js to let the computer know that keyboard button has been pressed. In HTML, mostly forms are focus types but not divs. In order to detect any key has been pressed or not JavaScript expect the element must in focus to detect any input. 

**TabIndex** is a global attribute that tell the browser that this element can be focused.

For example if you want to know the keycode and key on onkeydown event you can check the below code.

```js
function App() {

  const [toggle, setToggle] = useState(false);
  const [history, setHistory] = useState([]);
  const [exp, setExp] = useState('');
  const [result, setResult] = useState('');


  const handleKeypress = (keyCode, key) => {
    console.log(keyCode, key);

  }

  return (
    <div className='app' data-theme={toggle ? 'dark' : ''}
      tabIndex='0'
      onKeyDown={e => handleKeypress(e.keyCode, e.key)}>
      <div className='body'>
        <div className='navbar'>
          <div className='navbar-toggle-body'>
            <div className='navbar-toggle' onClick={() => setToggle(!toggle)}>
              <div className={`navbar-toggle-circle ${toggle ? 'navbar-toggle-circle-active' : ''}`} />
            </div>
            {toggle ?
              <p>🌙</p> : <p>🌞</p>
            }
          </div>
        </div>
        <Header />
        <Keypad />
      </div>
    </div>
  );
}

export default App;

```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmvimhe5ff3ynq7tsr2r.png)
Walkthrough: Building An Angular App Using Tailwind CSS and Nx
Tags: angular, nx, tailwindcss, typescript
Published: 2022-11-11 13:35:22

🔥 New video 🔥

Walkthrough: Building An Angular App Using Tailwind CSS and Nx 

🖌 Tailwind CSS setup and usage
⚙️ Nx monorepo configuration 
🧍‍♂️ Standalone components
✅ Building a complete app in less than 2 hours with best practices

{% embed https://youtu.be/JpfdDBggtho %}
Follow Friday: Productivity Edition (11 November 2022)
Tags: meta, writing, productivity
Published: 2022-11-11 13:26:00

_Happy Friday, friends! 🎉 Follow Friday is your weekly opportunity to shout out fellow DEV Community members doing awesome work. Check out the comments and follow someone new!_

Getting things done! It's hard! Especially if your brain is [neurodivergent](https://www.verywellmind.com/what-is-neurodivergence-and-what-does-it-mean-to-be-neurodivergent-5196627) and/or bogged down by the mental load required by other areas of life. 

Thankfully, lots of your fellow developers have been designing, testing, and refactoring their productivity methods alongside their code. From [pomodoros](https://en.wikipedia.org/wiki/Pomodoro_Technique) to [eating the frog](https://todoist.com/productivity-methods/eat-the-frog), there are no shortage of methods out there to try if you're having trouble getting things done.

So, devs: who are your favorite DEV community members sharing productivity tips and tricks?

_**Formatting tip**: to populate a card with a follow button, use the liquid tag syntax `{% embed https://... %}` and insert the URL of your favorite author's profile._

Join in on the #FollowFriday fun by @mentioning your favorite author to follow on the topic of productivity (and letting us know why you love their posts!) ⤵️