Blog: Web

Connecting Gitter to the Matrix network (native feeling Matrix bridging). All public Gitter rooms are available via Matrix, and all Gitter users natively exist on Matrix which means you can chat back and forth transparently between users on the Gitter side and the Matrix side. Burning down the list of impedance mismatch between each platform so edits, replies, emoji, markdown, etc all look seamless. Going over how we iteratively tackled this kind of bridging to an existing legacy system without any concept of bridging before-hand. We live in exciting times: open standards-based interoperable communication is on the rise again, and we hope Gitter’s new life in Matrix is the beginning of a new age of cross-project developer collaboration, at last escaping the fragmentation we’ve suffered over the last few years. Read the rest on the Matrix blog.

Unicode is hard. Here's a guide to getting native Unicode Emoji right. The switch from image-based emoji to native Unicode wasn't a straightforward journey and included many intricacies to get production ready. Support varies widely on each OS, even between the browsers on the OS. We also wanted to support falling back to image-based emoji for environments that do not support everything yet, otherwise people would see black squares. As a simple example, most Linux environments do not have Unicode emoji support unless you manually install a font. I consider this blog post the survival manual I wish I had had when implementing native Unicode emoji myself. Read the rest on the GitLab blog.

NB: This was my experience around September, 2016 and I would consider myself a bit of a Docker noob at the time. Things may have changed and improved since then to make life easier. This just documents the troubles I ran into and shouldn't be considered setup guide worthy. TLDR; Use Docker Toolbox with the VirtualBox driver (Docker for Windows isn't ready) Watch out for CRLF line endings that can get introduced from things like checking stuff out with git. gitter-webapp is the project/repo that is home to the backend and frontend code for Gitter webapp. The team is pretty much exclusively macOS based but I prefer Windows. For a while, I used ShareMouse so that I could use my macOS machine as just another

I've been playing around with Bezier curves and elliptical arcs for my on-going CNC plotter project. Instead of just using g-code commands which are standard on most CNC machines, I decided to support SVG path commands. This means supporting the linear moveTo(M, m) and lineTo(L, l) as well as curve(C, c, S, s -- Q, q, T, t)/arc(A, a) commands. Here are a few articles to get you up to speed if you're unfamiliar with the SVG path commands: SVG Basics—Creating Paths With Line Commands by Steven Bradley SVG Basics—Creating Paths With Curve Commands by Steven Bradley tl;dr, I just need a library The JavaScript and C++ implementations are available on GitHub: SVG Curve Library. I implemented the SVG path commands in JavaScript and ported it

I competed in the 2014 GD.SE Anniversary Game Jam and created Traces, a top-down pseudo-3D shooter. In Traces, the goal is to power each building with a laser beam in sequential order all while killing or avoiding the enemy blobs. Activate the first building in sight and find the next building at the end of laser beam. Eat meat to restore your health. Play Now (online) I decided to make a web canvas game this time because I had a huge barrier to entry problem in my last game jam game, Super Bounce (you had to download the executable and then register the UI system I was using). For this game, I used CraftyJS, a JavaScript canvas game engine library which worked great. I

I discovered Render Components from Guy Bedford in an email exchange where he laid out some basic code for the concept. Bedford has a small writeup on the ZestJS site, but this guide will cover all the same points. Because there is no written spec for Render Components, this guide covers one way of implementing this concept/idea. Details like naming conventions might not be the exact same as someone else. This guide will go over building a pseudo-YouTube video site and workflow setup to start using Render Components. Render components are applicable in many situations, including game UI. Game UI is just like a single page web app. I used render components in Unity with Coherent UI for my games, Radius and

I was really intrigued by the BeagleBone Black's (BBB) low cost, great performance, and IO all on the familiar Ubuntu OS. I am still quite new to the BeagleBone Black and hope to create some great projects with it in the future. This is a quick guide to get you up and running with Ubuntu on your BeagleBone Black. I created this guide because many of the guides and instructions are scattered across many places and I wanted a concise place to reference. Flashing/Installing Ubuntu on your BeagleBone Black Download the latest Ubuntu image. Pick the latest .img.xz file (on the bottom) from the rcn-ee site ex. http://rcn-ee.net/deb/flasher/saucy/BBB-eMMC-flasher-ubuntu-13.10-2014-03-27-2gb.img.xz Extract the .img.xz download to get the .img file. You can use 7zip to extract it. If you

