|
|
|
|
Issue #148 (Screencast tips, Media, Sass, jQuery)05/19/16
| Support this week's primary sponsor: |
 |
Senior UI/JavaScript Frontend
Join our team and work from anywhere in the world! We're looking for an experienced full-time Frontend Developer who has a strong understanding of web technologies and wants to help design, implement, and launch major user-facing features. Find out more here! |
Generally speaking, I prefer written tutorials over video screencasts. But that being said, I think there are a number of things that can be done in a screencast to improve the learning experience for the user/viewer:
Get to the point quickly. Because a screencast feels like such a different environment, screencast authors tend to ramble a bit at the start (I'm probably guilty of this). Best to just get right to the point.
Screencasts are best served in bite-size pieces. I think a 5-10 minute screencast of a single tip is much more effective than a 30-60 minute one. And this forces the author to get right to the point too. If you do end up with a longer one, be sure to have a time-based table of contents so the viewer can jump to different spots.
Use a good mic and test to ensure the volume is good on playback. This might take some fiddling and will likely costs extra, but it's worth it. I have a Blue Snowball and it's great.
Use good screen recording software. There are lots of online options for doing quick screencasts, but nothing beats a native piece of software that lets you do edits, graphic overlays, and allows you to zoom to certain spots. Again, this tip will cost you, but I recommend Camtasia Studio or Screenflow.
Reduce "word whiskers". If you're in the habit of unconsciously adding a lot of "ums", "uhs", "likes" or other unwanted things in your speaking, here's a way to correct that. Normally when people say "um" (or similar), they're doing it because they're thinking of what to say next and trying to fill the space. Instead of filling that space with something audible, just breathe inwards. You'll still be filling the space in your own mind, but it will be silent, thus avoiding the awkwardness of repetitive speech whiskers.
Keep your screen UI clutter-free. It's distracting if there are tons of windows, tabs, alerts, bookmarks, browser extensions, etc. open and visible during the screencast. So make sure to disable everything and have a clean UI inside any app you use during the screencast.
Don't read a script. Don't do your screencasts from a word-for-word manuscript. Instead, work from a point-form outline. This will force you to know the material well, to be yourself, and not to sound too wooden in your delivery.
Now on to this week's tools!
Multimedia Tools
Statpedia
A simple online chart creation tool for creating embeddable, interactive, zoomable data charts.
smlr
"Re-encode jpeg images with no perceivable quality loss."
chartd
"Responsive, retina-compatible charts with just an img tag."
atrament.js
"Tiny JS library for beautiful drawing and handwriting on the HTML Canvas."
MapHub
"allows you to create interactive maps. You can easily make your own map by adding points, lines, polygons or labels. Select from 20 different basemaps for background."
grafi.js
"A library intended for learning about how image processing works."
Plotly
"State of the art in data viz, dashboards, and collaborative analysis."
spotifyCurrentlyPlaying.js
"Display your currently playing Spotify song using Last.fm scrobbling."
dimple
An object-oriented API for business analytics powered by D3.js.
MidiWriterJS
"A JavaScript library providing an API for generating expressive multi-track MIDI files from code."
Sass and Preprocessor Tools
rwt-scaffold
"Sass-based scaffolding for responsive typography."
Ionic Flat Colors
"SCSS with new options of flat colors for ionic components."
Semantic UI for Sass
"Sass-powered version of Semantic UI and ready to drop into Rails & Compass."
less2sass
"A little script to convert less to sass files." Likely requires some manual works afterwards.
Stylecow
"Node library to fix your CSS code and make it compatible with all browsers."
Sassaby
"A Unit Testing Library for SASS written in Node."
Cel Animation
"A Sass @mixin for creating traditional frame-based animations, especially with SVG."
Sass Thematic
"A parser for generating dynamic theme stylesheets from Sass."
colorfunc
A visual Sass color function builder.
jQuery Plugins
Chosen
"A jQuery plugin that makes long, unwieldy select boxes much more user-friendly."
Philter
"a jQuery plugin giving you the power to control CSS filters with HTML attributes." Also available in a non-library plugin.
jQuery Palette Color Picker
"Component to pick colors from a predefined / restricted palette."
Infinite AJAX Scroll
"A jQuery infinite scrolling plugin. It works by reading the next (and previous) links of your existing server-side pagination and load these pages via AJAX when the visitor scrolls to the end of the page."
Skippr
"A lighter, faster slideshow plugin for jQuery."
CollagePlus
"An image gallery plugin for jQuery. This plugin for jQuery will arrange your images to fit exactly within a container."
hideShowPassword
"Lets you easily hide and show passwords via JavaScript or a nifty inset toggle."
jQuery.payment
"A general purpose library for building credit card forms, validating inputs and formatting numbers."
A Tweet for Thought
John Allsopp's web dev axioms to live by. But as many point out in the discussion, it's not always that simple.
Suggestions / Corrections
Made something? Send links via Twitter @WebToolsWeekly (details here). No tutorials or articles, please. If you have any suggestions for improvement or corrections, feel free to reply to this email.
Before I Go...
This is neat: A metronome in Google search.
Thanks to all for subscribing and reading!
Keep tooling,
Louis
webtoolsweekly.com
@WebToolsWeekly
|
|
|
|
|
|
|
