jQuery and CSS ‘Wildcard’ element selection

UPDATE 08-26-2013
No need for any quotes on either unless it is a number example [class$=’23’], CSS and jQuery syntax is the same.

Quick Start Guide:
CSS and jQuery ‘WIldcard’ Syntax(‘type’ = class or id):
Starts with: [type^=keyword]  Ends with: [type$=keyword] contains: [type*=keyword]

 Try it yourself on CodePen!

This is a really awesome trick I found that you can do, comes in handy for dynamically incremented IDs :

To get all the elements starting with “awesomeSauce” you should use:

$("[id^=awesomeSauce]")

To get those that end with “awesomeSauce”

$("[id$=awesomeSauce]")

Also words for classes that start start with “awesomeSauce”  ex: “awesomeSauce123”

$('[class^=awesomeSauce]')

Or if you have multiple classes on an object, like ” best awesomeSauce123″ or you want to find an id or class that contains the keyword.

$('[class*=awesomeSauce]')

Giving Credit where credit is due:

http://stackoverflow.com/questions/5376431/wildcards-in-jquery-selectors

Balloon Chase Vehicle – Dev Log Week 4

7:30pm – 1:00am | +5.5 Hours Dev Time | 28.75 Hours Total Dev Time

Highlights:

Today was a good day, we got a lot done that we can be proud of. Being new to Unity, it took a while for some things to ‘click,’ and this night a lot of things did.
Starting with a working mock-up I (Alex) created, Anthony was able to jump off from that point and get the engine going. It did take some re-writing, and a lot of adjustments in Unity to get the ‘2.5d that looks like 2d’ working right.

Balloon Chase Vehicle – Dev Log Week 5

7:30pm – 2:30am | +7 Hours Dev Time | 35.75 Hours Total Dev Time

Collisions!

The main focus of this night was getting collisions and jumping working, and we got somewhere. I would by no means call it perfect, but we have a goo starting point for collisions and jumping. and also some weird errors..

Overall a good night and I can see the momentum building now, so we can get going on level design once the engine is basically figured out.

Balloon Chase Vehicle – Dev Log Week 2

3:30pm – 2:45am | +11.25 Hours Dev Time | 19.25 Hours Total Dev Time

9:56 PM – 2:45 AM


  • 2:45 am Calling it a night, will come back to the movement code with fresh eyes another time!
  • around 1 am, we are getting burnt out, not much is working with the movement code.
  • Posted screenshot of the title screen artwork on twitter
  • More working on getting to know Unity
  • Amazing Idea for a level: Moon Level!
  • Worked more on artwork, working on a promo/possibly title screen

7:26 PM – 9:56 PM


  • Dinner was awesome, who said Louisville doesn’t have any authentic Mexican Food?
  • Played some Super Mario World for physics research, (photo) trying to nail down some smooth acceleration and momentum carrying into jumps
  • Worked on some art elements for the first level, trees, mailboxes, fire hydrants, clouds…

6:58 PM – 7:26 PM

  • Made some adjustments to Mono, like dark color scheme: Check that out here
  • Creating a simple movement script in C# for player movement, based on our two-button scheme, go and jump

6:10 PM – 6:58 PM

  • Talked over control scheme for keyboard/controller/touch scenarios
  • Talked about dinner -Mexican!
  • Looking at some tutorial videos, thanks Youtube!

3:30 PM – 6:10 PM

  • We have decided to use Unity for the Balloon Chase Vehicle.
  • Learning about Vectors and UnitVectors from Anthony
  • Thinking about stuff

Balloon Chase Vehicle – Dev Log Week 1

5:00pm – 3:00am | +8 Hours Dev Time | 8 Hours Total Dev Time

So you may or may not have seen on the rbmlb twitter that rbmlb is now 2 people!  Anthony @datGamerDood has joined forces  and we plan to release our first game by the year 20XX!

Last-night was our first game jam night, and it lasted about  8 hours, during that time whiteboards were doodled upon, graphics were drawn, and I believe even  several(approx.) lines of code were written!

We are excited to start our first game which will be titled “Balloon Chase Vehicle” which as of now will run on Win/Mac.
Here are some relevant photos:



ultra-minimal planner app I made

I had the idea create a small app with a table where you click a day to highlight it and click it again to remove the highlight so you can mark workdays.

Here is the finished product:

Screen Shot 2013-05-27 at 12.57.40 PM

It only took a couple minutes to write the markup, add a simple jQuery function,  and style it.  The jQuery toggleClass() method makes these type of things super simple, I mean look at the source and see just how easy these are to make.

Here is the working JS/CSS/HTML:
CodePen Link

Just a quick exercise I did for fun, really a trivial task with jQuery, and I had fun making it!

-Alex

 

Webfonts, why hassle with ’em?

On our beloved web It used to be that if you wanted to have a cool custom font you would have to create a document in PhotoShop, save an image containing your text and add it to your site as an img tag. You might remember a time when fonts didn’t even matter because your site would be a ton of image slices generated by PhotoShop, Golive, or maybe you have been creating websites long enough to remember Adobe ImageReady!
Since those days things have evolved, next you might have used a transparent png file so you could have more options when it came to background color and what the text/image could be floating over.

But what is the present-day solution for fonts on the web?

You might use Photoshop and desire your code to look more like your mockup PSD, or you might be like me and design from the start in code, in which case you might have gone though a period of reling on basic webfonts, or you might have checked into a paid webfont service, or used Google Web Fonts and seen some the open source fonts which are now available.

All are great options, but what if you want something to look exactly how you want it to?

To get custom fonts on your site you can now use the @font-face property of CSS3, but will it work cross-browser?
Yes and No,
The fact of the matter is you can do it yourself,  but what about formats? There’s .woff, .ttf, .svg, eot, .ot, etc, which ones do you need? Will you remember to add the right fixes for IE?

Why waste your time when you can use ForntSquirrel!

Font Squirrel Webfont Generator

Simply upload the font you wish to use, in pretty much any format, and let the site do the rest. It will generate a zip archive with all of the files you need, including the font in various formats, and a css file containing the cross-browser compatible versions of @font-face.

Screen Shot 2013-05-15 at 10.35.10 PM
I usually copy the css out of the file it provides and add it to my current css file for the project, drop the font files in a folder called /font or /fonts, change the paths to the font files in the css to be correct for my application, and that’s it! You can just change the “font-family:” property of to what you want to call the font, and add it to whatever css selectors you wish to use it on, and you have your custom font ready to go, wherever you need it.

Screen Shot 2013-05-15 at 10.34.07 PM

I hope this helps you as much as it helped me, and lets you make better design decisions based on having more options!

-Alex

 

 

Contractor Catfish

Preface: I hate having to outsource anything, but there is a project that I started with a client who needed some extensive custom ecommerce work and I could just not do.

While looking for a Coldfusion developer to help with a client project, I got an offer from a guy named Harris Ryan on the freelance-finding site elance.com. I liked his list of experience and skills, and messaged him to  ask when a good time to chat would be and setup a date for the weekend.

The weekend rolls around and it works out well to chat with him on Skype on Sunday night. I messaged his Skype name and I am told that it is his wife, and they run a small two person business called ‘Vogam IT’.

After talking a bit about the project and beginning to trust that they will do a good job, ​I ask to do a Skype call. It takes a really long time, around 30 mins for her to ‘get ready’, but when she calls and we begin talking she had an english accent – everything is adding up – no reason to be leery.

When we first started the call it was just her, but shortly after Harris joins in, but when he comes on, it sounds like a three way call, there was some static, and he has a very strong Indian accent!

I was completely thrown off, so I don’t know what to do, I ended up discussing the concept of the project just a little bit, but after a minute or so it was becoming very obvious this guy was not who they were saying he was…

“Your name is ‘Harris’?” I ask him.

“Yes.” He states.

“…and you are based out of the UK?”, I ask.

“Yes” he says again, ” it is 9:30 pm here right now.”  he adds. (nice touch buddy!)

Not at all convinced, I take a look back at his profile on elance again ​- while still on the call -​ and I could not imagine that voice belonging to the man in ​this profile photo….

So I tell them “I need to talk to my project manager and I will get back to you when we are ready to begin..”  just so I can gett off of the call…

I go and take a screenshot of the elance profile, and message “Harris'” wife and say

“I have nothing against Indian developers, but you should be up front about who you are outsourcing the project to.”
She replies back after a long pause stating that he is NOT in fact Indian, he IS her husband, they have 3 kids etc.. etc..

So I pop the profile photo in google image search, and only one other source for the image shows up – a Facebook page,
I click it and it’s for some sort of organic food company,  I scroll down the page to see where the photo of Harris is, and bingo!

I see the guy commenting about how he loved one of the companies apple cinnamon bars.

I click the name and I am taken to his profile, I wont say anything specific to project the identity of the victim here, but the photo and the name “Harris” were the only things relating to “Harris Ryan” on elance.

Location – completely different – not from the UK, but from the US,

Education – nothing to do with programming, IT, anything

– the real guy is an artist.
I take a screen shot of the facebook page, and send it to Vogam IT on Skype.
 – Check mate. –
She persists with lies even after being beat saying:

” everything apart form the pic is true” and “I guess if you know the stuff, what difference will a picture make?”

Honesty makes a huge difference! – and I told her that.

This has nothing to do with nationality, but in my opinion if you are going to lie about something as foundational as who you are, then you are  very likely to lie about other things as well, and that is just not the way to start off a working relationship! I understand what she was trying to do, hire a contractor from India at a low rate, and be the middleman making roughly double what she was paying them.

Here is the profile for ‘coldfusionharris’ on elance, If you are into deception, go ahead and hire them:
https://www.elance.com/s/coldfusionharris

The whole situation sucks because I still need to find a reliable CF developer…

Here are my screenshots of the whole ordeal:

‘Harris Ryan’ Profile on elance
skitch (1)

I did a little internet sleuthing with a ​simple ​google image search:
The real dude on Facebook:
skitch (2)

I showed her what I found…
Check Mate. Then the excuses pour in…
skitch (3)

…and then moments later…
Quick, cover your tracks!
skitch (4)

 

NEW DEVELOPMENT

You can’t make this stuff up:

Screen Shot 2013-04-28 at 10.59.07 PM

I feel pretty awesome right now.

-Alex

What software do I use part one

Sublime Text 2 $70
http://www.sublimetext.com/2

Code Kit $25
http://incident57.com/codekit/

Sublime text 2 Plugins

SFTP $16
http://wbond.net/sublime_packages/sftp

Package Control -free
http://wbond.net/sublime_packages/package_control

Bracket Highlighter
– Install via Package Control

CSSComb
– Install via Package Control

Emmet
– Install via Package Control

Hex to RGBA
– Install via Package Control

SidebarEnhancements
– Install via Package Control

WordPress Plugins

WP Migrate DB Pro $99
http://deliciousbrains.com/wp-migrate-db-pro/pricing/

Perch Add-Ons

Redactor

A really clean and simple text editor that was edits super easy for my clients

http://grabaperch.com/add-ons/plug-ins/redactor