Quick Sass Cheat Sheet

Sass is a powerful CSS pre-processor. I don’t use every feature Sass offers. I only use the ones that speed up my CSS workflow.

// Sass command line

sass --watch /location/style.scss: /location/style.css --style compressed

// comment

/*!This comment will be in the compiled CSS even when compressed.*/

// import

@import “normalize”;

// Variables

$body_text: Helvetica , Arial, sans-serif;

// Variable inside variable

$highlight-color: #000;
$highlight-border: 1px $hightlight-color solid;
.select {border: $highlight-border;}

// Parent reference with &

article a {color: blue;
&:hover {color:red;} }

// Nested group

.container {h1, h2, h3 {margin: 1em;} }

// Extend

.error {color:red;}
.seriousError {@extend .error;
font-weight: bold; }

// Placeholder

%dark {color: #fff; background: #000;}
.button {@extend %dark;}

// Function to covert px to em

@function calc-em($target-px, $context) {
@return ($target-px / $context) * 1em;}
h1 {font-size: calc-em(30px, 16px);

// Operators

.container { width: 100%; }
.main {float: left; width: 600px / 960px * 100%;}

// Map control directive

$map: (twitter: “twitter.png”, facebook: “facebook.png“);
@each $network, $image in $map {.icon-#{$network} {
background: image-url(“icons/#{$image}"); }}

Notes From Building Mobile Experiences

The following verbatim notes are from Building Mobile Experiences by Frank Bentley and Edward Barrett.

Chapter 1: Introduction

The mobile device, more than any other recent invention, is drastically changing the ways in which we interact with each other and with our cities.

[A] mobile experience is everything that happens to a person once they learn about a new application.

The mobile phone is the ideal platform for rich, contextual experiences.

Chapter 2: The User-Centered Design Process Applied to Mobile

Context sensing. Media capture. Social connecting. The mobile experience is defined by these uniques and fluid integrated process.

A powerfully useful mobile device allows a person to take advantage of the necessary and sufficient elements of that physically situated experience: location, time, visual and auditory characteristics, all that is apparent to our sensory apparatus—as well as data of physical states not immediately apprehensible.

[A] powerfully useful application will connect you to other people to share facets of a contextually embedded experience—a real-time, instantaneous connected, or lagged, asynchronous interactions depending on the context.

The mobile user-centered design process builds from real-world observation and experience to ideation, design, build and test.

Design Methods: Good design for mobile services is critical to the ultimate usability of the final solution.

Rapid Prototyping: Quickly creating functional prototypes to test the new experience in the world is a key way that we can quickly identify which are likely to be successful in real-world use.

Chapter 3: Discovering What to Build

General Research: How does one get from a space of interest to a list of potential solutions?

Designing from observations of joy and celebration can create new concepts that are fun to build off of the best of our interactions with the world.

Logging interactions and communication can help researchers to better understand current behavior and use these findings to inspire new solutions that are tied to real users’ lives.

Other research includes: home tour/field visits, task analysis, semi-structured interviews, recruiting users, conducting research, affinity analysis and discount methods.

Chapter 4: Rapid Interactive Prototyping

Because we want to quickly evaluate a new experience, our prototypes tend to be made rapidly to test a specific aspect of a concept with users.

Build the experience, not the technology: Because early prototypes are often focus on answering research questions about how a new system will fit into the lives of our participants, the prototypes that we build are often not engineered in the way that a commercial offerring would be.

Build it sturdy (enough) means avoiding the use of new or untested technology at this stage of research unless it is critical to the research questions that need to be answered.

The most important part of building and testing a rapid prototype of a mobile system is to get out of the lab and into the world.

Chapter 5: Using Specific Mobile Technologies

Understanding technology constraints is a critical step in the mobile design process. Often, designers who come from nontechnical backgrounds do not know the full implications of some of their design choices. When this occurs, the end-user experience frequently suffers.

Chapter 6: Mobile Interaction Design

Modeling: A high-level concept model is often the first step of a new mobile design, long before anything begins to be committed to a screen.

The main objective of the modeling is to help the designer think about the goals of the system in new ways, so completing multiple conceptual models can often help in understanding the full scope of a new concept.

Structure and Flow: User flows demonstrate users’ possible movements through time: how they initiate a process, how they complete it, and what path they take.

Interface Design Principles: The ultimate goal of any interaction design project is to make something that is usable for a wide variety of potential users.

Chapter 7: Usability Evaluation

Mobile usability is more than just the ability to navigate from screen to screen and understand the prompts, icons, and flow of an application.

If a user cannot get the information she needs in the ten or twenty seconds she has while waiting for a bus or a train, your system might not be the first one she turns to. Or if the phone keeps going to sleep while a user is in the middle of another task such as cooking, he might not have a clean hand to wake it back up and find the next step in the recipe.

Chapter 8: Field Testing

Four basic criteria for testing prototypes:

  1. Recruit social groups (people who already know each other) when testing social social technologies instead of asking strangers to act as if they know each other.
  2. Put the technology in the field: ask people to take it home, to work, and all of the places in between and use it as they would if they were not in a study.
  3. Make sure the participant needs to carry only one mobile device.
  4. Select data collection techniques that allow us to come as close as possible to “being there.”

Chapter 9: Distributing Mobile Applications: Putting It All Together

Beta Releases: Before an application is released to potential audience of millions of users through an app store, it is usually beneficial to run a trial in some small scale.

A beta release is often intended to identify any final major bugs in the system with the help of a reasonable number of new users or to collect usage data on a late version of a system to help plan for scaling the final solution.

Scalability: Design for scalability needs to be an early part of the system design.

Instrumentation can help to discover features that are the most popular, discover where paths through the application are not optimal for tasks that users are performing most frequently, and identifying areas that can be improved or might need better prompts or labels.

Upgrades: Once an application is launched, it often needs to be maintained and updated. As new releases are made, users often face the choice of upgrading or not. In most cases, old versions need to be supported indefinitely as many users choose not to upgrade.

Chapter 10: Conclusion

Reaching thousands or millions of users and affecting the way they live their lives and interact with the people and places that are most important to them can be the greatest reward for traveling down this convoluted path of building a mobile experience.

Notes From Mobile First

The following verbatim notes are from Luke Wroblewski’s Mobile First.

Chapter 1: Why Mobile First?

Designing for mobile first not only prepares you for the explosive growth and new opportunities on the mobile internet, it forces you to focus and enables you to innovate in ways you previously couldn’t.

Native vs. Web

Native mobile applications give you robust access to hardware capabilities that you currently can’t get through mobile web browsers. Core features like access to the address book, SMS, camera, audio inputs, and other built-in sensors are mostly unavailable.

Whether it’s through search, email, social networks, or on web pages, if you have content online, people will find and share links to it. Not having a mobile web solution means anyone that follows those links on a mobile device won’t have a great experience (if they can even access your content at all). Having a native mobile application won’t help.

Access might even be the biggest user benefit for a mobile web experience. Even if you build a native mobile application for one platform, chances are you won’t be able to create one for every platform.

Chapter 2: Embrace Constraints

Designing for mobile first forces you to embrace these constraints to develop an elegant mobile-ap- propriate solution. But the benefits go well beyond mobile.

Chapter 3: Capabilities

When you design and develop for mobile first, you can use exciting new capabilities on the web to create innovative ways of meeting people’s needs. Technical capabilities like location detection, device orientation, and touch are available on many mobile web browsers today.

Chapter 4: Align With Mobile Behaviors

  • Lookup/Find (urgent info, local): I need an answer to something now—frequently related to my current location in the world.
  • Explore/Play (bored, local): I have some time to kill and just want a few idle time distractions.
  • Check In/Status (repeat/micro-tasking): Something important to me keeps changing or updating and I want to stay on top of it.
  • Edit/Create (urgent change/micro-tasking): I need to get something done now that can’t wait.

Content Over Navigation

As a general rule, content takes precedence over navigation on mobile. Focusing on content first, navigation second gets people to the information and tasks they want quickly.

Pivot and Explore

A simple anchor link in the site’s header jumps people to navigation options at the bottom of the page. Having this list present at the bottom of content pages allows people to pivot and explore other parts of the site.

Chapter 5: Ready, Set, Actions

As more touch-screen mobile devices get into people’s hands, we need to make sure they can use our websites with their hands. To do so:

  • Go big with appropriately sized and positioned touch targets.
  • Learn the language of touch by familiarizing yourself with common touch gestures and how they are used to navigate and interact with objects and screens.
  • Don’t be afraid to push toward natural user interfaces (NUIs) that make content (not chrome) the focus of people’s actions.
  • Transition your on-hover menus to mobile using the most appropriate solution for your site.
  • Remember to consider non-touch and hybrid devices when designing your mobile web interactions.

Chapter 6: Input

  • Actively encourage input and allow people to contribute and create using their mobile devices.
  • Make sure your questions are clearly presented with mobile-optimized labels.
  • Get rid of the pain associated with accurate mobile inputs by using input types, attributes, and masks in your designs where possible.

Chapter 7: Layouts

Through the application of fluid layouts, flexible media, CSS3 media queries, and (sometimes) a bit of JavaScript, re- sponsive web design allows you to adapt to devices more sig- nificantly. With responsive web design, you can set a baseline (mobile) experience first, then progressively enhance or adapt your layout as device capabilities change.

Device Experiences

different device experiences may require different user interface design solu- tions. The relative importance of primary tasks can differ between device experiences (because of user posture), as can the layout and interaction design needed to accommodate dif- ferent input modes and average display sizes.

Reduce

Not only will reduction make putting mobile layouts to- gether easier, it will also give people focused ways to get things done.

Conclusion

And last but not least, don’t be afraid to start small. Some of the biggest successes in mobile today came from small experiments and teams of passionate web designers and developers. You don’t need to know everything about mobile—just take what you do know and go.

InDesign Training

After all these years of staring at the InDesign icon on my dock, I can now open it up and maneuver my way around the software. Thanks to Rae Ouellette and Ramla Mahmood, art students at George Mason, for the informative whole-day workshops.

Some notes:

Preflights: shows errors
Paragraph styles: Similar to CSS
Text Frame Option: Change texts
Place: import texts and images including Word, TIFF (Photoshop), EPS (Illustrator)
Package: ready for printing
Put open quotation mark outside texts: story > optical margin alignment
Insert page number: type > insert special character > markers > current document number
Hyphenate: uncheck in paragraph window to clear hyphens at the end of the line.
Select objects: control click

Red Hat Training: Day 5

FTP
# service vsftpd status
# service vsftpd start
# chkconfig vsftpd on
# chkconfig vsftpd –list

httpd
# ll /var/www/
# ln -s /var/ftp/pub /var/www/html/pub
# cat > /var/ftp/pub/index.html
Hello World!

Summary: My Red Hat System Administration I (RH124) training is now completed. I took the skills assessment before I took the training and RH124 was recommended. Although the course was not the right fit for my job, which is server administration, I have learned the basic of Linux.

The class concentrated more on GUI than command line. I wish it was the other way around. Nevertheless, the instructor provided as much command lines as he could. Pete Davis was the instructor. He has great knowledge of the subject as well as a sense of humor, which helped making the class engaging.

I definitely recommend this course for absolute beginner to Linux. It would had been perfect for me if I took this course about four months ago when I first started my job. At this point, I wish I had taken Red Hat System Administration II (RH135).

Red Hat Training: Day 4

Administer remote system including remote shell access, remote file transfer, using SSH keys

Managing physical storage including filesystem, partition and swap space

Install Linux with Anaconda.

SSH
# scp original-file new-file
# rsync -a /home/student demo:/tmp
-a=all

Archive
# tar -cvf target/to/archive source/to/archive
-c=create
-x=extract
-t=test (tell)
-v=verbose
-f=filename

Using SSH
# ssh-keygen
# ssh-copy-id example.com

# service crond status
# chkconfig –list crond

# vi /etc/ssh/sshd_config
PermissionRootLogin no
PassordAuthentication no
# service sshd restart

Summary: I am not really concentrating today. The subjects aren’t interesting and the installation process failed again.

Red Hat Training: Day 3

Yum
# yum list (get the list of .rpm, which stands for RPM Package Manager)
# yum search kernel (kernel is the name of the package)
# yum install kernel
# yum update kernel
# yum remove kernel

Network
# ip addr show eth0 (eth0 is the name of the network)
# more /etc/sysconfig/network-scripts/ifcfg-eth0
# service network restart
# system-config-network
# ip route
# host visualgui.com
# dig visualgui.com

Users and Groups
# useradd donny
# passwd donny
# vipw (let’s one user edit at the same time)

Manage Files
# echo $PATH
# pwd (current path)
# ls /home/{dir1,dir2} (show more two directories)
# ln file1 file2 (link file 1 to file 2)
# ln -s file1 file2 (symbolic link)
# su – username (change user)
# cp -av /dir/to/copy /dir/destination

Permission
r (view content)
w (change the content)
x (requires r to execute the content)

rw-rw-rw-
rw-r–r–
umask 002

u+s (suid=4: file executes as the user that owns the file, not the user that ran the file
g+s (sgid=2: file executes as the group that owns the file
o+t (sticky=1: no effect)

Summary: The best day so far of the training. Picked up many useful information. Hope the next two days will be even better.

Red Hat Training: Day 2

Introduced to Bash

Commands entered at the shell prompt have three basic parts:
# chmod +x gedit demo.txt
[command] [options] [arguments]

Command lines:
# pwd (path you’re currently in)
# history
Using the tab key (“tab” “tab”) for completion
# scp filename [email protected]:/ (copy file from local folder to virtual server)

Introduced to managing physical storage using the graphical interface
Learned to manage logical volumes
Introduced to monitoring system resources

Summary: Even though the topics were interesting, they aren’t related to my job.

Red Hat Training: Day 1

Covered:
Installing Red Hat 6, which took almost half a day.
Using GNOME graphical desktop.
Editing files with gedit.
Managing files with Nautilus.
Getting help with manuals (F1 for help)
Managing system clock.
Configuring printers.

Command Lines:
uname -r (find out what version of Red Hat)
$ su – (log in as substitute user)
# useradd visitor (add username “visitor”)
# passwd visitor (add password to “visitor”)
# ip addr show eth0 (show ip address)
# ls /usr/share/doc (documentations)
# man man (access manual)
# man -k print (-k is for keyword)

Summary: The first day is a very basic introduction to Linux. Installation process took half of a day.

Notes From Computers in Library 2012

I was interested in the three-day conference for technology in library particular in the tracks on mobile trends and web presence. Sine my supervisor attended the latter, I went into the topic on mobile trends. The speakers covered mostly on mobile apps and designing a separate a mobile web site. The strategy is to offered only contents that mobile users would want. One speaker went as far as providing a device-detection javascript with a whole list of variable for every mobile device. The easiest way to make a mobile-friendly site is to provide a css file to hide all the big, unnecessary design elements on the desktop site. One speaker mentioned mobile-first design, but didn’t really give responsive web design its justice. While the conference was informative, the library folks need some catching up to do.

I also signed up for a post conference workshop on taking Drupal to the next step. Unfortunately the workshop was only three hours and the instructors spent the first half an hour install Drupal and modules on people laptops. We didn’t get very far and I wanted to see how to create a theme. It looks like the best approach is to take a base theme and modify it to meet your needs. I took a look at some of the starter theme and there are tons of php and css files to customize. I’ll take a crack at theming Drupal one of these days, but right now MODX seems like the best choice for really coding the site the way I wanted.