Hacking for Designers #1: HTML

(Apologies to David Kadavy. I stole his title. :P)

A note: “Hacking” among programmers just means you’re building something new, usually with code (but not always!). It’s not the kind where you just type a bunch and then say “I’m in.” Programmers refer to those people as “crackers,” and they don’t think very much of them; partly because it doesn’t actually take that much intelligence to break into stuff, and partly because what kind of uncreative programmer can’t find something better to do? Honestly. The exception is of course pentesters, or “white hats,” whose job it is to try to break into systems to find out where they’re vulnerable and secure those vulnerabilities. Pentesters are quite highly regarded. Developing security and finding obscure weaknesses to shield is much more difficult than what most crackers do, and much more valuable.

So, you have the ability to make stuff look awesome through design. It’s important! We need people like you, because otherwise technology would be a royal pain in the butt to use. Design is the reason Apple succeeds even though they don’t always have the best tech, and lack of it is why it took Linux forever to get off the ground as a user’s OS despite being awesome at the code level.

But not being able to code at all can be a bit… limiting. There’s a learning curve, yes, but fortunately the basics aren’t anywhere near as intimidating as they look. You’re definitely smart enough to pick this up. The main barrier is how scary and weird code can look to a neophyte.

The good news is that hacking is a lot more similar to your own field than you think! People draw a dichotomy between software devs and designers like they’re total opposites. Even geographically, our classes are on the opposite side of campus next to the physics and chemistry departments (here at UNI). But this is super weird! We have zero to do with science. They call us computer scientists, but that’s just to make us look fancy. What we are is makers, and the way we learn and the way we work are much more similar to painters and writers and… designers!

So, I’m whipping up a quick guide for you last minute. It’s really not going to take you long to pick this stuff up. Coding doesn’t get difficult until you’re deeper into the field, and if you get that far, you’re probably addicted so it doesn’t matter 😉

This only covers web development. There are lots of other specialties in the field, but this is the one that’s most useful to you.

First Stop on the Nerd Train: HTML

You’re gonna need this. Pure HTML is butt-ugly; you need CSS to do any kind of layouts or colors. But you can’t learn CSS until you learn some basic HTML, because you need something to style. Trying to learn CSS first would be like trying to format a book without the actual text.

HTML is for content and structure, CSS is for layout and styling. Don’t fall into the trap of using tables for layout. People did that a lot in the 90s, and it makes your site ridiculously difficult to code and maintain. Also it’s likely to play merry hells with responsive design these days. Fortunately, there are a few newer tools that fix this problem and let you use grid layouts without getting into the whole <table> mess. We’ll get there. HTML first. Just wanted to warn you off this pitfall in case you see it somewhere else.

First off, you’re gonna need a code editor. Right now, the hacker favorite for web dev is Brackets. It’s free, it’s open-source, and you can download it here.

Got that?

Okay, so here’s the basic skeleton for an HTML5 project. Copypaste at will; I’ll explain what all this does in a minute.

<!DOCTYPE html>
<html>
    <head>
        <title>Welcome to Website!</title>
        <meta charset="UTF-8">
        <link rel="stylesheet" type="text/css" href="thisisyourcssfile.css" />
    </head>
    <body>
    </body>
</html>

If you save this as an HTML file and run it in Brackets’ live preview (use the lightning bolt button on the top of the right sidebar), you’re going to see a blank white page. That’s normal! You should also see “Welcome to Website!” in the tab’s label in your browser. That’s because I set it as a placeholder title; you can put whatever you want in there.

About those indents–they’re not strictly necessary in HTML, but they make your code way easier to read! You could put everything on one line if you really wanted, but it would be a pain.

A standard indent is four spaces. However, Brackets does this neat little trick where it turns a tab keypress into four spaces, so you don’t have to wear your thumbs out!

I think the only thing I still haven’t explained is the <!DOCTYPE html> thing. That just tells the browser you’re using HTML5. Nothing weird!

Wait, How Does Any Of This Work?

Skip if you already know about how browsers and servers interact. If not, here’s a quick explanation.

A “live” site (one that can be accessed from anyone’s browser, like google.com) lives on a server. That’s a computer, somewhere, which can talk to other computers and knows how to hand out web pages when other computers ask for them.

So when you type a URL into your browser (e.g., Firefox, Chrome, etc), it uses your Internet connection to go ask that server for the files that make up the web site you want. Usually this means an HTML file, a CSS file (or possibly more than one), a handful of images, and probably some scripts (programs) too, especially if the web site is one you can post stuff on and interact with rather than just read and browse.

