DEV Community: Filipe Herculano

Weird Programming Stuff

Filipe Herculano — Wed, 29 Apr 2020 00:50:35 +0000

Ok, I somehow came across this today:

Whitespace is an esoteric programming language developed by Edwin Brady and Chris Morris at the University of Durham. It was released on 1 April 2003. Its name is a reference to whitespace characters. Unlike most programming languages, which ignore or assign little meaning to most whitespace characters, the Whitespace interpreter ignores any non-whitespace characters. Only spaces, tabs and linefeeds have meaning. A consequence of this property is that a Whitespace program can easily be contained within the whitespace characters of a program written in another language, except possibly in languages which depend on spaces for syntax validity such as Python, making the text a polyglot.

View on Wikipedia

Which led me to this:

http://nik.works/project/bodyfuck/ (an implementation of brainfuck that uses a camera as input) don't worry, it's SFW and actually well done

That reminded of this good ol' classic:

lhartikk / ArnoldC

Arnold Schwarzenegger based programming language

ArnoldC

Programming language based on the one-liners of Arnold Schwarzenegger.

Motivation

Although the one-liners of Arnold Schwarzenegger are fairly well known the true semantics of the uttering is yet to be understood. This project tries to discover new meanings from the Arnold movies with the means of computer science.

HelloWorld.arnoldc

IT'S SHOWTIME
TALK TO THE HAND "hello world"
YOU HAVE BEEN TERMINATED

Quick Start

wget http://lhartikk.github.io/ArnoldC.jar
echo -e "IT'S SHOWTIME\nTALK TO THE HAND \"hello world\"\nYOU HAVE BEEN TERMINATED" > hello.arnoldc
java -jar ArnoldC.jar hello.arnoldc
java hello

To create some "audible" output you can try the -declaim option:

java -jar ArnoldC.jar -declaim hello.arnoldc

Brief overview of the keywords

Check the wiki for more details

False I LIED

True NO PROBLEMO

If BECAUSE I'M GOING TO SAY PLEASE

Else BULLSHIT

EndIf YOU HAVE NO RESPECT FOR LOGIC

While STICK AROUND

EndWhile CHILL

PlusOperator GET UP

MinusOperator GET DOWN

MultiplicationOperator YOU'RE FIRED

DivisionOperator…

View on GitHub

Really tho, I could go on forever but now I'm curious to what sort of weird programming-related stuff you guys have seen throughout the years, add your findings below in the comments 👇 (oh gosh, here we go 😅)

And while we're at it, let's end this post with a video because why not

🎠

React + Jitsi + Serverless + Twilio SendGrid

Filipe Herculano — Mon, 13 Apr 2020 21:53:33 +0000

I've been using jitsi meet a lot lately to get in touch with people from a distance, so I thought I could automate my workflow and share it with others as a submission to the Twilio + DEV hackathon

📜 Summary

It's a webapp that allows visitors to create video conference meetings and invite participants through answering a simple form that emails everyone on their behalf (desktop browser only for now)

The meeting room name is picked for you using a unique id to reduce collisions since meeting links on jitsi servers are public

Participants can click on the link in their email and join the video conference right on the website

ℹ Emails are sent using SendGrid through serverless functions and the video conference runs on an embedded jitsi meet client through react-jutsu

A live demo is available and deployed to zeit here: https://rendezvous.now.sh

The code for it is available on GitHub 👇

this-fifo / rendezvous

React + Jitsi + Serverless + Twilio SendGrid

This app was created to have fun, learn some stuff and take part in the twilio + DEV hackathon 🥳

📜 Summary

Visitors of the site can invite participants to video conference meetings answering a simple form that emails everyone on their behalf

The meeting room name is picked for you using a unique id to reduce collisions since meetings links are public

Participants click on the link in their email and join the video conference right on the website

ℹ Emails are sent using sendgrid through serverless functions and the video conference runs on an embedded jitsi meet client