Font legibility, crispness(aliasing), and physical size vary between fonts when set at the same font-size. Fonts are designed/optimized at distinct sizes and alias extremely well at those specific size intervals. This makes it hard to set a catch-all size on the web and have it work beautifully with many typefaces. As you can see from the image above, Calibri is a much smaller font compared to Ubuntu and Open Sans. You can also see the varying levels of clarity between the sizes of each font. So what if you have a font stack in CSS that looks like font-family: 'Ubuntu', 'Calibri', sans-serif; and you fallback to Calibri. All of a sudden your sites font size greatly decreases. Of course Calibri is a

About WordPress is an open source, PHP based blog and content management system(CMS) made to streamline the process of getting your website up and looking pretty. The WordPress community makes a multitude of plugins (over 30,000) that extend the functionality to make it work just the way you like. There is also an enormous support community to help with any issues. Nginx(pronounced "engine-x") is a popular light-weight server alternative to Apache. It is considered leaner and meaner than Apache because it uses an event-driven system that chomps through requests rather than spinning up separate processes and threads for each request. Prerequisites: User with root privileges Linux, Nginx, MySQL, PHP (LEMP) stack Download WordPress Download the zipped package(archive file) directly from the WordPress website: wget https://wordpress.org/latest.tar.gz Unzip/Extract

Here is a basic how-to guide on setting up and managing a swap file. I am using Ubuntu 12.04 but I am sure it applies to other versions and Linux distros. I recently had to figure out how to increase the size of an existing swap file so I thought I would throw together a guide(see section below "Create Swap file` if you need to do this). A swap file(called a page file in Windows) is a way to increase memory/RAM capacity without upgrading hardware (virtual memory). It is simply a file on your hard drive. When your physical sticks of RAM get full, the system will copy over to the swap file to avoid a crash or lose data. Swap

Go straight to the VGA Simulator About The VGA Simulator is a web based tool to easily view a raw VGA signal without having to hook it up to an actual CRT monitor. Easily review and save any frames generated. It uses horizontal sync, vertical sync, and red, green, blue to recreate pixel perfect frames. The purpose of this tool was to create a faster way to debug FPGA/VHDL projects that utilize VGA. The problem is that synthesizing and generating a bit-file takes too long with Xilinx mainly because it only utilizes a single core. Although we have Simulators such as Isim to debug almost every aspect of a design, it is hard visualize a bunch a 1 or 0 flying past the

Coherent UI developed by Coherent Labs is a fully featured GUI system for any Unity (or .NET) game that utilizes the power of HTML, CSS, and Javascript. Use any bleeding edge HTML5, CSS3 features that run on WebKit and any JavaScript libraries you need. It is literally as easy as making a web page on Chrome. It also utilizes the WebKit debugger (just like Chrome) so it is easy find the root cause of any problem. The video explains the whole process but this blog post contains some nice references (see video description for timestamps). Play video

Basic <Directory> tag explanation Here is a sample script allowing all users: <Directory "/var/www/static/"> Options -Indexes Order deny,allow Allow from all AllowOverride All Require all granted </Directory> Options -Indexes: Removes the ability to view all files in directory if index html or php are not present Order deny,allow: Applies the deny operations before the allow operations AllowOverride All: Allows .htaccess to override settings in httpd.conf, etc Require all granted: some mod_authz_core thing. Not completely sure. Create password protected Directory or Location: # PW protect URL <Location "/secret-stuff"> AuthType Basic AuthName "Private Directory" AuthUserFile /etc/httpd/.htpasswd Require valid-user </Location> # PW protect directory <Directory "/path/to/directory"> # ... Look above </Directory> AuthType Basic: Set the Basic authentication method AuthName "Private Directory": Provide a name for the location. This shows up on the login modal/popup (optional) AuthUserFile /etc/httpd/.htpasswd: Specify the pathname to the file that contains usernames and passwords. The usual

This is a basic guide to get Django running with WAMP. This tutorial was written with Python 2.7.5 and Django 1.5 in mind but applies for all versions. You can use the Windows command prompt (cmd) whenever it says to run a command. I suggest using this command prompt alternative. Basic Setup: Install WAMP Get mod_wsgi module for apache. I suggest getting it from here. Add mod_wsgi.sotoC:\wamp-2-4.64bit\bin\apache\Apache2.4.4\modules Add the line in httpd.conf: LoadModule wsgi_module modules/mod_wsgi-ap24-py27.so Install Python 2.7.5 because Python 3.3 does not have enough supported packages Install virtualenv (python package) using this command: pip install virtualenv Create a folder called www-src alongside your wamp www folder and navigate to it in cmd using this command: cd C:\wamp-2-4.64bit\www-src Create a new environment called venv using this command: