tag:blogger.com,1999:blog-81970532750781794122024-03-19T02:26:45.026-07:00A Day in the Life of a Web DeveloperThis is just my ramblings about programming, company stuff, and other life things maybe you would find interesting.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.comBlogger19125tag:blogger.com,1999:blog-8197053275078179412.post-24623227304178461512012-01-17T20:59:00.001-08:002012-01-17T21:00:17.056-08:00Text Your Heart Out - Emotion in Text<br />
<div class="p1">
It is a seemingly controversial concept, that there can exist emotion in nothing more than text. However, between those that grow up in the era of texting, blogs, instant messages and email, it is not only possible, but something happening everyday.</div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1">Emotional texting is the idea that, word choice, slang dialect, incorrect or excessive capitalization, purposeful misspellings, excessive punctuation and sentence fragmentation timing all come into play when trying to convey and comprehend text. When using the term “text message”, it does not simply refer to cell phone SMS, but all forms of textual messaging including, but not limited to; SMS, email, instant messaging, online comments and social network status messages.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1">In a generation that grew up in the internet age and the instant feedback of SMS texting age, I believe people have started to adapt communication needs to portray their emotion via stylistic changes in text.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><b><br /></b></span><br />
<span class="s1"><b>The theory of LOL.</b></span></div>
<div class="p1">
<span class="s1">LOL is loosely an acronym for “Laugh out Loud”. Which, when it was first used, actually meant “that is really funny”. However, a lot of people will use LOL as a substitute for acknowledgment. It is widely accepted that if someone says something even slightly humorous, the response might be “lol”. This isn’t to say the receiving party is laughing, it’s more of an acknowledgment that the message was received. it’s also becoming something we are unaware of. Some people tend to use LOL way more often responses, even if they offer a more detailed response right there after. For some, it is second nature to respond with LOL. Why? LOL is a term that is associated with a positive connotation, because in it’s original use, humor is generally positive. So as a response, the sender feels good about the comment they have made. LOL has many more meanings, which will be discussed in a minute.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><b><br /></b></span><br />
<span class="s1"><b>I’m Being Sarcastic.</b></span></div>
<div class="p1">
<span class="s1">Sarcasm is something normally easy to pickup when talking in person, or even on the phone. Voice inflection is used, and certain words are changed. Say to your self sarcastically “Oh, that’s what you mean”. As if you are rolling your eyes at the same time. You make the “Oh” sound longer, the word “that’s” is also drawn out, and then the rest of the sentence is said rather quickly as your tone lowers. Then you world normally look at the person a bit longer so they could see your eyes rolling. So, in text, how would you portray sarcasm? Identifying how you would say it like we just did gives us insight. When grammar is not as important we can apply new rules. So, if I was needing to portray sarcasm without first telling you I’m being sarcastic, I would write something similar to “Ohh, THAT’S what you mean... Reading this, one should be able to actually say this in their head differently. There are 3 techniques applied above. “Ohh” is using excessive “Hs” to depict extending the sound as it’s said. The comma is overused here to show a pause. “That’s” is fully capitalized in order to bring the most emphasis in the sentence to that word. The ellipses at the end denotes trailing off, which can be seen as looking at the person after the phrase has been said. This concept is similar to spelling a word phonetically, in that you are changing the grammar of the phrase to depict what you mean. In phonetics, you change the spelling of a word to tell the reader how it’s meant to be pronounced.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><b><br /></b></span><br />
<span class="s1"><b>Don’t YELL at me.</b></span></div>
<div class="p1">
<span class="s1">Another emotional portrayal often used in text is the idea of yelling, or raising your voice. Using all capital letters is often the way most choose to show that they are raising their “voice”. But capitalization alone is not enough. We can again utilize punctuation, albeit incorrectly, to show levels of yelling. In normal speech, we have the ability to yell, scream, slowly raise our voice, and even use body language to show an even greater rage. So, with text, how can we achieve the same effect? The mildest form of yelling is all capital letters with no punctuation. DONT TOUCH THE STOVE. Adding an exclamation point ramps up the energy. DONT TOUCH THE STOVE! One might add multiple exclamation points now to really tell the reader they are infuriated. DONT TUOCH THE STOVE!!!!! This doesn’t only apply to negative commands like these. WHAT!? Is a very disturbed and anxious way of saying “what”. The mild form of that expressive “what” would be to not use capital letters. what!? You get a smiler sense of urgency, but not nearly as urgent as all capital letters. That’s because in speech you might say “What” and have a serious look on your face, or scream out loud “what” as if you really need people to feel that energy.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><b><br /></b></span><br />
<span class="s1"><b>No, no nope, nah</b></span></div>
<div class="p1">
<span class="s1">In text there are many ways to say “no”. This is very similar to speech when talking informally. If you are with friends, and someone asks if you want the last piece of pizza, you don’t say outright “No” and leave it there. It’s impolite, and the friend will sense that. The same is true for text. Let’s say they asked if you wanted the last slice of pizza over text. Responding simply with No, would come across as rude. You could say “no thanks”. Or if it’s in your slang, you could say “nah I’m good” or something similar to that respect. You are basically being polite through text. The same applies to other forms of “no”. “Do you have any cheese sticks left?” “Nope.” That is a gentle, nice way of saying no. If the conversation went as follows: “Do you have any cheese sticks left?”. “No.” That will be read with a harsher tone. Because the word is short, and there are no modifiers, the tone feels short. Being ‘short’ is generally considered rude, thus the dad-like statement “Don’t get short with me”.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1">The same applies to yes as well. However, in my opinion, The Yes’ are measured in terms of their negativity, not their positivity. “Did you take out the trash?” Yes. Again, this is short, and thus a short tone of voice. Simply taking the capitalization and the period off however, results in a much softer answer. “Did you take out the trash?” “yes”. The lack of punctuation in this case results in a less serious tone, therefore less rude. Alternatively, one might say “yea” which is always a nicer way of saying yes. Form’s of yes can be interesting. The term “yep”, is happy and energetic. The same kind of positive feel good energy “nope” had. That’s mostly due the “pe” at the end. It’s hard to say Yep and Nope with an angry or upsetting tone. Therefore when someone reads those back in their head, its more positive.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1"><b><br /></b></span><br />
<span class="s1"><b>Smart phones require more work.</b></span></div>
<div class="p1">
<span class="s1">when cell phone texting hit it’s booming phase, cell phones had 9 key 3 letter type pads. Each of the 9 keys had 3 letters and you had to hit a number 1 to 3 times to get a letter, then move on. Some users trusted T9, and ‘intelligent’ guessing engine that would try to guess what letter you wanted based on the context of the surrounding letters, but it was not accurate if you had a large vocabulary. So for a while, teenager’s fingers wired new motor maps to type out words in a binary-like pattern. 1, 33, 555, 22, 11. If you talk to a teenager or 20 something that texted with a “flip phone” (as they were called) for many years, they could probably type words without even looking. I can still type on those keyboards without looking, just because of the sheer volume I used to text with those phones, my brain has made a lovely neural connection to make it easier.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1">The nice thing about flip phones, is that they never gave you any punctuation. So it was very easy to depict emotion, since you had to put the effort into your punctuation. I even feel that, because this was the case for so long, that is what allowed this emotional texting to form. Not to mention that in all online forms of typing, you are responsible for punctuation.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1">Now we have smart phones with full querty keyboards and intelligent, automatic grammar engines. This actually makes it harder to text with emotion, and slowly is changing how it works. Any sentence I start on my phone has a capital letter. As we learned sometimes that capital letters gives the wrong impression, so it needs to be changed. The phone also fixes misspellings. Which, again, is not what I want at times. I want it to fix the words I misspelled, but didn’t mean to misspell. One big problem I have with the iPhone autocorrect is how it changes LOL. I normally don’t say LOL, because nothing is ever THAT funny. (notice how I capitalized “that” so that you would read it differently). LOL means “seriously funny”. lol, is the space filler that one normally means to type, not LOL that the iPhone often changes it to.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p1">
<span class="s1">There is still a place for writers style, such as blogs, stories, essays, anything scholastic, research papers, business friendly email messages, email in general, long messages and any other kind of formal media. NOTE: none of this refers to the tweens constant omitting of vowels in words or no-use misspellings. (Ex. Rly = Really” or wut = what) But in the world of peer to peer text, “kids” have developed this new “dialect” similar to phonetical spelling that allows them to portray emotion in their text.</span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p2">
<span class="s1"></span></div>
<div class="p2">
<span class="s1"></span></div>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com6tag:blogger.com,1999:blog-8197053275078179412.post-64113383211698852592012-01-04T16:15:00.000-08:002012-01-05T13:38:43.186-08:00SOPA - How to Deal with PiracyIf you don't know what SOPA is, basically, it's the government trying to pass laws that allow them to block websites that distribute copy written content. That includes sites like youtube, blogger, reddit etc..<br />
<br />
SOPA is trying to help the "piracy" problem on the internet. Content providers might agree that there is a piracy problem, and users might disagree saying the internet is free, and if I can get my hands on your content it should be mine.<br />
<br />
This isn't about SOPA though, this is about how to stop piracy. However, when I say stop piracy, I'm not talking about a technical solution to physically stop a pirate from stealing your content.<br />
<br />
I believe the real way to stop piracy is to offer a product that is far beyond better than the raw content itself. Most of the time with digital content, it is not JUST the raw content that is important. For example, If I run a video training website, My website allows users to view videos in multiple sizes, create bookmarks, save my last watch position, embedded chapter data, language translations, on screen sub titles and more. So now, if someone steals my video file, and puts it online for the world to steal, the person who illegally downloads a copy will get none of my features. All they get is the content.<br />
<br />
<b>Apple & iTunes</b><br />
Let's take a look at how Apple solved the music piracy problem. If you can remember back in the days of bearshare, kazaa, morpheus, limewire and other peer-to-peer file sharing programs, mainly used for music, they were the main headache to the music industry. Sure an individual artist may have lost a little bit of money, but in total this was really hurting the music industry. Then Apple comes in with iTunes and solves the problem. We will give users a free application for mac and pc, where they can very easily, and graphically find all of their music, download high quality versions as many times as needed, and even sync all that directly with their iPod. To top it all off, a song will cost a mere 99 cents. That solution was huge. Years later, iTunes is the number 1 online reseller of music, and you don't hear the music industry complaining like they did in the past.<br />
<br />
<b>So how did it work?</b><br />
iTunes identified the pains of peer to peer file sharing. They were ad supported, virus ridden programs. The songs were generally crappy quality, and searching was not that easy. Searching for 1 song could yield 40 results, which one was good? Which has a virus? iTunes is a very fast, easy to use application, offered by a trusted company, for free with out ads, that is also aesthetically pleasing. Couple that with a little bit of money, most people that would have stolen before, now have their solution. Of course there are those that don't care and will still steal the songs, but those numbers are not significant, and would steal no matter what you do.<br />
<br />
<b>How can this solution be applied to other digital content?</b><br />
The answer is to offer a FAR BETTER experience around your content than the content alone can offer. This works with blogs, news, video, audio, any type of media. If you have text based content, offer more site features for that text. Ability to share, save the text, create a feed from it, more articles like the one your reading on the page, save for later, bring the content to mobile. All of this your site can offer, that a pirate can't.<br />
<br />
This doen't solve all kinds of piracy problems, but it does shed light on how a site can cut down on stolen content. There are 2 types of pirates. Those that will steal no matter what, and those that steal because you're not better. If you offer a good product around your content, your users will stay, and will pay. People want to pay for good work. You will always have people that steal, and you will never be able to stop them, but they will not hurt you.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com6tag:blogger.com,1999:blog-8197053275078179412.post-10003080763871762052011-12-29T23:17:00.000-08:002011-12-30T09:05:40.283-08:00The Cost of Expertise<div class="p1"><span class="s1"><b>What is an expert?</b></span></div><div class="p1"><span class="s1">They are someone who knows their subject front to back, is very experienced, therefore knows the history behind it, and is quick. What about just from programming? An expert knows the syntax 99%. They know the little tricks, they know the base language, they can recall functions from memory, etc.</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1"><b><br />
</b></span><br />
<span class="s1"><b>Base language?</b></span></div><div class="p1"><span class="s1">A real jQuery expert is also a Javascript expert. A lot of people now a days are jumping right to jQuery without ever learning Javascript first. That's a tough choice. When you choose to learn only a library first, you are basically ignoring the way it works under the hood. And that is OK for libraries that expose nearly all the features you're going to need, or change the language. Like PHP does from C++. You now write PHP code instead of C++ code. However, jQuery is not like that. It is a utility library to Javascript. It doesn't have it's own syntax, or it's own operands. It still uses the dot operator, the square brackets, the curly braces, even the same built in Javascript options.</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1"><br />
</span><br />
<span class="s1">So why does an expert cost so much more money? You can go find a freelancer for $15 or $20 an hour, sure. And they might be an "up and coming" expert, or an "expert to be". But right now, they aren't an expert. So what do you get with a "non expert"? You get your results slower, your code my be convoluted, it may not abide by standards, it may not hold up the test of time. All of the things normally learned through experience.</span><br />
<span class="s1"><br />
</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1">So when you pay $100 or $200 an hour for an expert, you are paying for all of these things, BUT you're paying for one other <b>VERY IMPORTANT</b> thing that experts have. </span><span class="s2"><b>When an expert is compensated well, money is no longer a concern.</b></span><span class="s1"><b> </b></span><span class="s3" style="font-size: x-small;">Obviously right?</span><br />
<span class="s3"><br />
</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1">The funny thing about experts, is that money is NOT the most important thing - The work is. So by filling the pot with more than enough water (money) the pasta (expert) can boil freely. (Sorry my metaphor is terrible). Basically, when money is no longer on the mind of the person doing the work, they are now free to do amazing work.</span><br />
<span class="s1"><br />
</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1">With your $20 an hour guy, he's gonna stretch his 1.5 hours to 2 hours, he's gonna work while thinking about the time - "is this project really worth it?", "I can't go back and optimize it, it wasn't in the budget".</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1"><br />
</span><br />
<span class="s1">Experts can do their jobs without any of those concerns, because they are already being paid enough, so you allow them to do what they do best, and nothing else. People generally do not work their best when they are concerned about money (or time), or if they don't feel the time spent is worth it.</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1"><br />
</span><br />
<span class="s1">In the past, before I was an "expert", I would charge $30 an hour. And I would be doing work that others would pay $100 an hour for. I always kind of felt that, even if I did good work, I should be charging more. I felt like my time wasn't well spent and it kept me from really going wild on the code, from being really creative. Later, now that I'm much better compensated, I don't even think about the money. I charge enough now, that if I want to spend 3 hours re writing some method or some function to make it way better, I can. I can slow down on some parts because I'm not worried about spending time I shouldn't be spending. Time is no longer a concern, because money is no longer a concern.</span></div><div class="p2"><span class="s1"></span></div><div class="p1"><span class="s1"><br />
</span><br />
<span class="s1">This is a similar point to being paid on salary vs hourly.</span></div>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com2tag:blogger.com,1999:blog-8197053275078179412.post-86109260564999274982011-11-29T22:27:00.000-08:002011-11-29T22:30:05.265-08:00Great Design makes for Great ProgrammingI can't really express enough how much I believe in great design. Part of making a really great web application, or any software in general, is ascetic appeal. This is really 3 fold. There is the actual visual design / look and feel of the application. The user experience design, which is how the application is designed to function, and then the internal structure design.<br />
<br />
I'm going to soon rant about internal design, and how imperative that is, but that is not what this post is about. This post, is about interfaces.<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1HsFPd__StFCfCoAkH8jUk0fJqTQDnSrpGk-VFLFcq0CWn8MjbziC9cuIy9Bz9tAPYjcTpcibMQ2S-B8YZBufH6Y8Vznt8ttDcm7Y5g5G-A4-q0fddWot9zHUnkzxitLlurfAU9Gwbe1/s1600/Screen+Shot+2011-11-30+at+1.17.56+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="265" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhf1HsFPd__StFCfCoAkH8jUk0fJqTQDnSrpGk-VFLFcq0CWn8MjbziC9cuIy9Bz9tAPYjcTpcibMQ2S-B8YZBufH6Y8Vznt8ttDcm7Y5g5G-A4-q0fddWot9zHUnkzxitLlurfAU9Gwbe1/s400/Screen+Shot+2011-11-30+at+1.17.56+AM.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: center;"><br />
</div>There is something to be said about amazing interfaces. I am by no means a designer, and I have really no artistic skill. The only artistic thing I do, or am trying to do, is photography. But as an engineer, my brain respects, and expects exceptional design.<br />
<br />
When you create something great with code, the public won't really be able to understand that unless it's coupled with good design. If the application feels great, looks beautiful, and is always pleasant to look at, then you've got something. Then you have a success on your hands.<br />
<br />
Whenever I've made some new web app, or software app, the very next thing I think about is the icon. I don't know what it should look like, but I go right to my favorite icon guys to make me a beautiful icon.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkBLLnfbAuxrgl22m7cpMSJDvc8bhaBInjLQcz3qEV4eiIzqKlSmfbFSVhLDoIPe0R53KkNgWA8XEppz3Ou1j3pkrjUpaSK-TTPswUAiwbfM-gGDOwHJV4QV9WzK3_OmDnqhe17Fk91ZM/s1600/rt-logo.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="293" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfkBLLnfbAuxrgl22m7cpMSJDvc8bhaBInjLQcz3qEV4eiIzqKlSmfbFSVhLDoIPe0R53KkNgWA8XEppz3Ou1j3pkrjUpaSK-TTPswUAiwbfM-gGDOwHJV4QV9WzK3_OmDnqhe17Fk91ZM/s320/rt-logo.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">RealTime Logo</td></tr>
</tbody></table><br />
A good icon really makes your application legitimate.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSrTX78sC9W95E_nFmLGPUKUpzN6a2N6JePwJ9bDtevoExaqf392sQtrqiglpikbbfgIHpVX1RmQ6VN8WFhFwgiidHdY6JaTa2q47tTR3JDG4XzIJU4_qOMU9SdztR0EsndgFpxmotQw-/s1600/CornerStoneLogoGood.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtSrTX78sC9W95E_nFmLGPUKUpzN6a2N6JePwJ9bDtevoExaqf392sQtrqiglpikbbfgIHpVX1RmQ6VN8WFhFwgiidHdY6JaTa2q47tTR3JDG4XzIJU4_qOMU9SdztR0EsndgFpxmotQw-/s1600/CornerStoneLogoGood.png" /></a>I think thats the best thing about good design. It makes your work Real. It makes it professional. Sure I can tell people, I made a PHP framework. But if I say, "I made this amazing PHP framework that you can build custom frameworks out of, It's called CornerStone". <b>And</b> couple that with the icon on the left here. Then yea, you want this framework. It shows a level of legitimacy, that your applications wouldn't normally have.<br />
<br />
<br />
<br />
The same goes for websites. having a website with a bad, or mediocre design is just not acceptable. If you want to make it in todays web world, you have to have designs that make people notice the design. Not just pass it by.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVDo34FoNFjfWPVz7rU7g56wOV8DWjNFOBaGM0fNKxLmBfEwMxpuuMBGK-mL_MghCyF_sJRDUtb6zgU-XpDzrflq_JTf2I29_VzDMHs5TWCFRpexzvg9hFy1hqHlFv71ugjJ-kU2IJZD-O/s1600/Screen+Shot+2011-11-30+at+1.25.43+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="145" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVDo34FoNFjfWPVz7rU7g56wOV8DWjNFOBaGM0fNKxLmBfEwMxpuuMBGK-mL_MghCyF_sJRDUtb6zgU-XpDzrflq_JTf2I29_VzDMHs5TWCFRpexzvg9hFy1hqHlFv71ugjJ-kU2IJZD-O/s400/Screen+Shot+2011-11-30+at+1.25.43+AM.png" width="400" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">You want people to love your company, love your brand, and respect your work. Great functionally is only half the battle, Great design is what brings it all together.</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">*the icons were designed by iphone-icon.com.</div>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com1tag:blogger.com,1999:blog-8197053275078179412.post-29898636050389569902011-10-17T23:29:00.000-07:002011-10-17T23:29:39.074-07:00Token Replacement inside DocXBefore I get into this. YES you can do this same thing with some standard microsoft tools like excel and access. There is even a PHP class already built for this.<br />
<br />
Anyway...<br />
<br />
So have you ever needed to work with "less than computer savvy" clients? And maybe they need to have document templates for whatever reason. Well normally when you generate a word document or PDF you have to get a PHP class to generate that, and code in the document. That way you can dynamically generate the document on the fly when you need to.<br />
<br />
Well that would take you a long time to type up say.. 20 documents. Wouldn't it be cool if you (or the client) could just create their own templates in word, and your system would understand that? AND be able to generate a document based on that template?<br />
<br />
Well I wouldn't be writing this blog if the answer was "sorry we can't do that".<br />
<br />
<span class="Apple-style-span" style="font-size: large;">Opening the Docx</span><br />
<span class="Apple-style-span" style="font-size: large;"><br />
</span><br />
So whats the technique? It turns out that docX files are just zip files. You literally can rename docx to zip and unzip it.<br />
<br />
You get the following files when you unzip<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Af39ED5tKppFrADYJmbKRf5OInxICZvAzGj5wfdAWvgjp7bfOJNV5yRTLdVI9tt7KwplCiBWc7iq-tLdqm-9bjrkxHs08cUy64KBNk3B_Fa_zPxTIdUfUxaJyem0uUwnIcS3CH7LzfBF/s1600/Screen+Shot+2011-10-18+at+2.15.55+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="124" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2Af39ED5tKppFrADYJmbKRf5OInxICZvAzGj5wfdAWvgjp7bfOJNV5yRTLdVI9tt7KwplCiBWc7iq-tLdqm-9bjrkxHs08cUy64KBNk3B_Fa_zPxTIdUfUxaJyem0uUwnIcS3CH7LzfBF/s320/Screen+Shot+2011-10-18+at+2.15.55+AM.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">Well inside the word folder is a file called document.xml. That file is the actual content of your word doc. Which means you can replace the text right there.</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="font-size: large;">Re-Creating the DocX</span></div><div class="separator" style="clear: both; text-align: left;">So now that you have edited these files, you need to make them into a docx again. Just zip it back up, and rename it docx. Done and done.</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="font-size: large;">PHP can do this for us</span></div><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="font-size: large;"><span class="Apple-style-span" style="font-size: small;">So all of the things we just did, php can do for us. So that means we can build this into our systems.</span></span></div><div class="separator" style="clear: both; text-align: left;"><span class="Apple-style-span" style="font-size: large;"><span class="Apple-style-span" style="font-size: small;"><br />
</span></span></div><div class="separator" style="clear: both; text-align: left;">Step 1) Create a temp folder to store the extracted contents of the docx file</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2BaAxyFU4_48GdcSPDbs9_b0DlmwbM2eOYN3wLhcrTQ4RUFxD_s7Y3txt5d3HAaXfyOJ29eMBI7qrg1jkRZJ07DbY95-pBb-LCaSw7YScE23dpHsel2wcFK9er6YRRMVJw_eow7OZSTnV/s1600/Screen+Shot+2011-10-18+at+2.19.56+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2BaAxyFU4_48GdcSPDbs9_b0DlmwbM2eOYN3wLhcrTQ4RUFxD_s7Y3txt5d3HAaXfyOJ29eMBI7qrg1jkRZJ07DbY95-pBb-LCaSw7YScE23dpHsel2wcFK9er6YRRMVJw_eow7OZSTnV/s1600/Screen+Shot+2011-10-18+at+2.19.56+AM.png" /></a></div><div class="separator" style="clear: both; text-align: center;"><br />
</div><div class="separator" style="clear: both; text-align: left;">All this code does is create the temp directory if it does not exist. If it already exists, clean it out. Refer to the youtube video for the full code, and to see what recursive_remove_directory does (if you haven't figured it out)</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">Step 2) make sure the directory path is safe for shell use</div><div class="separator" style="clear: both; text-align: left;">So were going to be executing linux commands using shell_exec, and you can't have spaces and other random things in the path. So we just need to escape that first.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyz7Y2derJTHKNKbLXsf_rZ5zMmOLFNrLg8d17TIbn8hXhBw_EQQOUAqTA6vA6iCTW9bc7s4pMc3Mnjfps7-z3VNXWz0-DMwdEAtQjpUMvWm2lKRvvySLO1qXaAcRuJ4561uU-f3tGCXZ/s1600/Screen+Shot+2011-10-18+at+2.20.02+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzyz7Y2derJTHKNKbLXsf_rZ5zMmOLFNrLg8d17TIbn8hXhBw_EQQOUAqTA6vA6iCTW9bc7s4pMc3Mnjfps7-z3VNXWz0-DMwdEAtQjpUMvWm2lKRvvySLO1qXaAcRuJ4561uU-f3tGCXZ/s1600/Screen+Shot+2011-10-18+at+2.20.02+AM.png" /></a></div><div class="separator" style="clear: both; text-align: left;">Step 3) Unzip to the temp folder</div><div class="separator" style="clear: both; text-align: left;">This is just a shell command</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfRnHocS84Yev5YGJdfGQyg4xI5gNVUspj3nSOSVtK9uZm3KP4iaefQSXSt_skL7h1kO8yRhHFZ-LDf1-kk4wQ4JRwQdO5Mp8uGexhjFUh5a-84mlZfvLUIQnahPTzI0pKKAToepFwaeWM/s1600/Screen+Shot+2011-10-18+at+2.20.07+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="45" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfRnHocS84Yev5YGJdfGQyg4xI5gNVUspj3nSOSVtK9uZm3KP4iaefQSXSt_skL7h1kO8yRhHFZ-LDf1-kk4wQ4JRwQdO5Mp8uGexhjFUh5a-84mlZfvLUIQnahPTzI0pKKAToepFwaeWM/s320/Screen+Shot+2011-10-18+at+2.20.07+AM.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;">Step 4) Replace tokens.</div><div class="separator" style="clear: both; text-align: left;">So now we get the contents of the document.xml file, use str_replace to replace our tokens, then save it back.</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ofm6X9hP5y6OB0XFCNFAxwGXnxSNVD1PN9GYqokqAJPpSJHSSbOfPlk7mSvkFWZnflKSfzTstEGs2eRU6pHQ7r5aJcURx3eDQwcC9pFCfjRdEgcHhyphenhyphenTUJrIGrXxIGkKiHahDBX5WRBgY/s1600/Screen+Shot+2011-10-18+at+2.20.11+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="85" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2ofm6X9hP5y6OB0XFCNFAxwGXnxSNVD1PN9GYqokqAJPpSJHSSbOfPlk7mSvkFWZnflKSfzTstEGs2eRU6pHQ7r5aJcURx3eDQwcC9pFCfjRdEgcHhyphenhyphenTUJrIGrXxIGkKiHahDBX5WRBgY/s320/Screen+Shot+2011-10-18+at+2.20.11+AM.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;">Step 5) Re-zip ONLY the files we need.</div><div class="separator" style="clear: both; text-align: left;">we are going to specify the files here, because mac os x likes to create random folders when it unzips from the command line...</div><div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzj9s9ViGalgzT61zo5EAtcH3s3dRDupTsCcZ_sXeUTE_ZC27Tre03hWcQ5xSbjqwsGSyfgcUj3D5akkEUm_posdW-zYEn3N-O6d8OmHoxjjPfMWyD9o6Q8WeQ9ef2W0OyHWEcYJU2a6NL/s1600/Screen+Shot+2011-10-18+at+2.20.22+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzj9s9ViGalgzT61zo5EAtcH3s3dRDupTsCcZ_sXeUTE_ZC27Tre03hWcQ5xSbjqwsGSyfgcUj3D5akkEUm_posdW-zYEn3N-O6d8OmHoxjjPfMWyD9o6Q8WeQ9ef2W0OyHWEcYJU2a6NL/s320/Screen+Shot+2011-10-18+at+2.20.22+AM.png" width="320" /></a></div><div class="separator" style="clear: both; text-align: left;">And thats it!</div><div class="separator" style="clear: both; text-align: left;">Now we have programmatically token replaced a docx file.</div><div class="separator" style="clear: both; text-align: left;"><br />
</div><div class="separator" style="clear: both; text-align: left;">Here is the full tutorial</div><br />
<div style="text-align: center;"><iframe allowfullscreen="" frameborder="0" height="285" src="http://www.youtube.com/embed/TE8vty1m8_k" width="460"></iframe></div>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com1tag:blogger.com,1999:blog-8197053275078179412.post-53751275166310366812011-08-18T20:56:00.000-07:002011-08-18T20:56:27.037-07:00When you know you should give upI needed to know how to play vimeo videos inside and iPhone App. So I googled for "vimeo videos inside iPhone app"<br />
<br />
I found the first stack overflowlink to<br />
http://stackoverflow.com/questions/2503235/vimeo-videos-in-iphone-app<br />
<br />
Which had the accepted answer of using some "tips and tricks" which was a link to<br />
http://www.stacyconaway.com/bucket/JS-Vimeo-embed-code-with-notes.pdf<br />
<br />
I read that PDF and the code looked really familiar. So I went to the blog post that the PDF came from. <br />
http://www.stacyconaway.com/blog/2010/vimeo-html5-embed/<br />
<br />
And on it was:<br />
<span class="Apple-style-span" style="font-family: 'Open Sans', 'Droid Sans', 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; line-height: 23px;">Thanks to YouTube user “</span><span class="Apple-style-span" style="font-family: 'Open Sans', 'Droid Sans', 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; line-height: 23px;"><a href="http://www.youtube.com/user/optikalefxx" style="background-color: transparent; border-bottom-color: rgb(224, 224, 224); border-bottom-style: solid; border-bottom-width: 0px; border-color: initial; border-left-width: 0px; border-right-width: 0px; border-style: initial; border-top-width: 0px; color: #0055ae; font-family: inherit; font-size: 14px; font-style: inherit; font-weight: inherit; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px; outline-color: initial; outline-style: initial; outline-width: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; padding-top: 0px; text-decoration: none; vertical-align: baseline;" title="YouTube User Optikalefxx">optikalefxx</a></span><span class="Apple-style-span" style="font-family: 'Open Sans', 'Droid Sans', 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; line-height: 23px;">” for posting his solution for everyone.</span><br />
<span class="Apple-style-span" style="font-family: 'Open Sans', 'Droid Sans', 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; line-height: 23px;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: 'Open Sans', 'Droid Sans', 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif; font-size: 14px; line-height: 23px;">So turns out... I wrote the solution a year ago. Haha. Too bad it doesn't work anymore.</span><br />
<br />
<br />
Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com1tag:blogger.com,1999:blog-8197053275078179412.post-50880301474744858052011-08-04T19:35:00.000-07:002011-08-05T22:09:46.669-07:00Which E-Commerce Solution Works for Me?One of the higher paying jobs that I come across is E-Commerce jobs. That's because clients know that they need to spend more money to ensure they can collect theirs.<br />
<br />
There are quite a few popular choices when it comes to online payments, here are the most common in my eyes.<br />
<br />
1) Donate button<br />
2) Selling 1 or 2 things<br />
3) Selling a bunch of products<br />
4) You're serious about selling a lot of products<br />
5) Payments integrated into your website<br />
6) Recurring payments<br />
<br />
<span class="Apple-style-span" style="font-size: large;">1) Donate Button</span><br />
This payment option should cost you next to nothing. You just create a paypal account, go create a button, say its for donate, and bam paste some HTML code onto your page. If someone charges you for this, tell them they should be ashamed. Just take them out to dinner or something, this payment option is really simple to do.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">2) Selling 1 or 2 things</span><br />
When you just have less than 5 things to sell, you have basically 2 ways of going about this. You can go the easy way and just create buttons like we did for the donate button. Thats really easy, and you can just paste those into your site. But lets say you want a shopping cart now that you have multiple items. Well paypal gives you this really easy to use FREE api called "3rd party shopping cart" that lets the developer have a bit more customization. To sell a product you just put this HTML on the page<br />
<br />
<form action="https://www.paypal.com/cgi-bin/webscr" method="post"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="hidden" name="cmd" value="_cart"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="hidden" name="upload" value="1"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="hidden" name="business" value="seller@designerfotos.com"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="hidden" name="item_name_1" value="Item Name 1"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="hidden" name="amount_1" value="1.00"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="hidden" name="item_name_2" value="Item Name 2"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="hidden" name="amount_2" value="2.00"><br />
<span class="Apple-tab-span" style="white-space: pre;"> </span><input type="submit" value="PayPal"><br />
</form><br />
<br />
So you can sell any number of products in a shopping cart type way using this HTML. You can even incorporate discounts by using discount_amount_cart and discount_rate_cart. You can even discount individual items with discount_amount_x and discount_rate_x. Where rate is a percentage and amount is a dollar amount off.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">3) Selling a bunch of products</span><br />
If your selling lots of products, more than 10 I would say, then you need a store. An online store is a solution that allows you add products, edit them, save user information, view order details etc. Its quite a full featured solution for managing an online store. This option should not cost that much either, because as the developer you can install something FREE like OpenCart and then let your client add all the products. Then you just charge for design work making it look better. OpenCart is really a great store and it allows you have users checkout with paypal (free) or by taking credit cards ($30 a month)<br />
<br />
<span class="Apple-style-span" style="font-size: large;">4) Serious Online Store</span><br />
While OpenCart is great, its not advanced. It doesn't do fraud store checkout, it doesn't integrate with UPS world ship, or USPS Dazzle (these are both shipping programs). It also has a very primitive inventory control. A paid / hosted online store like Volusion or Magento is a better solution. They will give you support agents, and have a very fully functional store, that even integrates right with quickbooks. Customers can pay by credit card, paypal, check, money order or smoke signal. If you are buying one of these stores, it can cost 6 to 800 a month, and you will need someone full time to manage CRM (customer reports), Products and orders. This is the real deal.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">5) Integrated Payments</span><br />
Lets say you already have a bunch of products on your site, and you already love the way it looks. Or say you need some super custom shopping cart, or even a affiliate payment program. All of these tasks can be accomplished with an integrated solution. This is where you start paying a lot. These solutions require a programmer that really knows the paypal APIs well, and knows how to integrate Paypal payments pro and payments standard as well as express checkout. This is the most fun type for me because its by far the most challenging.<br />
<br />
<span class="Apple-style-span" style="font-size: large;">6) Recurring Payments</span><br />
This is also a fun one. Sometimes you need to handle monthly payments or any kind of recurring payment really. There are again 2 ways to go about this. You can do the "free" way and use the "3rd party shopping cart" to integrate this. Or use Paypal payments Pro ($30 a month) if you wanna take credit cards and have recurring fees. Here are the needed variables for the free way.<br />
<br />
$_POST['business'] = "seller@yoursite.com";<br />
$_POST['cmd'] = "_xclick-subscriptions";<br />
$_POST['a3'] = 30.00;<br />
$_POST['p3'] = "1";<br />
$_POST['t3'] = "Y";<br />
$_POST['src'] = "1";<br />
$_POST['item_name'] = "Single User Yearly Subscription";<br />
$_POST['item_number'] = 2;<span class="Apple-tab-span" style="white-space: pre;"> </span><br />
$_POST['sra'] = "1";<br />
$_POST['no_shipping'] = "1";<br />
$_POST['no_note'] = "1";<br />
$_POST['return'] = "http://come/back/after/complete;<br />
$_POST['currency_code'] = "USD";<br />
$_POST['lc'] = "US";<br />
$_POST['bn'] = "PP-SubscriptionsBF";<br />
<br />
This sets up a 1 year recurring payment of $30 a year.<br />
<br />
<br />
So you can see there are many ways to accept payments on your site, and this is only a few of them. There are many more ways included Mass pay, parallel payments, working directly with your bank and more! If you want to make good money as a web developer, learn the paypal apis.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com1tag:blogger.com,1999:blog-8197053275078179412.post-58152839647787985672011-07-14T22:36:00.000-07:002011-07-14T22:41:05.831-07:00I Love Regexregex is awesome. Its powerful, its fun, and it can make you extremely efficient. There are 2 places where regex is most needed.<br />
<br />
<b>1) fixing code.</b><br />
You've seen maybe 3 videos on my youtube channel about using regex with text wrangler. I don't know about you, but I have to fix code sometimes. And sometimes, it requires replacing some text a thousand times. Or say you have a long list of stuff, and you wanna make it into a comma list. That regex is simply<br />
<br />
Find:<br />
\r<br />
Replace with:<br />
,<br />
<br />
So, it's quite often that I need to replace a bunch of stuff in some HTML or PHP, or even CSS and knowing regex makes this task very simple. If you didn't know regex, you would either have to pay some kid to do the same task 1000 times, or you would have to waste your time doing it. Or, if you didn't know how to use regex in your text editor, you'd have to write a script to do the replacement for you. So get to know your text editor. This function is also called "grep".<br />
<br />
<b>2) Pattern Matching</b><br />
This is pretty generic. This can mean anything from page scraping, to dom crawling, to email syntax checking, to curse word validation. It's all pattern matching.<br />
There are 2 extremely useful regex you should know about.<br />
<br />
1) match until character. This is great for DOM crawling. But it's also great for email addresses. The regex is [^c]+ Where "c" is the character your are matching until. So to match every div on the page, you would do div[^>]+ That would match <div however many times it was on your page. If you wanted the closing > you would just add it on. div[^>]+> ta da.<br />
<br />
2) match until string. This is extremely useful, and a lot of people never know about it. Lets say you have a div of class "hello" and inside maybe 20 divs down, is a class "world" You can't use the "match until character" to find "world". You would use this awesome regex.<br />
<br />
hello(?:(?!world).)+<br />
<br />
Complicated right? yea, well just copy and paste it when you need to use it. Lets explain.<br />
<br />
<ol><li>We start with hello. Pretty simple.</li>
<li><br />
Then we first use a negated lookahead. (?!world). Which basically says "match one time the string "world" NOT followed by anything. (which is the .) So again, were matching 1 time, the word "world" that is NOT followed by anything.<br />
</li>
<li><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Then, we need to not just match 1 time. That would just give us 1 character. We need to match everything until we get there. Just like the "match until character" had the +, we need a + here as well.</div></li>
<li><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">But you can't just add a +. And you can't wrap the whole thing in square brackets like a normal regex. So we need to wrap in parentheses so we can use the + ((?!word).)+</div></li>
<li><br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">BUT, we have a problem that we just used parentheses, which are going to capture the result. So we now need to NON CAPTURE those parentheses so they stay out of the way.</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">(?:(?!world).)+</div></li>
</ol><br />
And that is the "match until string".<br />
<br />
You could also use another regex instad of a string. say we wanted to find hello world or hello planet.<br />
(?:(?!world|planet).)+<br />
<br />
Heres a video explaining this if I didn't do a good job writing it.<br />
<br />
<iframe allowfullscreen="" frameborder="0" height="329" src="http://www.youtube.com/embed/Exxo8gXRhWA?hd=1" width="460"></iframe>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com0tag:blogger.com,1999:blog-8197053275078179412.post-29728271939390403272011-07-05T22:45:00.000-07:002011-07-05T22:56:58.125-07:00Source Code Release - Load After Scroll / ForeverScrollThe video<br />
<br />
<iframe width="450" height="349" src="http://www.youtube.com/embed/rxEnxyqRnMY?hd=1" frameborder="0" allowfullscreen></iframe><br />
<br />
Also to note:<br />
You could pass in a number into the load function and load different content, you don't always have to load the same thing over and over, that was just for the example.<br />
<br />
<pre><html>
<head>
<style type="text/css">
#flickr {
height:600px;
overflow-x:hidden;
width:800px;
}
.flickr_results, .loading {
padding:10px;
border-radius:5px;
background:#eee;
color:#555;
margin:10px;
font-family:helvetica;
font-size:11px;
font-weight:bold;
}
.loading {
background:#000;
color:white;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
var loading = true;
function loadFlickr() {
var url = "http://api.flickr.com/services/rest/?&method=flickr.photosets.getPhotos&api_key=4ef2fe2affcdd6e13218f5ddd0e2500d&photoset_id=72157619415192530&format=json&jsoncallback=?";
$.getJSON(url, function(data) {
var photos = data.photoset.photo;
$.each(photos, function(i,photo) {
var title = photo.title;
$("#flickr").append("<div class='flickr_results'>"+title+"</div>");
});
// once we've loaded
// kill the loading stuff
loading = false;
$(".loading").remove();
});
}
$(function() {
// load initial photos
loadFlickr();
// scroll event of the main div
$("#flickr").scroll(function() {
// get the max and current scroll
var curScroll = $(this)[0].scrollTop;
var maxScroll = $(this)[0].scrollHeight - $(this).height();
// are we at the bottom?
if( (curScroll == maxScroll) && loading == false) {
// when you start, set loading
loading = true;
// add the loading box
$("#flickr").append("<div class='loading'>Loading...</div>");
// scroll to the bottom of the div
$(this)[0].scrollTop = $(this)[0].scrollHeight - $(this).height();
// load more photos
loadFlickr();
}
});
});
</script>
</head>
<body>
<div id="flickr">
</div>
</body>
</html>
</pre>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com6tag:blogger.com,1999:blog-8197053275078179412.post-83216499200049749172011-07-05T21:30:00.000-07:002011-07-05T21:36:08.119-07:00Source Code Release - CSS3 Animation MenuHere is the video<br />
<br />
<iframe width="425" height="349" src="http://www.youtube.com/embed/wjFZvroZm18" frameborder="0" allowfullscreen></iframe><br />
<br />
<pre><html>
<head>
<style type="text/css">
body {
background:#9cb4b3;
}
div.moving_arrow {
width:640px;
height:25px;
margin:50px auto;
}
.moving_arrow ul {
margin:0;
padding:10px;
border-radius:8px;
height:inherit;
width:inherit;
background:-webkit-gradient(
linear,
left top,
left bottom,
color-stop(0, #fff),
color-stop(1, #e5e5e5)
) #e5e5e5;
-webkit-box-shadow:0px 0px 6px #555;
}
.moving_arrow ul li {
list-style:none;
float:left;
margin-right:11px;
}
.moving_arrow ul li a {
display:block;
float:left;
padding:4px 8px 8px 8px;
font-family:helvetica;
text-shadow:0px 1px 1px white;
color:#666;
font-weight:700;
text-decoration:none;
}
.moving_arrow li img {
float:left;
padding:4px 3px 8px 8px;
}
#arrow {
width:12px;
-webkit-transition:margin-left 400ms ease-out;
margin-left:50px;
}
#arrow svg, #arrow polygon {
width:12px;
}
#arrow.home {margin-left:54px;}
#arrow.apps {margin-left:150px;}
#arrow.blog {margin-left:233px;}
#arrow.about {margin-left:339px;}
#arrow.support {margin-left:457px;}
#arrow.contact {margin-left:569px;}
#arrow polygon {
text-shadow:0px 1px 1px black;
-webkit-box-shadow:0px 0px 6px black;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$(".moving_arrow ul li a").mouseover(function() {
$("#arrow").removeAttr("class").addClass($(this).attr("class"));
return false;
});
});
</script>
</head>
<body>
<div class="moving_arrow">
<ul>
<li>
<img src="icon.png"/>
<a class="home" href="">Home</a>
</li>
<li>
<img src="icon.png"/>
<a class="apps" href="">Apps</a>
</li>
<li>
<img src="icon.png"/>
<a class="blog" href="">Blog</a>
</li>
<li>
<img src="icon.png"/>
<a class="about" href="">About Us</a>
</li>
<li>
<img src="icon.png"/>
<a class="support" href="">Support</a>
</li>
<li>
<img src="icon.png"/>
<a class="contact" href="">Contact</a>
</li>
</ul>
<div id="arrow">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="12px" height="7px">
<polygon id="arrow_thumb_shadow" points="0,0 6,7 12,0" fill="#333"/>
<polygon id="arrow_thumb" points="0,0 6,6 12,0" fill="#e5e5e5"/>
</svg>
</div>
</div>
</body>
</html>
</pre>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com0tag:blogger.com,1999:blog-8197053275078179412.post-76010948549564624462011-06-20T19:27:00.000-07:002011-06-20T19:27:04.327-07:00How to Learn Web ProgrammingThere are a lot of different ways to learn anything. Reading, listening, watching, doing. In programming, I find the best combination of learning is watching then doing. Some people really like to read, but I think when it comes to programming, reading is the wrong way to go.<br />
<br />
<b>Why video?</b><br />
The cool thing about video is that you get to see and hear at the same time. And its in the tone at which the trainer wanted you to hear it. So you also get their inflection and emphasis on certain parts. This is why I chose to produce a bunch of videos and why you won't really see tutorials on this blog. I think programming, even straight code, needs to be seen, visualized and explained. Sometimes just watching someone type something out is way more helpful then reading a final code block.<br />
<br />
Errors will also occur on video. And thats not a bad thing. One thing I've had to work on in doing these videos is being able correct errors really quickly and explain what went wrong. Honestly some of the best learning you can get is from watching someone else make errors. I used to stop the video and correct it, or re make the video because of the errors. But now I think it's even more valuable to let people watch me debug on the fly and figure out how to fix whatever the problem may be.<br />
<br />
<b>Why not programming books?</b><br />
"Books suck. Watch videos." That was going to be my tagline for square bracket. Catchy no? While I don't think books suck, I do think they aren't ideal for learning to program. For a short period of time they are good as references, but the internet is fast enough now where that is even becoming irrelevant. See, printed books lose their relevance very quickly. Programming languages get updated all the time. I mean just 3 years ago it was all about web 2.0, 2 years ago was all about html5, and this year is all about CSS3 transformations. Not only that, the syntax for this stuff is changing all the time. Of course if you buy books on languages that are frozen then you will be safer. But still, you can't see a piece of code, then see it work, and interact with it at the same time. You have to read the code example, type it in, then try it. It's too many steps and leaves you too disconnected from the learning.<br />
<br />
<b>So what about online books or written tutorials?</b><br />
So written tutorials online are good when coupled with other media. That is if your able to provide an interactive example along with the tutorial you are halfway there. So the person learning can get that hands on access to play with the code. I think the perfect example of this is w3schools.com I went to this site probably 10,000 times while learning CSS. I could never remember everything when I was 15. But they provide examples of every single CSS class and selector. That really helped. That kind of "try it now" is a perfect way to learn.<br />
<br />
<b>What is most important?</b><br />
Just do it™. If you are trying to learn something, go with video first to get a good idea of what is going on, then dive right into code. That is <b><i><u>THE</u></i></b> best way to learn. <br />
<br />
<br />
<b>My learning process generally goes:</b><br />
1) look for a "how to" on youtube.<br />
2) look for some sample code online.<br />
3) Launch the example and see if it works<br />
4) try to change something about that example and not break it<br />
5) try to apply new modifications specific for a project<br />
<br />
And by then you should pretty much understand how it works, how it breaks, and how you can use it in your application.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com5tag:blogger.com,1999:blog-8197053275078179412.post-67844313523118027082011-06-19T21:52:00.000-07:002011-06-19T21:52:52.504-07:00Javascript Before jQueryI get asked all the time how I learned as much as I have about jQuery. And then answer really consists of 2 things.<br />
<br />
1) I already knew Javascript really well.<br />
2) I do a lot of jQuery Projects.<br />
<br />
I really want to focus on number one. Because jQuery makes coding javascript a lot easier, I find more and more new javascript coders, or new coders in general strictly using jQuery. They even refer to jQuery as a programming language. This of course is not true, because jQuery is just a javascript library. But it demonstrates an important point that people are starting to skip a huge step in front end development.<br />
<br />
jQuery is the most popular javascript library. And IMO for good reason. But when people want to start making some kind of front end project, they turn straight to jQuery. Now I won't say that "there are things jQuery can't do". But I will say that you shouldn't do everything in jQuery.<br />
<br />
There are 2 main purposes of jQuery.<br />
1) Simplify otherwise tedious javascript processes.<br />
2) Handle cross browser craziness.<br />
<br />
Basically something like $.post() for ajax makes it both simple to use and handles IE's differences with the XHR object. What is the XHR object? Well if you started with Javascript you would know.<br />
<br />
At any rate, lets talk about a few cases where you would NOT want to use jQuery.<br />
<br />
1) Extreme speed without caring about browser compatibility.<br />
Lets say you need to develop something for iPad. Well you know there will only ever be 1 browser. So you can write your javascript specifically for that, and not have to have jQuery do all it's extra stuff or if conditionals to check for IE and Firefox and opera and the rest. I'm not saying you have to, but if something in jQuery is being slow for you, maybe a loop is taking way too long, writing it in pure javascript can help. Because with any javascript library there will always be SOME (maybe very small) latency because its not core javascript, its a layer on top.<br />
<br />
Its the same principal as, code will be faster in C than it is will be in PHP.<br />
<br />
2) Element properties<br />
This one I just found because I was doing something in jQuery I wasn't supposed to. This is actually correct behavior, but I really love this hack. What I'm about to talk about is in this video <a href="http://www.youtube.com/watch?v=8G_i615QLCg">http://www.youtube.com/watch?v=8G_i615QLCg</a><br />
<br />
Basically this little plugin allows you set the "value" attribute on an html SELECT box (just like every other html input element) and it will select the correct OPTION in the drop down. So no need to load in PHP or anything, you can load the form data just like all its brothers and sisters. The problem though, is that jQuery's .val() and .attr("value") methods actually all call DOMElement.value. Which, when set on a select box is actually the current value, not the value attribute. Your not technically supposed to set a value on a select box because the OPTIONs have the value, which is why jQuery isn't using the actual value attribute. So to get around this, you need to use plan javascript element.getAttribute("value") and that will work. If I didn't know javascript I never would have gotten this hack to work.<br />
<br />
3) Respect<br />
You need to respect how much time you are saving by using jQuery instead of straight javascript. Because it makes you appreciate the code more. And I really believe that coding is an art form, and we are all artists. Artist love their work and respect it, and understand it's roots. Take a look at this video I did on what doing AJAX looks likes WITHOUT jQuery. <a href="http://www.youtube.com/watch?v=e_AO04xlB1c">http://www.youtube.com/watch?v=e_AO04xlB1c</a> Its actually from the first time I learned about jQuery and jQuery Ajax. I used to write out 20 lines of code for ajax. And now its just 1 or 2 lines. You really do appreciate what jQuery has done, and it I think it helps make you as a web developer want to make your clients feel that way about your creations. Respect.<br />
<br />
4) Debugging<br />
jQuery is software. Like all software there are bugs. (What you write bugless code?) So what happens when something isn't working right? Or you need to do something that jQuery didn't write a nice little function for? Your out of luck. Better start learning the entire javascript language real fast now. Which is going to seem incredibly hard now that you are used to jQuery. And lets say something you want to do isn't working right, or is slow. You could easily write it in javascript if you knew how, and move on with the project.<br />
<br />
So long story short. Its important to understand the core of something before you start using layers on top. But we can't expect too much, this is how the world is going now a days. We use computers on a daily basis but how many of us know how they actually work inside? As time goes on, we as people tend to ignore how things became how they are, and I think thats not a good thing. We should always learn from the past, respect it, and appreciate why things are the way they are now.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com2tag:blogger.com,1999:blog-8197053275078179412.post-57294567643635403172011-06-17T07:55:00.003-07:002011-06-17T07:55:55.806-07:00Chas-ification<span class="Apple-style-span" style="font-family: Helvetica;">Preface: This is an email I just received from Chas. If you don't have a Chas, I suggest you get one.</span><br />
<span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><br />
<span class="Apple-style-span" style="font-family: Helvetica;">Sean: A million thanks for covering the packing/shipping today. Despite what I hear, you're a stand-up dude.</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">I'll be studying in a coffeeshop like a hipster most all day today. Feel free to holler at me through one of the following approved methods:</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">1. SMS</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">2. electronic mail</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">3. telefon anrufen</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">4. telegram, stop.</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">5. homing pidgeon--i left one in the shipping room.</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">Stephen and Rob, same goes for you--let me know if you need anything. Stephen, I'll hammer out some CRM's today, too.</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">Suck it nerds,</span><span class="Apple-style-span" style="font-family: Helvetica;"> </span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">Chas.</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;"><br />
</span><span class="Apple-style-span" style="font-family: Helvetica;">#somanyhipstersinhereIfeelLikeIminPortland</span>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com2tag:blogger.com,1999:blog-8197053275078179412.post-90546402126068642622011-06-16T22:56:00.000-07:002011-06-16T22:56:48.764-07:00Debugging like a pro<b>I can't tell</b> you how important it is to know how to debug code. So as many of you know, I'm on the youtube making training videos. Most of these videos are not geared towards beginners and assume some level of programming. Time and time again I get hundreds of people asking me<br />
<br />
<div style="text-align: center;"><span class="Apple-style-span" style="font-size: x-large;"><b>"Whats wrong with my code"</b></span></div><span class="Apple-style-span" style="font-size: x-large;"><br />
</span><br />
Your failure to debug. Thats whats wrong. Lol. I'm throwing that "lol" in there to be more lighthearted about it. I'm not mad, and not upset that people aren't debugging. I'm able to fix 70% of peoples bugs with the following 2 steps.<br />
<br />
1) Paste into TextWrangler.<br />
Literally the syntax highlighting alone will go "HEY LOOK AT ME.. IM A SYNTAX ERROR". If you paste your code into your text editor and its all one color.. Chances are you have a syntax error. Better check that out. Not using an editor that has syntax highlighting? Get one. For mac you have text wrangler, coda, netbeans, text mate. For windows you have eclipse, notepad++, dreamweaver.<br />
<br />
<table align="center" cellpadding="0" cellspacing="0" class="tr-caption-container" style="margin-left: auto; margin-right: auto; text-align: center;"><tbody>
<tr><td style="text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNgvgLMAvP5rvOCE0n7HcW8b04NrlouCqJK03ohBqDbNhjtIpRuiig5Q_EuDKU4GmBoinTSLDegYAKwantiPZaBYWSPKT2bHXukUxXp9n26HlL7nYkwWEP3cHzMhx3fuRr4X9Uop23tm-C/s1600/Screen+shot+2011-06-17+at+1.54.39+AM.png" imageanchor="1" style="margin-left: auto; margin-right: auto;"><img border="0" height="151" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjNgvgLMAvP5rvOCE0n7HcW8b04NrlouCqJK03ohBqDbNhjtIpRuiig5Q_EuDKU4GmBoinTSLDegYAKwantiPZaBYWSPKT2bHXukUxXp9n26HlL7nYkwWEP3cHzMhx3fuRr4X9Uop23tm-C/s320/Screen+shot+2011-06-17+at+1.54.39+AM.png" width="320" /></a></td></tr>
<tr><td class="tr-caption" style="text-align: center;">.click(function() should not be pink</td></tr>
</tbody></table><br />
<br />
<br />
2) Firebug's net tab.<br />
So if the code checks out in the text editor, I just open firebug on their site and click the "net" tab. What the net tab will do is simply highlight all the resources in red that failed to connect. Whats a resource? Its a javascript file, a css file or an image. Basically anything you try to link to is a resource. So if your getting "$ is not defined". Chances are your jQuery.js file is not connected. Click the net tab and see confirm that.<br />
<br />
<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZGwu3PG2dDGNtrObyNT9yrMd7uujN4feMVNcRcdJ7VBqe5o4LTfyuc1TXLKxmbpxEc-YvSe2Y3dOGTZb6Sk_Gjdfxv0Z2ukrOX4fPlqaH4LKKBA0JVYD9SdP9I896SXcctiCpjIjDDHj/s1600/Screen+shot+2011-06-17+at+1.51.14+AM.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="75" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCZGwu3PG2dDGNtrObyNT9yrMd7uujN4feMVNcRcdJ7VBqe5o4LTfyuc1TXLKxmbpxEc-YvSe2Y3dOGTZb6Sk_Gjdfxv0Z2ukrOX4fPlqaH4LKKBA0JVYD9SdP9I896SXcctiCpjIjDDHj/s400/Screen+shot+2011-06-17+at+1.51.14+AM.png" width="400" /></a></div><span class="Apple-style-span" style="font-size: large;"><b><br />
</b></span><br />
<span class="Apple-style-span" style="font-size: large;"><b>"I don't use firefox"</b></span><br />
Don't care. Get it, use firebug, deal with it. YES you can use safari and chrome's inspector. But honestly I think they are harder to navigate around.<br />
<br />
OK, so thats 70% of the errors fixed. Whew. What about the other 30%? Well 10% of those are bad CSS selectors for your jQuery. I can understand this one though. Sometimes you put a # instead of . and you get confused. The best way to debug these, are to use firebug's console and test your selector out.<br />
<br />
So now that we've discussed the most common debugging techniques. Lets talk about more advanced ones.<br />
<br />
<span class="Apple-style-span" style="font-size: large;"><b>"I feel like my changes aren't being saved"</b></span><br />
Happens all the time. Sometimes you're editing the wrong file, or whatever. There are times when you just have to CTRL A > Delete > CTRL S. Yes, select all, delete, and save. Just to see if your changes are even being made. Chances are - you were editing the wrong file.<br />
<br />
<br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-size: large;"><b>"I'm using an MVC but my URLs won't work"</b></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">So an MVC is a PHP framework model called "Model View Controller". The basis for almost every MVC out there is the htaccess redirect everything to the index.php file thing. So if your URL's aren't working, either you don't have this file, or its not enabled to work. If your using apache, I made a tutorial on how to fix this. <a href="http://www.youtube.com/watch?v=9cLcmX3NcvM">http://www.youtube.com/watch?v=9cLcmX3NcvM</a></div><br />
<br />
<br />
<div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-size: large;"><b>"500 error!"</b></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">This means 1 of 2 things. You have a syntax error in your htaccess, or a syntax error in your PHP. So look at your htaccess first, but if you haven't recently made changes to it, its time to get into PHP. First place to look is your error log. This should be logging all your PHP errors. Its normally located in /var/log/apache2/errors.log or phperrors.log. If its not there, you need to enable it (or check the location) in your php.ini file. If you can't do any of that then you need to display your errors. So turn on errors.</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">ini_set('display_errors',1); </div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">error_reporting(E_ALL);</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">If you are scared about doing this on a live site (which you should be) Check out this tutorial on how to style your fatal errors so its not THAT huge of a concern (for that 1 minute while you debug it)</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><a href="http://www.youtube.com/watch?v=a5JyrLnjExQ">http://www.youtube.com/watch?v=a5JyrLnjExQ</a></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Now load your error again, and you should be able to see exactly where it is.</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">NOTE: Coda (for mac) has a really handy PHP syntax checker as a plugin. I highly recommend it.</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><br />
</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;"><span class="Apple-style-span" style="font-size: large;"><b>"mySQL is giving me the wrong results"</b></span></div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">Or you are giving mySQL the wrong query. :D</div><div style="margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;">I suggest you echo out your query in full, paste it into a database app on your desktop and debug it in the console. I use sequelPro for mac, and I think windows has some microsoft something. You can use PHPmyAdmin as well, but I really got away from that a long time ago.</div><br />
<br />
<br />
Basically you are just gonna look for the mysql error, and if you don't find one, you can quickly tweak your query to get your results, then look at your code and see why your input wasn't what you expected.<br />
<br />
<br />
<span class="Apple-style-span" style="font-size: large;"><b>"Cannot access ___ property of undefined"</b></span><br />
<span class="Apple-style-span" style="font-size: large;"><span class="Apple-style-span" style="font-size: small;">This is your favorite javascript error. The debugging trick with these is to console.log() the main object, then look around in that object in the console. Firebug will print out the object in a nice neat cascading way in order traverse the object and its properties. I use this a ton. This will allow you to see what properties actually exist on that object, and where you might have messed up.</span></span><br />
<br />
<span class="Apple-style-span" style="font-size: x-large;">TIP!</span><br />
The best tip I can give for debugging is this PHP function.<br />
<br />
function debug($data,$die=0) {<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>echo "<pre>";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>var_dump($data);<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>echo "</pre>";<br />
<span class="Apple-tab-span" style="white-space: pre;"> </span>if($die) die();<br />
}<br />
<br />
I use it everywhere. Basically you call debug($myVar); and it prints it out nice and neat for you to read. You can even pass debug($myArray,true); and it will print then kill the script. If your are using and MVC - put this function outside in your base controller and then you can use this without having to do $this->debug().Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com0tag:blogger.com,1999:blog-8197053275078179412.post-71959988669686639462011-06-15T21:16:00.000-07:002011-06-15T21:19:29.994-07:00OpenJS Grid<b>Why did I make my own jQuery grid?</b><br />
So any decent developer will go and look for something before making their own. So throughout the years I've used several jQuery grid tools. And these really aren't grids but data tables. Anyway, I tried jqGrid, flexGrid, and even slickGrid. We even made our own simple one once upon a time.<br />
<br />
<b>Why aren't these good?</b><br />
It's not that they aren't good. It's that they aren't easy. Easy to <i>use</i>, easy to <i>implement</i>, easy to <i>modify</i>. Here is the code to use jqGrid.<br />
<br />
Note: This is copy and pasted from their site for their "simple" example.<br />
<span class="Apple-style-span" style="color: #222222; font-family: 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;"><span class="Apple-style-span" style="font-size: 12px; line-height: 15px;"><b><br />
</b></span></span><br />
<pre><table id="list2"></table><div id="pager2"></div><b>Java Scrpt code</b>
...
jQuery("#list2").jqGrid({
url:'server.php?q=2',
datatype: "json",
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:55},
{name:'invdate',index:'invdate', width:90},
{name:'name',index:'name asc, invdate', width:100},
{name:'amount',index:'amount', width:80, align:"right"},
{name:'tax',index:'tax', width:80, align:"right"},
{name:'total',index:'total', width:80,align:"right"},
{name:'note',index:'note', width:150, sortable:false}
],
rowNum:10,
rowList:[10,20,30],
pager: '#pager2',
sortname: 'id',
viewrecords: true,
sortorder: "desc",
caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});
<b>
</b></pre><pre><b>PHP with MySQL</b>
...
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1;
// connect to the database
$db = mysql_connect($dbhost, $dbuser, $dbpassword)
or die("Connection Error: " . mysql_error());
mysql_select_db($database) or die("Error conecting to db.");
$result = mysql_query("SELECT COUNT(*) AS count FROM invheader a, clients b WHERE a.client_id=b.client_id");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
$count = $row['count'];
if( $count >0 ) {
$total_pages = ceil($count/$limit);
} else {
$total_pages = 0;
}
if ($page > $total_pages) $page=$total_pages;
$start = $limit*$page - $limit; // do not put $limit*($page - 1)
$SQL = "SELECT a.id, a.invdate, b.name, a.amount,a.tax,a.total,a.note FROM invheader a, clients b WHERE a.client_id=b.client_id ORDER BY $sidx $sord LIMIT $start , $limit";
$result = mysql_query( $SQL ) or die("Couldn t execute query.".mysql_error());
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while($row = mysql_fetch_array($result,MYSQL_ASSOC)) {
$responce->rows[$i]['id']=$row[id];
$responce->rows[$i]['cell']=array($row[id],$row[invdate],$row[name],$row[amount],$row[tax],$row[total],$row[note]);
$i++;
}
echo json_encode($responce);
...
</pre>Now that is a lot of code right? And that is just their simple example. This isn't even going into say row editing or anything. <br />
<br />
So ok, lets look at flex grid<br />
<pre><cript type="text/javascript">
</cript></pre><pre><cript type="text/javascript">
</cript></pre><pre><table id="flex1" style="display: none;"></table><cript type="text/javascript"><b>Javascript</b>
$("#flex1").flexigrid({
url: 'post2.php',
dataType: 'json',
colModel : [
{display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
{display: 'Name', name : 'name', width : 180, sortable : true, align: 'left'},
{display: 'Printable Name', name : 'printable_name', width : 120, sortable : true, align: 'left'},
{display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'left', hide: true},
{display: 'Number Code', name : 'numcode', width : 80, sortable : true, align: 'right'}
],
searchitems : [
{display: 'ISO', name : 'iso'},
{display: 'Name', name : 'name', isdefault: true}
],
sortname: "iso",
sortorder: "asc",
usepager: true,
title: 'Countries',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 700,
onSubmit: addFormData,
height: 200
});
</cript></pre><br />
So much better right? This is much shorter. But really who wants all that javascript config when you just want a table? And... This is just the javascript. Here is the required PHP you need to write everytime.<br />
<br />
<b>PHP with Mysql</b><br />
<br />
<pre>< ?php
$page = isset($_POST['page']) ? $_POST['page'] : 1;
$rp = isset($_POST['rp']) ? $_POST['rp'] : 10;
$sortname = isset($_POST['sortname']) ? $_POST['sortname'] : 'name';
$sortorder = isset($_POST['sortorder']) ? $_POST['sortorder'] : 'desc';
$query = isset($_POST['query']) ? $_POST['query'] : false;
$qtype = isset($_POST['qtype']) ? $_POST['qtype'] : false;
$usingSQL = true;
function runSQL($rsql) {
$db['default']['hostname'] = "localhost";
$db['default']['username'] = '';
$db['default']['password'] = "";
$db['default']['database'] = "";
$db['live']['hostname'] = 'localhost';
$db['live']['username'] = '';
$db['live']['password'] = '';
$db['live']['database'] = '';
$active_group = 'default';
$base_url = "http://".$_SERVER['HTTP_HOST'];
$base_url .= str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);
$connect = mysql_connect($db[$active_group]['hostname'],$db[$active_group]['username'],$db[$active_group]['password']) or die ("Error: could not connect to database");
$db = mysql_select_db($db[$active_group]['database']);
$result = mysql_query($rsql) or die ($rsql);
return $result;
mysql_close($connect);
}
function countRec($fname,$tname) {
$sql = "SELECT count($fname) FROM $tname ";
$result = runSQL($sql);
while ($row = mysql_fetch_array($result)) {
return $row[0];
}
}
$sort = "ORDER BY $sortname $sortorder";
$start = (($page-1) * $rp);
$limit = "LIMIT $start, $rp";
$where = "";
if ($query) $where = " WHERE $qtype LIKE '%".mysql_real_escape_string($query)."%' ";
$sql = "SELECT iso,name,printable_name,iso3,numcode FROM country $where $sort $limit";
$result = runSQL($sql);
$total = countRec("iso","country $where");
if(!isset($usingSQL)){
include dirname(__FILE__).'/countryArray.inc.php';
if($qtype && $query){
$query = strtolower(trim($query));
foreach($rows AS $key => $row){
if(strpos(strtolower($row[$qtype]),$query) === false){
unset($rows[$key]);
}
}
}
//Make PHP handle the sorting
$sortArray = array();
foreach($rows AS $key => $row){
$sortArray[$key] = $row[$sortname];
}
$sortMethod = SORT_ASC;
if($sortorder == 'desc'){
$sortMethod = SORT_DESC;
}
array_multisort($sortArray, $sortMethod, $rows);
$total = count($rows);
$rows = array_slice($rows,($page-1)*$rp,$rp);
}
header("Content-type: application/json");
$jsonData = array('page'=>$page,'total'=>$total,'rows'=>array());
foreach($rows AS $row){
//If cell's elements have named keys, they must match column names
//Only cell's with named keys and matching columns are order independent.
$entry = array('id'=>$row['iso'],
'cell'=>array(
'name'=>$row['name'],
'iso'=>$row['iso'],
'printable_name'=>$row['printable_name'],
'iso3'=>$row['iso3'],
'numcode'=>$row['numcode']
),
);
$jsonData['rows'][] = $entry;
}
echo json_encode($jsonData);
</pre><br />
<b>My Solution</b><br />
<br />
Now Flex grid seems just as bad as jqGrid. <br />
Before, I get too far ahead. YES you <i>could</i> wrap this all in some file and replace all the variables, and do a database config, and then god forbid you want searching. Oy. And I know it looks messy here, but it looks just as messy in their source.<br />
<br />
So now you should understand why these grid solutions are not ideal for most people. Here is my solution<br />
<br />
<b>HTML & JS</b><br />
<pre><!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="grid.css">
<script src="jquery.js"></script>
<script src="grid.js"></script>
<script>
$(function() {
$(".grid").loadGrid();
});
</script>
</head>
<body>
<table class="grid" title="Grid" action="ajax.php">
<tr>
<th col="feature">Feature</th>
<th col="version">Version</th>
</tr>
</table>
</body>
</html></pre><br />
<b>PHP</b><br />
<pre>< ?php
require_once("grid.php");
$grid = new Grid("orders");
$grid->load();
echo json_encode($grid->data);
? >
</pre><br />
<br />
And to note - This is nearly the FULL page code, not just a chunk like I pulled for the other guys. <br />
<br />
<b>How am I able to do this?</b><br />
Classes and the power of object oriented programming. Seriously, all I did was make 2 classes. 1 to handle all the mysql + database stuff. And 1 in jQuery to handle all the client side behavior. Thats all. This code is all open source, spaced perfected, well commented, and free to use and play with.<br />
<br />
Feel free to download it from <a href="http://square-bracket.com/openjs">http://square-bracket.com/openjs</a> Over 2000 people already have. (Thanks for all those who support OpenJS Grid)Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com2tag:blogger.com,1999:blog-8197053275078179412.post-16269818854829834732011-06-15T19:53:00.000-07:002011-06-15T19:53:01.297-07:00Brewing IdeasDay to day I often have to figure one thing out or another. If you ever see one of my desks, you'll notice strange objects all over them. I have a logarithmic potentiometer (dual channel of course) here at home. A piece of tek flex sits here as well. At work I have a rubber band and a momentary switch button.<br />
<br />
Why?<br />
<br />
All of these things keep my hands busy. I never really thought about it that much before, but I have a lot of trouble thinking if I don't have something in my hands. When I'm typing, I feel really productive, as if I'm getting a lot done. But when I'm planning or thinking, I'm not so productive in terms of work output. I think subconsciously my brain starts to get upset and lose track if I'm not feeling productive. So while I'm thinking, I have to be messing with something in my hands to keep my brain happy.<br />
<br />
<b>Walking away is an amazing way to regenerate</b>. I can't tell you how many times that just walking away fixed the problem. And not just walking around the hallway, but doing something else, non programming related. I'm sure there is some psychological thing going on here where you're able to think more clearly because those thoughts are the back of your mind. Like when your sleeping - you can solve many more problems. I think my best ideas, and most complicated problems are solved while sleeping. This is why you should always have something to write with and write on near your bed. Something that isn't a 9.7 inch LCD screen. I prefer a whiteboard. I have one above my bed.<br />
<br />
Currently on my whiteboard are some scribbles of how to translate a 2d square in 3D space using css3 transformations. I plan to incorporate that into openJS Grid sometime. So... Look for that lol.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com0tag:blogger.com,1999:blog-8197053275078179412.post-67458579439614052852011-06-14T21:55:00.000-07:002011-06-14T21:57:35.786-07:00My Philosophy on Web DevelopmentI think web development really has 4 layers. And really when I talk about web development, I'm talking about web applications, like backends, not just plain websites. Who has a plain html website anymore?<br />
<br />
<b>Layer 1 - Business and Finance. </b> This really can be ignored if your a freelancer, but not if your a company. This is the layer that you figure out the future of the company, your goals as a programmer, the quality of work you want to provide, and handling all the money and charging and tax stuff. This layer should not be done by a programmer, leave this to the guys that like to write proposals.<br />
<br />
<b>Layer 2 - Client Management.</b> Its difficult to talk to clients. Clients are stupid. (No offense to any of my clients whom might be reading this. You're not stupid we love you :). But basically in customer service you go by the rule of "the customer is always right". Well that doesn't apply in web development. They are hiring you for your expertise, and expect you to know what is best. They only know a little bit of what they want, and you have to sift through all of their gorgeous thoughts and really figure out what will make them happy, in the most efficient and cost effective way. We can take a minute here to thank tools like Pivotal tracker, Fresh-books, drop box and any other client management tools you might use. They really do make a huge difference. Programmers <i>can </i>be client account managers, but generally should not be, you should stick to coding.<br />
<br />
<b>Layer 3 - Core Design</b>. I don't mean the photoshop skills here. This is really the functional design and implementation architecture of the project. A lot of freelancers do this but they call it "sketching on a whiteboard". You can get really complex with this step. But more or less, this phase you are figuring you the entire project, solving all the problems, and building the foundation so that you can outsource the rest of the work. This is really the most fun phase, and its also the most challenging. You really have to understand every facet of the project, from what coding languages to use, to math, to what the client wants. This phase is the heart of the project. A great tool here is Omnigraffle, it really helps spec out projects.<br />
<br />
<b>Layer 4 - Work.</b> This is where the meat is. This layer is all the html, css, photoshop files, images, php files, database files etc.. Basically you are building the project here. This is different from the core because everything from this layer is built to work with the system that you created in layer 3. When you get started, this is the main phase you focus on, and the phase that costs the most money. Over time - in a business, you will do less of this and more of layer 3. As your company grows, you will find your self being able to outsource this part to your employees, and focus on designing more layer 3's for other projects.<br />
<br />
So yea - that is just my philosophy on web development, and what I think is involved from being just a freelance to growing into a web company.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com0tag:blogger.com,1999:blog-8197053275078179412.post-26087357193387589152011-06-14T21:44:00.000-07:002011-06-14T21:44:21.289-07:00Ok Now what is Square Bracket?So Square Bracket is the company that I started in order to teach and do all the programming videos that you seen <a href="http://youtube.com/optikalefxx">youtube</a>. Its also where I plan to release all my open source software and even some paid software coming up.<br />
<br />
<b>What about Connect Ai?</b><br />
Connect Ai is a company I started with Stephen Jensen in order to provide paid consulting services, and awesome web application projects. Basically people will ask me for help, but some will ask me to just do the project, those people get to be a client of Connect Ai.Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com0tag:blogger.com,1999:blog-8197053275078179412.post-7780920644660984062011-06-14T21:42:00.000-07:002011-06-14T21:42:14.922-07:00Introduction to Me<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I figure I should start a blog. So this is just a copy and paste from my about section on my website so you know who I am at the start of writing this.</span><br />
<span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span><br />
<br />
<div class="name" style="color: #333333; font-size: 12px; font-weight: bold;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Programming</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Hi, My name is Sean. I am a web software engineer. I have been programming for the web for about 8 years now. I started learning HTML and the slowly worked into PHP. I started a huge project that was written completely in raw javascript, thus began my javascript career. Aftwards, I went to school to learn C and some newer programming techniques. During this time I picked up mySQL and got back in PHP.</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I consider myself an expert in PHP, Javascript, mySQL and jQuery. With a strong emphasis on AJAX and HTML5 applications. I'm really interested in cutting edge web technologies such as HTML5, basically anything that Internet Explorer can't do, I like.</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I'm also rather versed in many programming techniques such as writing API's, building MVC frameworks, PayPal payment systems, creating full database structures, and complicated event based planning.</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="name" style="color: #333333; font-size: 12px; font-weight: bold;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Teaching</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">As you may have noticed, I like to teach. Or I just like to hear myself talk, haven't figured that out yet. Either way this life of programming is causing me to learn so much about so many topics. I started my youtube channel in 2007 with the intent to just share some programming thoughts. I now have almost 1000 views a day and over 200 videos online. The best way for me to learn, is to explain back to myself so that I understand. Thefore, it becomes easy to make these training videos. As soon as I figure out something awesome, I make a video about it and hope that someone else needed to learn the same thing. My goal in the future is to keep making videos, but for more advanced users. As I continue to learn more, I find the amount of documentation and training material decreases. This is really tough because advanced programmers still need to research how to do something. For example, If you look up how to jQuery slide, you get 1.5 million results. If you look up PayPal adaptive payment api quirks, you get maybe 2.</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="name" style="color: #333333; font-size: 12px; font-weight: bold;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Life</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Life is fun. When I'm not destroying my eyes in front of 3 monitors I like to go camping, hiking, skiing, ice skating and exercising. I really want to sky dive some day, and I also want to go into space one day. I've secretly always wanted to be an astronaut, but after working on some NASA projects I'm not so inclined to anymore.</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"><br />
</span></div><div class="name" style="color: #333333; font-size: 12px; font-weight: bold;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Entrepreneur</span></div><div style="color: #333333; font-size: 14px; margin-top: 5px;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">I enjoy business. Not going to school for it, but the art of business. I started my first company when I was 17 with my buddy Dan Schepleng. He's a locally famous movie composer now. We built </span><a href="http://4tenonline.com/work.html" style="color: #333333; outline-color: initial; outline-style: initial; outline-width: 0px; text-decoration: underline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">4Ten Technologies</span></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> from the ground up. We started by fixing windows computers, and then moved onto creating </span><a href="http://4tenonline.com/annex/" style="color: #333333; outline-color: initial; outline-style: initial; outline-width: 0px; text-decoration: underline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">Annex</span></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">, our first software project. We had moved [up] into our 3rd office in baltimore, and had </span><a href="http://blip.tv/file/1845911" style="color: #333333; outline-color: initial; outline-style: initial; outline-width: 0px; text-decoration: underline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">2 amazing employees</span></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">. I'll miss those guys.<br />
<br />
After 4 Ten I went to work for </span><a href="http://www.mp3car.com/" style="color: #333333; outline-color: initial; outline-style: initial; outline-width: 0px; text-decoration: underline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">mp3Car</span></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> where I do forum maintenance, built their website, and became an </span><a href="http://www.mp3car.com/blogs/144922_Directus--Convert-After-Market-Radio-to-CarPC-Box--SEMA-2010.html" style="color: #333333; outline-color: initial; outline-style: initial; outline-width: 0px; text-decoration: underline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">on air personality</span></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> I get to interview some really interesting people and see some awesome tech. I also get to do some </span><a href="http://www.mp3car.com/blogs/142586_iPad-Suction-Mount.html" style="color: #333333; outline-color: initial; outline-style: initial; outline-width: 0px; text-decoration: underline;"><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;">funny videos</span></a><span class="Apple-style-span" style="font-family: Arial, Helvetica, sans-serif;"> once in a while.<br />
<br />
While at mp3Car I made a lot of headway on my youtube videos. I was found by Vantage Systems LLC to work on a bunch of NASA database applications. That really launched me ahead in what enterprise companies need. A few months ago, I started Square Bracket LLC, which is where I consult on various web application projects, and will continue to peruse this video training career, in hopes to start providing full length advanced training videos.</span></div>Seanhttp://www.blogger.com/profile/17870800386364175713noreply@blogger.com2