🏗 Building it

rendezvous was bootstrapped with create-react-app

Requirements

Node.js and yarn (or npm) for development
Zeit CLI (for testing the serverless Node.js runtime through zeit now)

Required Environment Variables

Add the following to a .env file at the project root

RENDEZVOUS_HCAPTCHA_SECRET='your_hcaptcha_secret'
RENDEZVOUS_APP_SECRET='anything_you_want_here'
SENDGRID_API_KEY=

…

View on GitHub

Additional Resources/Info

Video Conference through Jitsi
Emails through SendGrid 📧
Base css from MVP.css ✨ (with a few modifications)
All potential hCaptcha earnings are donated to Wikimedia foundation 🤗

Hope someone finds this useful or at least use it as a base for their own project

Natty Theme

Filipe Herculano — Mon, 30 Mar 2020 14:07:39 +0000

It's like snazzy but natty

I'm a big fan of the iterm2-snazzy colours, but I never found a nice port to vscode that I could stick with in the long run so I decided to make my own

Natty has a darker background for higher contrast and doesn't make much use of red — as I like to think red should be for errors — I am still thinking of what else to customize but it's in good shape for general use already

Here's some previews 🎨

Where next

Little details really bother me, so eventually I would like to have a much stronger level of customization and tweaks on things like punctuation, operators, language specific quirks and editor specific controls

I would also love to have this be a shared theme among many other development tools I use

I am open to contributions, suggestions, feedback and help. Feel free to check it out on GitHub and the vscode marketplace

☺️

Video Conferencing App using React and Jitsi

Filipe Herculano — Fri, 27 Mar 2020 23:51:28 +0000

I have been reading a bit about WebRTC and how those video conferencing apps work given the situation we're all in due COVID-19

One project that caught my attention recently was jitsi

They're open source and quite nice to work with, in their api docs they go over how to embed jitsi in your application

I decided to use that in a React project I am currently working on and made that into a shared component since I didn't find anything out there

You can see a live demo using the public jitsi domain here

Note: this is intended to be used on the desktop browser for now, to join a Jitsi room on mobile you will need their app, although checkout this PR for more information

How to use it

yarn add react-jutsu

Add the Jitsi Meet API js file to the html body

<body>
  <script src='https://meet.jit.si/external_api.js'></script>
</body>

Sample Usage

import React, { useState } from 'react'

import Jutsu from 'react-jutsu'

const App = () => {
  const [room, setRoom] = useState('')
  const [name, setName] = useState('')
  const [call, setCall] = useState(false)

  const handleClick = event => {
    event.preventDefault()
    if (room && name) setCall(true)
  }

  return call ? (
    <Jutsu
      roomName={room}
      userName={name}
      loadingComponent={<p>loading ...</p>} />
  ) : (
    <form>
      <input id='room' type='text' placeholder='Room' value={room} onChange={(e) => setRoom(e.target.value)} />
      <input id='name' type='text' placeholder='Name' value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={handleClick} type='submit'>
        Start / Join
      </button>
    </form>
  )
}

export default App

Supported Configuration

Check the Jitsi Meet API docs for more

Room Name

The meeting room name

This prop is required for jitsi to load

User Name

The participant's name

This prop is required for jitsi to load

Domain

<Jutsu domain='my-custom-domain.com'>

Your Jitsi domain to use, the default value is meet.jit.si

Loading Component

<Jutsu loadingComponent={<ProgressBar />}>

An optional loading component, the default value is <p>Loading ...</p>

Styles

<div
  style={{...containerStyle, ...containerStyles}}
>
  <div
    style={{...jitsiContainerStyle, ...jitsiContainerStyles}}
  />
</div>

Internally Jutsu is constructed inside 2 containers, you can add custom styles for each by specifying containerStyles and jitsiContainerstyles

The default values are

const containerStyle = {
  width: '800px',
  height: '400px'
}

