teleren/devto huggingface dataset:
Try to exploit this Rexex match to run XSS if you can
Tags: regex, webdev, challenge, help
Published: 2021-01-08 21:59:39

I am making a Regex match that needs to detect executing JavaScript functions or setting variables in a string. It basically detects if a string would run a function or set a variable before it evaluates it.  
Here is the current Regex
~~~regex
/(([^+-\=\*\/\%\|\<\>\! ])( +)?\(|=>|[^=!<>]=[^=])/
~~~
If you can get a string to execute a function or set a variable without this matching it, please comment with what that string is so I can find volrabilities in it. Test it out in [RegExr.com](https://regexr.com/5jt5b).
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/admof4lb4ucxabwpbu11.png)
Dark mode would be better if... (especially in dev.to)
Tags: meta, darkmode, webdev, discuss
Published: 2021-01-08 21:50:44

- Device-specific (rather than user-specific)
- Not really dark, more like sepia or dark-brown (I love [awsm.css](https://igoradamenko.github.io/awsm.css/) on this)
- Powered by lightness measurement sometimes, rather than fixed colors
- Community themes
What is the Dom, the Virtual Dom, and the Shadow Dom
Tags: javascript, webdev, html
Published: 2021-01-08 21:37:52

There is confusion out there between these three terms. The DOM is an absolutely integral portion of modern web development, and knowing how to differentiate the three and knowing when to use these is crucial for being an effective web developer.

## The DOM

So when you have markup on your page with HTML, your browser compiles all that into a Document Object Model which we abbreviate to the DOM. This is an application programming interface (API) that the browser gives you in order to be able to interact with the contents that are rendered on the page. 

This sounds more complicated than it is, because at its simplest, you can throw an html file into a server and what will come out are those contents rendered, just like you wrote them. You can think of the DOM as the way that the html is presented to you when you inspect your browser window and go to the elements tab.

## The Virtual Dom

The virtual DOM is like the regular DOM, except that it is held in JavaScript memory. What that means is that the virtual dom has all the properties of the regular HTML elements that you usually see on the page, except that the browser has not rendered them. You can't actually see it, but you can interact with it through JavaScript. This is how frameworks like react, vue and angular make web pages with high degrees of interactivity. If you turn off JavaScript and load a react application, you might find a single DOM node and a blank page. 

This allows many different and cool things for web applications. Not having to worry about rerendering every time that something is changed, allows frameworks like react to update only the nodes which have changed when the data gets updated. These diffing algorithms are extremely powerful and make these frameworks very effective ( ...and sometimes fast!). 

# The Shadow Dom

The Shadow DOM is something completely different than the virtual DOM. The shadow DOM is a browser specification for building completely isolated HTML elements that are not affected by the styles that are currently affecting the rest of the page. It is one of the specifications that are aiming at making modular HTML components which can be imported into and out of different documents. 

I'd say that this is not so popular in enterprise applications, but it allows for building HTML without the overhead of frameworks through the [Web Component Specification](https://developer.mozilla.org/en-US/docs/Web/Web_Components#shadow_dom). It can be tricky if you encounter it and don't know how to use it, but very helpful if you use it deliberately.

Hope that this helps you out if you are having trouble figuring out the differences.
How complex are your URL querystrings? And how do you encode it? Also, do you validate it?
Tags: discuss, webdev, restapi
Published: 2021-01-08 21:33:52

Does it have

- Unicode? non-ASCII characters? (e.g. CJK, cyrillic, Thai)
- Arrays? (I know there are multiple ways, but standard or "should do" is???)
- Integers?
- Booleans?

What about logging on the server? Is it human-readable?

I know there is Rison, but I don't think it is popular...

Also, `encodeURIComponent` is neither strict, nor as lenient as possible...

This is the thought to another topic. I realized that max safe length of URL encoded GET or DELETE might be around 2000 characters. But, what is really the "SHOULD NOT exceed" length?

{% post https://dev.to/patarapolw/what-if-i-don-t-use-get-and-delete-df3 %}
The 10 Best Ways to SEO Audit Your Store for Free
Tags: solidus, ecommerce, ruby, rails
Published: 2021-01-08 21:31:31

{% youtube r_5HEJtA8I0 %}

Thomas Sample of Karma Creative shares some SEO wisdom in this workshop held at SolidusConf 2020.

A step-by-step walkthrough of an SEO Audit and a workshop to learn more about SEO. Find out what's new in 2020 and grab the low-hanging fruit for your Solidus Store. We'll focus in on the most important tips this time to make sure we see results by the end of the session.
Collab Space - DigitalOcean App Platform Hackathon Submission
Tags: dohackathon, node, react, socketio
Published: 2021-01-08 21:16:53

## What I built
#### Collab Space

### Category Submission
Built for Business


### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/alzc32cr20gbnnpp9mq1.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/0jrx3ccbdsv55waa448k.png)    
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/bnqsg1w24e8e4xxurlrf.png)

### Description
An interactive, synced workspace for collaborative doodling and chat.
Users can create a common workspace which can accessed by a WorkspaceName and Password. 
Members of the workspace can work on and edit the same whiteboard as well as chat with each other.

### Link to Source Code
https://github.com/AllanMwirigi/collab-space-frontend
https://github.com/AllanMwirigi/collab-space

### Permissive License
MIT

## Background
With the pandemic, a lot of activites are going online. I wanted to build something that would help work collegues to interact, collaborate and share their ideas online.

### How I built it 
It is built in React and NodeJs.
It uses Socket.Io to handle the interactivity.
It is hosted on DigitalOcean App Platform. This was probably the easiest deployment I have ever made!


### Additional Info
Also implemented video calls with PeerJs. But this has a few performace issues and bugs, so I've left it out for now.
I will fix these in due time.
Vue3 event emitter
Tags: vue, mitt, emitter, vue3
Published: 2021-01-08 20:51:19

I recently have been asked to make micro-frontend with webpack plugin [Module federation](https://webpack.js.org/concepts/module-federation/)
This micro-frontend used vuex library before, but it was used only for opening/closing modals.

So we tended to replace it with something more simple.
Among our candidates was [mitt](https://github.com/developit/mitt), which is very tiny library.
```javascript
import mitt from "mitt";
export const emitter = mitt();
```

Our first try was register emitter in mounted lifecycle method.
```javascript
export default defineComponent({
...
  mounted() {	
    this.emitter.on("open-modal", name => {	
      this.shouldDisplay = name === ModalType.ThankYou;	
    });	
  },
...
```
This works only if you use emitter in another component, but if you want emit outside of vue component, it does not work.
This is probably caused, because you have to have instance of Vue app and if you use recommended [getcurrentinstance](https://v3.vuejs.org/api/composition-api.html#getcurrentinstance) you get null outside of vue components.

If you want to use it like we do, with hooks
```javascript
import {emitter} from "../utils/emitter";

export const useModal = () => {
  const openModal = (name: string) => {
    emitter.emit('open-modal', name)
  }
  const closeModal = () => {
    emitter.emit('open-modal', '')
  }
  return { openModal, closeModal };
}
```
You have to register event listener also with hook

```javascript
<template>
  <Modal :isOpen="shouldDisplay" @close-modal="closeModal">
...
  </Modal>
</template>

<script lang="ts">
...
export default defineComponent({
  name: "CustomModal",
  components: {
    Modal,
  },
  setup() {
    const {closeModal} = useModal();
    onMounted(() => {
      emitter.on("open-modal", name => {
        shouldDisplay.value = name === ModalType.ThankYou;
      })
    })
    return {
      closeModal,
      shouldDisplay,
    };
  }
});
</script>
```

Do you have also experience with event emitter?
Share your ideas.
Extremely Online People
Tags: devadvocacy, industry, life, uncategorized
Published: 2021-01-08 23:23:23

---
title: Extremely Online People
published: true
date: 2021-01-08 19:04:00 UTC
tags: DevAdvocacy,Industry,Life,Uncategorized
canonical_url: https://heidiwaterhouse.com/2021/01/08/extremely-online-people/?utm_source=rss&utm_medium=rss&utm_campaign=extremely-online-people
---

I’m writing this the night of January 6, 2021. It won’t be posted tonight, because it’s not what anyone should be paying attention to. It’s useful to me to write something else, think about something other than a coup, a putsch.

I am Extremely Online. If you follow me on Twitter, you are already aware of this. I roll over in the morning and pick up my phone to read what’s happening in the world, and I lock myself out after midnight lest I scroll forever. It’s not just Twitter, it’s news apps and other sources.

When Minneapolis erupted over the police murder of George Floyd, the second thing I did was write my social media team and ask them to stop our automated, scheduled tweets and promotions, because it’s not ok for us to be interjecting our conference announcements in the middle of a nation’s pain.

I wrote in and did the same thing tonight, and I’ve written a note for myself, for when we go back to work:

> We need a kill switch for all scheduled media, to use in the event of national or international crisis.

This is not about “I’m awesome at my job”, this is about “your team needs an extremely online person who has the authority and capacity to halt posting”. I mean, preferably you would have several, on a on-call style rotation, but let’s start with the basics.

Social media is hard. I mean really hard. We joke about the “interns who run the Twitter account”, but these are dedicated professional teams who do a lot of workshopping, study, theory, and brand education. It’s not really a joking matter. Except for the days you workshop whether My Little Pony or Spongebob is the right meme response. I am only on the very fringes of Brand Media Land, and mostly it happens because I care about other humans in the world, my company, and our brand, in that order. I can look into it and see complexity all the way down, like a Mandelbrot set. If you have that team, I want you to respect the heck out of them. And as part of respecting them, I want you to empower them to turn off whatever posts they have queued, without asking for permission up the chain.

And people, I know it’s not that easy. There are bidding markets that work in the millisecond and fraction of a cent to get ads on pages, and it’s not possible to repopulate all that. But look at what you _can_ do, what your scheduling tool for Facebook and Twitter and LinkedIn looks like, and have a plan to stop that schedule. Because if your cheery tweet about signing up for a chance to win a pair of headphones is directly under news footage of someone being murdered, that’s fucked up.
Go Corona Go - 3d web game
Tags: dohackathon, javascript, webdev, gamedev
Published: 2021-01-08 20:10:56

## What I built
I built a 3D game and named it **Kill The Corona**. 

### Category Submission: 
Random Roulette

### App Link
https://kill-the-corona-xbug9.ondigitalocean.app/

### Screenshots
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/9pmm7e3hpx1g13xf37ks.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/h889wjdyxbk5hoxic7cb.png)
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/af5dar3x0jjuzk0o0mcm.png)
{% youtube pPtrmhUOXFM %}

### Description
It's a timepass game and I think it's a bit addictive too. You have to shoot the corona 3d model floating in the air, and also have to stay safe from the virus balls coming toward you by shooting them or dodging them (No score for hitting the ground balls).

### Link to Source Code
{% github Maulikdes/kill-the-corona no-readme %}

### Permissive License
[MIT](https://github.com/Maulikdes/kill-the-corona/blob/main/LICENCE)

## Background
As a kid, it was my dream to create a game and it's also a reason I am in the software development field. So here I am submitting the game I've created for the DOHackathon entry. I first created the game and I got an idea about the corona theme, so I have added corona models and virus texture on the objects and so.

### How I built it 
I have used DigitalOcean for the first time, I don't have much idea of other features that DigitalOcean provides but it was pretty easy to deploy the app and I really liked it. I wanted to work on Three.js for a long time, I really dived into the 3d world and learned a lot about 3d objects, models, and the rendering process. Honestly, I was frustrated a few times calculating and setting the coordinates in 3d. But everything is set now and I can now take revenge on the corona.

### Additional Resources/Info
People who haven't yet checked out how cool Three.js please just have a look https://threejs.org/. I got this theme idea from my nephew, who recently dressed as coronavirus in his school fancy dress competition
{% youtube vF8xv3RK-EQ %}
Objects in JavaScript
Published: 2021-01-08 20:10:37

##Intro
Objects are a collection of properties
```javascript
let james = {
name: 'james';
age: 30;
email: 'james@jamesmail.com';
location: 'Britan';
}
```
so as you can see james here has multiple properties and that makes him an object.
we can also put strings equal things within objects
```javascript
let james = {
name: 'james';
age: 30;
email: 'james@jamesmail.com';
location: 'Britan';
"Cup o'": 'joe';
}
```

##Accessing values
to access all the values is not that hard  its just
```javascript
console.log(james)
```
and all of the values will show up
but lets say you only want to access one of the values and not all of them. well we use dot notaion for that 
```javascript
james.name
james.age
```
this will show just the age and just the name

##Adding Properties to an object
By using dot notation we can add variables
```javascript
let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.type = "acoustic";
```
Bracket notation will also work
bracket notation is just dot notation but with different syntax
```javascript
let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitar["type"] = "acoustic";
```
in the same way you can update certain properties and change them with dot and bracket notation
```javascript
let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.strings= 7;
```
##removing properties
using the keyword "Delete" you can delete certain properties

##Property check
Checking for properties within objects is pretty easy with the command
```javascript
prop in objectName
```
within this you can check if a object has a certain value
so lets check in james
```javascript
age in james
```
this will show up  as true because the variable age shows up in the object james

For properties in const we have a strange result
putting 
```javascript
const Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.strings= 7;
```
this will cause an error, trying to change one of the variables but
```javascript
let Guitars = {
  Strings: 6;
  in stock: 70;
}

guitars.type= "acoustic";
```
we can add properties to it with no problem
Completing My First Assignments
Tags: ruby, assignment, operations, newbie
Published: 2021-01-08 20:02:31

`epiphany = "When assigning, Always put the thing you're assigning into on the left"`

###I'm actually learning something!

So it's been a couple of weeks, of working in Ruby and honestly it's been pretty cool. I've been working with some variables, some methods, even started writing out simple classes.

But every now and then I was getting these crazy bugs. I would get errors like "Undefined Method" or I would have arrays with some of the objects missing. It would drive me up the wall!

Then I realized the mistake I was making.

#Do Your Assignment Operations in the Correct Order

You see, I was thinking of the assignment operator the wrong way. It looks like an equals sign (Well, it technically is but that doesn't mean it functions the same way) so in my head I was treating it as "equals". Of course I know about "==", but in my head everything on both sides of "=" was the same. I was thinking of it as setting one thing "equal" to the other.

##"=" doesn't work like it does in math class.

But, that's where I was getting hung up. You're not setting them "equal" to each other. You're "assigning" the thing on the left to be the thing on the right. 

##That operator is directional

By flipping the order (or ignoring it) I was assigning things like array indexes or string objects (you know, the very values that I was trying to keep) to be empty variables. No wonder my code kept breaking!

So that's my `epiphany`. Use the assignment operator in the correct order, and you can avoid ruining your code!
Hugo - My DOHackathon submission
Tags: dohackathon
Published: 2021-01-08 19:53:22

## What I built
I build a website that helps you send *special hugs* to your loved ones! You're no longer limited by sending a gif of a hug, with Hugo you can send hugs they will *actually feel*!

### Category Submission: 
Program for the People

### App Link
[https://hugo-ptrq2.ondigitalocean.app/](https://hugo-ptrq2.ondigitalocean.app/)

### Screenshots
<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/sajuioz9mtrvucp6xjsm.jpg"><figcaption>Mockups</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/ieg26jhlwv7i0yfmew09.jpg"><figcaption>Hug making pages</figcaption>
</figure>

<figure>
  <img src="https://dev-to-uploads.s3.amazonaws.com/i/fji23sh2fy5j0hhxfe7b.jpg"><figcaption>Hug viewing page</figcaption>
</figure>

### Description
How do you go by doing something like that? you may ask, well it's simple, haptic feedback (more specifically vibration).
You can record a hug, and send it to anyone you'd like, then all they have to do, is place their phones on their chest, and feel your special hug! And don't worry if you're on desktop, the hugs can be played with sound too!

### Link to Source Code
[GitHub repo](https://github.com/ToastedWaffle/hugo)
### Permissive License
[Apache 2.0 with Commons Clause](https://commonsclause.com/)

## Background
Well being stuck at home, far away from my friends, made me use the following gif more and more:
![hug gif](https://media4.giphy.com/media/ZBQhoZC0nqknSviPqT/giphy.gif)
Then one day I stumbled upon this Hackathon and started thinking about ideas. 
I knew right from the start that I wanted to do something in the second category, because helping someone, or bringing someone a smile is one of my favorite things to do!
So the idea of virtual hugs came into my mind, and I was thinking about ways I could make them better than a gif. They had to be something more than just a text on a screen.
And then I remembered the times I hugged my phone whenever someone sent me something sweet, aaand bingo! 💭

The idea of hugs you can feel came to life! 🎉

### How I built it 
Using the platform was really really easy!
Being a young and not that much experienced fellow in all the hosting setup stuff, starting off with App Platform was a breeze!

First of all I made the frontend using the static site component. Setting it up was easy, I just had to type in my npm script and done!
Then I added a PostgreSQL database, which worked surprisingly well with JSON data.
And finally I added a node web service component for my API.

And just like that, I connected them all and voila!
You can read more about how I built the application [from this series](https://dev.to/szhabolcs/hugo-sending-hugs-you-really-feel-first-ideas-g92)
### Additional Resources/Info
Notable resources:
1. [Tailwind tutorial by The Net Ninja](https://www.youtube.com/watch?v=bxmDnn7lrnk&list=PL4cUxeGkcC9gpXORlEHjc5bgnIi5HEGhw)
2. Graphics from [Storyset](https://storyset.com/) and [Vecteezy](https://www.vecteezy.com/)
3. Icons from [Font Awesome](https://fontawesome.com/)
4. [Tone.js](https://tonejs.github.io/) for audio management
Hugo - sending hugs you really feel - Finishing touches
Tags: dohackathon, design, ux, ui
Published: 2021-01-08 19:51:53

#So here we are, as of writing this post, I finally finished my submission. 🎉
The past posts have all been written today, because I did not have time to write them in the past. But I hope you enjoyed them nevertheless!

So here are some things I've been working on!
#Issue nr.1 WebKit doesn't support the vibration API 📵
Well this is a bummer.
This really upset me the first time I read about it, but it didn't stop me from finding a workaround. 
As you could see in the mockups there is a little checkbox saying "play sound instead of vibrating".
![sound play checkbox](https://dev-to-uploads.s3.amazonaws.com/i/vseamocypo5b2heia4qs.jpg)
I initially intended to have this feature only available for desktops where vibration is not possible, but in the end I decided it should be available on all devices.
I also placed a warning each time an unsupported browser is being used.
![vibration not supported alert](https://dev-to-uploads.s3.amazonaws.com/i/qy1sbgw4kkfrcwnnvoiv.jpg)

#Issue nr.2 People can't find the hug making page from the view page 🔎
I sent hugs to some of my friends, to test out if everything worked fine. Turns out, they couldn't figure out how to send a new hug, because there wasn't any indication of how to get to that page. 
This was of course all my mistake, but I fixed it by placing buttons on the view page.
![additional buttons added](https://dev-to-uploads.s3.amazonaws.com/i/r2lnokqiqjx0cu3c0ca6.jpg)
And just like that, you can get to the maker from every page, so I hope the number of sent hugs will increase. 🤗

#Aaand the end. Or is it? 🤔
The application is available from [here](https://hugo-ptrq2.ondigitalocean.app/) and I think even if I buy a domain for it, or change hosting, I will still keep this link active. 

As of what comes after this, I don't know. I want to see what the reaction of the public is, because I think this has potential. This is my first project that actually more people could use, so I'm really excited to see how this turns out.

####If you like the idea, the execution, or you just want to help me get my first app out there, go on and send a hug! 
####It's free, it's cute, and your loved ones will surely love it! ❤

P.S. As I did in my other posts, here is another hug, this time it's made with Hugo, and it never expires 💕
[https://hugo-ptrq2.ondigitalocean.app/view?id=every1](https://hugo-ptrq2.ondigitalocean.app/view?id=every1)