The URL you type in is pointing to a location and filename on the server. If you just type the domain name, like somethingsomething.com, then what the server will return is the index.html file (and anything linked to it, like stylesheets and images). You’d still get the same page if you typed in somethingsomething.com/index.html because it’s the same thing. So, as a web developer, you should always name your homepage index.html so the browser can find it.

All those files are basically just instructions for your browser, telling it how to display all the stuff on the web page and what should happen when you click on stuff. Sometimes you enter text into forms and whatnot, and your browser can send that back to the server, asking for whatever response to that data is appropriate.

For now though, we’ll start with static web pages: that is, pages that are just HTML, CSS, and images. If you need more interactivity, you’ll have to either learn a programming language (JavaScript, Python, and Ruby are very reasonable choices for this), or find and work with someone who does. I encourage you to try learning to code, though! Picking up the basics is pretty easy and lets you do more, plus it looks fantastic on your resume.

Adding Stuff: How Elements Work

Most of your other code is going to go in between the <body> tags. That’s where you put all your content. <head> is a separate element. It isn’t the page header! That’s something different, and you’ll put it in the <body> tags with the rest of your content. <head> is only for metadata, which is stuff that you put in to tell browsers and search engines stuff about your site, like what character set to use, keywords to help searches find your site, and how to find your CSS file.

So, what can you put in the <body>?

Elements!

Here’s the basic structure of most elements: an opening tag, like <p>, then some content, like some text or images, then a closing tag, like </p>. Closing tags have that slash before the letters. It tells the browser that that’s the end of the element (the end of the paragraph, in this case). There are a few elements that only need one tag, like the charset declaration in the head, or image elements, but most need two!

You can have elements inside elements, and that works like this:

<p><a href=”heylookalink.com”>Here’s a link!</a></p>

You never do it like this:

<p><a href=”heylookalink.com”>Here’s a link!</p></a>

Always nest elements inside each other, don’t let them cross through each other like that!

Meet Some Elements

Here are a few elements to get you started. There are a lot of elements, and you can find out how all of them work from w3cschools.com, but here are the ones you probably want at first. They’re all linked to their respective W3C Schools pages, so just go there to find out how they’re used. Everything has examples and stuff!

Divs and other style-related dividers

<header> and other semantic elements

These elements are just boxes to put your stuff in so you can style them up later. Like, <header> is for the header in your design, that shows up at the top of the page. It’s an invisible box at first, but you can use CSS to paint the box different colors, or change its size, add borders, stuff like that. Go to the semantic elements link for the whole thing, there’s a bunch like this: <nav>, <article>, <section>, <aside>, <footer>, and so on.

<div>

These are like the semantic elements, but they’re custom! You can give them classes, for when you have a bunch of divs to style the same way, like <div class=”product”>, or you can give them IDs, for when you want there to be only one div in that style, like <div id=”left-sidebar”>. (We’ll talk more about classes and IDs when we get into CSS.) Divs used to be the only kind of “styling boxes” available, but HTML5 introduced the semantic elements above.

Text formatting elements

<h1> <h2> <h3> … <h6>

These are also referred to as header elements, but they’re not just boxes. You put text inside, and the browser recognizes that it’s a header and styles it accordingly. By default, h1 is huge and h6 is pretty small (but still bold, so it’s different than other text). Here’s what my blog’s styling turns them into:

h1

h2

h3

h4

h5
h6

<p>

Paragraph tag. Pretty straightforward!

<ol><ul><li>

1. 2. 3. “ordered” lists, bullet-point “unordered” lists, and the list items you put in them, respectively

<a>

Links (they need an href=”linkurl.com” to work tho, so your browser knows where it’s supposed to go)

Other stuff

<!– comments –>

This is an important tag, and one you’ll probably want to use a lot, especially at first. It’s a special one: it lets you make notes to yourself or other developers. Anything inside a comment tag is totally ignored by computers reading your code.

It’s an unusual looking tag, so here’s how it works.

<!-- blaaaaaah it doesn't matter what I put here! the browser doesn't care as long as it's between these tags! -->

You can use comments to warn future readers about some weird hack you put in your code, or you can use them as a to-do list, or you can use them to remind yourself how something works. Or you can put dorky ASCII art or silly jokes in it, so if someone comes along and decides to read your code, it’s like an Easter egg for nerds. There’s a proud tradition of leaving silly comments in source code.