const jitsiContainerStyle = {
  display: loading ? 'none' : 'block', // <- used for loadingComponent logic
  width: '100%',
  height: '100%'
}

An example override could be

<Jutsu containerStyles={{ width: '1200px', height: '800px' }}>

Feel free to grab it out for your next project or help me modify it to suit your needs, the code is open source and you can find it on github

this-fifo / jutsu

A jitsi meet component wrapper and custom hook moulded with react's chakra 💠

<Jutsu />

A jitsi meet component wrapper and custom hook moulded with react's chakra 💠

View live demo

Install

yarn add react-jutsu

Add the Jitsi Meet API js file to the html body

<body>
  <script src='https://meet.jit.si/external_api.js'></script>
</body>

You can choose to load the script another way, the hook will return an error until the jitsi API is available in window scope.

Two options

You can use the provided component for simple scenarios or the hook for access to the jitsi meet api

import { Jutsu } from 'react-jutsu' // Component
import { useJitsi } from 'react-jutsu' // Custom hook

Sample Usage (Hook)

import React, { useEffect } from 'react'
import { useJitsi } from 'react-jutsu'
const App = () => {
  const jitsiConfig = {
    roomName: 'konoha',
    displayName: 'Naruto Uzumaki',
    password:

…

View on GitHub

A bit of git.io url fun for your sunday

Filipe Herculano — Sun, 01 Mar 2020 18:28:49 +0000

I was bored and browsing around today and happened to find this old gist from GitHub's cofounder for generating a more personalized git.io url

I thought it was cool — although for some reason the script wasn't working for me — so I just extracted the important part:

curl -i https://git.io -F 'url=<YOUR_GITHUB_URL>' -F code=<YOUR_CODE>

Then it occurred to me I could just use a # identifier used for scrolling to generate a more ~~useless~~ personalized fun url for myself

Try going to https://git.io/fifo

Hopefully you see this cool greeting like I do in Firefox

Anyways, all I had to do was get the url encoded value of the 👋 emoji which is %F0%9F%91%8B and use that in the curl request

curl -i https://git.io -F 'url=https://github.com/this-fifo/#%F0%9F%91%8B' -F code=fifo

Hope you enjoy your sunday!

ʕ •ᴥ•ʔ

Clipbar — Minimal macOS menu bar app for stashing clipboard content

Filipe Herculano — Fri, 21 Feb 2020 00:35:51 +0000

From Larry Tesler to SourceNote to pbpaste to Clipbar

The recent death of Larry Tesler made me realize how much we take for granted our modern tooling and led me into spending an unusual amount of time reading about the invention of the copy & paste as we know today (even one of my favourite talks mentions Larry and his principles)

Thank you for your amazing contributions Larry!

Upon my findings, I came across an incredible app called SourceNote and I was astonished by how much I could relate to the problem it aims to solve — Feel free to stop reading this and watch their promo video, I thought it was such a simple elegant solution to a common occurrence in my workflow

Anyways, that made me want to try and approach that same problem with my own tools just because native access to the system clipboard is built in on most operating systems and I was feeling empathetic towards Larry's terrific invention

pbpaste

Note: pbpaste is a macOS command, if you're on linux try this command and if you are in Windows I think there is a clip command or you can try Cygwin with /dev/clipboard

First thing that came to my mind was — "I can write a bash script to dump everything into a txt file and then use that file for searching later"

So what does that look like?

date && pbpaste && echo "" >> clipboard.txt

The date and the echo at the end is so you can facilitate some pattern for searching and browsing through the contents of the file as it grows indefinitely

Say you had "Hello World" in your clipboard, this is what you would get:

Thu 20 Feb 2020 20:20:20 EST
Hello World

You can alias that command to something more convenient and run it whenever you want to stash your clipboard data to this file

And now you can search through that file with something like grep (or ripgrep, if you're like me)

Nice! Except ...

I'm not satisfied

Maybe that covers enough for some people, but I wasn't pleased with the solution, after using it for a bit I realized it just moved the problem to a different location

It solved having multiple "untitled" files open in my editor but it made a bit annoying to use and I noticed I kept going back to old habits

At this point my mind was thinking:

I like SourceNote but I don't want to reinvent it since it's already pretty solid, maybe I could just simplify my case if I looked for a pattern in my needs and solve for that instead

Less is more

The pattern I noticed was that I mostly cared about the previous occurrence of my clipboard and not necessarily the entire history

Countless time I thought I had the previous stuff in my clipboard only to see it was overwritten by some stuff later on

Another thing I wanted was a quick way of knowing what even is in my clipboard so I don't make the mistake of pasting the wrong thing (like being sloppy and sending my password in a text message to a friend instead of some link)

This would also avoid cluttering by keeping history of things that are no longer relevant indefinitely

I simply needed a short term stash for accessing the previous value kinda like how we need a temp variable to swap two values — although with destructing in ES6 you could just do

[a, b] = [b, a] // swap A and B

Lastly, I wanted this to be minimal and automatic, I don't want to press another shortcut (kudos to SourceNote for the idea to reuse ⌘+C, it is brilliant)

Clipbar

After a few introductory tutorials on Swift and learning how to build OSX apps, I decided a Menu Bar app would be perfect for this

It works by listening to the system's clipboard for changes and whenever there's a new entry it stashes the previous one

The UI displays a short preview of the current and previous values and gives you the option to swap them as well as clear the contents along with your clipboard value

There's definitely room for improvement (feel free to contribute) and it might even be useless for most people but it was fun

Anyway, you can find the code for it on GitHub and you can download the release from there if you don't wish to build it from source. 😁

Creating a custom react hook for markdown parsing

Filipe Herculano — Wed, 12 Feb 2020 17:25:22 +0000

I am making a side project in React that requires markdown parsing so I decided to use that as a good candidate to experiment with custom hooks

Checkout this fantastic post from Amelia Wattenberger that goes over a comparison between traditional class components versus using hooks and how they make React feel less bloated and more natural to work with

Here's what I needed to do:

Parse a markdown string
Sanitize that string to prevent XSS attacks

Apparently there is a vast number of parsers out there. I decided to go with marked which seems like a good library with an active community and a nice and simple implementation

Again, the same could be said for sanitizing html (for some reason people just like writing parsers a lot), so I picked sanitize-html which offers a nice level of configuration through a simple object

Setup

Alright let's get to work

// parsing markdown with marked
const marked = require('marked')
const md = `
  # heading

  [link][1]

  [1]: #heading "heading"`

const tokens = marked.lexer(md)
const html = marked.parser(tokens)

Will output this html!

<h1 id="heading">heading</h1>
<p><a href="#heading" title="heading">link</a></p>

Now, to prevent XSS, let's add this before using the html

// sanitizing raw html with sanitize-html
const sanitizeHtml = require('sanitize-html')
// passing the html output from marked
const clean = sanitizeHtml(html)

Output now is

heading
<p><a href="#heading" title="heading">link</a></p>

Wait, what? Where's our h1 tag? Well, apparently the default options for sanitize-html consider h1 unsafe (I guess), they go over the specs in their README so I went and added my custom defaults

Marked also supports a nice set of configurations (syntax highlighting being my favourite) you can checkout their docs here

useMarked('# yay!')

Awesome, we have everything, let's turn that into a React hook called useMarked

import { useState, useEffect } from 'react'
import sanitizeHTML from 'sanitize-html'
import marked from 'marked'

import defaultOptions from './defaultOptions'

export const useMarked = (markdown, options = defaultOptions) => {
  const [html, setHtml] = useState(markdown)

  useEffect(() => {
    if (options.markedOptions) {
      marked.setOptions(options.markedOptions)
    }
    const tokens = marked.lexer(markdown)
    const html = marked.parser(tokens)
    setHtml(
      options.skipSanitize ? html : sanitizeHTML(html, options.sanitizeOptions)
    )
  }, [markdown])

  return html
}

And now we can use it in any function component by doing

import React from 'react'
import { useMarked } from 'use-marked-hook'

const App = () => {
  const markdown = `**bold content**`
  const html = useMarked(markdown)
  // html -> <p></strong>bold content</strong></p>
  return <div dangerouslySetInnerHTML={{ __html: html }} />
}

Testing Custom Hooks

I also found that there's a quick way to test your hooks using the @testing-library/react-hooks package which provide us with the nice renderHook helper

Testing our useMarked hook looks like this

import { useMarked } from 'use-marked-hook'
import { renderHook } from '@testing-library/react-hooks'

describe('useMarked', () => {
  it('Receives markdown and returns html', () => {
    const { result } = renderHook(() => useMarked('# test'))
    expect(result.current).toBe('<h1>test</h1>\n')
  })
})

⚠️ Note the newline character added at the end of the output (jest errors were very unhelpful in seeing that and it took me quite a bit to realize tests were failing because of it 🤦‍♂️)

Conclusion

To save you some effort, if you ever find the need for a markdown parser in your react projects, I published this custom hook as an npm package which you can download and use now 😉

yarn add use-marked-hook

I made the code for it available on github

It also includes a sample react app that uses useMarked hook to render a local markdown file into an html page that is later published live through github pages, checkout the result here

Meet Dash O’Pepper

Filipe Herculano — Thu, 02 Jan 2020 18:12:34 +0000

random image from unsplash

This other day I was writing an app to play with React and GitHub's API and ended up finding a specially unusual account

Here's the thing, if you try to sign up for a new account on GitHub your username must meet a certain criteria, to quote their error message:

Username may only contain alphanumeric characters or single hyphens, and cannot begin or end with a hyphen.

And if you try to register with an username that already exists you get this:

nice try

Okay, so what?

Let's go back to the app I'm making, it leverages GitHub's API to fetch any user's starred repos and displays them in a gallery mode so you can ~~stalk through~~ browse their activity

I was ~~stalking~~ playing around on it with some seed data and ended up seeing this little guy pop up in the UI

At that moment I was like:

Wtf? I thought I had the username displaying, what is this -? Let me check the code again, probably a typo ... yep, I do have the username displaying ... wait a minute 🤔

Okay, let's try seeing "-" profile page on GitHub's actual UI https://github.com/-:

At this point I was very confused, how come my app UI shows me that there's this ghost user but GitHub's UI doesn't?

Let's go back to the sign up page and try registering using a "-" too

???

Notice we are getting the combination of both error messages this time, the one for allowed characters and the one for username already taken

I was now determined to explore it a bit further using GitHub's REST API, feel free to continue to follow along

Finding the mysterious account through GitHub's REST API

First, let's do a plain GET on the search endpoint - if you're on firefox you can open this link directly in the browser to see a nice json output -, feel free to use postman, curl, anything

The endpoint is /search/users and the querystring is -, so the end result will look like this:

https://api.github.com/search/users?q=-

I know right? I got 2 results and was surprised yet again, turns out the second result did not have dashes in their username but had dashes in their email which is probably why it got returned

Thinking about this now, as per the RFC 5322, the local-part of an email is allowed to have dashes in it, so maybe that's why the search endpoint allows for that odd query string

This was fun, let's keep going and grab more info around Mr. Dash, let's use another GET endpoint for discovering user information

The endpoint this time is /users/:username, so the end result is now:

https://api.github.com/users/-

Yay, no 404 this time! Looks like we got some further details about Mr. Dash and it turns out the account name is actually Dash O'Pepper (the account owner obviously knows what's up), here's the full JSON output:

{
  "login": "-",
  "id": 75544,
  "node_id": "MDQ6VXNlcjc1NTQ0",
  "avatar_url": "https://avatars2.githubusercontent.com/u/75544?v=4",
  "gravatar_id": "",
  "url": "https://api.github.com/users/-",
  "html_url": "https://github.com/-",
  "followers_url": "https://api.github.com/users/-/followers",
  "following_url": "https://api.github.com/users/-/following{/other_user}",
  "gists_url": "https://api.github.com/users/-/gists{/gist_id}",
  "starred_url": "https://api.github.com/users/-/starred{/owner}{/repo}",
  "subscriptions_url": "https://api.github.com/users/-/subscriptions",
  "organizations_url": "https://api.github.com/users/-/orgs",
  "repos_url": "https://api.github.com/users/-/repos",
  "events_url": "https://api.github.com/users/-/events{/privacy}",
  "received_events_url": "https://api.github.com/users/-/received_events",
  "type": "User",
  "site_admin": false,
  "name": "Dash O'Pepper",
  "company": null,
  "blog": "",
  "location": null,
  "email": null,
  "hireable": null,
  "bio": null,
  "public_repos": 1,
  "public_gists": 0,
  "followers": 13,
  "following": 0,
  "created_at": "2009-04-19T23:52:47Z",
  "updated_at": "2014-04-11T21:48:45Z"
}

Wait, what? 13 Followers? Since we can't actually see this account through GitHub's web interface, that must mean 13 other people went the trouble of using GitHub's API to authenticate themselves and follow Dash O'Pepper (plot twist, I'm included in that count)

You can see the list of people that follow Dash O'Pepper here (might have changed after this article was published):

https://api.github.com/users/-/followers

I know, you also want to be part of this ~~cult~~ select club (at least I wanted), so how do we do that?

Back to GitHub's API docs:

Following a user requires the user to be logged in and authenticated with basic auth or OAuth with the user:follow scope.

There's a bit to cover so for the sake of brevity I'll handle that for GitHub's docs this time, just follow what's in here:

https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line

Make sure you end up with something like the picture below and that your token has the user:follow scope:

Grab that and you should now be ready to perform authenticated actions on github from the command line

Ok, cool, how do we follow someone on github through their API now?

This time the endpoint will be /user/following/:username and it needs to be a PUT request, let's follow -

curl -X PUT -i -u username:token https://api.github.com/user/following/-

You can confirm by going to the following tab on your github profile page (although bonus point to you if you use the API to confirm that)

Dash O'Pepper in my following list

A word of caution

⚠️ ! Do not attempt the next steps if you want to keep your GitHub's stars tab functional

Looks like Dash O'Pepper also has a single repo called test with the following description:

-'s test repo details from my app

Seeing that made me wonder if that could possibly be some GitHub's staff account or some QA account that they use for internal stuff

Seems like the repo was modified pretty recently too, that made me curious so I tried cloning that repo, but this is what I get

Cloning into 'test'...
Username for 'https://github.com': this-fifo
Password for 'https://this-fifo@github.com':
remote: Repository not found.
fatal: repository 'https://github.com/-/test.git/' not found

That made me a bit sad but okay, then I tried seeing if I could at least star his repo, which, according to the API you can do by making another PUT request to /user/starred/:owner/:repo

curl -X PUT -i -u username:token https://api.github.com/user/starred/-/test

Yay, that worked, that is why I could see details from his repo on my app in the picture from before, let's see now see it on my profile through GitHub's as well and ...

(╯°□°)╯︵ ┻━┻

Looks like I broke my stars tab on github after that, possibly even a bug in their code, but everything else in still works fine and since I plan to use my new app for ~~stalking~~ browsing through users starred collection anyways I'll leave that as is for now

Hope you had fun reading this and if you are Dash O'Pepper thank you for entertaining me for a bit (seriously tho, who are you? how did you do this?)

Also, my app is a work in progress but it's open source, feel free to play on it if you want, the code is at https://github.com/this-fifo/stella