Code Monkey home page Code Monkey logo

2014.cascadiajs.com's Introduction

CascadiaJS Website

Platform and Services

This website is built on Enhance and deploys to Begin.

It currently depends on the following external services:

Enhance Structure

Enhance is an opinionated HTML web framework that renders pages on the server and supports progressive enhancement on the client for SPA-like experiences.

An Enhace app has two top-level directories: app and public.

The app Directory

The app directory contains all the code for our application, in addition to Markdown files that power many of the static webpages.

Disclaimer: Enhance is a new and rapidly changing web framework. We will do our best to keep this README up to date, but please reference the Enhance docs as the source of truth.

Here's a brief rundown of each subdirectory and its purpose:

  • api - controllers for paths in our web app, they generally call APIs and load data, which is passed to the view logic in pages
  • elements - custom elements that render and expand on the server
  • markdown - static Markdown files
  • pages - views (generally in HTML) that, if needed, render data passed from their API controller

The public Directory

This contains static files (images, css, etc).

Enhance makes all of these files available via the special /_public/ path off the root. In addition, this project has turned on fingerprinting, so when you deploy a file to the cloud (i.e. /images/logo.png), its filename is re-written with a unique hash attached (i.e. /images/logo-abc123.png) and when you reference this file in your markup (using just /images/logo.png), Enhance will re-write the response to the client on-the-fly to reference the filename with the attached hash.

App Design

For the most part, file-based routing makes it pretty clear what paths are supported by our app. For instance, the existence of pages/2024/index.mjs tells you that the app supports a /2024 web page.

Pages that require data to render are paired with an identically names JS file in the api directory.

There are two files named $$.mjs that live in the api and pages directories. The dollar sign ($$) functions as a wildcard and catches paths that are not defined by named files. This enables us to render Markdown files from the md directory based on the path requested:

  • /code-of-conduct will render markdown/code-of-conduct.md
  • /2024/cfp will render md/2024/cfp.md

If there is no Markdown file that matches the path, a 404 error will be returned.

Install

  • clone this repo
  • npm i
  • install the Begin CLI, see instructions here

Setup

If you need to run/test the mailing list subscription action (POST /signup) you will need to configure the following environment variables: CIO_SITE_ID, CIO_API_KEY, CIO_APP_KEY

Run dev server

npm start

Generating social sharing images for speakers and other web pages

You'll need to install puppeteer globally first:

PUPPETEER_EXPERIMENTAL_CHROMIUM_MAC_ARM=true npm i puppeteer -g

Then link it so that you can run the script

npm link puppeteer

Making contributions

If you would like to make a contribution, please fork this repo and send us a pull request.

2014.cascadiajs.com's People

Contributors

bclinkinbeard avatar bevacqua avatar brycebaril avatar bzuillsmith avatar colinmegill avatar crtr0 avatar davidchang avatar deadprogram avatar ericmann avatar evanmoran avatar flohdot avatar fotoverite avatar geelen avatar getify avatar jasonrhodes avatar jheising avatar kevinburke avatar landau avatar letmypeoplecode avatar llkats avatar mattly avatar mikermcneil avatar mpriour avatar nebrius avatar noidontdig avatar pvenkatakrishnan avatar rmg avatar ruthieb avatar thom4parisot avatar twokul avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

2014.cascadiajs.com's Issues

"Alice in Videoland" by Rachel Nabors

Code and art by Rachel Nabors
[email protected]

Project title: Alice in Videoland

Project concept and description:
"Alice in Videoland" started as a demo for an article on interactive web design for Adobe's digital Inspire magazine. It turned into a little tale all its own. Using jQuery, a few key plugins, and CSS animations, Rachel was able to transform the browser into a portal to Alice's world. The story is updated with a modern setting and modern characters. Future installments will be released as code challenges with assets and storyboards in a repo on gitHub.

Status: Completed and available at http://rachelnabors.com/alice-in-videoland/book/

How to respond to "Call for Makers"?

Hi! The link in "Go to the Call for Makers new issue" in the CFM readme doesn't work. Am I just supposed to use the CfM label for a new issue?

Glitchbooth by Brad Bouse