Occasionally you’ll hear developers brag that no one should need comments because code should be written so it’s “self-documenting”; in other words, one should master the art of precise and meaningful names for variables, classes, etc. This is bullshit: sometimes you just need comments, and usually the developer making said claim is NOT one whose code is “self-documenting.” It’s just an excuse for them to be lazy and not write comments. You’ll find that programmers are very lazy–especially the ones who are either very bad at programming, or very very good.

Either way, just go ahead and write your comments.

<hr>

This makes a line across the page. Sounds weird, but sometimes you need it.

<meta>

Meta tags are how you tell other machines things about your code. They always go in between the <head> tags, not the <body>. You can tell your browser what character set to use (this gets important when your site has international visitors). You can tell search engines who the author of the page is. You can give search engines information about what’s on the page by offering it keywords. You can also tell your browser to notice how wide the device is, and change the page’s formatting accordingly–this will get more important as you get into responsive design.

None of the stuff in <meta> will actually show up on your page, but other machines will be able to read it. The only way your site visitors will see any of it is if they use their browser’s developer tools to manually look through your source code. Also, <meta> are single-tag elements. You’ll never need to type </meta>.

If this element sounds like a weird grab bag of semi-related stuff, it kind of is. W3C can elaborate on the stuff you can do with <meta>. At some point, you’ll need to know about what <meta> can do, but for now it’s okay to skip it and come back later.

<!DOCTYPE html>

That tag is called a doctype declaration. Browsers will generally still render stuff just fine without it as long as HTML5 is current, but as the web page gets older and the standards change, it might start to get buggy unless the browser has a doctype declaration to tell it which standards you’re using in your code. The way we code for the web changes over the years.

This tag has to be the very first line of your HTML file. Don’t try to put it anywhere else.

 

 

 

I’m still working on this post, as it’s going to take a bit to cover everything you’ll need to get started, but I’m confident I can get it down to a manageable and relatively non-intimidating post. Yes, I’m publishing it before it’s 100% finished. A blog post isn’t a book, and nothing that’s going to be here should make the post misleading due to its initial omission. In other words, all the chunks of info on here should be fairly self-contained. (It’s 3AM and I’m getting sesquipedalian wordy because I’m tired, so I’m going to stop for now. Isn’t that a weird habit?)

Happy hacking!

Advertisements

Box Project #2: Guess what I’m using to write this post!

Hint: it’s not something I got at Best Buy (except for the power supply, monitor, and keyboard anyway), and it’s definitely running Debian.

So, my build worked first time! I put the fire extinguisher away after it passed the smoke test. (Safety precaution. I didn’t actually expect it to burst into flames, but, well, you never know.)

The only thing that didn’t immediately work was one of the case fans, which I saw in the BIOS wasn’t on. I opened up the case again, rechecked the connection, and I don’t know if it’s on right now (I’ll probably check at some point) but nothing seems to be hot and bothered so I call that a result. It’s surprisingly quiet, too! You have to really listen to hear either the case fans or the stock CPU cooler. I guess they’re better than they used to be. Of course using an Antec case does help. It was really nice to work with, especially compared to Take Apart A Computer Day (which I wrote about earlier). Though, I don’t know if the computers sold whole to schools are actually meant to be taken apart. Probably you’re just supposed to buy 50 new computers. -_- Although I think assembly is just easier than disassembly, and for good reason, or computers would just fall apart in shipping.

I was pleasantly surprised by the number of Steam games in my library that are actually compatible with Debian. I’ll be asking for a graphics card for Christmas though–integrated graphics really can’t handle Don’t Starve and some of the other stuff in my library. It can, however, handle Cave Story+ perfectly, a game I haven’t played in years. (Classic RPGs tend not to demand much of graphics cards.) I missed Cave Story. Years ago I beat the Hell levels (several times, actually) because I was just That Determined to save Curly Brace. And then I did it again in Curly Mode, to find all the secrets. If you haven’t played this game, you need to. There’s a free version available for download online and there’s a Steam version (which may or may not still support Mac, I’m not sure.)

It’s okay that my box can’t handle the other games immediately, though. After all, my MacBook still works, although compared with the sleekness of the new rig it feels outdated and sounds asthmatic. I haven’t tried working on digital art yet with it, but I’m working on getting that set up. It’d help if more of these multi-platform programmers knew what a package manager was, though. >.< They go through the trouble to port to Linux and then they go “download here!!!”. I wanted to hear “the command is apt-get install whatever” — even if I had to add an aptitude source — the random .deb packages are not so helpful! (Edit: I miiiight have figured out how to do this. Not sure yet.)

I picked up and put down several assembly guides over the course of the project, but this one is the best I found: https://choosemypc.net/assemblyguide/

