teleren/devto huggingface dataset:
I'm building a resources list site for communities of colour in Montreal
Tags: webdev, sideprojects
Published: 2020-06-13 03:24:13

One thing I noticed growing up in Montreal, Canada is that we have tons of people from everywhere, but nobody knows what is available to them unless someone knows another person, who knows some guy down by the convenience store whose brother is a community worker. I decided I wanted to piece a list together of resources for communities of colour in Montreal into one site, where everyone can have access to what's available to them in their community, as well making it easily accessible to screen readers and people who need special devices to access the web. It's called 'Help Me POC'.

The project is using VuePress and has a documentation style format, allowing search either from the navbar or sidebar. I'm planning on getting a domain name for it. The project has been made open so people who are from Montreal who know about other community resources can easily add and make pull requests.

If you're from Montreal, Canada  or from anywhere else and willing to contribute and support, here are the useful links to get started:

[Help Me POC staging app](https://gallant-ride-34b413.netlify.app/)

[Help Me POC Github repo](https://github.com/CSumm/helpmepoc)

Looking forward to seeing you help out!
I build small web apps every weekend - Join Me!
Tags: websites, webapps, coding, weekendcoding
Published: 2020-06-13 02:58:05

---
title: I build small web apps every weekend - Join Me!
published: true
description: Every weekend in less than three hours, I will be creating web apps and publishing them online - Join Me
tags: #websites #webapps #coding #weekendcoding
cover_image: https://images.pexels.com/photos/3774055/pexels-photo-3774055.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260
---

Okay, This is going to be short

To strengthen my skills in web development, I have decided each weekend I will be making a small web app.

I began last weekend...and this was what I made [97colours.com](97colours.com). A small tool you could use to compare colors. I also wrote a short [blog here](https://dev.to/hondohondo/97colours-com-42dg)

All the projects I will be making ...the plan is to finish and publish them within a few hours, preferably less than 3 hours. 

So what am I making this weekend? Stay tuned! Also, join me for the ride! It's gonna be fun!
HTML Basics Part ✌️
Tags: html, beginners, webdev
Published: 2020-06-13 02:44:12

If you haven't read the previous article on getting started with HTML check out Part 1 here: 

Since we last left off we ended up with a document that looks like this:https://dev.to/amsuarez/html-basics-part-ii-4ah6

```
<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
 </body>
</html>
```

Today we are going to over the basics on creating content within the body. The three we are going to be covering to day are heading tags, paragraph, and comment tags. 

## Heading Tags 

Heading tags are a great way to define importance in a document. Heading tags exist for 1 - 6 each heading level will have its own default styling. It is important to understand that you can restyle these tags in css but using appropriate tags is important. Screen readers recognize these levels, users can skim through the document based on the levels, and search engines can use them for indexing. 

```
<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <h1>My Website</h1>
  <h2>My Projects</h2>
 </body>
</html>
```
## Paragraph

Paragraphs are general areas to hold text. You can use it for a lot of text or even just a couple of words. 

```
<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <h1>My Website</h1>
  <h2>My Projects</h2>
  <p>I write a blog about HTML</p>
 </body>
</html>
```

## Comments 

Lastly is for this article we will showcase how to write comments. Comments are not displayed in the browsers. They are useful to explain your code and ideas to others reading and most of the time for yourself. The comment tag is shown as <!-- -->.

```
<!DOCTYPE html> 
<html lang="eng">
 <head> 
 </head>
 <body>
  <h1>My Website</h1>
  <h2>My Projects</h2>
  <!-- Here I will write about my projects. -->
  <p>I write a blog about HTML</p>
 </body>
</html>
```

That's it for this article hopefully you enjoyed it! 
Follow and like for future web dev basics and advanced tips.
eventmit - Tiny EventEmitter
Tags: javascript, deno, node
Published: 2020-06-13 02:40:21

---
title: eventmit - Tiny EventEmitter
published: true
description: Tiny ECMAScript 2015+ EventEmitter library
tags: JavaScript, deno, node
//cover_image: https://direct_url_to_image.jpg
---

I've created [eventmit](https://github.com/azu/eventmit) as Universal EventEmitter library.

You can use [eventmit](https://github.com/azu/eventmit) on browser, Node.js, also [Deno](https://deno.land/).

- [azu/eventmit: Simple EventEmitter. A single event object per an event.](https://github.com/azu/eventmit)

## Feature

- A single event object per an event
- Tiny code base
- Written by TypeScript

Its all code of eventmit.

```js
var n = function () {var n = new Set();return { on: function (t) {n.add(t);}, off: function (t) {n.delete(t);}, offAll: function () {n.clear();}, emit: function (t) {n.forEach(function (n) {return n(t);});} };};export { n as eventmit };
```

## Usage

You can create `eventmit` object per an event.
In other words, `eventmit` is an single event object.

```js
import { eventmit } from "eventmit";
const event = eventmit<{ key: string }>();
// Register handler
event.on((value) => {
    console.log(1, value);
});
event.on((value) => {
    console.log(2, value);
});
// Invoke handler
event.emit({
    key: "value"
});
// Unregister handler
event.offAll();
```

`eventmit` has not support multiple event type like `EventEmitter` or [developit/mitt](https://github.com/developit/mitt).
It is simple and enforce strong type with [TypeScript](https://www.typescriptlang.org/).

```js
import { eventmit } from "eventmit";
const changeEvent = eventmit<void>();
const inputEvent = eventmit<string>();
// subscription event
changeEvent.on(() => console.log("CHANGE!"));
inputEvent.on((input) => console.log(input));
```
There's a Spectrum chat for Deno
Tags: deno, spectrumchat
Published: 2020-06-13 02:21:08

There's a [Spectrum chat for Deno](https://spectrum.chat/deno?tab=posts) with a growing community of very quiet contributors. I asked a question there recently and haven't had any responses. Maybe I'll ask the question here instead. 

There's a very instructive article from Max, the technical co-founder of Spectrum titled [Tech Choices I Regret at Spectrum](https://mxstbr.com/thoughts/tech-choice-regrets-at-spectrum). 

> With the benefit of hindsight, here are the technology choices I regret and the lessons I have learned.

They're good lessons that the rest of us, me included, should take to heart.
How To Build A Presentation Using HTML, CSS, & JavaScript
Tags: javascript, html, css
Published: 2020-06-17 10:50:23

---
title: How To Build A Presentation Using HTML, CSS, & JavaScript
published: true
date: 2020-06-13 01:52:40 UTC
tags: javascript, html, css
canonical_url: https://www.ma-no.org/en/programming/javascript/how-to-build-a-presentation-using-html-css-javascript
---

The process of conceiving and constructing a presentation is often hard.Sometimes we're stuck with Keynote or PowerPoint, and the templates are extremely limited and generic.Today, we're going to learn how to create an awesome and animated presentation using HTML, CSS, and JavaScript.If you're a beginner, don't worry! This tutorial will be easy enough to keep up with.For this progect, we're going to use a framework called Reveal.js.It provides robust functionality for creating interesting and customizable presentations.Go to the Reveal.js repository and clone the projectChange directories into your newly cloned folder and run npm install to download the package dependencies. Then run npm start to run… 

[Read all](https://www.ma-no.org/en/programming/javascript/how-to-build-a-presentation-using-html-css-javascript)
Dark Web: how to access, risks and contents
Tags: darkweb, deepweb, security
Published: 2020-06-15 15:54:41

---
title: Dark Web: how to access, risks and contents
published: true
date: 2020-06-13 01:27:52 UTC
tags: darkweb, deepweb, security
canonical_url: https://www.ma-no.org/en/security/dark-web-how-to-access-risks-and-contents
---

You've probably heard of the Dark Web before, but do you really know what the Dark Web is, or what it consists of?Do you know its risks? Which users use the Dark Web? What content is published? Would you know how to access the Dark Web safely?If you are reading this article right now, it is because you are in the largest public part of the Internet (the so-called superficial Internet), but there is another darker and deeper area that is alien to most users, called the Dark Web.Today we explain:What the Dark Web is. What contents… !




Read on [📖!](https://www.ma-no.org/en/security/dark-web-how-to-access-risks-and-contents)
What are those LSEP characters on certain pages?
Tags: webdev
Published: 2020-06-13 01:11:15


If you browse the web on windows, you might have from time to time see characters like these:

![](https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/da952a01/post/DC9JUWxBfUAFw0TO.png)
<figcaption></figcaption>
That character is actually the Unicode U+2028 Line Separator, and for some reason Chrome will display it as a visible block.

### How did it get there?

Most likely the developer has an IDE that accidentally placed those characters in place of a new line, or there is some server side script that incorrectly processed newlines. Either way it is very likely that these go unspotted as they do not show at all on most operating systems or browsers.

See [this stackoverflow post](https://stackoverflow.com/questions/39603446/why-is-this-symbol-showing-up-on-chrome-and-not-firefox-or-edge?noredirect=1&lq=1) for more context.

### How to fix?

If this was due to and IDE, you can simply search and replace the code. Go [here](https://www.fileformat.info/info/unicode/char/2028/browsertest.htm) and copy the text (it might look like just an empty character), and replace those with a blank space.

If the characters ended up in the database you might be able to run a sql query (see the stackoverflow post above) to get rid of them.

Either way it is a good idea to preview your pages in Chrome on windows, or use [PageWatch](https://pagewatch.dev) to automatically find these in your site.

 Originally published at <https://blog.pagewatch.dev/post/what-are-those-lsep-characters-on-certain-pages>
Organize workers easily.
Tags: attendance, projects, workstations, location
Published: 2020-06-13 01:10:56

We have completed a one of a kind employee management system. A cloud based app that helps managers to organize workers. the main tools include attendance system, employee management app, project management and work reporting. Also, the HRM or employee management system comes with a mobile app for location tracking, work reporting and self service for employees. We are offering a free trial for 14 days. Check out more here https://finclock.com/
How to replace part of a string with another string in JavaScript?
Tags: javascript
Published: 2020-06-13 00:00:00

---
  title: How to replace part of a string with another string in JavaScript?
  published: true
  tags: JavaScript
  date: Sat Jun 13 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/replace-string-with-another-string-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-38a060e8fc9acfe9a8f4ceed850208e5.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/replace-string-with-another-string-javascript)
  
We can use the `replace` string method to replace a string with another string in JavaScript.

---

Consider this string.

```javascript
const greeting = "Hi, Friend";
```

Let's replace the string `Hi` to `Hello`.

```javascript
const greeting = "Hi, Friend";

// replacing string Hi to Hello
greeting.replace("Hi", "Hello"); // Result: Hello, friend
```

- The method accepts the string to replace as the first argument.
- And the string to be replaced with as the second argument.
- It returns a string with the replaced string.
- The method also accepts [Regular expression](https://www.w3schools.com/jsref/jsref_obj_regexp.asp) as the first argument.
- It is a string only method.

### Using regular expression

We can also replace all the occurrences of a specific word in a string using a regular expression.

```javascript
const favoriteLine = "Blue has 3 Blue bottles";

// all occurences of Blue will be replaced by Green
str.replace(/blue/gi, "Green"); // Result: Green has 3 Green bottles
```

### Feel free to share if you found this useful 😃.

---
Don't write your own framework
Tags: programming
Published: 2020-06-30 09:29:10

---
title: Don't write your own framework
published: true
date: 2020-06-13 00:00:00 UTC
tags: programming
canonical_url: https://stitcher.io/blog/dont-write-your-own-framework
---

We were sitting with 5 or 6 backend developers around the large meeting table. It was 10 in the morning on a Monday, and we were all silently working on our laptops. There was a hasty atmosphere, and everyone tried to concentrate on the task ahead.

Less than 2 hours before, I walked into the office, not yet aware of any harm. I was immediately called to the meeting room at the back, there was no time to sit at my desk. Still I quickly grabbed a coffee, and went to the back where a few other colleagues already gathered.

With them was our boss, a nice guy; there wasn't any "upper management" culture or anything, we were just colleagues. The other people in the room already knew what was going on, so he explained to me personally.

There was a bug, in our in-house framework.

"It sure isn't the first one" — I remember thinking.

At this point we'd used this custom-built framework for several years; 200 websites were affected, more or less.

The bug was a stupid mistake — after all, which bug isn't?

Our framework router would take a URL and filter out repeated slashes, so `//admin` would become `/admin`. This is, I believe, part of some HTTP spec; at least I was told so, I never double checked. The problem however, was in the authorisation layer: `/admin` was a protected URL, but `//admin` was not. So the router would resolve `//admin` and all its underlying pages to the admin section, and the authoriser wouldn't recognise it as a location you'd need admin privileges for.

In other words: the admin section of all our websites could be entered without any login, by simply replacing `/admin` with `//admin`.

I don't remember drinking my coffee after that.

So we did the only thing we could do: manually update all of our websites, some running a very outdated version of our framework. It took us 3 days to do this with 5 or 6 developers. You can do the math on how much it cost.

In the end we never actually got to know whether the bug had been exploited: it was discovered by accident by one of our colleagues over the weekend, and we didn't keep access logs longer than a few days. So nobody could tell whether someone had unauthorised access to one of our sites over the past years; let alone know if, and which data had been leaked.

* * *

Don't write your own framework, at least not when you're building websites for paying clients; who trust your work to be professional and secure. Whatever framework you use, make sure it's backed by a large community.
How to Use Jekyll on macOS Catalina with RVM
Tags: jekyll, ruby, rvm
Published: 2020-09-24 03:41:20

---
title: How to Use Jekyll on macOS Catalina with RVM
published: true
date: 2020-06-13 00:00:00 UTC
tags: Jekyll, ruby, rvm
canonical_url: https://nickymarino.com/2020/06/13/jekyll-server-rvm-macos/
---

*This post was originally published on [my website](https://nickymarino.com). Check it out for more awesome content!*

Apple bundles a system version of the Ruby programming language on macOS. Because system Ruby is used by the inner workings of the operating system, this version is not meant to be upgraded or modified by a user. With the Ruby Version Manager [RVM](https://rvm.io/), you can install an additional Ruby version for personal use.

Similar to [pyenv](https://github.com/pyenv/pyenv), you can install multiple versions of Ruby with RVM and change the version you’re using on the fly. You can also install gems without `sudo`.

## Installing RVM and Ruby

Before downloading RVM, first install [gpg](http://en.wikipedia.org/wiki/GNU_Privacy_Guard) and the mpapis public key:

```
$ brew install gnupg
$ gpg --keyserver hkp://ipv4.pool.sks-keyservers.net --recv-keys xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

```

The keys (`xxxx...`) change often, so you will need to copy the most recent ones from the [RVM install page](https://rvm.io/rvm/install#install-gpg-keys).

Next, download the most recent stable version of RVM:

```
$ \curl -sSL https://get.rvm.io | bash -s stable --ruby

```

After installation, RVM will tell you to either open a new terminal or source `rvm`, so run the command it prints:

```
$ source ~/.rvm/scripts/rvm

```

You will also want to add `rvm` to your `~/.zshrc` or `~/.bashrc` to load when you open a terminal:

```
# Add this to your ~/.zshrc or ~/.bashrc
[[-s "$HOME/.rvm/scripts/rvm"]] && . "$HOME/.rvm/scripts/rvm"

```

Use `rvm list` to find a Ruby version you want to install, then tell RVM which version to use:

```
$ rvm list
$ rvm use 2.7.0

```

You can then verify that you’re using an RVM-managed version of Ruby:

```
$ which ruby
~/.rvm/rubies/ruby-2.7.0/bin/ruby

```

## Installing Jekyll

First, verify you’re using a Ruby version managed by RVM in the above step. Then, install the [Jekyll](https://jekyllrb.com) gem:

```
$ gem install jekyll bundler

```

If you’re already in a Jekyll website repo (or any folder with a `Rakefile`), you can use `bundle` to install your remaining requirements:

```
$ bundle install

```

You may then need to update Jekyll for your `Rakefile` requirements:

```
$ bundle update jekyll

```

Now you can up the Jekyll server:

```
$ bundle exec jekyll serve

```

Now check out your site at `http://localhost:4000`! See the [Jekyll Quickstart](https://jekyllrb.com/docs/) for more details on starting a Jekyll blog.
Fun with details
Tags: html, webdev
Published: 2020-06-12 23:22:06

Happy Friday! Here's a little article to end your week. It is a [mirror of an article on my site](https://docs.shub.club/web-tips/fun-with-details). Feel free to visit it if you want to see live examples of what I show here!

## Let's learn about `<details />`
`<details />` is a very spiffy, yet relatively unadopted component in the HTML catalog. It's not super dynamic, but pretty useful if you ever want to build accordions like below:

{% codepen https://codepen.io/4shub/pen/rNxeXZW
 default-tab=html,result %}

## Hacking with Details
The cool thing about `<details />` is that it can act as a [state machine](https://statecharts.github.io/what-is-a-state-machine.html) in pure HTML. This means when we add some useful CSS selectors, we can make the `<details />` element act like a full-fledged toggle button.

Let's look at this example below:
{% codepen https://codepen.io/4shub/pen/OJMNepg default-tab=html,result %}

As you can see above, I just created a "button" entirely in CSS that increases the font-size of `.open-me-target` on click of the summary.

Take note of the sibling combinator `~` and the attribute selector [https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors](`[open]`). `[open]` tell us to look at instances when the class .open-me has the attribute open, and (`~`) tells us to look for instances when `.open-me-target` follows `.open-me` within the same parent element. This lets us only apply the blue, 50px style to instances that meet both of these criteria.

## Polishing it up
While functional, the UI above looks kind of janky. Let's make it look a little better.
{% codepen https://codepen.io/4shub/pen/KKVzjme default-tab=html,result %}

Pretty cool I think.

## Notes
Other HTML elements can be used to create a toggle-like state, the most significant being `<input type="checkbox" />`. I focused on `<details />` because keyboard users can toggle using the return — which I find more natural — while checkboxes are toggled with the spacebar.

I probably wouldn't use this hack in production. Changing HTML components' core functionality, even if done carefully, hampers accessibility, as not all browsers can understand the wackiness we just wrote down.
Database Architecture - TerminusDB Discussion #14
Tags: database, design, rust, prolog
Published: 2020-06-12 22:51:39

---
title: Database Architecture - TerminusDB Discussion #14
published: true
description: Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our CTO explaining our database architecture.
tags: database, design, rust, prolog
---
Every week the TerminusDB core team get together to hear a talk led by one of our members. The discussions are always very interesting, so we thought we'd share. This week we have our CTO explaining our database architecture.
Day 153 : Champion
Tags: hiphop, code, coding, lifelongdev
Published: 2020-06-12 22:49:25

_liner notes_:
- Professional : What a way to end the week. Got up early to check out the workshops for the internal hackathon happening next week. Learned some new things about the different products we offer. Then my workshop was next. Even though I pre-recorded it, I was still nervous for some reason. haha. So we did, the workshop and people said they enjoyed it and that the information was paced right. Felt good, felt like a champion, but super tiring. Now that it was over, I went back to implementing some Web Components into a project for work.

- Personal : Went to bed "early" last night so I could get up in time to watch some workshops. I was able to go through a bunch of tracks for this week's radio show.

![View of mountain cliffs in Kalampaka, Greece with what looks like a castle and winding road and mountains in the distance](https://dev-to-uploads.s3.amazonaws.com/i/v3sm6rrflqcukb0wkzvw.png)

I'll be finishing up the work for the radio show this week. Got an email from the head of station that the show may be returning back to the radio waves ever since it was closed due to the virus. Looking forward to making that happen.

Have a great night and weekend!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube TsrKloxhfaw %}
Novelist website facelift
Tags: css
Published: 2020-06-12 22:43:08

Things I learned in css typography while building [Novelist](https://heggy231.github.io/chingu-webdev-speedrun-challenge/frontend/novelist) site.

To increase readability: increase `line-height` in ratio to the default font size.  `line-height`: 1; is single font size height.  `line-height`: 2 is double font size height.

```css
p {
  line-height: 1.4;
}
```

A [list](https://www.cssfontstack.com/) of websafe computer pre-installed fonts

Typeface is a fancy word for font style and in css, `font-family: "Work Sans";`.

![sans-serif vs serif](https://dev-to-uploads.s3.amazonaws.com/i/r6iegszb36o43il1lict.png)

  The difference between "sans-serif" vs "serif" fonts is Serif has the notches/feet or ["decorative stroke at the end of letter stem"](https://www.impactbnd.com/blog/sans-serif-vs-serif-font-which-should-you-use-when#:~:text=The%20answer%20is%20simply%20in,hence%20the%20%E2%80%9Csans%E2%80%9D) where serif clean straight line.