Beyond Responsive: Building a mobile web you're f*ing proud of - Kate Hudson
- Many people only use the web via mobile!
- Technology failures do happen - prepared and engaged tech staff make it better.
- Test features before their time. Use service workers: transpile and polyfills.
Really good engineering is finding adequate solutions to problems that matter.
This talk was super useful for me. Someday, I intend to refactor my blog's backend from PHP to Node, but I sure as heck don't want to change the database that holds all the content.
- node-mysql: A Node package for doing SQL
- Bookshelf.js: An ORM that goes on top of knex; does common CRUD operations for you.
- Knex Querylab: Fiddle with the knex syntax
- SailsJS: An MVC framework for Node that talks to databases
(math == art && art == code) - John Brown
I always love John's talks; I find them super inspiring. Confession: I never finish my "homework".
- Color pallettes = math
- music = data
- Learning is more fun with art becuase you're in control. This is the freedom of personal projects.
- @AvatarGlitch: A Twitterbot that will make you a glitchify your avatar
- Art in a physical space: you can watch people interact with it.
Mariko's image processing parts were the most interesting to me; it's related to screen printing on glass that I took last year.
- Mariko's a non-native English speaker. Finally with knitting machine manuals, she's doing tech in her native Japanese.
- How to even bitmap?
npm install gm: GraphicsMagick and ImageMagick for node.js - https://www.npmjs.com/package/gm
- Greyscale: Make the grey == the highest of the RGB values
- To make that monochrome requires dithering; methods include halftone, bayer and screw.
Cold War - Simon Swain
When Simon finished his talk, he walked right by our table and everyone just watched him with jaws agape. It was absolutely mind-blowing. There doesn't seem to be a video of Cold War from JSConf, but there are videos of other versions from both TXJS and EngineersSG.
We owe our jobs to cold war networking technologies.
- With two warring states (orange vs. blue), who wins?
- In animation, 60 fps = 16ms to render a frame to keep the browser below the jank point.
ctx.store() for canvas states
- The unit flocking came from rules: stay near to other units, shoot opponents with just a hair of randomness added.
- The slideshow was all in CSS/JS, including the glitch effect
- Have a play with at Cold War at https://coldwar.io/coldwar or other wonders at https://coldwar.io/.
- Make your own Cold War: https://github.com/simonswain/coldwar
Steve Kinney: Building a musical instrument with the Web Audio API
- Good news - someone put a synthesizer in your broswer.
- Math notes: https://github.com/stevekinney/octavian
- Hook up any input or sensor to the browser. Face Terimin! Johnny Five Music! Power Glove! Music Bot!
Maintaining a Local Dev Meetup - Jacob Roufa
- Everyone learns at a different place.
- The Cathedral & the Bazaar by Eric S. Raymond
Meetups are a wonderful place to become a better version of ourselves.
- It's possible that I shouted unduly - I just love FreeGeek!
To run a meetup, you need a Code of Conduct. It's about devining harassment explicitly.
- A meetup needs space and internet.
- Better than being excellent to each other; be of service to each other
If you wish to learn ES6/2015 from scratch, you must first invent the universe - Ashley Williams
I teach beginners, and beginners teach me.
- The conceptual understanding is exposed by the language.
- Picasso = abstraction. Through a deep understanding of the core subject.
- When abstractions attack: "Draw the f*cking owl."
Teaching is nature's way of letting you know how sloppy your understanding is.
30 Minutes or Less: The Magic of Automated Accessibility Testing - Marcy Sutton
- A11y = accessibility
- 1/5 of the world's population has some disability.
- Easy win: styles for focused elements
- Turn on your Mac's included screen reader - Cmd F5.
- Firefox's Developer Tools: Structure Check
- Chrome's Dev Tools: Accessibility Audit
- npm: A11y + phantom = automated tests
You can watch all of talks - there were so many that I either missed or didn't have time to write useful notes for. I hope to get to all the videos someday!
I never write a talk before it's been accepted somewhere. While I do keep notes on articles or demos that might come in handy, it just doesn't make sense to invest all the time in writing the slides before I know it's going to be useful.
Talk preparation usually takes all the time that I can give it. This means the majority of my bus rides, lunches, evenings and even some whole days from the weekends. Preparation involves researching the topic; creating and browser-testing demos; writing blogs; sourcing, creating and re-sizing images; writing, practicing and updating the slides. It can be a significant burden; especially for a new talk and when I've only got a month or two of notice for the conf.
I can make a pretty good estimate about how long it took me to prepare my most recent talk. This talk was completely new, and there were 7 different demos that survived the final cut. Since I've done a few talks in the past, I didn't have to spend any time researching a slide framework or figuring out how to use it.
It was seven and a half weeks from when I got the acceptance notice for this talk to the day of the conference. On about 40% of those days, I already had something else planned - such teaching my first GDI Seattle class. I also have a full time job. Finally, I spent 4 days traveling and attending the conference. With the remaining days, I worked on my talk as much as possible. I absolutely would have used more time to work on my talk, if I'd had it. All in all, I spent around 160 hours preparing my talk.
For about a year, I was a member of MakerHaus, a maker space which was reasonably convenient for me. Alas, they closed last year, shortly atfer I had taken the class to become certified to use their laser cutter. Since I am eagerly awaiting my Glowforge laser cutter, I thought I'd share my notes from that class. Note that while the general concepts should apply to the Glowforge, these notes were originally for a unknown laser cutter: shown in this video.
The depth of the laser's cut is a result of the combination of power, speed and material. Run a test grid of speed and power combinations to calibrate materials.
Maximum size is defined by cutter; 46" x 34" in this case.
Acceptable materials (and their max thickness)
- Acrylic (3/8")
- MDF (3/8")
- Plywood (3/8")
- Hardwoods (1/4") varies by species
- Softwoods (1/2")
- Cardboard (1/2")
- Leather (1/4")
- Paper (varies)
- Stamp rubber (1/2")
- Uneven surfaces such as bumps or welds
- Mirrored surfaces, sparkles, glass
- Metal (unless it's been coated with Cermark etching spray)
- Halogens (fluorine, chlorine, bromine, iodine and astatine)
- Anything including Teflon
- Polycarbonates, PVC, vinyl (bad fumes)
- Tap Plastics in SLU
- Crosscut Hardwoods (larger sheets)
- Home Depot
- DXF files are best.
- Run Illustrator files through Corel to make them happier.
- Can auto-engrave with .jpg and .tiff files. Use Draw on host computer.
Laser Cutter Operation
- Pause / Start: Can pause program and re-start.
- Test: Laser traces outer edges of shape. Watch this with the lid up before starting a burn to ensure design will stay on material.
- Adjust z axis (z to enter/exit)
- "Download" will delete current from cutter
- Stack steel weights.
- Move weights or material when under laser.
- Move laser by hand.
- Leave on.
Getting the perfect configuration set up is part of what makes Sublime Text a dream. Here are some of the most useful configuration changes (from Sublime's defaults) that I've found. You can set these by editing the preferences file at Preferences > Settings - User.
- With the AutoFileName package, don't automatically insert image dimensions.
- In sidebar, show all folders with bold font.
- A smoother cursor blink transition.
- Don't close Sublime Text when there are no open files.
- Don't copy if nothing is selected.
- Be sure all saved files end in an empty line.
- Use this encoding when it can't be determined automatically.
"file_exclude_patterns": [".bak", ".DS_Store", "Thumbs.db"]
- Don't show these files in the sidebar or GoToAnything.
- "Find" field is pre-seeded with highlighted text in document. Keeping this in user preferences ensures it works on OSX.
"folder_exclude_patterns": [".git", ".sass-cache", "tmp"]
- Don't show these folders in sidebar or GoToAnything.
- Prettier text.
- Use a lighter background color for line where cursor is.
- Use special color for tabs with unsaved changes.
- Add just a little white space below lines.
- Add just a little white space above lines.
- Whether OSX opens dragged-in files in a new Sublime window.
- Whether title bar shows entire file path instead of just name. Keeping this in user prefs ensures it works on OSX.
- How many spaces is a tab equal to?
- Use spaces instead of tabs.
- Removes any auto-indented whitespace when on new lines.
- When a file is saved, delete any whitespace at the end of a line.
- Have a wider cursor marker for better visibility.
- Make it so that dashes et cetera are considered part of a word; and thus don't break a selection with a class name, for example.
- Set word wrap to by default for all file types / syntaxes. Can still enable / disable word wrap via View menu. I don't know why this
"false" has to be a string, but it does.
(I'm a few days late in marking this anniversary. What can I say - I've been busy. Heck, I've had a full plate for a year now, which is the point of this blog.)
One year ago, I gave my first conference talk at SassConf 2014. My 10 minute lightning talk "Color In The Real World" was about how we perceive color, how artists use tricks with color for realistic effects in paintings, and Sass color functions can replicate those tricks.
In March of this year, I presented "Colour in the Real World" at CSS Conf AU in Melbourne, Austrailia. This talk was an expanded version of my SassConf talk, and is another talk that was accepted via CFP.
In May, I was invited to JS Conf US in Florida to help with the NodeBots event. This invitation was a result of the video from my Nodevember talk. Having a public video of their talk is a great artifact for a speaker, and for your community.
And a week and a half ago, I closed out an amazing year by presenting "Developing for Localization" (a completely new talk) at CSS Conf EU 2015. I was particularly delighted to have my CFP accepted here because CSS Conf EU is so prestigious and competitive. I finally had the opportunity to attend JS Conf EU too!
Looking back at this past year, I feel so thankful to have had such great opportunities and be a part of all of these events. I've promised myself that I could tone down the events next year, and I really am savoring the idea of some quiet time. I'll finally able to work on some long neglected "for fun" projects, and maybe just relax a little bit.
I'm old friends with the command line. Sometimes it's a hassle to remember exactly what to type, but sometimes a command line really is the right tool for the job at hand. And it turns out that another one of my old friends - Firefox - has a command line interface. Open it up at any time with Shift F2. So here are a few nifty features of Firefox's command line that I'd like to remember for next time:
- screenshot sidebar.png --selector body#sidebar: Save a screenshot of the element selected by
body#sidebar. Since the selector must return a single element only, I often use the
nth-of-type selector as a filter; example:
screenshot thing.png --selector h2:nth-of-type(2). Having Firefox quickly create image files is pretty useful when I'm working on a talk.
- cookie list: Pop-open a list of all the cookies used by the current page. From there you can edit or delete those cookies.
- pagemod replace Firefox donut: Replace all text instances of "Firefox" with "donuts". Or "cloud" with "butts", if that's your more your style.
Be aware that one of the first (and highest-ranked) announcements of Firefox's command line at https://hacks.mozilla.org/2012/08/new-firefox-command-line-helps-you-develop-faster/ is pretty out-of-date. Refer to https://developer.mozilla.org/en-US/docs/Tools/GCLI instead.
Sublime Text comes with an excellent little command line utility. Here are some examples of what it can do:
subl file.md: Open file.md in Sublime Text.
subl .: Open the current directory in Sublime Text.
subl file.md:line-number: Open file.md in Sublime Text and focus the line number.
Usually you have to set this up on each computer you're using Sublime on. (This sort of thing is about telling your computer how to utilize Sublime, which is why it doesn't sync to other machines when you have syncing set up.)
Windows 7/10 Sublime / Command Line Configuration
OSX Sublime / Command Line Configuration