Other tips:

  • Install the motherboard port shield the right way up before getting confused about why the mobo isn’t fitting. I spent two minutes trying to figure out what was wrong and another five feeling really dumb.
  • I cut some cardboard from the box my case came in to put down on my workspace so my coffee table wouldn’t get scratched, and another piece to kneel on because a) it’s comfortable to have some padding and b) my apartment is all carpet and I was hoping it’d reduce the static.
  • I used an ice cube tray to separate screws. There are lots of screws and you don’t need them all. My extras are in a pickle jar along with the tube of thermal compound, the extra hard drive brackets, my green sticks, the protector cover that comes on the motherboard over the processor contacts, etc etc.
  • There aren’t instructions on which screws are used for what. You have to guess. My motherboard used two types of screws in different holes, too. Just be careful with your trial and error.
  • Sometimes Google is better at finding stuff in your motherboard manual than you are. Manuals are online, and it took me forever to find where you’re supposed to plug in the power button and reset and stuff–it’s easily overlooked in the manual but search is good at finding it.
  • Don’t be afraid to slide a side panel back on (to keep your cat out) and get some sleep. Even letting it sit for a few days isn’t going to hurt it if you can make sure it won’t be disturbed.
  • It helps to have a frozen dinner ready in your freezer that evening. Either it’ll take you a while because it’s your first time, and you’ll be tired and need a break and food and not want to cook, or you’ll have a new computer and you’ll want to set it up right away.
  • Fiddle with the buttons on your monitor until you can get it to auto-adjust or otherwise cooperate with your OS.
  • A wired connection, at least at first, doesn’t hurt. I tried one of those wireless USB adapter sticks and I don’t think it’s going to help. Debian doesn’t know what it is. I figured that was a nonfree driver issue, but it has bizarre install instructions for Linux and the manufacturers maybe don’t know the difference between Fedora and Debian systems? I don’t know what’s up with that, and I may look into it later, but for now I just bought a long CAT6 cable to run around the edge of the room and be done with it.

That’s that for now. I’m really pleased with this setup, and of course I have something to brag about when I go back to classes 🙂

Box Project #1

When did computers turn into a machine with so few individual components? Feels like I’m buying chunks of the machine already partway put together.

Here’s my parts list. Only seven items.

Plenty of room for upgrades in this, I know. That’s why the case isn’t one of those ridiculously tiny things the size of a sweater box. Those things… kind of weird me out, tbh. To me a computer is a big fifty-pound thing encased in sheet metal. But I digress.

Reasoning behind the parts list:

  • Integrated graphics is fine to start with. I’m not a rabid gamer. I could go out and buy someone’s 18-month-old external graphics card if I decided it wasn’t good enough, though. The case has room.
  • There’s no Windows license included. This should be obvious. It’s going to run Debian, of course. (I’ve had Elementary OS on a partition on my laptop for months… I’m kinda neutral on it. Shrug.) Windows might get a VM or a corner of the hard drive if my school has it for free, but otherwise…
  • Processor is quad-core, decent speed but not the fastest available. I like my VMs. The fans it comes with should be fine since I don’t feel the need to overclock it.
  • Antec case because I’m not a masochist–I want something nice to work in. It’s a sleek, sort of minimalist black, no weird lights or anything–and it’s $48 from Amazon.
  • A solid Antec power supply with the 80+ eco-whatever certification that means it’s efficient. I’ve had enough issues with laptop power supplies that I’m just super done with cheapness in this component.
  • 8GB RAM is solid enough for a Linux box, although there’s obviously room for upgrades. If I were building this to run mainly Windows I’d want 16GB.
  • Terabyte hard drive. I considered buying an SSD instead, or even a tiny one for just the operating system, but for now I’m putting that under the header of potential upgrades. They’re getting cheaper all the time, so it may be smart to wait, and this is good enough for me for now.
  • Nothing special about the CD/DVD drive. It reads, it writes, it’s $20.
  • Motherboards are kind of confusing to me. I don’t know what I’m looking for and they’re all labelled “gaming.” This one looks good though. ASUS is a good brand, it has enough RAM bays and outputs, and I’m pretty sure I looked up what the integrated graphics card was like when I picked it out months ago. My older brother (who built loads and loads of computers in the late nineties/early naughties and still takes stuff apart sometimes) thinks it looks good too so I’m running with it.

