Tag: Javascript

  • I want to learn something new. But what?

    I recently stumbled upon this on Reddit by rtheone, whom I give full credit. The only reason I’m posting this here in full is because of the fickle nature of Reddit (in that it could be deleted at any time), but I thought it should be saved for a while here. They talk about many of the same topics I cover and care about (music, programming, graphic design, art, writing, and self-development), which makes it particularly interesting to me.

    I’ll open frankly: the universe is bigger than you can even imagine and there are an infinite number of different answers to your question. In the post to follow, I’ll try to provide some answers. I will list out some of the more obvious things that you can do with little equipment, not that much money, and nobody else to do things with. But first, I want you to recognize this: this is, at most, an incomplete list. You will have different opportunities based on the environment you put yourself in. No matter what, your mileage will always vary. Regardless, there will always be new things to learn or do, you just have to get up and seek it. Let’s begin, shall we?

    First and foremost, you could learn to play an instrument. Knowing how to play at least one instrument can be one of the most rewarding hobbies a person can do. Not only will it teach you about music and music theory, but playing an instrument can be relaxing, fun, and intellectually stimulating. A secret: used instruments and garage sale equipment can be extremely inexpensive. Check your local listings. Another secret: a lot of people have unused instruments sitting in their attics or closets and are willing to lend them to prospective musicians. All you have to do is ask nicely.

    Ideally, you would want a music instructor who will guide you through the basics and outline what you should practice. Unfortunately, instruction can be expensive and in some places, unavailable. Thankfully, there’s plenty of resources online to self-teach yourself. On reddit, check out these posts from /r/piano, the FAQ from /r/guitarlessons, the sidebars and top posts on /r/clarinet, /r/saxophonics, /r/trumpet, and /r/drums. Not only that, but there are numerous of Youtube videos and online tutorials out there for learning how to play instruments. I highly recommend that everybody at least tries to learn an instrument at least once. Or learn many, like this guy. The music you learn to play and the experiences gained from musicality will stay with you for the rest of your life.

    Let’s switch to a less common hobby. You could pick up lockpicking. As strange as it may seem, lockpicking has plenty of legal real-life applications as well and is a fun, calming hobby that plenty of people enjoy. There are very few feelings better than opening up a multi-tumbler lock. Just be sure to read your local laws on what you can and can not do.

    Another great part about lockpicking: you can self-make your own equipment or buy it online for very little money. On reddit, there’s a fantastic lockpicking community on /r/lockpicking and here’s their beginner’s guide. There’s also plenty of tutorials and videos online. For example, here’s a fantastic online video series by the controversial competitive lock-picker Schuyler Towne on learning how to lockpick. If you want to cut directly to the lockpicking and skip all the videos about locks and pick making, start here.

    If you have access to a computer, you can learn programming. It’s a large, fun skill that has an incredible number of uses. This guy in /r/webdev turned his career completely around in 18 months and landed himself a web development job. There’s plenty of resources online for learning programming. Here’s the starting FAQ from /r/learnprogramming that a lot of redditors are referred to when they ask about learning to code.

    The FAQ can be kind of dry and demotivating, so try an interactive tutorial. They’re more exciting and helps you ease into the flow of things better. I gave you a link to a Javascript interactive tutorial. Don’t be afraid to consider different programming languages and don’t feel belittled. Learning a programming language is like learning a new spoken language, you have to start from the very basics, despite how simple they may seem. Self-plug: here’s a guide to learning how to go from knowing nothing about Java to making your own 3D renderer in Java I wrote a few months ago.

    You can also learn graphic design. With free tools like Paint.Net and GIMP, you can learn how to make visual products that look nice. You can teach yourself to make a well-designed logo, to choose a typeface accurate for any given situation, or design a handout for a public event. You can apply concepts like color theory and negative space to almost anything. There’s a million practical uses for design, but it’s also quite difficult to master. Like with drawing, skill and mastery comes with practice.

    Thankfully, you don’t have to do it by yourself. Like any other digital skill, there’s an incredible amount of resources online. Check out this guide from PSDTuts and read online resources like /r/design, /r/graphic_design, and /r/Design_Critiques. There’s also plenty of other websites out there that will offer free resources and tutorials. Look to them for inspiration. Don’t be afraid to mimic other people’s style as well, it’s how a lot of beginning designers learn. Just don’t directly copy them. Once you understand the basics of whatever tool you’re using, the best way to get better is to simply practice. Challenge yourself with new tasks every day and set the bar higher and higher each time.

    Similarly, you can pick up sketching and drawing. Frankly, learning to draw primarily comes from practice. Spend ten to twenty minutes every day sketching something new. Or better yet, try /r/sketchdaily. Similarly, don’t feel demotivated if you start off as a not-very-good artist. I assure you, with practice, you will definitely get better.

    Want proof? Check out this conceptart.org thread. Check the date. Over the next sixty pages and seven years of drawing, you’ll find the OP working a little bit every day and developing from a beginning hobby artist to an art teacher. Want to see some of his last posted works? Check here and here. That’s what passion and practice gives you.

    Let’s say that drawing is too easy for you and you want to pick up something slightly more challenging. Try 3D modelling. It may seem daunting at first, but through the development of habits, 3D modelling can be not that difficult. Here’s how: download Blender and follow this online book step-by-step. It’s the best book I’ve found that goes into extreme detail on learning how to pick up 3D modelling. It has an amazing pace and is incredibly easy and fun to learn. There’s obviously a million uses for 3D modelling, from making model architecture to product design to designing 3D assets for a game or film.

    You could also improve your penmanship. Every day, spend a little bit of time and develop a unique style of handwriting. Write out the alphabet a few times and add nuances to your lettering to make them stand out. Here’s a nice starter on practicing your abilities with a pen or pencil. Like with sketching and graphic design, don’t be afraid to look at or copy parts of other people’s styles. Seeing good handwriting and other people’s handwriting can be a great place to find inspiration and motivation.

    It’s not a talent per se, but you could do the awesome thing and read. No library? Look at this, it’s more books you can read in a lifetime all put in a single place for free. Try to at least spend a little bit of time reading every day and better yet, immerse yourself in the books you read. If you don’t know what to read, look up the exact same question on subreddits like /r/books and /r/printsf or visit /r/booksuggestions. Be sure to go back and read classics that you were forced to read in school at your own pace. You’ll might find the experience enlightening. Reading will help improve your openness to other ideas and are fantastic references and conversation makers. Reading will generate creativity, expand your knowledge and vocabulary, and improve your ability to write. Most importantly, it’s fun.

    Like reading, you could practice writing. Write more and with purpose. Expand your vocabulary by writing with a new, difficult word every single day and reusing it later on. Learn to convey ideas with short sentences but with beautiful prose. Learn to tell a story and learn to objectively state the facts. Check out /r/writing and try writing short little stories every day or every week and submitting them to /r/nosleep (for horror) or /r/shortstories. Maintain an unread blog. Keep a journal in your pocket all day. Write stupidly long posts on reddit. Write more! Try out/r/shutupandwrite if you’re having trouble staying motivated.

    I also highly recommend working out and getting fit. Not only is it physically beneficial in terms of losing (or gaining muscle) weight, but it’s also emotionally and mentally rewarding as you feel better from it. You’ll feel better, healthier, and more confident from it. Here’s a fantastic start-up guide from /r/fitness. There’s not much to say about this one. You should be doing this already! If you’re not, do whatever it takes to motivate yourself to get physically active. For example, try listening to music while working out. It’ll make the time pass much quicker and make you less self-conscious if you’re in a public place. Most importantly, don’t push this off.

    If you want some music to listen to, you could try to expand your music appreciation to the harder-to-pick-up genres. A lot of people say they like jazz or classical and can only cite pieces like Take Five by David Brubeck or Beethoven’s Moonlight Sonata as examples. That’s all great and fantastic, but there’s a MASSIVE genre out there filled to the brim with fantastic music. Learning to love it will supply you with a near endless amount of music. All it takes is a little patience and a little know-how.

    The patience comes from you. Here’s some of the know-how: check out this post from this subreddit and check outthis post from /r/jazz and check out this post from /r/classicalmusic. Take some time and patience and learn to love the musical nuances that defined genres like classical and jazz. Soon enough you’ll be humming out motifs from Coltrane’s Giant Steps or a Mahler symphony like the rest of us.

    If you have some music theory knowledge, you can also try composing and making your own music. As it turns out, once you have the music theory basics covered (try this if you want to learn basic music theory and use this if you want to practice ear training to recognize pitches, keys, and chords), making “reasonable” electronic and pop music really isn’t that difficult, but hard to perfect. It’s also really fun and entertaining. /r/WeAreTheMusicMakershas a terrific guide for getting started at making your own music. This is a great starting point for the massive amount of resources like this also available online on learning how to make your own music (See a theme here? Lots of resources online. Just gotta learn to seek them out.)

    If you need a DAW (a digital audio workstation), LMMS is free and not that hard to use. It shares similar functionality to the ever popular Fruity Loops/FL Studio DAW (which costs money, is professionally used, and is professionally laughed at) but lacking in some advanced features.

    Let’s keep up with the music theme. You can also improve your singing. You could get a vocal coach, or you could do the hard work and practice. The best thing you can do is both. But if you don’t have the money, do the latter. Start here then practice. Practice! Belt it out to your favorite songs and don’t care. Sing in the shower, sing in the car, sing whenever and wherever you can afford to have the people around you listening (so no singing during business meetings). When you’re at home, sing while listening to a song and record yourself with a mic and a recording program like Audacity. Play it back with the original song and see how you do. Sure, you’ll think you sound terrible at the beginning, but like with all things, you get better over time.

    Another thing: you’re probably not going to enjoy listening to your own voice. Don’t. You’re just not used to hearing yourself in recording compared to the sound bouncing around through your head. First of all, it’s your own voice. It’s not going to change. Learn to love what you’ve got. Some people are short. Most of them learn to embrace it and take it in stride. With practice, you can make slight changes to your tone and voicings that will improve your ability to not only sing, but will improve your ability to talk with people and give speeches emotively. Plus, there will be that day when your friends force you to sing some karaoke against your will and you’ll have your months and years of practice ready to go. Show them what’s up.

    Another small thing you can learn is learning how to meditate. I’ll re-post this because it covers the gist of it extensively. You might not see or feel instantaneous ephemeral benefits, but spending 10-20 minutes meditating every morning will dramatically improve your lifestyle.

    You could do the obvious and pick up sports. Ask around in your local communities. There’s almost definitely people out there who gather in local parks and facilities to play sports together at different levels. If you’re not the interactive type, learn to swim. It’s cheap, easy, fun, and doesn’t require other people to enjoy. Learning to swim is one of the most important things you should do, even if you live in the middle of a desert. You simply don’t know when you might be in a position where knowing how to swim could mean life or death. Plus, swimming is relaxing and not that hard on the muscles.

    Here are some other physical activities you could pick up without relying on other people or a vast array of equipment: biking, hiking, rock climbing, martial arts, skating, surfing, skiing, and gymnastics. Having a good instructor could be extremely helpful though and is almost always preferable than not. I’ll put a little bit more emphasis on biking because it’s an incredibly useful skill to know how to do well. Biking is a cheap, ecologically friendly way of getting to local places quickly. Apply liberally.

    You already mentioned learning a language. I’ll be frank and tell you I’m terrible at learning languages. I’ll tell you what I’ve heard from other people. First of all, the number one most recommended method of learning another language is the following: surround yourself with people who will speak the desired language often. Better yet, travel to it. Within weeks, you’ll know the basics. Within months, you’ll be practically fluent. Dead serious.

    If you can’t move yourself around, try this website. I’ve heard good things about it. You could also try classes. Generally, they have mixed results, but it forces you to practice in a friendly environment which is better than practicing by yourself with little to no motivation. Most languages have a subreddit dedicated toward them:/r/chineselanguage/r/korean/r/spanish/r/french. Check out their sidebars or top posts to find some guides on learning each language.

    Oh, and there’s dancing. I haven’t put much effort into learning how to dance… but check this out.

    There you have it, a not-so-short list on the things you can do in your free time. I might add a few things every now and then if it comes to memory. You now have no excuse to be bored and let your ennui catch up to you.You don’t have to master every single thing. If you enjoy it, pursue it. If you don’t, move on to the next thing. Life is too short to not do what you enjoy. Have at it and never give up- never surrender!

    Via original post on Reddit by rtheone. One final quote from rtheone from one of his other posts, “Some times, as other people mentioned, it’s just about persevering. You might simply have to push through your barriers and find the reward on the other side. Some times, though, it’s about finding a way that makes it work for you. Open up to new ideas.”

  • Tools of the Trade

    These are the Windows tools I use to make web sites, which in turn makes me money online.

    Notepad++ – If you’ve used Windows anytime in the last 25 years you know about Notepad, but don’t let the name fool you, Notepad++ is a notable improvement over Notepad, specifically for programmers. Now you might not think of yourself as a programmer, but if you’re editing HTML, CSS, or PHP you’ll find Notepad++’s code-identifying text color changes useful as well as the ability to have multiple tabs open at once (with split screen ability), and “just how you want it to act” tab spacing. It auto-indents code and can indent rows of code at once in highlighted sections. Another neat feature is the ability to search within files or folders for text, which I have used many times.
    Filezilla – The defacto standard for open-source FTP programs, Filezilla is what I use to upload files to my host. It’s not as secure as SSH secure shell, but it gets the job done for free. Filezilla’s site manager tool can save connection information, making it easy for you to manage different FTP accounts, but I tend to just use the quickconnect bar, which saves a history of your recently visited FTP sites. Individual view windows can be turned on or off in the view file menu and more customization is available in the settings menu.
    Firebug – A browser plug-in for developers that works best in Firebug, but has versions for Chrome and Internet Explorer too that don’t work as well. This program lets you highlight items inside the browsers view screen to find out information or to make temporary changes. These temporary changes allow you to preview the affects before you make the changes permanent. This is an excellent tool and a must-have for web site developers.
    Chrome – Contained within Chrome’s tools is a feature called “Chrome developer tools,” which works much like Firebug, but is built into Chrome. It allows you to browse elements on the page or make temporary changes. One nice feature is the Audit tab which lets you review things like network utilization and web page performance. A quick run of the audit tool will yield you advice (if you need it) on CSS, Javascript, cookies, and cache usage.
    Paint.Net – For advanced photo editing with layers, Paint.Net delivers as the strongest free comparison to Adobe Photoshop. It features several advanced adjustment tools including “Black and White,” “Curves,” and “Sepia.” There are also built-in effect tools ranging from artistic, to blurs, to distortion, which rival those of Photoshop. For a comparison with Paint.Net, try GIMP. Paint.Net, GIMP, and Photoshop all are made to edit raster graphics, which are like photographs and cannot scale up without losing resolution. Vector images, on the other hand, are like those used in animation and logos and use math to create lines. This allows them to scale up and down without losing resolution since its just a recalculation of the math. Vector images can only be edited with special programs like Inkscape, which is free, or Adobe Illustrator.
    Picasa – While its biggest feature is probably its photo management and gallery functions, the reason I’ve included it in this list is as a subsidy to Paint.Net and even Photoshop for specific picture editing. There are two views, “Library” and “Edit”. Inside the edit view there are three tabs, “Basic Tuning”, “Fixes,” and “Effects”. In Basic Tuning or Fixes I use the fill light command the most as I feel it does a better job than just adding brightness using Paint.Net or Photoshop. In Effects I use “Glow”, “Soft Focus”, and “Sepia” the most. Paint.Net also has a sepia effect. Use these or the “Collage” tool in the Library view to create neat pictures for your web site.
    Inkscape – A free alternative to Adobe Illustrator, Inkscape is a fully baked open-source scalable vector image editing program. It takes some getting used to if you’re used to working with raster images in layers, but once you get the hang of manipulating objects and lines and knowing when to left-click and when to right-click, you’ll be able to make some decent iconography that might save you some money over buying stock images for your web sites. And just because it is open-sourced doesn’t mean it’s not supported. There is lots of documentation, tutorials, and online forums in a community willing to share and collaborate. If you already own Adobe Illustrator this is a fine tool and also comes highly recommended.

    If I’ve missed a Windows tool that you use, please mention it in the comments and for Apple and Linux users, feel free to add your comments as well to share with all.

  • Google Maps Query String Parameters

    The following is a list of query string parameters that can be passed to Google Maps.

    These arguments are helpful if you want to get Google Maps to display driving directions, which are not available under the API.

    Query

    Translation

    q= “q” stands for “query” and anything passed in this parameter is treated as if it had been typed into the query box on the maps.google.com page.
    near= “near” can be used as the location part of a query instead of putting the entire string into q=
    g= “g” is an address or location that provides extra context for the “q” parameter. Google Maps stores the last ran search here, but if it is the first search it can only contain your starting location. This is a potential information leak, so make sure you do actually mean to share the content of this parameter.
    mrt= “mrt” specifies a type of search. The default is blank, which searches for everything.
    start= “start” skips the first (start-1) matches.
    num= “num” displays, at most, the given number of matches. The valid range is 0 to 20.
    ll= “ll” stands for Latitude,longitude of a Google Map center – Note that the order has to be latitude first, then longitude and it has to be in decimal format.
    sll= “sll” Latitude,longitude of the point from which the business search should be performed.
    spn= “spn” Approximate lat/long span. The zoom level will be adjusted to fit if there’s no z= parameter.
    latlng= “latlng” takes three numbers separated by commas. The first two numbers (presumably representing latitude and longitude multiplied by 1000000) are ignored. The third number seems to be a Google internal “Company ID” number for a particular business.
    cid= “cid” is similar to “latlng,” but generating a different map size. It takes three numbers separated by commas. The first two numbers (presumably representing latitude and longitude multiplied by 1000000) are ignored. The third number seems to be a Google internal “Company ID” number for a particular business.
    geocode= “geocode” is a concatination of “geocode” encoded values for waypoints used in directions.
    radius= “radius” localizes results to a certain radius. Requires “sll” or similar center point to work.
    t= “t” is Map Type. The available options are “m” map, “k” satellite, “h” hybrid, “p” terrain.
    z= “z” sets the zoom level.
    layer= “layer” Activates overlay. Current option is “t” traffic.
    lci= “lci” activates layers of tiles and needs to be comma-separated.
    view= “view” can be used to select text view (view=text) or the normal map view (view=map).
    saddr= “saddr” source address. Use this when asking for driving directions.
    daddr= “daddr” Destination address(es). Use this when asking for driving directions.
    mrad= “mrad” gives you additional destination address.
    dirflg= “dirflg” is the route type: dirflg=h Switches on “Avoid Highways” route finding mode. dirflg=t Switches on “Avoid Tolls” route finding mode. dirflg=r Switches on “Public Transit” – only works in some areas. dirflg=w Switches to walking directions – still in beta.
    via= “via” gives a comma separated list of intermediate addresses for directions, that should be ‘via points’.
    doflg= “doflg” Distance Units. (Defaults to prevalent units in country of origin.) doflg=ptk outputs directions in metric (km) and doflg=ptm outputs directions in imperial (miles).
    cbll= “cbll” is latitude,longitude for Street View.
    cbp= “cbp” Street View window that accepts 5 parameters: 1) Street View/map arrangement, 11=upper half Street View and lower half map, 12=mostly Street View with corner map 2) Rotation angle/bearing (in degrees) 3) Tilt angle, -90 (straight up) to 90 (straight down) 4) Zoom level, 0-2 5) Pitch (in degrees) -90 (straight up) to 90 (straight down), default 5
    panoid= “panoid” is the panorama ID, which is the ID of the current nearby panorama object in Street View.
    hl= “hl” stands for “host language”.
    om= “om” stands for “overview map.” The presence of this parameter with a value other than 1 causes the overview map to be closed. If the parameter is omitted, or present with the value 1, then the overview map is open.
    ie= “ie” stands for “input encoding” and can be used to specify the input character encoding set.
    oe= “oe” stands for “output encoding” and can be used to specify the input character encoding set.
    output= “output” is for output format (blank is default).
    f= “f” stands for “form” and controls the style of query form to be displayed. f=d Displays the “directions” form (two input boxes: from, to). f=l Displays the “local” form (two input boxes: what, where). f=q (or no parameter) The default search form is displayed (single input).
    pw= “pw” stands for “print window.” It activates the print mode and initiates printing. Example, pw=2.
    iwloc= “iwloc” stands for “info window location” and specifies where the infowindow will be displayed. In a business search iwloc=A to iwloc=J will open the info window over the corresponding business marker, and iwloc=near will place it over the big green arrow if that’s currently displayed. iwloc=addr can be used on map search to explicitly request the info window to be open on the address, but that’s the default anyway. Directions search supports iwloc=start, iwloc=end and iwloc=pause1
    iwd=1 “iwd” stands for “info window display” and specifies that the infowindow displayed (iwloc=) will be a detailed (expanded) view.
    iwstate1= iwstate1=ssaddfeatureinstructioncard Specifies that the infowindow is in add place mode. Use with ssp=addf and iwloc=SS.  iwstate1=sscorrectthiscard Specifies the infowindow is in edit mode. iwstate1=sscorrectthiscard:ssmovemarkercard The infowindow is in Move marker mode, with the marker bouncing and draggable. iwstate1=sscorrectthiscard:ssedithistorycard The infowindow is in View history mode, displaying a graphical list of marker moves.
    msa= “msa” is involved in My Maps processing. It does nothing without the “/ms” and “/ms” does nothing without the msa=. msa=0 Used with msid= to show a particular My Map.msa=b Activates the “My Maps” sidebar when used in conjunction with “maps.google.com/ms”.  msa=1 shows the My Maps tab directly (like msa=b did). msa=2 Jumps directly to create new My Map form.
    msid= “msid” specifies a My Maps identifier. When used in conjunction with “maps.google.com/ms” and msa=0, the corresponding My Map is displayed.
    vp= “vp” stands for “view point” and the presence of this parameter causes maps.google.com to switch into Copyright Service mode. Instead of returning the html that draws a map, it returns information about the copyright ownership in Javascript format. The vp= parameter specifies the viewpoint (i.e. the centre of the map). Copyright Service only works when the spn= and z= parameters are also supplied, indicating the span and the zoom. Optional parameters are t=, which specifies the map type, and key= which specifies the API key of the site performing the request.
    sspn = “sspn” stands for “Screen span”. Map bounds dimensions in Degrees, to calculate this use: newGLatLng(map.getBounds().getNorthEast().lat() − map.getBounds().getSouthWest().lat(),map.getBounds().getNorthEast().lng() − map.getBounds().getSouthWest().lng()).toUrlValue()

    Here are some reference books on Google Maps programming that may also be useful:

    Google Maps APIMap Scripting 101Google Web Toolkit ApplicationsBeginning Google Maps API 3 (Expert’s Voice in Web Development) [Paperback]Map Scripting 101: An Example-Driven Guide to Building Interactive Maps with Bing, Yahoo!, and Google Maps [Paperback]Google Web Toolkit Applications [Paperback]

    One reviewer said about Svennerberg’s book, “It’s been a constant struggle for me to find accessible Google Maps API resources that not only cover the capabilities of the API, but also explain the JavaScript concepts behind them in a way that I can understand.” You might also be interested in Gabriel Svennerberg’s blog.

    What is a Query String Anyway?

    A query string is the part of a Uniform Resource Locator (URL) that can contain data (called parameters) to be passed to web applications such as CGI programs. When a web page is requested via a web browser, the remote server locates a file in its system based on the requested URL. This file may be a simple file or a program. If it is a program, the server may run the program (depending on its configuration), and send output as the required page. The query string is a part of the URL which is passed to the program. It’s use permits data to be passed from the HTTP client (often a web browser like Mozilla Firefox) to the program which generates the web page. This site uses software from WordPress which uses query strings to indicate criteria to search for specific posts or sets of posts in the database. This default use of query strings may reduce search engine optimization (SEO) efforts so pretty permalinks are used here instead. I use the /%category%/%postname%/ permalink, which is probably the most popular.

  • The Yahoo! User Interface Library (YUI)

    The Yahoo! User Interface (YUI) Library is a set of utilities and controls, written in JavaScript, for building richly interactive web applications using techniques such as DOM scripting, DHTML and AJAX. The YUI Library also includes several core CSS resources. All components in the YUI Library have been released as open source under a BSD license and are free for all uses.