The Agora is a distributed knowledge graph and experimental social network.
Let's see how long it will take before spam bots start using it...
Less than 1 month for the lastest mailbox.
Time to change also the way the mail is displayed.
Let's see how long it will take before spam bots start using it...
More than 2 years after, I received spam. I created another contact email.
Surprisingly, the spam was from Brazil. I'm wondering why đ¤
Paper Phone is an experimental app which helps you have a little break away from your digital world, by printing a personal booklet of the information youâll need that day.
You have reached the very last page of the Web.
Your clipboard is only as secure as your device
You canât assume itâs safe, and even highly technical users no longer have any idea whatâs going on with their clipboards. It has all just gotten out of hand.
Now that all modern browsers support SVG favicons, here's how to turn any emoji into a favicon.svg
How it works This attack is really simple. Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading a background-image.
This website is hosted across a network of solar powered servers and is sent to you from wherever there is the most sunshine.
Last weeks, I reinstalled my (14 years old) thinkpad with Archlinux.
But, as I missed the ChromeOS guest mode, I fully automated the installation to create only one guest account running in tmpfs and launching the min webbrowser configured as I like.
The full installation now time take less than 5 minutes, mostly downloading packages.
Upgrade and configuration are managed automatically too with an ansible crontab.
It seems I'm enjoying Linux distribution's installation again.
MONOSPACE: Flip dots with feelings, a JavaScript demo in 1021 bytes, winner of the 1024 bytes demo competition at Assembly 2020.
Kinopio is a visual thinking tool for new ideas and hard problems.
No account is needed, as you can use it only with the browser localstorage if you want.
Develop one game within one hour.
Another excellent game lib by ABA.
I really enjoy that the game are fully playable on mobile.
Try cywall for example. And it take less than 100 lines of code to implement!
SecureScuttlebot Design Challenge: Avoid Centralization and Singletons
Users may be hosted by many pubs at once, and can change pubs without losing the data or identity. A pub server may go down, and others will still provide service.
SecureScuttlebutt also avoids P2P structures that represent singletons - specifically, it avoids using a Distributed Hash Table or a global blockchain.
Really like the design and philosophy of Scuttlebut, the off-grid social network.
That magic is what means this web page is also a zine if you print it!
[...] you should start looking into alternatives. For now, that means you need to revert back to HTTP/1 best-practices like inlining critical page resources.
In summary, HTTP/2 Push is dead
Etsyâs experiment with immutable documentation
FYI is a system for adding how-docs directly from Slack. ... In other words, FYIs mitigate staleness by trading completeness for freshness.
Interesting way to share and update short how-to between developpers.
Send files quickly using WebRTC.
(t,i,x,y) => 'creative code golfing'
A minimalist coding environment. Control 16x16 points with a single JavaScript function.
Really fun
Say goodbye to resource-caching across sites and domains
Following of No Cookies, No Problem â Using ETags For User Tracking, it seems browser vendors will soon prevent it.
Fraidycat is a desktop app or browser extension for Firefox or Chrome. I use it to follow people (hundreds) on whatever platform they choose - Twitter, a blog, YouTube, even on a public TiddlyWiki.
The Fraidycat web extension doesn't access websites as you visit them. It asks for permission to access all websites because it is fetching websites in the background (without using your credentials).
Fraidycat doesn't communicate with a central server - unless your browser syncs Fraidycat's settings to a central server.
I highly recommend this RSS (and others) reader, because it is easy to setup, it doesn't recommend any backend account, and it shows a river of news instead of an news inbox.
This page contains some works of "anomalous motion illusion", which might make sensitive observers dizzy or sick. Should you feel dizzy, you had better leave this page immediately.
I printed some of those illusions on paper, and the result is even more impressive, as the observer thinks the paper is moving.
Service worker seems to be the only way to prevent concurrency issue between browser's tabs.
Opera Unite tried decentralizing the web ten years ago
These webapps were quite good at what they did. They were utilitarian and got the job done. It was just the tiny problem of having to explain to grandma why the link you sent to your Unite photo album didnât work when she tried opening it. Assuming you could even understand the problem yourself. It always worked when you tested from your laptop, right?
No Cookies, No Problem â Using ETags For User Tracking
Soon on your computer... đŠ
I no longer need help in separating operators from numbers. But assistance in finding the functions and their contexts and influences is valuable.
I was a believer of a possible Firefox OS success.
I can only dream of designer's vision like deck now.
Slingcode is a personal computing platform in a single html file.
Slingcode allows you to develop HTML page directly in the webbrowser (no network required) and to run it in an iframe using a blob url.
It also uses webtorrent to share data between multiple devices (I guess internet access is required in this case).
Google pushes âtext fragment linksâ with new Chrome extension
The new link style will allow you to link not just to a page but to specific text on a page, which will get scrolled to and highlighted automatically once the page loads. It's like an anchor link, but with highlighting and creatable by anyone.
TETRIS themed music and visuals in 252 bytes of HTML+Javascript
I'm sure people will start using it as easter eggs in their webapp ^^
Why is This Website Port Scanning me?
Dreaming of a browser which disables javascript and cookie by default...
A design system for building faithful recreations of old UIs.
My findings after browsing the web without a User-Agent header for one week
What would happen if I removed the User-Agent header from HTTP requests in my browser completely.
Somehow related: microbrowsers are everywhere and they use fake user-agents.
Decentralized applications require some way of discovering peers, or other machines in the network that are distributedly hosting some content. P2P discovery requires each node in a network to be able to find other nodes that are storing some data.
A Manifesto for Preserving Content on the Web
A walkthrough of getting unauthorized camera access in Safari
A bit frightening...
Local DNS adblocker (and more)
Like some people, I'm working from home nowadays.
Being unable to install an adblocker without a Google account on a Chromebook, I decided to install a DNS server on my local network to block many undesired domain access from any device (mobile, laptop, tv, ...).
I installed raspbian on an 2014 Raspberry Pi 1 B+.
Then, installed unbound: apt install unbound
Finally, I fetched some lists of domains to block:
cd /etc/unbound/unbound.conf.d/
wget -O- https://sebsauvage.net/hosts/hosts | grep '^0.0.0.0' | awk '{print "local-zone: \""$2"\" always_nxdomain"}' > adblock.conf.orig
wget -O- https://raw.githubusercontent.com/StevenBlack/hosts/master/alternates/fakenews-gambling-porn-social/hosts | grep '^0.0.0.0' | awk '{print "local-zone: \""$2"\" always_nxdomain"}' >> adblock.conf.orig
sort adblock.conf.orig | uniq > adblock.conf
After activating the DNS as defaut on my router DHCP server, most web pages load really fast.
And computers can be used by children to do home school.
The goal of this document is to help operational teams with creating secure web applications. All Mozilla sites and deployments are expected to follow the recommendations below. Use of these recommendations by the public is strongly encouraged. The Enterprise Information Security (Infosec) team maintains this document as a reference guide.
Webpage tracking only using CSS (and no JS)
Be careful when injecting external/inline CSS on your site and use CSP.
MagicEye.js is a JavaScript library for generating "Magic Eye" images in the browser.
Did you know that animated autostereograms exist? See this shark.
And ASCII stereograms?
Emulators as embedded file viewers
35 years after its release, Boulder Dash is as enjoyable as I remember.
The Hallway is a decentralized forum using twtxt feeds.
That's nearly like my RSS reader, except all members of the Hallway activated CORS so that the client is javascript only.
After seeing this nice chat, I took the opportunity to add twtxt support to my RSS reader.
How Facebook Avoids Ad Blockers
Advertisers don't like semantic HTML...
A random emoji in your terminal prompt. How and Why!
Nice way to easily see the return status in my shell
Press âĄď¸ to shoot lasers at đđĽ but spare the đ¸ Inspired by this cool blog post by Matthew Rayfield.
As explained on the sendBeacon documentation page:
it addresses the needs of analytics and diagnostics code that typically attempts to send data to a web server prior to the unloading of the document.
Public IP Address API with two lines of Nginx config
Here is how I set up a "show my public IP address" with Nginx without any backend (no PHP, no Nginx-Lua, ...).
location /ip {
default_type text/plain;
return 200 $remote_addr;
}
Online text tools is a collection of useful text processing utilities. [...] All conversions and calculations are done in your browser using JavaScript.
For all Chromebook's users, here are a lot of easy to use tools to manipulate text documents.
They also provide many tools for other formats, like image, json, xml, csv, ...
More informations than what it looks like at first sight.
Itâs a simple way of creating video + audio + text mashups that you can embed in a webpage.
đ
Building a hackable editor - in your browser
Add support to save in localstorage, and you get a nice (but unsecure) Javascript playground.
Building the most inaccessible site possible with a perfect Lighthouse score
Many good advices to make a web site perfectly inaccessible. Definitely worth reading.
Digital comic written by Emmanuel Espinasse
XSS on Google Search - Sanitizing HTML in The Client?
An actual XSS on google.com by Masato Kinugawa. It abuses a parsing differential between a JavaScript enabled and disabled context.
It seems the template tag is the usual way to try sanitizing an HTML string on client side.
Web encryption and hashing in javascript with the crypto api
I'm curious to know if browser's crypto API is sensible to the same kind issues reported for the password managers.
Ignore ajax requests in service worker
as long as you can determine synchronously that you don't want to handle the request you can just return from the handler and let the default request processing to take over.
Thanks to this behaviour, it is not mandatory to use the fetch method.
I was able to drop the deprecated CacheManifest of my app. But I'm still not sure my service worker code is correct...
Let's see how long it will take before spam bots start using it...
It took nearly 4 years, as I received my first spam on this mailbox last week. Time to change the contact email.
Much has been written about blockchains and how they displace, reshape, or eliminate trust. But when you analyze both blockchain and trust, you quickly realize that there is much more hype than value. Blockchain solutions are often much worse than what they replace.
A do it yourself ngrok's alternative with nginx and ssh to publish a local web server.
I recently made my feed reader accessible to anybody.
As all the logic/storage is done in the browser, all your data stay locally and the HTTP queries are all also directly triggered by your machine. However, the downside is that the feed URL must have CORS activated (which is sadly rarely the case).
It supports multiple formats: RSS, Atom, JSONFeed and Indieweb blogs.
To use it, goes to my application, create an OPML file with the outliner, add a feed url and use the subscribe link.
A fun and popular coming-of-age project for microcontrollers is to make a game that plays on an oscilloscope. Partly because I couldn't decide which game to make, and partly because I wanted to make something special, I decided to build a games console, with a handful of different games on little cartridges.
Don't use the greater than sign in programming
Nice clever trick.
Upgrading simple shells to fully interactive TTYs
Using Python for a pseudo terminal
python -c 'import pty; pty.spawn("/bin/bash")'
Itty bitty sites are contained entirely within their own link.
Stopping spambots with hashes and honeypots
Rather than stopping bots by having people identify themselves, we can stop the bots by making it difficult for them to make a successful post, or by having them inadvertently identify themselves as bots. This removes the burden from people, and leaves the comment form free of visible anti-spam measures.
Kabas: An Easy Programming Language That Runs in the Browser
It reminds me the GOTO language (and its famous turtle) I discovered at school when I was child.
Challenge someone to a game of chess using toots!
No need any account, API token. Simply use your mastodon account and play chess.
I'm wondering what is the complexity to create such activitypub compatible bot.
This idea could also be done with webmention probably.
The vast majority of these resources are not directly related to the information on the page, and Iâm including advertising. Many of the scripts that were loaded are purely for surveillance purposes: self-hosted analytics, of which there are several examples; various third-party analytics firms like Salesforce, Chartbeat, and Optimizely; and social network sharing widgets. They churn through CPU cycles and cause my six-year-old computer to cry out in pain and fury. Iâm not asking much of it; I have opened a text-based document on the web.
Bring the ice cube to the goal without exposing it to heat.
Brilliant puzzle from Stephen Lavelle (creator of Stephen's Sausage Roll)
bitsy is a little editor for little games or worlds
bitsy is a little editor for little games or worlds. the goal is to make it easy to make games where you can walk around and talk to people and be somewhere.
not sure where to start? try this helpful bitsy tutorial!
Never forget type=âbuttonâ on generated buttons!
button elements with no type attribute set are submit buttons by default!
Prefer using input with the type="submit" for form.
Introducing Pinafore for Mastodon
This javascript application works offline and allow to browse timelines without network.
PuzzleScript is a game engine designed to help you make tile-based puzzle games.
You can directly create your own game from the online editor and export it as an HTML page.
For example, both Mirror Isles and Aunt Flora's Mansion have been created with it.
More games can be found on the gallery.
Decyphering the business card raytracer
Raytracer is the first serious code I wrote on my own. By looking at the generated images I kept, it was really slow, but also really fun to play with.
Browsers have a native video encoder which can be used to record all modifications done on an HTML canvas.
Despite all the demo youâve seen out there a Pure CSS Masonry layout that satisfies both your designer and your content manager is not coming anytime soon.
Javascript is required to implement a masonry layout (see this thumblr theme for example).
I changed the design of my site to display only a grid of blog's posts. Let's see how readable it can be.
Center for Advanced Visual Studies (CAVS) Special Collection
You may also browse a randomized 3-dimensional environment of collection materials below
So disturbing that I don't know if it contains bugs or if it is on purpose.
Today, I switched my webapp to a Progressive Web App.
Step1: the service worker correctly caches the HTML, Javascript, CSS files. The app can work offline! +1
Step2: the web app manifest allows to launch the webapp on mobile as if it was a native android app. The URL navigation bar can be hidden by default, and the webapp has more screen space thanks to this. +1
Step3: window.postMessage doesn't seem to work in this case. -1
Step4: fetch method does not support range header in the context of a service worker, which prevent to audio/video tag to stream the media files. -1
Step5: XMLHttpRequest is not allowed in the context of the service worker. So, it's mandatory to use fetch. -1
Step6: no idea how to not use the service worker at all when playing external media files. -1
Today, I finally still continue to use deprecated CacheManifest and XMLHttpRequest. I still don't understand why they are deprecated if nothing is ready to replace them...
The Disconnect is an offline-only, digital magazine of commentary, fiction, and poetry. Each issue forces you to disconnect from the internet, giving you a break from constant distractions and relentless advertisements.
Of races and mutexes: synchronizing async operations in JavaScript
In order to transfer the concept of mutexes to JavaScript, recall the problem we want to solve: we need to delay the execution of a async task until another async task has finished.
Engine Tech: Easy Collaboration with Object URLs
When I click that link, the DROOL editor is launched, the "bugs.objlib" file is opened, and the editor for the "bug_eyed.mesh" object is opened automatically.
While doing this during web application development seems natural, I didn't imagine to hack the URL handling on windows to do this for game development. Nice trick.
PS: Thumper is a good game!
One way to test the HTML keyboard navigation
Desactivate in CSS the mouse cursor and use your app. You'll quickly see how hard it can be to use it with only the keyboard.
* {
pointer-event: none !important;
cursor: none !important;
}
Web Typography: Designing Tables to be Read, Not Looked At Everything you need to correctly display a table.
A simple approach to building a real-time collaborative text editor
If you want then to read more about CRDT, don't miss Paul Frazee's notes.
Will you see structured data and bots in your email?
Google's Gmail already does this. If you have a JSON-LD event in your inbox, it'll attempt to parse it out. If you're a Gmail user, you've likely seen the "One-Click actions" and event details. That's coming from JSON-LD.
It seems that semantic HTML is more used in email than on the web.
The problem with getting data in and out of the web client
There is a non-standard âmime-typeâ called DownloadURL. This appears not to be supported in Firefox or iOS, it is supported in Chrome. You give the browser the url to fetch and it will initiate a download once it is dragged outside of the browser.
Some feed readers already added support for this new format.
After reading the specifications, I also updated my feed reader for it. As expected, the code is simpler than parsing RSS or Atom.
Now, I just hope a more specific mime-type will be used.
Where's the problem? Performance. Your web page is doing "SELECT ... OFFSET 49990 LIMIT 10" (or the equivalent "LIMIT 49990,10"). MySQL has to find all 50,000 rows, step over the first 49,990, then deliver the 10 for that distant page.
Since its version 58, Chrome removed support for commonName matching in certificates. It is now required for the certificate to contain a Subject Alternative Name.
When self-signing a certificate, copy the SAN extension values.
A nice side effect for me is that I was able to replace all my certificates by only one.
Target="_blank" - the most underestimated vulnerability ever
The page we're linking to gains partial access to the linking page via the
window.openerobject.
I updated my post about video convertion to fix some parameters.
Write tiny live HTML5 demos.
You can also watch this talk about Demo Reel and Tiny JavaScript to get some inspiration.
Hebocon is a robot sumo-wrestling competition for those who are not technically gifted. It is a competition where crappy robots that can just barely move gather and somehow manage to engage in odd, awkward battles.
Watch the video presentation: HEBOCON: The Robot Contest for Dummies to see real robots in actions.
If you want to participate to one of the worldwide tournament, do not forget to read the official rules.
While the original tilde.club doesn't seem used anymore those days, there are probably other servers running the same software. See for example tilde.town
Neocities is bringing back the fun, creativity and independence that made the web great.
Looking at existing sites, web 1.0 was funnier than today. And that's a good way to allow people learning how to make a website.
Alone in Pico : Postmortem of a 3d demake
Be sure reading this impressive postmortem of the Alone in Pico game
/cc @Tristan
Web Audio, the ugly click and the human ear
How to nicely stop a web audio oscillator.
Break the logjam with a simple API
Look at OfficeJS, which provides applications running only in the browser.
They use the jIO library, which access the online storages with cross-domain ajax queries (ie, with CORS activated).
See for example the bookmark app.
Terry Cavanagh just released a new game: Tiny Heist. It is a coffee break roguelike playable in the web browser, thanks to the haxegon game library.
PoisonTap - siphons cookies, exposes internal router & installs web backdoor on locked computers
Grey text on white background is unreadable.
Use tools like Colorable to check the contrast between some colors.
Reverse engineering the 1989 original: the quest for accuracy
You can read more technical informations about the reverse ingineering of Wonder Boy III on the Tigsource forum.
Wonder Boy III: The Dragon's Trap is the next game of Omar Cornut.
Center and crop images with a single line of CSS
You can get more informations by reading this quick overview of object-fit and object-position
and on the Mozilla Developer Network.
Disabling third-party cookies should be activated by default on browser.
ERRATA: disabling third-party cookie only prevent external website to set cookie. So, it is still be possible to see the social media fingerprint from any page.
Close the light, put the game in full screen and travel to Mars.
StrongLink - a searchable, syncable, content-addressable notetaking system
StrongLink is a notetaking/blogging system that supports search and sync. You can use content addresses (hash links) to link between entries, regardless of where they were created or where they're being viewed. Currently, entries can't be edited after they've been written, which you can think of like writing in ink.
It follow the principles of Content Addressing and Raise High the Merkle Tree, Programmers written by the author on his blog and content can be addressed with hash URI.
Everything needed to provide a clear overview of the HTML5 functionnalities related to audio.
In case you want to do write a chiptune tracker, read a Tale of Two Clocks to schedule web audio with precision.
Good advices, which can also be useful for HTML5 canvas usage.
Creating a Simple Bloom Filter
Bloom filters are super efficient data structures that allow us to tell if an object is most likely in a data set or not by checking a few bits. Bloom filters return some false positives but no false negatives. Luckily we can control the amount of false positives we receive with a trade off of time and memory.
A cool adventure game by demonixis, using their atlantis.js game engine.
Convert media files for self-hosted HTML5 site
Here are the configuration I use to quickly share media files over my ADSL connection.
Beware: not compatible with Safari (and probably IE)
Image
I use image magick like:
convert input.png -strip -interlace Plane -auto-orient -thumbnail 600x600 -quality 90 output.jpg
- -strip: remove all exif data
- -interface: create a progressive JPEG image
- -auto-orient: orient the image for correct viewing
- -thumbnail: resize the image to optimize the speed
- -quality: compression level
Then, display with: <img src='output.jpg' />
Audio
I use ffmpeg to convert the audio files in Opus format, which support seek support on Chrome:
ffmpeg -nostats -loglevel 0 -i input.mp3 -c:a libopus -b:a 128k output.opus
- -nostats -loglevel to remove all logs
- -b:a allow to reduce the bitrate
Then, listen with <audio src='output.opus' />
Video
I again use ffmpeg, to encode in VP9 and Opus.
ffmpeg -nostats -loglevel warning -i input.mp4 -c:a libopus -b:a 64k -ac 1 -c:v libvpx-vp9 -pix_fmt yuv420p -crf 10 -b:v 500k -vf scale=426:-1 -keyint_min 150 -g 150 -tile-columns 4 -frame-parallel 1 -threads 2 -f webm output.webm
- -nostats -loglevel to remove all logs
- -b:a to reduce the audio bitrate
- -ac 1 to remove the stereo
- -pix_fmt yuv420p to set the default vp9 pixel format
- -crf to define video quality
- -b:v to reduce the video bitrate
- -vf scale=426:-1 to resize the video
- -keyint_min and -g fixes the keyframe interval
- -tile-columns -frame-parallel -threads to support multitheading
Then, watch with <video src="output.webm" />
The thing is, if youâre hoping to get mass adoption, being smart is a bug. Being stupid is a feature.
Old School Color Cycling with HTML5
I'm so amazed by the canvas cycle demo and what can be achieved in such constrained environment.
Mark Ferrari did a presentation during the Game Developers Conference explaining his work: 8 Bit & '8 Bitish' Graphics Outside the Box.
Now, I want to play Thimbleweed Parkâ˘!
Pastejacking: a demo of overriding what's in a person's clipboard
This method can be combined with a phishing attack to entice users into running seemingly innocent commands. The malicious code will override the innocent code, and the attacker can gain remote code execution on the user's host if the user pastes the contents into the terminal.
It's not like anybody copy/paste command in terminal.
ETag caching gotcha in Roda + Nginx
TLDR: Response before gzip and response after restore from gzip doesnât have to be byte-to-byte comparable. And thatâs what strong ETag suggests. Weak ETag on other hand suggests that response might not be byte-to-byte comparable but the semantics are same.
If your web application can not use the Last-Modified header for caching (which does not allow more than one modification per second), ETag should be used instead. But be careful to use Weak ETag if you have a web proxy to gzip some data.
Playing with history interface
You should use event delegation for better performance and code maintainance. Be also careful to not prevent using the middle click (to open a new tab).
Your click handler should looks like:
document.addEventListener('click', function(evt) {
if (evt.target && evt.target.nodeName === 'A' && evt.button === 1) {
// Event triggered: use History API
history.pushState(...)
evt.preventDefault();
}
});
A sparkline is a small intense, simple, word-sized graphic with typographic resolution. Sparklines mean that graphics are no longer cartoonish special occasions with captions and boxes, but rather sparkline graphics can be everywhere a word or number can be: embedded in a sentence, table, headline, map, spreadsheet, graphic. Data graphics should have the resolution of typography.
It is possible to directly use unicode characters âââââ âââ (values U+2581 through U+2588) in your HTML.
You can also use SVG image. SparkSVG provides static SVG images with embedded Javascript to render it directly in the browser.
Jakecache: declarative manifest-driven app cache top of ServiceWorker
Service Worker is great, but if you ever had a look at it's API(s) you realize that they are complicated imperative JavaScript API's. These API's tend to scare many web developers who prefer a nice forgiving declarative approach.
I still don't understand why AppCache was dropped from the HTML5 specs.
Killing CORS Preflight Requests on a React SPA
Browser doesn't make preflight request if:
- method is GET, POST or HEAD
- no header manually set except Accept, Accept-Language, Content-Language, Content-Type
- Content-Type should be: application/x-www-form-urlencoded, multipart/form-data, text/plain
Progressive web apps: the long game
Chrome proposes to add webapp's shortcut on the android homescreen when matching certains criterias.
A different kind of web forum, where RSS is used everywhere (to get notifications and also as a database!) and where no authentication is required.
On undoing, fixing, or removing commits in git Easy to use git documentation.
Reimagining Single-Page Applications With Progressive Enhancement
A more detailled article about the URL fragment 'hack' which is used to display this page.
I'm trying to disable javascript by default (in Chrome Content Settings) on my Chromebook. Ads go away, all websites are displayed much faster... except when a website doesn't load without javascript!
I would imagine the UI/UX more like Tumblr, which allows more easily to define the kind of post.
You can do IRC from your browser with plain Javascript.
Excellent!
With a CORS proxy, it could even become an user friendly POSSE to IRC functionnality.
Any idea of a public IRC server that I could 'spam' without making users unhappy?
This blog is hosted with a single static HTML page (+ one CSS and one RSS). No javascript is used while reading it.
All posts have their own style with the 'hack' I described here.
How to ask an IndieWeb question?
The IndieWeb wiki advice people to connect to IRC in order to get help.
I'm not at all an IRC user, so, the easiest way for me to achieve this would be to use the online #indiewebcamp chat! and ask the question from my browser. This requires to keep a browser tab always opened and to check it often to verify if anybody answered my question. Such process doesn't seem convenient, as I believe my question will be forgotten after one day (due to logs's rotation).
I was wondering how I could make this more convenient for me when I discovered that the online chat is published with valid h-entry microformat. This means any indieweb reader should be able to parse the IRC logs and so, I don't have to check the online chat manually.
As the IndieWeb IRC bot Loqi automatically posts discovered links related to the Indieweb, I should be able to ask the question from my site, syndicate it on IndieNews, and it should appear automatically on today IRC logs.
If somebody on IRC, I should see the answer on my reader. More than this, the online chat seems to support webmention: does it mean I could reply to an IRC line directly from my site?
If somebody reply from his site and ping me with webmention, it is possible to be quickly notified and start an indieweb thread.
Anyway, time to confront theory to reality: how should I ask a question about IndieWeb while using IndieWeb tools?
Javascript image dithering
Anyone here remember the Nintendo's game boy camera?
This accessory allowed to take tiny picture using the 4-color palette of the Game boy.
A dithering algorithm is used to simulate more colors for the user.
Multiple algorithms exist, and you can learn multiple techniques here.
The game boy camera used the Bayer ordered dithering.
I implemented a tiny javascript example where palettes can be changed and pictures can be saved as PNG in localstorage.
A excellent summary of CURL options.
:target CSS selector
I recently discovered Pure CSS slides by OndĹej Žåra. This demo show that it is possible to implement a HTML presentation without any javascript.
It uses the CSS :target pseudo class to hide/display element of the page depending of the URL fragment identifier.
As you may have seen, this blog uses URL fragment identifier to provide links to the different posts. After adding some navigation links to browse from one post to another, I activated a CSS to only show the post matching the fragment.
article[class=h-entry]:target {display: block;}
article[class=h-entry] {display: none;}
article[class=h-entry]:target ~ #_about {display: none;}
While the style may be discussed, it provides an incredible fast navigation to the blog.
WebMention activated
I added a WebMention endpoint for this blog. As I don't expect much traffic on it, I kept it as simple as possible and it only consists on a mention storage. No automatic parsing/validation has been implemented.
Meanwhile, I also reopened the HTTP port of my blog, to allow external indieweb tools to fetch it, without getting a SSL validation error due to my own CA.
Simple & straight-forward WebRTC DataChannel establishment
In case you would like to experiment WebRTC, this guide provides a clear overview of the connection process.
I believe it could be possible to combine this with Webmention to create some kind of decentralized VOIP/Video API:
- Offerer publishes its WebRTC's description on a temporary URL on his website
- Offerer send a Webmention from this URL to the Answerer web site public contact page
- Answerer get a notification of this WebMention message
- Answerer publish a response description on a temporary URL on his website
- Answerer send a Webmention to Offerer
- Offerer get a notification and finalizes WebRTC establishment
In order to parse the Webrtc description, it would be needed to specify a microformat.
How to write on the / partition of a Chromebook
Put the Chromebook in developper mode.
Open a terminal (Ctl+Alt+T).
sudo /usr/share/vboot/bin/make_dev_ssd.sh --remove_rootfs_verification
Reboot.
Congratulations to all those people for their energy and enthousiasm!
To sum up, you activate the port forwarding from a terminal in order to get another terminal in the browser.
It doesn't seem it is how Gotty developper expected his application to be used :)
But it seems people would like to also use it as a terminal in the browser, which will be fixed when those issues will be solved.
My javascript side project has been modified to go offline first. The landing page now only access the HTML5 localstorage database. It does not expect any connection to a server by default.
Anybody can try/use it without needing any server/account, as all calculation/storage are done on the browser side: virtually infinite number of users only with a static web site.
For FirefoxOS's users, this application allows to keep track of your running/walking sessions. Install it from the marketplace.
A virtual console where you program tiny games in LUA and share them as a .png image.
Medium activated some days ago a passwordless signing method: enter your email, receive a link, click on it and you're logged in.
I think it simplifies the site usage (in order for them to keep users) without changing the security.
My workflow to access any webservice is always the same: go to the login page, select reset password, receive a link by email, click on it, enter new random password (with a pwgen like tool) that I don't store/remember and I'm finally logged in for a single session.
If you compare the 2 methods, it's always a matter of receiving an email to access the site. In both cases, if the email account is compromised, it leads to the same kind of issues.
Some of my readers are wondering why the "link" value in my RSS feed sometimes link to external websites: it is because I wrote a Daring Fireball-style linked post, which is a kind of comment about the original link.
Putting the link directly in the RSS allow readers to directly go to it without interruption (in case the RSS reader does not support embedded HTML for example).
My document storage application now uses bcrypt to store the password and provides a rate limiting access to the login page after some failed attempts.
RSS added to the blog.
As allowed by the specification, the RSS's items do not have a title element (as they all have a description element).
If your RSS doesn't display the feed correctly, switch to one which correctly display titleless feed items.
This article explains why bookmarklets are dead.
I believe there are more reasons to confirm their death:
- can not be used on Firefox with CSP activated pages (like Github)
- can not be used on a chromebook with guest mode (as there is not bookmark tool bar)
- extremelly difficult to use on mobile devices and firefoxos
At some point, I plan to drop my bookmarklets and replace them by a personal search engine in the URL bar (like DuckDuckGo !bangs but only for my own webservice).
Using SFTP File System instead Google Drive
Please note that this functionnality doesn't seem available in the chromebook's guest mode. There is an "Add new services" button in the Files application, but it does nothing...
Then, I don't believe this can be used instead of Google drive, as it does not provide a real offline mode with file synchronisation. Maybe if somebody ports the unison file synchronizer (as an extension), this could start to be interesting.
What an impressive HTML Canvas demo by Masayuki Kido!
Dive into the tutorial if you want to do some video games / animations.
Flipboard's people use the canvas to get an 60FPS animated RSS reader. While it is also impressive from a technical point of view, I'm not sure loosing the HTML semantic is a good solution in long term.
The web is not an application but it is good for a lot of other reasons.
How to access a raspberry pi running a fresh raspian image, ... without a TTY.
First of all, search for the pi on the network:
nmap -sn 192.168.0.0/24
Then, access it by desactivating the TTY, the host checking and explicitely pass the password:
sshpass -p DEFAULTRASPIANPASSWORD ssh -o 'StrictHostKeyChecking=no' -T RASPIANUSER@192.168.0.1 "dash -i -v"
Since I switched all my domains to HTTPS, I got a lot of bugs with my ZTE Open C phone, running on the default FirefoxOS 1.3 (HTTP cache and cache manifest were buggy).
Sadly, it is not possible to add a new certificate authority if it is non rooted. But the mozilla community provides recent update tools and Firefox OS images for this phones. Be careful, this only works for the french version of the ZTE Open C. Thanks to them, I easily updated my phone to Firefox OS 2.1.
When done, I checked multiple explanation pages to understand how to add a new certificate authority to Firefox OS.
$ sudo 'adb shell "ls -d /data/b2g/mozilla/*.default"'
/data/b2g/mozilla/tvlkvdcd.default/
$ cd /tmp
$ mkdir -p keys && cd keys/
$ curl -k https://me.gidzit.org/gidzit.org-ca.pem > gidzit.org-ca.pem
$ adb pull /data/b2g/mozilla/tvlkvdcd.default/cert9.db .
$ adb pull /data/b2g/mozilla/tvlkvdcd.default/key4.db .
$ echo "" > pwdfile
$ certutil -d sql:. -W -f pwdfile
$ certutil -A -n "gidzit.org" -t "C,," -u "V" -d sql:. -i gidzit.org-ca.pem
$ certutil -d sql:. -L
$ certutil -V -n "gidzit.org" -u V -d sql:.
$ adb push cert9.db /data/b2g/mozilla/tvlkvdcd.default/
$ adb push key4.db /data/b2g/mozilla/tvlkvdcd.default/
Everything correctly works now. Thanks for mozilla and its community for such great tools.
How to make a video game more appealing: Juice it or lose it - a talk by Martin Jonasson & Petri Purho. You can try the Juicy Breakout demo.
But be aware of the weakness of such approach: Don't Juice It or Lose It - a talk by Folmer Kelly.
Interesting presentation from Heydon Pickering about using only HTML semantic in CSS: effortless style.
In order to improve trust over the data sent by my domains, I completely dropped HTTP port, and only access them with HTTPS. Of course your browser will now complain that my sites are not trusted, but to be consistent, browsers should also complain about insecure HTTP sites.
If you trust me, you can still add my certificate authority file in your list of certificates. Doing this fixes all my HTTP cache/manifest issues over untrusted SSL.
Do not hesitate to read those good explanation links to switch to HTTPS:
- Becoming a X.509 Certificate Authority
- Des certificats signĂŠs par votre autoritĂŠ de certification avec OpenSSL
- Your OpenSSL CSR command is out of date
- Mozilla SSL Configuration Generator
- Mon blog plus à poil sur l'Internet, grâce à TLS
- Getting a Perfect SSL Labs Score
When configuring, do not hesitate to use the SSLlabs test.
h-card added on the homepage.
Citizen of the Indieweb: level 1. This page now has a rel="me" link. My email is also human readable (nospam1@gidzit.org) with HTML Escape Characters, as for now, I would like not to have custom JS or class based CSS. Let's see how long it will take before spam bots start using it...
Just in case, here is a JS code example to escape the email:
var email = "john@example.org",
i,
result = "";
for (i = 0; i < email.length; i += 1) {
result += "&#" + email.charCodeAt(i) + ";";
}
document.write(result);
TV5Monde's interruption: a password on a post-it