27,99 €
See all the things coding can accomplish The demand for people with coding know-how exceeds the number of people who understand the languages that power technology. Coding All-in-One For Dummies gives you an ideal place to start when you're ready to add this valuable asset to your professional repertoire. Whether you need to learn how coding works to build a web page or an application or see how coding drives the data revolution, this resource introduces the languages and processes you'll need to know. Peek inside to quickly learn the basics of simple web languages, then move on to start thinking like a professional coder and using languages that power big applications. Take a look inside for the steps to get started with updating a website, creating the next great mobile app, or exploring the world of data science. Whether you're looking for a complete beginner's guide or a trusted resource for when you encounter problems with coding, there's something for you! * Create code for the web * Get the tools to create a mobile app * Discover languages that power data science * See the future of coding with machine learning tools With the demand for skilled coders at an all-time high, Coding All-in-One For Dummies is here to propel coding newbies to the ranks of professional programmers.
Sie lesen das E-Book in den Legimi-Apps auf:
Seitenzahl: 997
Veröffentlichungsjahr: 2017
Coding All-in-One For Dummies®
Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com
Copyright © 2017 by John Wiley & Sons, Inc., Hoboken, New Jersey
Media and software compilation copyright © 2017 by John Wiley & Sons, Inc. All rights reserved.
Published simultaneously in Canada
No part of this publication may be reproduced, stored in a retrieval system or transmitted in any form or by any means, electronic, mechanical, photocopying, recording, scanning or otherwise, except as permitted under Sections 107 or 108 of the 1976 United States Copyright Act, without the prior written permission of the Publisher. Requests to the Publisher for permission should be addressed to the Permissions Department, John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030, (201) 748-6011, fax (201) 748-6008, or online at http://www.wiley.com/go/permissions.
Trademarks: Wiley, For Dummies, the Dummies Man logo, Dummies.com, Making Everything Easier, and related trade dress are trademarks or registered trademarks of John Wiley & Sons, Inc. and may not be used without written permission. All trademarks are the property of their respective owners. John Wiley & Sons, Inc. is not associated with any product or vendor mentioned in this book.
LIMIT OF LIABILITY/DISCLAIMER OF WARRANTY: THE PUBLISHER AND THE AUTHOR MAKE NO REPRESENTATIONS OR WARRANTIES WITH RESPECT TO THE ACCURACY OR COMPLETENESS OF THE CONTENTS OF THIS WORK AND SPECIFICALLY DISCLAIM ALL WARRANTIES, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE. NO WARRANTY MAY BE CREATED OR EXTENDED BY SALES OR PROMOTIONAL MATERIALS. THE ADVICE AND STRATEGIES CONTAINED HEREIN MAY NOT BE SUITABLE FOR EVERY SITUATION. THIS WORK IS SOLD WITH THE UNDERSTANDING THAT THE PUBLISHER IS NOT ENGAGED IN RENDERING LEGAL, ACCOUNTING, OR OTHER PROFESSIONAL SERVICES. IF PROFESSIONAL ASSISTANCE IS REQUIRED, THE SERVICES OF A COMPETENT PROFESSIONAL PERSON SHOULD BE SOUGHT. NEITHER THE PUBLISHER NOR THE AUTHOR SHALL BE LIABLE FOR DAMAGES ARISING HEREFROM. THE FACT THAT AN ORGANIZATION OR WEBSITE IS REFERRED TO IN THIS WORK AS A CITATION AND/OR A POTENTIAL SOURCE OF FURTHER INFORMATION DOES NOT MEAN THAT THE AUTHOR OR THE PUBLISHER ENDORSES THE INFORMATION THE ORGANIZATION OR WEBSITE MAY PROVIDE OR RECOMMENDATIONS IT MAY MAKE. FURTHER, READERS SHOULD BE AWARE THAT INTERNET WEBSITES LISTED IN THIS WORK MAY HAVE CHANGED OR DISAPPEARED BETWEEN WHEN THIS WORK WAS WRITTEN AND WHEN IT IS READ.
For general information on our other products and services, please contact our Customer Care Department within the U.S. at 877-762-2974, outside the U.S. at 317-572-3993, or fax 317-572-4002. For technical support, please visit https://hub.wiley.com/community/support/dummies.
Wiley publishes in a variety of print and electronic formats and by print-on-demand. Some material included with standard print versions of this book may not be included in e-books or in print-on-demand. If this book refers to media such as a CD or DVD that is not included in the version you purchased, you may download this material at http://booksupport.wiley.com. For more information about Wiley products, visit www.wiley.com.
Library of Congress Control Number: 2017935595
ISBN 978-1-119-36302-6 (pbk); 978-1-119-36303-3 (epub); 978-1-119-36305-7 (epdf)
Table of Contents
Cover
Introduction
About This Book
Foolish Assumptions
Icons Used in This Book
Beyond the Book
Where to Go from Here
Book 1: Getting Started with Coding
Chapter 1: What Is Coding?
Defining What Code Is
Understanding What Coding Can Do for You
Surveying the Types of Programming Languages
Taking a Tour of a Web App Built with Code
Chapter 2: Programming for the Web
Displaying Web Pages on Your Desktop and Mobile Device
Coding Web Applications
Coding Mobile Applications
Chapter 3: Becoming a Programmer
Writing Code Using a Process
Picking Tools for the Job
Book 2: Career Building with Coding
Chapter 1: Exploring Coding Career Paths
Augmenting Your Existing Job
Finding a New Coding Job
Chapter 2: Exploring Undergraduate and Graduate Degrees
Getting a College Degree
Enrolling in an Advanced Degree Program
Interning to Build Credibility
Chapter 3: Training on the Job
Taking a Work Project to the Next Level
Learning on the Job and after Work
Freelancing to Build Confidence and Skills
Transitioning to a New Role
Chapter 4: Coding Career Myths
Educational Myths
Career Myths
Book 3: Basic Web Coding
Chapter 1: Exploring Basic HTML
What Does HTML Do?
Understanding HTML Structure
Getting Familiar with Common HTML Tasks and Tags
Styling Me Pretty
Building Your First Website Using HTML
Chapter 2: Getting More Out of HTML
Organizing Content on the Page
Listing Data
Putting Data in Tables
Filling Out Forms
Practicing More with HTML
Chapter 3: Getting Stylish with CSS
What Does CSS Do?
CSS Structure
Common CSS Tasks and Selectors
Styling Me Pretty
Chapter 4: Next Steps with CSS
Styling (More) Elements on Your Page
Selecting Elements to Style
Aligning and Laying Out Your Elements
Writing More Advanced CSS
Chapter 5: Building Floating Page Layouts
Creating a Basic Two-Column Design
Building a Three-Column Design
Building a Fixed-Width Layout
Building a Centered Fixed-Width Layout
Chapter 6: Using Alternative Positioning
Working with Absolute Positioning
Managing z-index
Building a Page Layout with Absolute Positioning
Creating a More Flexible Layout
Exploring Other Types of Positioning
Flexible Box Layout Model
Book 4: Advanced Web Coding
Chapter 1: Working Faster with Twitter Bootstrap
Figuring Out What Bootstrap Does
Installing Bootstrap
Understanding the Layout Options
Coding Basic Web Page Elements
Build the Airbnb Home Page
Chapter 2: Adding in JavaScript
What Does JavaScript Do?
Understanding JavaScript Structure
Coding Common JavaScript Tasks
Writing Your First JavaScript Program
Working with APIs
Using JavaScript Libraries
Chapter 3: Understanding Callbacks and Closures
What Are Callbacks?
Understanding Closures
Using Closures
Chapter 4: Embracing AJAX and JSON
Working behind the Scenes with AJAX
Putting Objects in Motion with JSON
Chapter 5: jQuery
Writing More and Doing Less
Getting Started with jQuery
The jQuery Object
Is Your Document Ready?
Using jQuery Selectors
Changing Things with jQuery
Events
Effects
AJAX
Book 5: Creating Web Applications
Chapter 1: Building Your Own App
Building a Location-Based Offer App
Following an App Development Process
Planning Your First Web Application
Exploring the Overall Process
Meeting the People Who Bring a Web App to Life
Chapter 2: Researching Your First Web Application
Dividing the App into Steps
Identifying Research Sources
Researching the Steps in the McDuck’s Offer App
Choosing a Solution for Each Step
Chapter 3: Coding and Debugging Your First Web Application
Getting Ready to Code
Coding Your First Web Application
Debugging Your App
Book 6: Selecting Data Analysis Tools
Chapter 1: Wrapping Your Head around Python
What Does Python Do?
Defining Python Structure
Coding Common Python Tasks and Commands
Shaping Your Strings
Building a Simple Tip Calculator Using Python
Chapter 2: Installing a Python Distribution
Choosing a Python Distribution with Machine Learning in Mind
Installing Python on Linux
Installing Python on Mac OS X
Installing Python on Windows
Downloading the Data Sets and Example Code
Chapter 3: Working with Real Data
Uploading, Streaming, and Sampling Data
Accessing Data in Structured Flat-File Form
Sending Data in Unstructured File Form
Managing Data from Relational Databases
Interacting with Data from NoSQL Databases
Accessing Data from the Web
Book 7: Evaluating Data
Chapter 1: Conditioning Your Data
Juggling between NumPy and pandas
Validating Your Data
Manipulating Categorical Variables
Dealing with Dates in Your Data
Dealing with Missing Data
Slicing and Dicing: Filtering and Selecting Data
Concatenating and Transforming
Aggregating Data at Any Level
Chapter 2: Shaping Data
Working with HTML Pages
Working with Raw Text
Using the Bag of Words Model and Beyond
Working with Graph Data
Chapter 3: Getting a Crash Course in MatPlotLib
Starting with a Graph
Setting the Axis, Ticks, Grids
Defining the Line Appearance
Using Labels, Annotations, and Legends
Chapter 4: Visualizing the Data
Choosing the Right Graph
Creating Advanced Scatterplots
Plotting Time Series
Plotting Geographical Data
Visualizing Graphs
Chapter 5: Exploring Data Analysis
The EDA Approach
Defining Descriptive Statistics for Numeric Data
Counting for Categorical Data
Creating Applied Visualization for EDA
Understanding Correlation
Modifying Data Distributions
Chapter 6: Exploring Four Simple and Effective Algorithms
Guessing the Number: Linear Regression
Moving to Logistic Regression
Making Things as Simple as Naïve Bayes
Learning Lazily with Nearest Neighbors
Book 8: Essentials of Machine Learning
Chapter 1: Introducing How Machines Learn
Getting the Real Story about AI
Learning in the Age of Big Data
Chapter 2: Demystifying the Math behind Machine Learning
Working with Data
Exploring the World of Probabilities
Describing the Use of Statistics
Chapter 3: Descending the Right Curve
Interpreting Learning as Optimization
Exploring Cost Functions
Descending the Error Curve
Updating by Mini-Batch and Online
Chapter 4: Validating Machine Learning
Checking Out-of-Sample Errors
Getting to Know the Limits of Bias
Keeping Model Complexity in Mind
Keeping Solutions Balanced
Training, Validating, and Testing
Resorting to Cross-Validation
Looking for Alternatives in Validation
Optimizing Cross-Validation Choices
Avoiding Sample Bias and Leakage Traps
Book 9: Applying Machine Learning
Chapter 1: Starting with Simple Learners
Discovering the Incredible Perceptron
Growing Greedy Classification Trees
Taking a Probabilistic Turn
Chapter 2: Leveraging Similarity
Measuring Similarity between Vectors
Using Distances to Locate Clusters
Tuning the K-Means Algorithm
Searching for Classification by k-Nearest Neighbors
Leveraging the Correct K Parameter
Chapter 3: Hitting Complexity with Neural Networks
Learning and Imitating from Nature
Struggling with Overfitting
Introducing Deep Learning
Chapter 4: Resorting to Ensembles of Learners
Leveraging Decision Trees
Working with Almost Random Guesses
Boosting Smart Predictors
Averaging Different Predictors
Chapter 5: Real-World Applications
Classifying Images
Scoring Opinions and Sentiments
Using Scoring and Classification
Recommending Products and Movies
About the Authors
Advertisement Page
Connect with Dummies
End User License Agreement
Cover
Table of Contents
Begin Reading
iv
vii
viii
ix
x
xi
xii
xiii
xiv
xv
xvi
xvii
xviii
xix
xx
xxi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
757
758
759
760
761
762
763
765
766
767
768
769
770
The ability to read, write, and understand code has never been more important, useful, or lucrative than it is today. Computer code has forever changed our lives. Many people can’t even make it through the day without interacting with something built with code. Even so, for many people, the world of coding seems complex and inaccessible. Maybe you participated in a tech-related business meeting and did not fully understand the conversation. Perhaps you tried to build a web page for your family and friends, but ran into problems displaying pictures or aligning text. Maybe you’re even intimidated by the unrecognizable words on the covers of books about coding, words such as HTML, CSS, JavaScript, Python, or Ruby.
If you’ve previously been in these situations, then Coding All-in-One For Dummies is for you. This book explains basic concepts so you can participate in technical conversations and ask the right questions, and it goes even further than Coding For Dummies by covering additional topics in data science, machine learning, and coding careers. Don’t worry — this book assumes you’re starting with little to no previous coding knowledge, and I haven’t tried to cram every possible coding concept into these pages. Additionally, I encourage you here to learn by doing and by actually creating your own programs. Instead of a website, imagine that you want to build a house. You could spend eight years studying to be an architect, or you could start today by learning a little bit about foundations and framing. This book kick-starts your coding journey today.
The importance of coding is ever-increasing. As author and technologist Douglas Rushkoff famously said, “program or be programmed.” When humans invented languages and then the alphabet, people learned to listen and speak, and then read and write. In our increasingly digital world, it’s important to learn not just how to use programs but also how to make them. For example, observe this transition in music. For over a century, music labels decided what songs the public could listen to and purchase. In 2005, three coders created YouTube, which allowed anyone to release songs. Today more songs have been uploaded to YouTube than have been released by all the record labels combined in the past century.
Accompanying this book are examples at www.codecademy.com, whose exercises are one of the easiest ways to learn how to code without installing or downloading anything. The Codecademy website includes examples and exercises from this book, along with projects and examples for additional practice.
This book is designed for readers with little to no coding experience, and gives an overview of programming to non-programmers. In plain English, you learn how code is used to create web programs, who makes those programs, and the processes they use. The topics covered include
Explaining what coding is and answering the common questions related to code
Building basic websites using the three most common languages: HTML, CSS, and JavaScript
Surveying other programming languages such as Python
Creating an application using HTML, CSS, and JavaScript
Analyzing data using machine learning algorithms and techniques
Exploring coding careers paths and different ways to learn how to code
As you read this book, keep the following in mind:
The book can be read from beginning to end, but feel free to skip around if you like. If a topic interests you, start there. You can always return to the previous chapters, if necessary.
At some point, you will get stuck, and the code you write will not work as intended. Do not fear! There are many resources to help you, including support forums, others on the Internet, and me! Using Twitter, you can send me a public message at
@nikhilgabraham
with the hashtag
#codingFD
. Additionally, you can sign up for book updates and explanations for changes to programming language commands by visiting
http://tinyletter.com/codingfordummies
.
Code in the book will appear in a monospaced font like this:
<h1>Hi there!</h1>
.
I do not make many assumptions about you, the reader, but I do make a few.
I assume you don’t have previous programming experience. To follow along, then, you only need to be able to read, type, and follow directions. I try to explain as many concepts as possible using examples and analogies you already know.
I assume you have a computer running the latest version of Google Chrome. The examples in the book have been tested and optimized for the Chrome browser, which is available for free from Google. Even so, the examples may also work in the latest version of Firefox. Using Internet Explorer for the examples in this book, however, is discouraged.
I assume you have access to an Internet connection. Some of the examples in the book can be done without an Internet connection, but most require one so that you can access and complete the exercises on www.codecademy.com.
For the books on data analysis and machine learning, I assume you are able to download and install the Python programming language and associated programming libraries, both of which are available for free. I also assume you have some math background and understand how algorithms work.
Here are the icons used in the book to flag text that should be given extra attention or that can be skipped.
This icon flags useful information or explains a shortcut to help you understand a concept.
This icon explains technical details about the concept being explained. The details might be informative or interesting, but are not essential to your understanding of the concept at this stage.
Try not to forget the material marked with this icon. It signals an important concept or process that you should keep in mind.
Watch out! This icon flags common mistakes and problems that can be avoided if you heed the warning.
A lot of extra content that you won’t find in this book is available at www.dummies.com. Go online to find the following:
The source code for the examples in this book: You can find it at
www.dummies.com/go/codingaiodownloads.
The source code is organized by chapter. The best way to work with a chapter is to download all the source code for it at one time.
The links to the Codecademy and other exercises: You can find these at
www.dummies.com/go/codingaiolinks.
Cheat Sheet: You can find a list of common HTML, CSS, and JavaScript commands, among other useful information.
To view this book’s Cheat Sheet, simply go to www.dummies.com and search for “Coding For Dummies All-in-One Cheat Sheet” in the Search box.
Updates: Code and specifications are constantly changing, so the commands and syntax that work today may not work tomorrow. You can find any updates or corrections by visiting
http://tinyletter.com/codingfordummies.
All right, now that all the administrative stuff is out of the way, it’s time to get started. You can totally do this. Congratulations on taking your first step into the world of coding!
Book 1
Contents at a Glance
Chapter 1: What Is Coding?
Defining What Code Is
Understanding What Coding Can Do for You
Surveying the Types of Programming Languages
Taking a Tour of a Web App Built with Code
Chapter 2: Programming for the Web
Displaying Web Pages on Your Desktop and Mobile Device
Coding Web Applications
Coding Mobile Applications
Chapter 3: Becoming a Programmer
Writing Code Using a Process
Picking Tools for the Job
Chapter 1
IN THIS CHAPTER
Seeing what code is and what it can do
Touring your first program using code
Understanding programming languages used to write code
“A million dollars isn’t cool, you know what’s cool? A billion dollars.”
— SEAN PARKER, The Social Network
Every week the newspapers report on another technology company that has raised capital or sold for millions of dollars. Sometimes, in the case of companies like Instagram, WhatsApp, and Uber, the amount in the headline is for billions of dollars. These articles may pique your curiosity, and you may want to see how code is used to build the applications that experience these financial outcomes. Alternatively, your interests may lie closer to work. Perhaps you work in an industry in decline, like print media, or in a function that technology is rapidly changing, like marketing. Whether you are thinking about switching to a new career or improving your current career, understanding computer programming or “coding” can help with your professional development. Finally, your interest may be more personal — perhaps you have an idea, a burning desire to create something, a website or an app, to solve a problem you have experienced, and you know reading and writing code is the first step to building your solution. Whatever your motivation, this book will shed light on coding and programmers, and help you think of both not as mysterious and complex but approachable and something you can do yourself.
In this chapter, you will understand what code is, what industries are affected by computer software, the different types of programming languages used to write code, and take a tour of a web app built with code.
Computer code is not a cryptic activity reserved for geniuses and oracles. In fact, in a few minutes you will be writing some computer code yourself! Most computer code performs a range of tasks in our lives from the mundane to the extraordinary. Code runs our traffic lights and pedestrian signals, the elevators in our buildings, the cell phone towers that transmit our phone signals, and the space ships headed for outer space. We also interact with code on a more personal level, on our phones and computers, and usually to check email or the weather.
Computer code is a set of statements, like sentences in English, and each statement directs the computer to perform a single step or instruction. Each of these steps is very precise, and followed to the letter. For example, if you are in a restaurant and ask a waiter to direct you to the restroom, he might say, “head to the back, and try the middle door.” To a computer, these directions are so vague as to be unusable. Instead, if the waiter gave instructions to you as if you were a computer program he might say, “From this table, walk northeast for 40 paces. Then turn right 90 degrees, walk 5 paces, turn left 90 degrees, and walk 5 paces. Open the door directly in front of you, and enter the restroom.” Figure 1-1 shows lines of code from the popular game, Pong. Do not worry about trying to understand what every single line does, and don’t feel intimated. You will soon be reading and writing your own code.
FIGURE 1-1: Computer code from the game Pong.
One rough way to measure a program’s complexity is to count its statements or lines of code. Basic applications like the Pong game have 5,000 lines of code, while more complex applications like Facebook currently have over 10 million lines of code. Whether few or many lines of code, the computer follows each instruction exactly and effortlessly, never tiring like the waiter might when asked the hundredth time for the location of the restroom.
Be careful of only using lines of code as a measure for a program’s complexity. Just like when writing in English, 100 well written lines of code can perform the same functionality as 1,000 poorly written lines of code.
If you’ve never written code before, now is your chance to try! Go to http://csedweek.org/learn, where you will see a beginner student experience, scroll down the page, and click the tile labeled “Write Your First Computer Program,” the link with the Angry Birds icon, as shown in Figure 1-2. This tutorial is meant for those with no previous computer programming experience, and it introduces the basic building blocks used by all computer programs. You can also click the tile labeled “Star Wars: Building a Galaxy with Code.” The most important takeaway from these tutorials is to understand that computer programs use code to literally and exactly tell the computer to execute a set of instructions.
FIGURE 1-2: Write your first computer program with a gamelike tutorial using Angry Birds.
Computer Science Education Week is an annual program dedicated to elevating the profile of computer science during one week in December. In the past, President Obama, Bill Gates, basketball player Chris Bosh, and singer Shakira, among others, have supported and encouraged people from the United States and around the world to participate.
Coding can be used to perform tasks and solve problems that you experience every day. The “everyday” situations in which programs or apps can provide assistance continue to grow at an exponential pace, but this was not always the case. The rise of web applications, Internet connectivity, and mobile phones inserted software programs into daily life, and lowered the barrier for you to become a creator, solving personal and professional problems with code.
In 2011, Marc Andreessen, creator of Netscape Navigator and now venture capitalist, noted that “software is eating the world.” He predicted that new software companies would disrupt existing tech companies at a rapid pace. Traditionally, code-powered software used on desktops and laptops had to first be installed, and then you had to supply data to the program. However, three trends have dramatically increased the use of code in everyday life:
Web-based software:
This software operates in the browser without requiring installation. For example, to check your email, you previously had to install an email client either by downloading the software or from a CD-ROM. Sometimes issues arose when the software wasn’t available for your operating system, or conflicted with your operating system version. Hotmail, a web-based email client, rose to popularity, in part, because it allowed users visiting
www.hotmail.com
to instantly check their email without worrying about installation issues or software incompatibility. Web applications increased consumer appetite to try more applications, and developers in turn were incentivized to write more applications.
Internet broadband connectivity:
Broadband connectivity has increased, providing a fast Internet connection to more people in the last few years than in the previous decade. Today more than 2 billion people can access web-based software, up from approximately 50 million only a decade ago.
Mobile phones:
Today’s smartphones bring programs with you wherever you go, and help supply data to programs. Many software programs became more useful when accessed on-the-go than when limited to a desktop computer. For instance, use of maps applications greatly increased thanks to mobile phones, which makes sense, because users need directions the most when lost, not just when planning a trip at home on the computer. In addition, through GPS technology, mobile phones are equipped with sensors that measure and supply data to programs like orientation, acceleration, and current location. Now instead of having to input all the data to programs yourself, mobile devices can help. For instance, a fitness application like RunKeeper doesn’t require you to input start and end times in order to keep track of your runs. You can press Start at the beginning of your run, and the phone will automatically track your distance, speed, and time.
The combination of these trends have created software companies that have upended incumbents in almost every industry, especially those typically immune to technology. Here are some notable examples:
Airbnb:
Airbnb is a peer-to-peer lodging company that owns no rooms, yet books more nights than the Hilton and Intercontinental, the largest hotel chains in the world. (See
Figure 1-3
.)
Uber:
Uber is a car transportation company that owns no vehicles, books more trips, and has more drivers in the largest 200 cities than any other car or taxi service.
Groupon:
Groupon, the daily deals company, generated almost $1 billion after just two years in business, growing faster than any other company in history, let alone any other traditional direct marketing company.
FIGURE 1-3: Airbnb booked 5 million nights after 3.5 years, and its next 5 million nights 6 months later.
Coding can be useful in the workplace as well. Outside the technology sector, coding in the workplace is common for some professions like financial traders, economists, and scientists. However, for most professionals outside the technology sector, coding is just beginning to penetrate the workplace, and gradually starting to increase in relevance. Here are areas where coding is playing a larger role on the job:
Advertising:
Spend is shifting from print and TV to digital campaigns, and search engine advertising and optimization rely on keywords to bring visitors to websites. Advertisers who understand code see successful keywords used by competitors, and use that data to create more effective campaigns.
Marketing:
When promoting products, personalizing communication is one strategy that often increases results. Marketers who code can query customer databases and create personalized communications that include customer names and products tailored to specific interests.
Sales: The sales process always starts with leads. Salespeople who code retrieve their own leads from web pages and directories and then sort and quantify those leads.
Retrieving information by copying text on web pages and in directories is referred to as scraping.
Design:
After creating a web page or a digital design, designers must persuade other designers and eventually developers to actually program their drawings into a product. Designers who code can more easily bring their designs to life and can more effectively advocate for specific designs by creating working prototypes that others can interact with.
Public relations:
Companies constantly measure how customers and the public react to announcements and news. For instance, if a celebrity spokesperson for a company does or says something offensive, should the company dump the celebrity? Public relations people who code query social media networks like Twitter or Facebook and analyze hundreds of thousands of individual messages in order to understand market sentiment.
Operations:
Additional profit can be generated, in part, by analyzing a company’s costs. Operations people who code write programs to try millions of combinations in an attempt to optimize packaging methods, loading routines, and delivery routes.
Using code built by others and coding in the workplace may cause you to think of problems you personally face that you could solve with code of your own. You may have an idea for a social network website, a better fitness app, or something new altogether. The path from idea to functioning prototype used by others involves a good amount of time and work, but might be more achievable than you think. For example, take Coffitivity, a productivity website that streams ambient coffee shop sounds to create white noise. The website was created by two people who had just learned how to program a few months prior. Shortly after Coffitivity launched, Time magazine named the website as one of 50 Best Websites of 2013, and the Wall Street Journal also reviewed the website. While not every startup or app will initially receive this much media coverage, it can be helpful to know what is possible when a solution really solves a problem.
Having a goal, like a website or app you want to build, is one of the best ways to learn how to code. When facing a difficult bug or a hard concept, the idea of bringing your website to life will provide the motivation you need to keep going. Just as important, do not learn how to code to become rich and famous, as the probability of your website or app becoming successful is largely due to factors out of your control.
The characteristics that make a website or app addictive are described using the “hook model” at http://techcrunch.com/2012/03/04/how-to-manufacture-desire. Products are usually made by companies, and the characteristics of an enduring company are described at http://www.sequoiacap.com/grove/posts/yal6/elements-of-enduring-companies, which is based on a review of companies funded by Sequoia, one of the most successful venture capital firms in the world and an early investor in Apple, Google, and PayPal.
Code comes in different flavors called programming languages. Some popular programing languages are shown in Figure 1-4.
FIGURE 1-4: Some popular programming languages.
You can think of programming languages as being similar to spoken languages because they both share many of the same characteristics, such as the following:
Functionality across languages:
Programming languages can all create the same functionality similar to how spoken languages can all express the same objects, phrases, and emotions.
Syntax and structure:
Commands in programming languages can overlap just like words in spoken languages overlap. To output text to a screen in Python or Ruby, you use the Print command, just like
imprimer
and
imprimir
are the verbs for “print” in French and Spanish.
Natural lifespan:
Programming languages are “born” when a programmer thinks of a new or easier way to express a computational concept. If other programmers agree, they adopt the language for their own programs, and the programming language spreads. However, just like Latin or Aramaic, if the programming language is not adopted by other programmers or a better language comes along, then the programming language slowly dies from lack of use.
Despite these similarities, programming languages also differ from spoken languages in a few key ways:
One creator: Unlike spoken languages, programming languages can be created by one person in a short period of time, sometimes in just a few days.
Popular languages with a single creator include JavaScript (Brendan Eich), Python (Guido van Rossum), and Ruby (Yukihiro Matsumoto).
Written in English:
Unlike spoken languages (except, of course, English), almost all programming languages are written in English. Whether they’re programming in HTML, JavaScript, Python, or Ruby, Brazilian, French, or Chinese, almost all programmers use the same English keywords and syntax in their code. Some non-English programming languages do exist, such as languages in Hindi or Arabic, but none of these programming languages are widespread or mainstream.
One way to classify programming languages is as either low-level languages or high-level languages. Low-level languages interact directly with the computer processor or CPU, are capable of performing very basic commands, and are generally hard to read. Machine code, one example of a low-level language, uses code that consists of just two numbers, 0 and 1. Figure 1-5 shows an example of machine code. Assembly language, another low-level language, uses keywords to perform basic commands, such as read data, move data, and store data.
FIGURE 1-5: Machine code consists of 0s and 1s.
By contrast, high-level languages use natural language, so it is easier for people to read and write. Once code is written in a high-level language, like C++, Python, or Ruby, an interpreter or compiler must translate this high-level language into low-level code that a computer can understand.
Interpreted languages are considered more portable than compiled languages, while compiled languages execute faster than interpreted languages. However, the speed advantage compiled languages have is starting to fade in importance as improving processor speeds make performance differences between interpreted and compiled languages negligible.
High-level programming languages like JavaScript, Python, and Ruby are interpreted. For these languages, the interpreter executes the program directly, translating each statement one line at a time into machine code. High-level programming languages like C++, COBOL, and Visual Basic are compiled. For these languages, after the code is written, a compiler translates all the code into machine code, and an executable file is created. This executable file is then distributed via the Internet, CD-ROMs, or other media and run. Software you install on your computer, like Microsoft Windows or Mac OS X, are coded using compiled languages, usually C or C++.
Software accessible on websites is gradually starting to take over installed software. Think of the last time you downloaded and installed software for your computer — you may not even remember! Installed software like Windows Media Player and Winamp that play music and movies have been replaced with websites like YouTube and Netflix. Traditional installed word processor and spreadsheet software like Microsoft Word and Excel is starting to see competition from web software like Google Docs and Sheets. Google is even selling laptops called Chromebooks that contain no installed software, and instead rely exclusively on web software to provide functionality.
The remainder of this book focuses on developing and creating web software, not just because web software is growing rapidly but also because programs for the web are easier to learn and launch than traditional installed software.
With all this talk of programming, let us actually take a look at a web application built with code. Yelp.com is a website that allows you to search and find crowd-sourced reviews for local businesses like restaurants, nightlife, and shopping. As shown in Figure 1-6, Yelp did not always look as polished as it does today, but its purpose has stayed relatively constant over the years.
FIGURE 1-6: Yelp’s website in 2004 and in 2014.
Once you understand an app’s purpose, you can identify a few actionable tasks a user should be able to perform to achieve that purpose. Regardless of design, the Yelp’s website has always allowed users to do the following:
Search local listings based on venue type and location.
Browse listing results for address, hours, reviews, photos, and location on a map.
Successful web applications generally allow for completing only a few key tasks when using the app. Adding too many features to an app is called scope creep, which dilutes the strength of the existing features, and so is avoided by most developers. For example, it took Yelp, which has 30,000 restaurant reviews, exactly one decade after its founding to allow users to make reservations at those restaurants directly on its website.
Whether you’re using or building an app, have a clear sense of the app’s purpose.
Developers make strategic choices and decide which parts of the app to code themselves, and on which parts of the app to use code built by others. Developers often turn to third-party providers for functionality that is either not core to the business or not an area of strength. In this way, apps stand on the shoulders of others, and benefit from others who have come before and solved challenging problems.
Yelp, for instance, displays local listing reviews and places every listing on a map. While Yelp solicits the reviews and writes the code to display basic listing data, it is Google, as shown in Figure 1-7, that develops the maps used on Yelp’s website. By using Google’s map application instead of building its own, Yelp created the first version of the app with fewer engineers than otherwise would have been required.
FIGURE 1-7: Google maps used for the Yelp web application.
Chapter 2
IN THIS CHAPTER
Seeing the code powering websites you use every day
Understanding the languages used to make websites
Finding out how applications are created for mobile devices
“To think you can start something in your college dorm room … and build something a billion people use is crazy to think about. It’s amazing.”
— MARK ZUCKERBERG
Programming for the web allows you to reach massive audiences around the world faster than ever before. Four years after its 2004 launch, Facebook had 100 million users, and by 2012 it had over a billion. By contrast, it took desktop software years to reach even one million people. These days, mobile phones are increasing the reach of web applications. Although roughly 300 million desktop computers are sold every year, almost two billion mobile phones are sold in that time — and the number is steadily increasing.
In this chapter, you discover how websites are displayed on your computer or mobile device. I introduce the languages used to program websites and show you how mobile-device applications are made.
On desktop computers and mobile devices, web pages are displayed by applications called browsers. The most popular web browsers include Google Chrome, Mozilla Firefox (formerly Netscape Navigator), Microsoft Internet Explorer, and Apple Safari. Until now, you have likely interacted with websites you visit as an obedient user, and followed the rules the website has created by pointing and clicking when allowed. The first step to becoming a producer and programmer of websites is to peel back the web page, and see and play with the code underneath it all.
What’s your favorite news website? By following a few steps, you can see and even modify the code used to create that website. (No need to worry; you won’t be breaking any rules by following these instructions.)
Although you can use almost any modern browser to inspect a website’s code, these instructions assume you’re using the Google Chrome browser. Install the latest version by going to www.google.com/chrome/browser.
To “hack” your favorite news website, follow these steps:
Open your favorite news website using the Chrome browser.
In this example, I use www.huffingtonpost.com.
Place your mouse cursor over any static fixed headline and right-click once, which opens a contextual menu.
Then left-click once on the Inspect Element menu choice. (SeeFigure 2-1.)
If using a Macintosh computer, you can right-click by holding down the Control key and clicking once.
The Developer Tools panel opens at the bottom of your browser. This panel shows you the code used to create this web page! Highlighted in blue is the specific code used to create the headline where you originally put your mouse cursor. (See Figure 2-2.)
Look at the left edge of the highlighted code. If you see a right-pointing arrow, left-click once on the arrow to expand the code.
Scan the highlighted code carefully for the text of your headline. When you find it, double-click the headline text.
This allows you to edit the headline. (See Figure 2-3.)
Be careful not to click anything that begins with http, which is the headline link. Clicking a headline link will open a new window or tab and loads the link.
Insert your name in the headline and press Enter.
Your name now appears on the actual web page. (See Figure 2-4.) Enjoy your newfound fame!
If you were unable to edit the headline after following these steps, visit http://goggles.webmaker.org for an easier, more guided tutorial. It’s a foolproof teaching aid that shows that any code on the Internet can be edited and modified. On that page, follow the instructions to add the bookmark to your web browser bookmark toolbar, and click the “Sample activity page” button to try a step-by-step tutorial. Try again to hack your favorite news website by following the “Remix the News” activity instructions.
FIGURE 2-1: Right-click a headline and select Inspect Element from the menu that appears.
FIGURE 2-2: The blue highlighted code is used to create the web page headline.
FIGURE 2-3: Double-click the headline text to edit it with your own headline.
FIGURE 2-4: You successfully changed the headline of a major news website.
If you successfully completed the preceding steps and changed the original headline, it’s time for your 15 minutes of fame to come to an end. Reload the web page, and the original headline reappears. What just happened? Did your changes appear to everyone visiting the web page? And why did your edited headline disappear?
To answer these questions, you first need to understand how the Internet delivers web pages to your computer.
After you type a URL, such as huffingtonpost.com, into your browser, the following steps happen behind the scenes in the seconds before your page loads (see Figure 2-5):
Your computer sends your request for the web page to a router. The router distributes Internet access throughout your home or workplace.
The router passes your request on to your Internet service provider (ISP).
In the United States, your ISP is a company like Comcast, Time Warner, AT&T, or Verizon.
Your ISP then converts the words and characters in your URL — “huffingtonpost.com,” in my example — into a numerical address called the Internet Protocol address (or, more commonly, IP address).
An IP address is a set of four numbers separated by periods (such as 192.168.1.1). Just like your physical address, this number is unique, and every computer has one. Your ISP has a digital phone book, similar to a physical phonebook, called a domain name server that’s used to convert text URLs into IP addresses.
With the IP address located, your ISP knows which server on the Internet to forward your request to, and your personal IP address is included in this request.
The website server receives your request and sends a copy of the web page code to your computer for your browser to display.
Your web browser renders the code onto the screen.
FIGURE 2-5: Steps followed to deliver a website to your browser.
When you edited the website code using the Developer Tools, you modified only the copy of the website code that exists on your computer, so only you could see the change. When you reloaded the page, you started Steps 1 through 6 again, and retrieved a fresh copy of the code from the server, overwriting any changes you made on your computer.
You may have heard of a software tool called an ad blocker. Ad blockers work by editing the local copy of website code, as you just did, to remove website advertisements. Ad blockers are controversial because websites use advertising revenue to pay for operating costs. If ad blockers continue rising in popularity, ad revenue could dry up, and websites may demand that readers pay to see their content.
Now that you know how your browser accesses websites, let us dive deeper into the way the actual website is constructed. As shown in Figure 2-6, the code for websites, and for programs in general, can be divided into four categories, according to the code’s function:
Appearance:
Appearance is the visible part of the website, including content layout and any applied styling, such as font size, font typeface, and image size. This category is called the
front end
and is created using languages like HTML, CSS, and JavaScript.
Logic:
Logic determines what content to show and when. For example, a New Yorker accessing a news website should see New York weather, whereas Chicagoans accessing the same site should see Chicago weather. This category is part of the group called the
back end
and is created using languages like Ruby, Python, and PHP. These back end languages can modify the HTML, CSS, and JavaScript that is displayed to the user.
Storage:
Storage saves any data generated by the site and its users. User-generated content, preferences, and profile data must be stored for retrieval later. This category is part of the back end and is stored in databases like MongoDB and MySQL.
Infrastructure:
Infrastructure delivers the website from the server to you, the client machine. When the infrastructure is properly configured, no one notices it, but it can become noticeable when a website becomes unavailable because of high traffic from events like presidential elections, the Super Bowl, and natural disasters.
FIGURE 2-6: Every website is made up of four different parts.
Usually, website developers specialize in one or at most two of these categories. For example, an engineer might really understand the front end and logic languages or specialize only in databases. Website developers have strengths and specializations, and outside these areas their expertise is limited, much in the same way that Jerry Seinfeld, a terrific comedy writer, would likely make a terrible romance novelist.
The rare website developer proficient in all four categories is referred to as a full stack developer. Usually, smaller companies hire full stack developers, whereas larger companies require the expertise that comes with specialization.
Web applications are websites you visit using a web browser on any device. Websites optimized for use on a mobile device, like a phone or tablet, are called mobile web applications. By contrast, native mobile applications cannot be viewed using a web browser. Instead, native mobile applications are downloaded from an app store like the Apple App Store or Google Play and are designed to run on a specific device such as an iPhone or an Android tablet. Historically, desktop computers outnumbered and outsold mobile devices, but recently two major trends in mobile usage have occurred:
In 2014, people with mobile devices outnumbered people with desktop computers. This gap is projected to continue increasing, as shown in
Figure 2-7
.
Mobile-device users spend 80 percent of their time using native mobile applications and 20 percent of their time browsing mobile websites.
FIGURE 2-7: Mobile devices have increased at a faster pace than desktops.
The increase in mobile devices happened so quickly over the past 10 years that many companies are becoming “mobile first,” designing and developing the mobile version of their applications before the desktop version. WhatsApp and Instagram, two popular mobile applications, first built mobile applications, which continue to have more functionality than their regular websites.
Web applications are easier to build than mobile applications, require little to no additional software to develop and test, and run on all devices, including desktops, laptops, and mobile devices. Although mobile applications can perform many common web-application tasks, such as email, some tasks are still easier to perform using web applications. For example, booking travel is easier using web applications, especially since the steps necessary — reviewing flights, hotels, and rental cars, and then purchasing all three — are best achieved with multiple windows, access to a calendar, and the entry of substantial personal and payment information.
The programming languages used to code basic web applications, further defined in the following sections, include HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. Additional features can be added to these websites using languages like Python, Ruby, or PHP.
Simple websites, such as the one shown in Figure 2-8, are coded using HTML, CSS, and JavaScript:
HTML is used to place text on the page.
CSS is used to style that text.
JavaScript is used to add interactive effects like the Twitter or Facebook Share button that allows you to share content on social networks and updates the number of other people who have shared the same content.
FIGURE 2-8: The lindaliukas.fi website, built with HTML, CSS, and JavaScript.
Websites conveying mainly static, unchanging information are often coded only in these three languages. You read about each of these languages in Book 3.
Websites with more advanced functionality, such as user accounts, file uploads, and e-commerce, typically require a programming language to implement these features. Although Python, Ruby, and PHP aren’t the only programming languages these sites can use, they are among the most popular ones. This popularity means that there are large online communities of online developers who program in these languages, freely post code that you can copy to build common features, and host public online discussions that you can read for solutions to common issues.
Each of these languages also has popular and well-documented frameworks. A framework is a collection of generic components, such as user accounts and authentication schemes that are reused frequently, allowing developers to build, test, and launch websites more quickly.