That’s my build–I’m ordering it now. It comes to about $600, which is a reasonable price for a computer where ALL the components are good quality, rather than just the ones that get showcased on the label (you ever hear a big-box computer store boast that their case and power supply are good quality? or that their computers are this upgradeable?). In other words, a “business” computer. That’s code for “it isn’t totally crap.”

Also, I don’t have to pay the Windows tax. ò_ó

I’ll let you all know when I get this done and can report on the experience and the performance of the result, so you can use or tweak my build example for your own purposes. I’ve never built a computer before but I’ve watched them being built and fixed, and lots of people are saying it’s gotten easier over the years. Anyway, I’m pretty jazzed about my new tech and this should be really neat!

Happy hacking!

 

Edit: Lucky I wasn’t being too literal when I said I was off to order it now. Martin in the comments is pointing out that I’m paying for way too much motherboard power and way too much power supply wattage. (I probably thought I was being careful when I picked these out and overestimated it.) I was not aware that there were calculators available for power supply needs–I didn’t see it in the PC building manual I bought or the online articles I read, and this seems a little on the bizarre side. If this were more my thing, I’d probably write my own, but I doubt I’ll have call to build more computers any time soon so I probably won’t be developing this skill much. Unless I go work for a repair shop or something, cleaning viruses and bad virus software out of PCs, and end up in that department. (Something I considered doing earlier this year.)

Anyway. I punched in the specs into the Cooler Master calculator and…

That is decidedly not a 650W kind of need. I’m going to try a couple of these calculators just to be sure but… uh. I think a cheaper power supply might be in order.

Edit #2: Newegg’s calculator says 400W for this build. I think a 500W with good efficiency will do it then…? Again, lots of potential upgrades. I don’t want to repurchase this component.

Edit #3: New build here. I added some trimmings and necessities so I don’t forget them. Also added a Mac keyboard, which I like because they’re aluminum, you can get keyboard condoms for them, they feel good to type on, and I don’t have to fight different muscle memory impulses for my laptop and desktop re: command vs. control. Worth $50 as long as it works correctly. My keyboard cover on my MacBook has saved my keys from all kinds of junk gumming them up.

Take Apart A Computer: Follow-Up Post

(If you’re here because you want to know what to do with your shiny new Linux DVD, you can skip about the first third of this.)

Today I attended Take Apart A Computer Day, hosted by the Women In Computing club here at UNI. This was kind of a beta test run for a potentially larger event later on.

I worked together with two other girls (if you ladies are reading and want your names here, let me know–but I don’t generally mention names on this blog unless asked, for people’s privacy) on a huge old box. We have no clue if it worked beforehand (the consensus after two professors and all three of us took a crack at testing it was no), but it definitely isn’t working now, so I guess that’s a success. After all, the event isn’t called “Put a Computer Back Together in Full Working Order Day,” and we did get it apart. Eventually.

So, we learned a couple things from the beta run for next time:

  1. Test all the machines beforehand–after moving them.
  2. The test monitors that the computers also need to be tested on a known working box, so we know our testers work. Nothing like screwy monitor settings to make you crazy wondering what’s up with the computer.
  3. Two people is probably a good number for working on a computer together… three is a bit much. Having a partner makes things easier, but six hands is pretty awkward even if the people are friendly.
  4. WHERE IS THE RIGHT SCREWDRIVER. WHAT EVEN IS THE RIGHT SCREWDRIVER. NONE OF THESE SCREWDRIVERS WORK. HOW.
  5. Juice boxes! Yes, this is kind of a tradition with me now: bring juice into a place where it would be very bad to spill juice. But they were still all consumed! On the other hand, we need more people willing to take home pizza that’s been sitting out for a few hours…
  6. Having extra Linux install DVDs to hand out is a good thing! Not necessary, but good–people are curious!

Anyway, I’m sending this post around the WIC mailing list (er… Google group? It’s different from the CedarLUG list, which is legitimately an old-fashioned mailing list). About five of you folks from this event now have Linux test/install DVDs. If I remember right, I handed out a Xubuntu, a Mint, two versions of Debian, and… something else? Maybe that was it.

I’m pretty sure I’ve used each of them at one point, and they should all work even if they’re not all the newest and greatest; I think they’re all the long-term-stable releases so they’ll be fine. If they don’t work for whatever reason, don’t sweat it; email me or whatever and I’ll make more, or if you have blank DVDs lying around (or are willing to buy a pack for $5 at an office supply store), you can make one.

 

Anyway, when I give people techie stuff, I like to make sure they can easily figure out how to use it. (Doesn’t always happen, but I try to.)

So! If you’re curious about Linux and maybe just got a DVD from me, here’s a guide to all the guides I’ve written on the subject:

If you didn’t get a DVD or yours turned out to be a non-functional dud, here’s how to make one.

If you don’t have an optical drive in your computer, or want a more permanent plaything than the DVD, here’s how to make a virtual machine instead.

If you’re confused about the Linux ecosystem, here’s how I learned what I know.

If you’re just confused, period, here’s the FAQ I wrote for another event which involved lots of Linux newbies.

If you just want to run Linux off your DVD to play with it a little, it’s simple. Stick it in the optical drive of your computer, and restart the computer. While it boots, tap F12 (it’s probably F12, but keep an eye out for what key you’re supposed to press for menu options during your computer’s boot sequence) and select “Boot from CD/DVD” in the menu.

The difference between doing that and making a virtual machine is that a virtual machine will save any files you create from session to session (unless you do magic to configure it otherwise). An install DVD won’t save anything, so you get a fresh, clean system every time you start it up.

If that’s not working for you, email me in the list or comment on this post and I’ll try to help. If that still doesn’t work for you, bring the offending computer to the next WIC meeting if it’s portable (let me know what you’re doing so I make sure to come), or invite me over to your place if it’s not/if you can’t attend the meeting. I will help you get a Linux running if that’s something you want.

I’ve installed Linux on some weird old machines and gotten at least workable solutions out of them. Sometimes a setting needs to be tweaked or Google needs to be scoured for information. Sometimes a certain distro just doesn’t like your hardware, and you need to try a different one or download extra driver files or plug your computer into a wired Internet connection or something weird. Such is technology.

That’s usually not the case though. Most installs these days go really smoothly, especially with Mint or Xubuntu.

Speaking of installs, CedarLUG–UNI’s Linux Users Group–is holding a Backup Day pretty soon, and an Install Day sometime after that. If you want in on that, here’s the web site (I coded that! The penguin at the top is a bit of a giveaway…). Subscribing to that mailing list will get you updates on those events, and the occasional computer puzzle.

Happy Linux-ing!

How to make a Linux CD

A CD or DVD with Linux on it is a useful thing to have! There are quite a few things you can do with it:

  • You can try Linux out without installing it. Just putting the CD in the optical drive and running Linux from there won’t touch your main operating system or files. Using it like this can actually help you fix a Windows computer–you can still access the hard drive and back up all the files that are on it from Linux even if Windows is acting weird. (You can also use it to kind of crack into your machine if you’ve been locked out for some reason, but don’t try it on a network because the sysadmin will notice and flip out. You didn’t hear this from me.)
  • You can install Linux alongside or instead of your main OS–be careful about your files if you’re doing a wipe-and-install, of course, and be careful about partitioning your drive too. Make sure you have a backup of at least everything important if you do it this way!
  • You can also install Linux on a virtual machine, although using the .iso file you download from the Internet and burn to the CD works just as well for this.

So how do you make one? It’s pretty easy:

Get yourself a blank CD or DVD.

Some distros won’t fit on a CD and you’ll have to use a DVD. If you don’t know what this means yet, get a DVD.

Pick a Linux distribution (or “distro”).

There are lots of different “flavors” of Linux. They might look a little different, or be designed for special systems or specific groups of users.

If you’re new to all this, I suggest Mint or Xubuntu. They look a lot like Windows, so they’ll seem familiar, but they’re way better! And they’re a breeze to install. Normal Ubuntu I wouldn’t recommend as a first distro, actually; the user interface it comes with is kind of clunky. The only difference Xubuntu has is that it looks simpler and that makes it a little easier to use.

If you’re curious or you’ve tried this before, try searching around for a distro that’s particularly suited to you. I’m quite fond of Debian, but I’ve been playing with Elementary, which looks more like Mac OS X than the normal Windowsy-looking interfaces.

Mint and Xubuntu are great general-purpose distros. Xubuntu is probably the better one on older computers–I’ve made a ten-year-old box on two gigs of RAM run like a decent computer by installing Xubuntu. If your computer is THAT old, you’ll want 32-bit; otherwise, use 64-bit.

A word about some terms you’ll see. Unless you’re developing or testing for the distro as a project–in other words, if you’re a normal user–you won’t want to use the development versions. Anything that says “nightly release” or whatever, stay away from using as a main operating system because it’s still in testing.

“LTS” means “long term stable.” That is a GOOD thing to download. It may not be the very most recent version, but it’s a well-tested one that’s going to be supported for a reasonably long time.

You can also just get the most recent stable release. Those or LTS releases will be fine.