Glitchbooth is a photobooth that creates realtime glitched selfies. The project uses Javascript-based computer vision (like Headtrackr and JSFeat) to identify faces and objects in the frame, and then distorts the image realtime using webGL pixelshaders.

This project is a play on the ever-popular photobooths at weddings and events. Instead of crisply capturing the subjects, their images will be distorted using a number of filters like glitch, polygons, 8-bit, phase-delay, and face-replacement. With some filters, the images will simply be distorted (shifted, sliced, blurred, or glitched)--in others, the subject will only be the seed for an abstract, generative image (i.e. a polygonal pattern or sequence of intersecting lines).

Glitchbooth will be open source with a plugin system for the filters. I'll provide the base set of filters and instructions for creating more--and anyone will be able to submit additional filters. Ambitious folks could even create them at Cascadia.

The installation will be controlled by a Powermate knob on a pedestal--simply rotating the knob will change the filter. Pushing the knob will create a screencapture and allow the user to tweet the image from the @glitchbooth account, tagged with #CJS14. The images will
also be available on glitchbooth.com.

(Almost) everyone enjoys seeing themselves on screen. This is a simple, participatory project that would work well in a common space where people mingle on breaks.

Hardware requirements:

The installation will depend on the space at the venue. Ideally it's located somewhere most people will pass by and projected life-size. I can provide all of the hardware, assuming the venue is secured.

How the heck do I deliver this by 7/31?

This project comes from prototypes for Whispering Galleries, a project I recently made with Amaranth Borsuk. It is a Leap-and-webcam project commissioned by Site Projects and currently installed in the New Haven Public Libraries. In the installation, the reader sees a distorted image of herself behind an entry from an 1858 diary. When she moves her hand, the text breaks up to reveal a poem within the diary entry (an erasure). The reader can manipulate the text and particles with her hand (using data from the Leap Motion). The result looks like:

wg-015

wg-013

For Whispering Galleries, we experimented with a number of different distortions of the webcam image, which will be the basis for Glitchbooth. I'll pull the code out of the abandoned branches and abstract the processing pipeline from Whispering Galleries for reuse in Glitchbooth.

Who the heck am I?

I gave a talk at Cascadia 2013 about creative code (Make Art Not Money) and am a co-organizer of Seattle.js. In addition to the aforementioned Whispering Galleries, I made Between Page and Screen, also with Amaranth Borsuk. It's an augmented-reality book of poetry, published by Siglio Press, that has been exhibited internationally. Professionally, I'm a front-end engineer and product lead, and have done a bunch of startup-y stuff.

contact email: bradbouse / gmail

Provide option to NOT print handles/names on hoodies

Some people love having their handles/names on their hoodies. Some people hate it. For cascadiajs.next, please allow an option for attendees to have a generic hoodie without any name/handle information on it.

Thanks!

"The Black Brick Road of OZ #11" by Rachel Nabors and Daria Yeliseyeva

Code and Design: Rachel Nabors
Art and Interaction: Daria Yeliseyeva

Project title: The Black Brick Road of OZ #11

Project concept and description:
Black Brick Road 11 is a joint collaboration by the Russian cartoonist known as "Xamag" and award-winning American cartoonist-turned-frontend developer Rachel Nabors. Xamag's ongoing interactive web comic "The Black Brick Road to OZ" features explorable portions and discoverable content. In this ambitious piece, the audience is invited to explore the map and uncover disturbing secrets alluding to future plotlines.

Implementation: Complete, available at http://cdpn.io/lqswg

"Webji II: The WebSocketing" by Randall A. Gordon

"Webji II: The WebSocketing"

Randall A. Gordon
[email protected]

Many moons ago, when the Palm Pre came out, I made a silly little demo that used the Pre's accelerometer to control a virtual ouija board which I called Webji.

image

Which was fun. But, I've always wanted to make a physical version of the board which is controlled by MAGIC! Which is to say, via a magnet being moved around by stepper motors underneath a CNC milled version of the ouija board.

It seems to me like CascadiaJS is the perfect reason to convert the server over to Node.js and call on some of my best friends—WebSockets and node-serialport—to make a JavaScript-powered talking board a reality!

The software is already ready to go...part of it is just in Ruby at the moment! I'll get that aspect taken care of pronto. Just need to buy some motors, rescue a nice, strong magnet from an old hard drive and start milling parts to take care of the hardware end of things.

