code.reylance.com

[linaicodes]

Flexbox Froggy

A game for learning CSS flexbox

A fun way to learn Flexbox

[linaireylance]

Sorry for the lack of art everyone, I’ve been really busy taking an iOS course for the past two months. We were required to work on a final group project halfway through our class and this is what our group came up with. There are definitely improvements to be made but I think we did well given that we all had full time jobs and only 4 weeks to work on it! I learned a lot in class and will definitely continue to work on iOS projects but I’m also excited to get back to art :)

[linaicodes]

Want to learn UI/UX? I do too!

I’ve put together a list of resources that I’m looking into and will be updating the list as I discover more.

Design Lab (http://trydesignlab.com/) Online hands-on classes about interaction design, UX research, branding. Est. $300 per 4-week course.

Smashing Magazine (https://www.smashingmagazine.com/) - Weekly newsletters with a list of articles on design and UX.

Nielsen Norman Group (https://www.nngroup.com/) - Well respected researchers in UI/UX

Academy of Arts Web Design and New Media (http://www.academyart.edu/academics/web-design) - 4-year masters program on web design.

Don’t Make Me Think by Steve Krug (http://amzn.to/1Tw9Tn9) - A must read book for thinking about UI/UX.

[linaicodes]

The Dummie's Cheat Sheet to RegEx

Commonly used RegEx expressions and what they mean.

/w Any alphanumeric character

/W Any non-alphanumeric character

/d Any digit

/D Any non-digit character

/s Any whitespace

/S Any non-whitespace

[a-z] Lowercase alphabetic characters

[A-Z] Uppercase alphabetic characters

[0-9] Digits

[abc] Only a, b, or c

+ Match one or more

* Match zero or more

. Match any character

.* Match everything

a|b Matches a or b

[^abc] Matches not a, b, or c

? Optional

( ) Capture group

(a(bc)) Capture subgroup

{m} m number of repetitions

{m, n} m to n number of repetitions

^... The beginning of a string

...$ The end of a string

Tips

Special characters need to be escaped (\. matches a period.)

This is a handy regex tester.

This is a fantastic regex tutorial.

[linaicodes]

Personal Notes on how to use Git

The Basics - These are just a collection of (old) notes on commands I end up using fairly frequently.

Updating from a remote branch

git checkout git fetch # add / for a more specific fetch git merge /

Note: sometimes it will ask you for a commit message here, just use the default. Sometimes it won’t ask... weird.

Create a new branch

git checkout -b

Checking your code

Lists all files that were changed since your last commit

git status (show all files changed and their state)

Shows all unstaged changes made since your last commit.

git diff

Shows a diff of all staged changes made since your last commit.

git diff --staged

Shows a list of commits made to the current branch.

git log

Shows a list of commits made by a certain person.

git log --author

Show a diff of last commit to the current branch.

git log -p -1

Committing your code to the branch

It’s a good idea to do Checking your code here first to make sure everything’s okay.

git commit -am “”

Bundle current commit with the last commit made

Make sure all files in the new commit have been added with git add.

git commit --amend

Stashing With Git

Stashing is useful for when you need to stop in the middle of doing something to switch branches. It will shelve all of your changes until you're ready to start working on them again. Or, if you're like me you might use it when you need to make a bunch of small changes and your unverified bugs are in limbo between waiting to be checked by QA and committing to push... Stash all uncommitted changes as WIP

git stash

Stash all uncommitted changes with description

git stash save ''

Applies the specified stash id to your branch. If no stash id is specified, the first stash (stash@{0}) is applied. The stash is not removed from your list.

git stash apply

Applies the specified stash id to your branch. If no stash id is specified, the first stash (stash@{0}) is applied. The stash is removed from your list.

git stash pop

Shows a list of files changed in the specified stash. If none specified, shows the first stash (stash@{0}).

git stash show

Shows a list of all stashes

git stash list

Troubleshooting With Git

Sometimes when you need to sniff out a bug but have no idea where to start, one good method is to use git bisect. Bisect works by letting you start with your broken commit, and compare it to a previously working commit. After the two branches are set up, bisect finds the mid-way commit between the two and applies it to your branch. This is useful because it allows you to visually see the changes in your workspace without having to go through a bunch of diff files. Once you determine the status of the midway commit, you can mark it as working or not. If it's working, bisect will apply the commit that's midway between the bad commit and the commit that was last marked as working. If you mark the commit as bad, bisect will find the commit that's midway between the original working commit and the commit last marked bad. Repeat the process until you've found your bad commit. To start:

git bisect start git bisect good git bisect bad

Mark the current branch as good or bad depending on your assessment.

git bisect <good/bad>

To finish using bisect:

git bisect reset

Damage Control With Git

Because sometimes you just plain made a big fat oopsie... Revert a file you accidentally changed

Do this if you want to discard any changes made to the file.

git checkout --

Ways to reset to the last time you updated

Uncommit

git reset --hard ^HEAD

Note: All of these following methods will cause you to lose all changes, committed or otherwise. Only do this if your branch is completely messed up.

git reset --hard HEAD

-OR- To reset to the state last committed to the remote branch:

git reset --hard /

-OR- Force a new checkout on your branch:

git checkout -f

Useful Git Settings

Changing defaults

git config --global push.default tracking

Auto Completion and Repository Status

Git Auto Completion Script Git prompt script

Add the following to .bashrc or .bash_profile:

gitps1='$(__git_ps1 " {%s}")' PS1="<\u@\h \w${gitps1}>\$ "

[linaicodes]

Table Hell... AKA HTML Emails

Notes to self about hardcore email, not for services where you drop your gnarly html in and they come out smelling like roses.

The Gist

If you want your emails to show up properly in Gmail you MUST inline all your CSS

Tables, tables, tables. Tables inside of tables. Inside of tables. Unfortunately this is the most reliable way to get your email to show up properly across most major email client/browser/OS combinations.

Try not to leave white space in your message body. Getting tagged by the spam filter will do nothing for the message you're trying to project with your email.

Keep it small. Smaller image sizes, less number of images. Faster load. dodge the spam filter.

Add alt text to important images. Same reason.

Assume that most people won't have images enabled and design around that. Not everyone is going to be bothered to enable images. I don't.

Remember to test for known email client quirks

CHECK EVERYTHING (major.) All (important) mail clients. All (important) browsers. All (important) OS.

The Useful Links

http://24ways.org/2009/rock-solid-html-emails

http://css-tricks.com/using-css-in-html-emails-the-real-story/

http://www.campaignmonitor.com/css/

https://www.elance.com/p/blog/2011/11/ten-html-email-tips-for-designers.html

Random note: I tried to have "Table" in brackets in the name but it borked. Database sanitization anyone?

[linaicodes]

Basic Linux Commands

Moving around in the file system

pwd # Show what dir you're in. ls # List the contents of a dir. ls -l # List the contents of a dir and show additional info of the files. ls -a # List all files, including hidden files. cd # Change directory. cd .. # Parent directory. cd ~ # Home directory cd – # Previous directory

Examining files

file # Determine the type of a file. cat # Concatenate a file. less # View text files and paginate them if needed. tail -10 filename # Gives you the last 10 lines of a file. Can change the # to whatever you want.

Manipulating files and directories

cp # Copies a file to a new file cp -i # Copy a file and ask before overwriting. cp -r # Copy a directory with its contents. mv /path/to/old /path/to/new # Moves a file to a new file, or rename mv -i # Move or rename a file and ask before overwriting. rm /path/to/file # Remove a file. rm -r # Remove a directory with its contents. rm -i # Ask before removing a file. Good to use with the -r option. mkdir # Make a directory. rmdir # Remove an empty directory.

Misc

ftp # Connect to a FTP server kill -9 # “hard kill”. man command # Displays help on the command (manual) Top # gives an overall view of what is going on with the server including memory usage, serve load and running processes “q” to exit top sar -q # gives a report of the process list, 1 minute and 5 minute average load every 10 minutes since midnight server time tar -zcf .tar.gz # tars up file with name and destination grep # command searches files or standard input globally for lines matching a given regular expression, and prints the lines to the program's standard output. $ . ~/.profile # reload the profile

[linaicodes]

Scala/Akka References

Some references/notes for myself on Scala/Akka

Akka: Documentation Akka uses the concept of actors (kind of like a service) to execute tasks. The theory behind it is that by making actors as small as possible, we are able to run many more actors than Java threads. Concepts Messages: used to communicate to actors. Future: Sort of like a promise that a job will get done. Syntax ! - fire & forget about it !! - fire & wait for message response !!! - fire & wait for a future Scala: Documentation Cheat Sheet Notes - all static type - all compile time - type inference - don't use null, use option (some, none) instead - explicitly declare override For loop

for( var x Concepts Val: final, cannot change. Generally we want to be using these. Var: variable, can change. Generally avoid using these. Traits: like java interfaces with the option of implementation. Mixins: use keyword 'with' followed by trait name to use trait. Operations reduceLeft: applies to a pair. map flatMap Random Salat: Scala ORM Scalatra: Scala web framework. Reads from bottom to top. Conscript: tool for installing and updating Scala programs.

[linaicodes]

Tracking Facebook Like Button and Twitter Follow Button Clicks For Dummies (Like Me)

Because it took me longer than it should to figure out how to record when someone has clicked on one of these buttons, I figured I should probably write this down for posterity. And by posterity I mean like... me. In two months. Because let's face it, these things will probably have changed by then and all this hard work researching and typing will be for naught. No, I'm not bitter at all...

Anyways, assuming a Facebook like button code and/or Twitter follow button code is present on your site, it becomes possible to track whenever someone clicks on one of these buttons. For Facebook, as of now it is only possible to track clicks using the FBML like button code. However, it's pretty easy to add and doesn't require that much more work than the iframe option. Like I said above, I'm assuming you've already got one of these snazzy snippets of code on your page somewhere. If you don't... Geez, why are you even here? Fine... get one from here. In order to use the FBML like button, make sure your html tag has the Facebook namespace like the following: Remember, the Facebook like button will not show up properly unless the namespace is defined. Next, in your javascript section, add the following:

FB.Event.subscribe('edge.create', function(response) { //Your actions here });

Be sure to update with the behavior you want executed after the like button is clicked. This event is only triggered after a logged in user clicks on the 'like' button. In other words, if someone clicks on the button and opts not to log in, Facebook does not count this as a click and does not fire the click event. That's all there is to it! Now onto the Twitter button... Again, I am assuming you already have a twitter follow button on your page. If you don't, get one here. Moving on... Remember the bit of javascript we had with the Facebook 'like' button? Well now here's one for Twitter. What do you mean you haven't read the Facebook blurb? Augh, fine. Anyways, copy the following and paste it in your javascript section.

twttr.events.bind('click', function(event) { //Your actions here });

Remember again to replace the comments with your own behavior. Well... not YOUR behavior, but... you know, what you want to accomplish after someone clicks your button. See? Even easier than the Facebook one! Hooray.

[linaicodes]

Flex 4 (Flash Builder) Cheat sheet

Another cheat sheet, this time created while messing with Flex 4. These are just some notes and may not work for all people. After trying out Flex 4, I've come to the same conclusion that nearly everyone else seems to have reached a long time ago: Flex 3 > Flex 4. But alas... once a project starts in 4, there is no going back. And so.. we must press on. StyleManager: Flex 4 differs from Flex 3 in that the StyleManager is no longer a singleton. Instead of importing mx.styles.StyleManager, simply use

styleManager.getStyleDeclaration("global") .setStyle("fontStyle","italic");

to make any style changes. Another alternative:

FlexGlobals.topLevelApplication .styleManager.getStyleDeclaration("Button") .setStyle("fontStyle","italic");

Flex 4 States First declare any states you would like your project to have: To set properties for your object during various states, use dot notation as follows: Decide when to show object in various states with: Embedding Images:

[Bindable] [Embed ('assets/someImage.png')] public var defaultIcon:Class;

Converting hex string colors to uint:

var hexString:String = "#123456"; var intColor:uint = uint("0x" + hexString.substr(1));

Application.application... where is it? To access things like parameters, what was once:

mx.core.Application.application

Is now:

FlexGlobals.topLevelApplication

Image Woes: Only JPG images can be displayed without being embedded. If you want to dynamically load an image (from an uploaded source for example) this is the easiest way. PNG and GIF formats require embedding in order to display properly. image embedding (incomplete):

[Bindable] [Embed(source="/assets/image.png")] public var imageClass:Class; ...

HttpService Errors: [RPC Fault faultString="HTTP request error" faultCode="Server.Error.Request" faultDetail="Error: [IOErrorEvent type="ioError" bubbles=false cancelable=false eventPhase=2 text="Error #2032: Stream Error. URL:xxx"]. URL:xxx”] Check to see if parameters are being passed. Then check if the parameter names are the same as the ones required by the http service. Also check if there is a time out set and consider changing to a larger number.

[linaicodes]

Flex3 Localization Tutorial

Something that wrote a while ago and came across recently. I thought I would post this so that I'd have it available in the future. This guide uses and modifies a project file called "RunLoc" from another site which I cannot seem to find anymore. If someone knows where this file originates please let me know. The following  shows the steps required to add localization to an already established project and the Eclipse IDE.

Setting up the File System Create a folder in your project (it should be located on the same level as your libs folder) and name it ‘locale.’ This folder will contain folders with the languages supported. Each time a new language is added, a new folder with the locale code. This is the two-letter language code followed by an underscore and the country code. For example, the folder name for US English will be en_US since the two-letter language code for English is en, and the country code is US. Similarly, the folder name for French will be fr_FR. Each language folder has its own properties file that holds the translated text for each language. For the purposes of this document, this file will be called ‘myResources’ and have a .properties extension. The name for this file will be the same for all the language folders. At the end of this section, your folder structure should look something like the following:

Resulting Folder Structure

Editing the Properties File Each of the properties files in the language folders hold a list of the same strings translated into their respective languages. As more text is added to the application, all properties files must be updated with the same identifiers. In this example, there is one sentence in each of the properties files.

myResources.properties in en_US

myResources.properties in fr_FR

Properties files are structured so that Flex will be able to easily identify and switch between languages. Each line corresponds to a word or phrase, and is given an identifier that is usually capitalized followed by an equals sign, then the translated phrase. In this example, the identifier is ‘MESSAGE’ which will later be used inside the Flex application. Code in the Application To use the properties files in the previous section, we need to let the application know how to find them. To do this, we add a metadata tag in the main portion of the application. Since in the example the files are named ‘myResources,’ we need to indicate that as a parameter.

Metadata tag in the main .mxml file

Next, for every place where translated text is required, we substitute normal text (in this case a one liner in RunLoc.mxml) for the following code:

Inline text in Application

This code is responsible for accessing the resource bundle ‘myResources’ and looking for an identifier ‘MESSAGE’ (Which was defined in the properties file earlier) and displaying the phrase the identifier is associated with. Compiling the Application To complete the localization process, the application needs to know which language to run in. This can be configured by adding extra compiler arguments for the application. To set these properties, right click on the project folder and select properties (selecting ‘Project > Properties’ from the file menu will also get to the same location.) A properties window will appear for the selected project. Select ‘Flex Compiler’ from the tree menu to the left of the window which will display the Flex Compiler properties. In the Additional compiler arguments text box enter:

-locale=en_US -source-path=../locale/{locale}

The window should now look like the following:

Compiler Properties for Application

Click the ‘OK’ button to save changes. Running the Application After adding the appropriate compiler commands, run the project. The application should look like the following:

Application compiled as en_US

To switch languages, go back to compiler properties. Change the language code in the locale parameter to the desired language

-locale=LANGUAGECODE -source-path=../locale/{locale}

In this example, the language was changed to French, causing the application to look like the following:

Application compiled as fr_FR

Source code: RunLoc