Download the .iso file

Either from the Internet directly or as a torrent. Googling the name of your distro should make it pop up. Where possible, always use a download link suggested on the project web site. There are probably multiple “mirrors” to download from; try to choose one that is on the same continent as you.

Any computer with 4 gigs of RAM or more should be using 64-bit operating systems. That’s probably what you want unless your computer is really old.

If this is your first time, I’ll make it easy on you. Here’s the download page for the latest Mint (64-bit, Cinnamon desktop), and here’s the download page for Xubuntu.

A torrent is a more reliable way of getting a distro if you have a torrent client set up. They’ll keep going even if they’re interrupted, and they’re less expensive for the maintainers. However, the clients are kind of tricky to set up, at least in my experience. There’s nothing wrong or sketchy about torrenting Linux distros–you can use torrent clients to get hold of sketchy Internet stuff, but that’s not what we’re doing here, this is super innocent and it’s just another way to get your .iso file.

Burn the .iso file to the CD

You probably know how to do this on your computer. If not, Google it. It’s pretty simple.

Label the CD, and maybe put it in a paper sleeve

Lots of people forget to do this, and it’s really confusing! Make sure you mark your CD with the distro name (e.g. Linux Mint), the version number (e.g. 18), and whether it’s 32- or 64-bit (probably 64).

Optional but fun: Burn more CDs for your friends

Self-explanatory.

“Did you get it to do that thing you were trying?”

“I figured out how to install programs!”

“I found a tutorial about the command line!”

“My resolution is acting funny, anyone have ideas about that?”

This is why Linux User Groups exist. Get enough nerds in one room playing with a shiny toy and something fun is going to happen.

 

Happy hacking!

Resources for a project

Contents

  1. Command Line
  2. Version Control
    1. Installing
    2. Learning
  3. Python
    1. Installing
    2. Learning
  4. Kivy
    1. Installing
    2. Learning

Our GitHub repository

 

My mobile app development class is making a production app for an organization in a nearby city. We’re mostly pretty inexperienced though. I’ve done enough reading and tinkering to know roughly how this should go, but I’m kind of guessing too. I know what software we need, but I’m not very good at explaining why, so a lot of conversations have gone like this recently:

Me: We should use this thing.

Others: We’ve never heard of that thing. What does it do?

Me: It helps you keep track of the thing, and also these things.

Others: So it’s kind of like this other thing?

Me: Kind of, but also not.

Others: …

Me: It’s best practice in the industry.

Quiet guy who is probably more knowledgeable than I am but also too smart to stick his neck out and accumulate a bunch of work: *tries to explain*

Others: So it is like the thing?

Me: Yeah, sort of.

Quiet guy: *shrugs*

Others: Let’s use the thing.

Later:

Others: How do we use the thing?

Me: Uhhhhh…

Anyway, that’s what this post is for. My regular readers may find it useful for something, but I’ve probably covered a lot of this in previous posts and I’ve noticed that you folks like to binge-read my archives when you discover my blog (I’m like that too when I find blogs/comics/whatever).

 

Command Line

The one thing on this list you already have! The command line is a powerful development tool, especially under Unix-like systems. You’ll also find that git is easiest to use from the command line. Here’s a good, quick tutorial.

Learn Python the Hard Way’s command line crash course

 

Version control

We’re using git and GitHub. Git is version control software, which means that it can keep track of and solve conflicts between code changes made by (in our case) half a dozen people.

It has features like code branching, which lets you work on making new features in a separate copy of all the code without having to always change the main branch before your feature is stable, and when changes are made on a file, it points out what changes were made so you don’t have to look through the whole file to find them. You can also look back at old versions of the code, which is useful if stuff breaks or you want to know what the heck you were thinking.

This is going to sound confusing until we start using it.

Installing

Windows doesn’t come with git itself (the command line tool). Kivy’s site recommends Git for Windows, which has a GUI application for Git as well as a bunch of other features. You’re probably fine taking the default

The customer has cleared us to use GitHub publicly, so you all need to create GitHub accounts.

Make a GitHub account

Learning

You also need to know how to use GitHub. The best tutorial for learning I’ve found is on Codecademy. It’s free, but you’ll need a Codecademy account to save your progress. Then you can go through the tutorial. This will explain all the commands step-by-step, a lot better than I could in person, so please pester the Internet and not me about it because you’ll get better results.

Make a Codecademy account

Codecademy’s Git tutorial

Sometimes, what you need is a reference and not a tutorial, and CC’s step-by-step instructions are a real pain when you just wanted to know that one command you forgot. A good reference is here instead.