RGB LED Display w/Curated Submissions and Sensor Input by Kassandra Perch

Submitters

Just me, Kassandra Perch (kperch on the githubz)
my email for all intents and purposes (incl. reimbursement) is kassandra [at] kassandraperch.com

Concept

I want to create an RGB LED grid with a BeagleBone Black and the npm module I wrote (open-pixel-control). Though I'm considering using fadecandy and that npm module. We'll see - it in theory should work either way, but I know for sure it works with BBB.

This panel will have some built-in patterns and animations (pixel art comes to mind), but I want to create a way to let people put their own designs on the board. Depending on how far I get through development, that could be a web app that submits to a REST API, or that could be people emailing me JSON files, or snippets of JS. I want people to be able to submit their pixel art to display, and I'll find a way to do so.

Tech Specs

Here's the plan so far to fit the budget:

a 12 x 20 grid of evenly spaced "neopixel" RGB LEDs, run via a beaglebone black board (or fadecandy board) and Node.JS. I'll need a power outlet - the BBB needs a power source, and the grid of lights will be powered by a 5V/10A switching power adapter. Other than that wifi would be nice but not necessary - new designs can be uploaded with a USB cable.

The way I'll go about it seems to be the most economical- buy a bunch of meter-long strips, then cut and re-solder them in a grid format, and glue/tape them to a supporting board. If the grid gets larger, I'll add connectors between multiple boards.

I have plans to obtain an accelerometer and have at least one design use the accelerometer and react to it.

A quick ballpark of the measurements of the panel leave it a little over 26" x 15.5", but I can go bigger -or- more dense pixels with a bigger budget. As it stands, I'm accounting for a $100 reimbursement and going out-of-pocket a little.

The web app I'm thinking of would be a series of pixels that you can change the colors of- I'm seeing if there's any painting programs I can use that are open-source JS. If not, I'll just have people email me JSON files with arrays of pixels, and I'll show them. Still fleshing out the submission process.

Implementation Plan

I've basically broken this project down into several stages - from a minimum to an ideal. I'll just keep iterating from minimum up until I run out of time.

Minimum Milestone - Panel w/submittable designs

I'll have a 20 x 12 panel of lights, and I can upload people's drawings manually through the BBB. The panel will have a button that lets you cycle through the designs.

Estimate time to completion: 1 week after I order parts

Milestone 2 - Accelerometer

One of the designs on the panel will react to an attached accelerometer- I'll make it accessible via a glove or stick.

Estimate time: a couple of days beyond minimum

Milestone 3 - Web App to submit designs

Users will be able to submit arrays of pixels in a JSON format, at a URL. They'll be curated for appropriateness, then tossed into a queue for the panel to cycle through.

Estimate time: about a week? beyond milestone 2.
Prereq: wifi available at show.

Milestone 4 - More Sensors

I haven't thought this one through, since I don't know I'll get to it. But I could add more sensors in (proximity, light, buttons) and have the panel react to those in different designs.

Estimate: ???

Display contents

I was planning on documenting the build with photos and notes. If you'd like, I can include a paper version of the log to sit at the table with the display, to show folks what went into the project.

All the code will be open sourced with an MIT license.

I'll add a comment before the deadline with some sketches, and more detailed info. If you have any questions, leave a comment and I'll do my best to answer them quickly.

Add next iteration of Sponsors section to site

Current to-do:

  • Add current confirmed sponsors to website Sponsor section: We don't currently have the logos for any of these sponsors. Will reach out shortly. Please add filler block on site using our current styling with sponsor's name.
  • Twilio --Giga tier, hacker zone sponsor logo HERE
  • Esri --Giga tier, coffee sponsor
  • Sauce Labs--Giga tier, lunch(1) sponsor
  • Concurix--Mega tier, JSBBQ sponsor--logo emailed to @chrisdickinson

You don't need to display all of this info. Do with it what you prefer!

  • Add Sponsor tiers to sponsor section of website. See this doc for copy to complete the sponsor section.

Moving - submit CFP late?

Hi! I've been moving over the past week and was away from most internet access. Is there any way I can still submit a CFP today/tonight/early tomorrow morning?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.