Git reference

Once you’re comfortable with the commands, clone the repository I made on GitHub, which is here:

https://github.com/RebekahAimee/ypn-app

 

Python

Installing

First, if you’re running Windows, you’re going to need to install Python. (Mac and Linux come with Python, so don’t worry about it if you’re running those.)

First, you need to download Python. We want 2.7.11 (as of this writing), not 3.whatever, in order to work with Kivy. You probably want the last link from this list.

Please pay attention while you’re installing that. There’s a feature in the installer you can select that adds Python to $PATH for you, and if you select it, you can save yourself the next set of instructions. If you’ve already installed, or can’t find the feature, here’s how to fix the owie that not selecting that feature leaves you.

On Windows, you need to modify the $PATH variable in order to get your command line to recognize Python. $PATH is an environment variable that tells your command line where to find your development tools, and by default, when you install Python, it isn’t changed (in case you have multiple Python versions on the same computer).

Here’s how to modify your $PATH variable; you need to add this chunk of code

C:\Python27\;C:\Python27\Scripts

to the front (don’t delete the rest). If you’re not so sure about doing that, Hitchhiker’s Guide to Python has a tutorial; it gives you a command you can paste into PowerShell. (I haven’t personally tried it, but I’ve had good experiences with that web site.)

Learning

If you don’t know Python, it’s really easy to pick up. Here are two tutorials:

Learn Python the Hard Way (a published book, online version is free)

Codecademy’s Python tutorial

 

Kivy

Kivy is a cross-platform, open-source Python framework that we can use to build mobile apps. In fact, it cuts our work in half because we don’t need to build a separate app for Android and iOS… and it’s better designed because the framework’s code is beautifully orthogonal to anything we create with it. You don’t need a special IDE and a long tutorial about what all those auto-generated files do in order to run Kivy. Heck, you could write Kivy in Notepad if you really wanted to. It’s also much better documented than the normal Android SDK, and nearly everyone likes Python better than Java.

Installing

For Windows, the magic commands here take care of everything. Keep in mind you’ve already installed Python.

Installing Kivy on Windows

If you’re running Mac or Linux, you’ll want to refer to their respective instructions. You can still use pip if you want, or you can download and install a tarball.

Installing Kivy main download page

Learning

Kivy has a much easier learning curve than the Android SDK. But you still need to learn how to use it. There’s an excellent textbook for $10-$20 from O’Reilly:

Creating Apps in Kivy (Amazon)

There’s great API documentation from the Kivy developers:

Getting Started

API Reference

There are also beginner apps that you can create, demonstrated on the Kivy site. I didn’t like them nearly as much as the book–they kind of ran me into a wall with trying to do other stuff based on the code. I found the book more useful, but I’ll link to the pong app anyway:

A First App

 

 

This post will get updated as we end up using more resources.

Let’s Learn Git

I’ve only started on this fairly recently, so this post will probably start out kind of sparse and get updated and change over time.

Git is a version control system, as you probably know. You may or may not know that it doesn’t just live on GitHub. Git can live on just your computer, privately, and you can make git repositories without ever uploading them to GitHub. Or you can use git on your personal machine and later put the repository on GitHub.

Basically everyone uses git, so it’s definitely something you need to learn.

I started here. https://www.codecademy.com/learn/learn-git

If you don’t have a Codecademy account, you should make one. Codecademy has tons of awesome tutorials, none of which I’ve ever finished, and if you’re patient you’ll get through them and have a basic understanding of what they’re teaching, or if you’re impatient you’ll get halfway through them and wander off to tinker or program or learn something else, because that’s just how some of us are, okay.

I’ll admit, the reason I’m not the most patient with CC is the same reason I’ve never gotten all the way through a Head First book. It likes to go slow and steady, with plenty of beginner hand-holding, and while it’s a totally solid way to learn, I think it’s more fun to barge straight into the “coding something” part as soon as possible and just read StackOverflow or come back to the lessons if I have problems.

Unfortunately, this is also why I got through like the first section of that tutorial and then trial-and-error/StackOverflow solved for the bumps until I got tinypapers’s repo straightened out. (Did I mention I did that? I did that last month or something.) So I don’t have a big stash of links.

Here’s what I can remember using, though.

https://help.github.com/articles/set-up-git/

http://stackoverflow.com/questions/1443210/updating-a-local-repository-with-changes-from-a-github-repository

I may have more stuff later though, because I forget things and look them up again and bam, purple links. Those will show up here when I get to them.

Have fun!