Nikhil Abraham

Article / Updated 10-28-2024

When coding your app, you will almost inevitably write code that does not behave as you intended. HTML and CSS are relatively forgiving, with the browser even going so far as to insert tags so the page renders properly. However, JavaScript isn’t so forgiving, and the smallest error, such as a missing quotation mark, can cause the page to not render properly. Errors in web applications can consist of syntax errors, logic errors, and display errors. Often, the most likely culprit causing errors in your code will be syntax related. Here are some common errors to check when debugging your code: Opening and closing tags: In HTML, every opening tag has a closing tag, and you always close the most recently opened tag first. Right and left angle brackets: In HTML, every left angle bracket < has a right angle bracket >. Right and left curly brackets: In CSS and JavaScript, every left curly bracket must have a right curly bracket. It can be easy to accidentally delete it or forget to include it. Indentation: Indent your code and use plenty of tabs and returns to make your code as readable as possible. Proper indentation will make it easier for you to identify missing tags, angle brackets, and curly brackets. Misspelled statements: Tags in any language can be misspelled, or spelled correctly but not part of the specification. For example, in HTML, <img scr="image.jpg"> is incorrect because scr should really be src for the image to render properly. Similarly, in CSS font-color looks like it is spelled correctly but no such property exists. The correct property to set font color is just color. Keep these errors in mind when debugging — they may not solve all your problems, but they should solve many of them. If you have tried the steps above and still cannot debug your code, tweet @nikhilgabraham and include the #codingFD hashtag and your codepen.io URL in your tweet.

Article / Updated 08-16-2022

One way of styling specific elements in CSS is to name your HTML elements. You name your code by using either the id or class attribute, and then style your code by referring to the id or class selector. Naming your code using the id attribute Use the id attribute to style one specific element on your web page. The id attribute can name any HTML element, and is always placed in the opening HTML tag. Additionally, each element can have only one id attribute value, and the attribute value must appear only once within the HTML file. After you define the attribute in the HTML file, you refer to the HTML element in your CSS by writing a hashtag (#) followed by the attribute value. Using the id attribute, the following code styles the Modern Seinfeld Twitter link the color red with a yellow background: HTML: <p><a href="http://twitter.com/SeinfeldToday" id="jerry">Modern Seinfeld</a></p> CSS: #jerry { color: red; background-color: yellow; } Naming your code using the class attribute Use the class attribute to style multiple elements on your web page. The class attribute can name any HTML element and is always placed in the opening HTML tag. The attribute value need not be unique within the HTML file. After you define the attribute in the HTML file, you refer to the HTML element by writing a period (.) followed by the attribute value. With the class attribute, the following code styles all the Parody Tech Twitter account links the color red with no underline: HTML: <ul> <li> <a href="<u>http://twitter.com/BoredElonMusk</u>" class="tech">Bored Elon Musk</a> </li> <li> <a href="<span style="text-decoration: underline;">http://twitter.com/VinodColeslaw</span>" class="tech">Vinod Coleslaw</a> </li> <li> <a href="<span style="text-decoration: underline;">http://twitter.com/Horse_ebooks</span>" class="tech">Horse ebooks</a> </li> </ul> CSS: .tech { color: red; text-decoration: none; } Proactively use a search engine, such as Google, to search for additional CSS effects. For example, if you want to increase the spacing between each list item, open your browser and search for list item line spacing css. Links appearing in the top ten results should include: W3Schools: A beginner tutorial site Stack Overflow: A discussion board for experienced developers Mozilla: A reference guide initially created by the foundation that maintains the Firefox browser and now maintained by a community of developers Each of these sites is a good place to start; be sure to look for answers that include example code.

Article / Updated 07-27-2022

Python is a general-purpose programming language typically used for web development. This may sound similar to Ruby, and really both languages are more similar than they are different. Python, like Ruby, allows for storing data after the user has navigated away from the page or closed the browser, unlike HTML, CSS, and JavaScript. Using Python commands you can create, update, store, and retrieve this data in a database. For example, imagine you wanted to create a local search and ratings site like Yelp.com. The reviews users write are stored in a central database. Any review author can exit the browser, turn off the computer, and come back to the website later to find their reviews. Additionally, when others search for venues, this same central database is queried, and the same review is displayed. Storing data in a database is a common task for Python developers, and existing Python libraries include pre-built code to easily create and query databases. SQLite is one free lightweight database commonly used by Python programmers to store data. Many highly trafficked websites, such as YouTube, are created using Python. Other websites currently using Python include: Quora for its community question and answer site. Spotify for internal data analysis. Dropbox for its desktop client software. Reddit for generating crowd-sourced news. Industrial Light & Magic and Disney Animation for creating film special effects. From websites to software to special effects, Python is an extremely versatile language, powerful enough to support a range of applications. In addition, to help spread Python code, Python programmers create libraries, which are stand-alone pre-written code that do certain tasks, and make them publicly available for others to use and improve. For example, a library called Scrapy performs web scaping, while another library called SciPy performs math functions used by scientists and mathematicians. The Python community maintains thousands of libraries like these, and most are free and open-source software. You can generally confirm the front-end programming language used by any major website with BuiltWith. After entering the website address in the search bar, look under the Frameworks section for Python. Note that websites may use Python for backend services not visible to BuiltWith.

Article / Updated 07-27-2022

Dates can present problems in data. For one thing, dates are stored as numeric values. However, the precise value of the number depends on the representation for the particular platform and could even depend on the users’ preferences. For example, Excel users can choose to start dates in 1900 or 1904. The numeric encoding for each is different, so the same date can have two numeric values depending on the starting date. In addition to problems of representation, you also need to consider how to work with time values. Creating a time value format that represents a value the user can understand is hard. For example, you might need to use Greenwich Mean Time (GMT) in some situations but a local time zone in others. Transforming between various times is also problematic. Formatting date and time values Obtaining the correct date and time representation can make performing analysis a lot easier. For example, you often have to change the representation to obtain a correct sorting of values. Python provides two common methods of formatting date and time. The first technique is to call str(), which simply turns a datetime value into a string without any formatting. The strftime() function requires more work because you must define how you want the datetime value to appear after conversion. When using strftime(), you must provide a string containing special directives that define the formatting. Now that you have some idea of how time and date conversions work, it’s time to see an example. The following example creates a datetime object and then converts it into a string using two different approaches: import datetime as dt now = dt.datetime.now() print str(now) print now.strftime('%a, %d %B %Y') In this case, you can see that using str() is the easiest approach. However, as shown by the following output, it may not provide the output you need. Using strftime() is infinitely more flexible. 2017-01-16 17:26:45.986000 Mon, 16 January 2017 Using the right time transformation Time zones and differences in local time can cause all sorts of problems when performing analysis. For that matter, some types of calculations simply require a time shift in order to get the right results. No matter what the reason, you may need to transform one time into another time at some point. The following examples show some techniques you can employ to perform the task. import datetime as dt now = dt.datetime.now() timevalue = now + dt.timedelta(hours=2) print now.strftime('%H:%M:%S') print timevalue.strftime('%H:%M:%S') print timevalue - now The timedelta() function makes the time transformation straightforward. You can use any of these parameter names with timedelta() to change a time and date value: days seconds microseconds milliseconds minutes hours weeks You can also manipulate time by performing addition or subtraction on time values. You can even subtract two time values to determine the difference between them. Here’s the output from this example: 17:44:40 19:44:40 2:00:00 Notice that now is the local time, timevalue is two time zones different from this one, and there is a two-hour difference between the two times. You can perform all sorts of transformations using these techniques to ensure that your analysis always shows precisely the time-oriented values you need.

Article / Updated 07-27-2022

There are many tools available to help coders do their best work. Before you start coding, do a few housekeeping items. First, ensure that you are doing all of the following: Using the Chrome browser: Download and install the latest version of Chrome, as it offers the most support for the latest HTML standards. Working on a desktop or laptop computer: Although it is possible to code on a mobile device, it can be more difficult and all layouts may not appear properly. Remembering to indent your code to make it easier to read: One main source of mistakes is forgetting to close a tag or curly brace, and indenting your code will make spotting these errors easier. Remembering to enable location services on your browser and computer: To enable location services within Chrome, click on the settings icon (three horizontal lines on the top right of the browser), and click on Settings. Then click on the Settings tab, and at the bottom of the screen click on “Show Advanced settings … ” Under the Privacy menu heading, click on “Content settings … ” and scroll down to Location and make sure that “Ask when a site tries to track your physical location” is selected. To enable location services on a PC no additional setting is necessary, but on a Mac using OS X Mountain Lion or later, from the Apple menu choose System Preferences, then click on the Security & Privacy icon, and click the Privacy tab. Click the padlock icon on the lower left, and select Location Services, and check Enable Location Services. Finally, you need to set up your development environment. To emulate a development environment without instructional content use Codepen.io. Codepen.io offers a free stand-alone development environment, and makes it easy to share your code.

Cheat Sheet / Updated 06-30-2022

Coding is equal parts vocabulary, logic, and syntax. Coding may at first seem intimidating, but with practice, though, it's easy to get comfortable with its terminology, concepts, and structure. Understanding coding is not unlike learning a new language: Use it often enough and you'll find yourself able to speak, think, and write in code. Still, it's natural for beginners to have questions. There are many coding resources available to you, both on- and off-line. Ask around and you'll find you're not alone — many other people are learning. After all, coding is a never-ending education. Master one facet or another and a new one opens in front of you.

Cheat Sheet / Updated 01-19-2022

Coding is equal parts vocabulary, logic, and syntax. Coding may at first seem intimidating, but with practice, though, it’s easy to get comfortable with its terminology, concepts, and structure. Understanding coding is not unlike learning a new language: Use it often enough and you’ll find yourself able to speak, think, and write in code. Still, it’s natural for beginners to have questions. There are many coding resources available to you, both on- and off-line. Ask around and you’ll find you’re not alone — many other people are learning. After all, coding is a never-ending education. Master one facet or another and a new one opens in front of you.

Article / Updated 07-01-2020

Unstructured data files consist of a series of bits. The file doesn’t separate the bits from each other in any way. You can’t simply look into the file and see any structure because there isn’t any to see. Unstructured file formats rely on the file user to know how to interpret the data. For example, each pixel of a picture file could consist of three 32-bit fields. Knowing that each field is 32-bits is up to you. A header at the beginning of the file may provide clues about interpreting the file, but even so, it’s up to you to know how to interact with the file. This example shows how to work with a picture as an unstructured file. The example image is a public domain offering from commons.wikimedia.org. To work with images, you need to access the scikit-image library, which is a free-of-charge collection of algorithms used for image processing. Here’s a tutorial for this library. The first task is to be able to display the image on-screen using the following code. (This code can require a little time to run. The image is ready when the busy indicator disappears from the IPython Notebook tab.) from skimage.io import imread from skimage.transform import resize from matplotlib import pyplot as plt import matplotlib.cm as cm example_file = ("http://upload.wikimedia.org/" + "wikipedia/commons/7/7d/Dog_face.png") image = imread(example_file, as_grey=True) plt.imshow(image, cmap=cm.gray) plt.show() The code begins by importing a number of libraries. It then creates a string that points to the example file online and places it in example_file. This string is part of the imread() method call, along with as_grey, which is set to True. The as_grey argument tells Python to turn color images into grayscale. Any images that are already in grayscale remain that way. Now that you have an image loaded, it’s time to render it (make it ready to display on-screen. The imshow() function performs the rendering and uses a grayscale color map. The show() function actually displays image for you. Close the image when you’re finished viewing it. (The asterisk in the In [*]: entry tells you that the code is still running and you can’t move on to the next step.) The act of closing the image ends the code segment. You now have an image in memory, and you may want to find out more about it. When you run the following code, you discover the image type and size: print("data type: %s, shape: %s" % (type(image), image.shape)) The output from this call tells you that the image type is a numpy.ndarray and that the image size is 90 pixels by 90 pixels. The image is actually an array of pixels that you can manipulate in various ways. For example, if you want to crop the image, you can use the following code to manipulate the image array: image2 = image[5:70,0:70] plt.imshow(image2, cmap=cm.gray) plt.show() The numpy.ndarray in image2 is smaller than the one in image, so the output is smaller as well. Typical results are shown below. The purpose of cropping the image is to make it a specific size. Both images must be the same size for you to analyze them. Cropping is one way to ensure that the images are the correct size for analysis. Another method that you can use to change the image size is to resize it. The following code resizes the image to a specific size for analysis: image3 = resize(image2, (30, 30), mode='nearest') plt.imshow(image3, cmap=cm.gray) print("data type: %s, shape: %s" % (type(image3), image3.shape)) The output from the print() function tells you that the image is now 30 pixels by 30 pixels in size. You can compare it to any image with the same dimensions. After you have all the images in the right size, you need to flatten them. A data set row is always a single dimension, not two dimensions. The image is currently an array of 30 pixels by 30 pixels, so you can’t make it part of a data set. The following code flattens image3 so that it becomes an array of 900 elements that is stored in image_row: image_row = image3.flatten() print("data type: %s, shape: %s" % (type(image_row), image_row.shape)) Notice that the type is still a numpy.ndarray. You can add this array to a data set and then use the data set for analysis purposes. The size is 900 elements, as anticipated.

Article / Updated 07-17-2017

You will be able to code and complete some small apps by yourself, but the apps you build at work or use every day, like Google Maps or Instagram, are created by teams of people. Teams for a single product can vary in size, reaching to upward of 50 people, and each person plays a specific role across areas like design, development, product management, and testing. In smaller companies, the same person may perform multiple roles, while at larger companies, the roles become more specialized, and individual people perform each role. Creating apps with designers Before any code is written, designers work to create the site’s look and feel through layout, visuals, and interactions. Designers answer simple questions like “Should the navigational menu be at the top of the page or the bottom?” to more complex questions like “How can we convey a sense of simplicity, creativity, and playfulness?” In general, designers answer these types of questions by interviewing users, creating many designs of the same product idea, and then making a final decision by choosing one design. Good design can greatly increase adoption of a product or use of a site, and products like Apple’s iPhone and Airbnb.com. When building a website or app, you may decide you need a designer, but keep in mind that within design, there are multiple roles that designers play. The following roles are complementary, and may all be done by one person or by separate people: User interface (UI) and user experience (UX) designers deal primarily with “look and feel” and with layout. When you browse a website, for example Amazon, you may notice that across all pages, the navigation menus and content are in the same place and use identical or very similar font, buttons, input boxes, and images. The UI/UX designer thinks about the order in which screens are displayed to the user, along with where and how the user clicks, enters text, and otherwise interacts with the website. If you were to eavesdrop on UI/UX designers, you might hear conversation like, “His page is too busy with too many calls to action. Our users don’t make this many decisions anywhere else on the site. Let’s simplify the layout by having just a single Buy button, so anyone can order with just one click.” Visual designers deal primarily with creating the final graphics used on a website, and this role is most closely associated with “designer.” The visual designer creates final versions of icons, logos, buttons, typography, and images. For example, look at your Internet browser — the browser icon, the Back, Reload, and Bookmark buttons are all created by a visual designer, and anyone using the browser for the first time will know what the icons mean without explanation. If you were to eavesdrop on visual designers, you might hear conversation like, “The color contrast on these icons is too light to be readable, and if including text with the icon, let’s center-align the text below the icon instead of above it.” Interaction designers deal primarily with interactions and animations based on user input and the situation. Initially, interaction designs were limited to keyboard and mouse interactions, but today touch sensors on mobile devices have created many more potential user interactions. The interaction designer thinks about how to use the best interaction so the user is able to complete a task as easily as possible. For example, think about how you check your email on your mobile phone. For many years, the traditional interaction was to see a list of messages, click a message, and then click a button to reply, flag, save to a folder, or delete the message. In 2013, interaction designers rethought the email app interaction and created an interaction so users could swipe their finger left or right to delete or reply to email messages instead of having to click through multiple menus. If you were to eavesdrop on interaction designers, you might hear conversation like, “While users are navigating with our maps app, instead of letting us know they are lost by clicking or swiping, maybe they could shake the phone and we could instantly have a location specialist call them.” If creating an app were like making a movie, designers would be screenwriters. Coding with front- and back-end developers After the design is complete, the front-end and back-end developers make those designs a reality. Front-end developers, such as Mark Otto and Jacob Thornton, code in HTML, CSS, and JavaScript, and convert the design into a user interface. These developers write the same code that you have been learning throughout this book and ensure that the website looks consistent across devices (desktop, laptop, and mobile), browsers (Chrome, Firefox, Safari, and so on), and operating systems (Windows, Mac, and so on). All these factors, especially increased adoption of mobile device, result in thousands of combinations that must be coded for and tested because every device, browser, and operating system renders HTML and CSS differently. If creating an app were like making a movie, front-end developers would be the starring actors. Back-end developers such as Yukihiro add functionality to the user interface created by the front-end developers. Back-end developers ensure that everything that’s not visible to the user and behind the scenes is in place for the product to work as expected. Back-end developers use server-side languages like Python, PHP, and Ruby to add logic around what content to show, when, and to whom. In addition, they use databases to store user data, and create servers to serve all of this code to the users. If creating an app were like making a movie, back-end developers would be the cinematographers, stunt coordinators, makeup artists, and set designers. Managing with product managers Product managers help define the product to be built and manage the product development process. When engineering teams are small (such as 14 people or fewer), communication, roles, and accountability are easily managed internally without much formal oversight. As engineering teams grow, the overhead of everyone communicating with each other also grows, and without some process, the interactions can become unmanageable, leading to miscommunication and missed deadlines. Product managers serve to lessen the communication overhead, and when issues arise as products are being built, these managers decide whether to extend timelines, cut scope, or add more resources to the team. Product managers are often former engineers, who have a natural advantage in helping solve technical challenges that arise, but nontechnical people are also assuming these roles with success. Usually, no engineers report to the product manager, causing some to comment that product managers have “all of the responsibility, and none of the authority.” One product manager wielding great responsibility and authority is Sundar Pichai, who originally was a product manager for the Google toolbar and recently was appointed to oversee many of Google’s products, including search, Android, Chrome, maps, ads, and Google+. Testing your app with quality assurance Testing is the final step of the journey after an app or website has been built. As a result of the many hands that helped with production, the newly created product will inevitably have bugs. Lists are made of all the core app user tasks and flows, and human testers along with automated programs go through the list over and over again on different browsers, devices, and operating systems to find errors. Testers compile the newly discovered bugs and send them back to the developers, who prioritize which bugs to squash first. Trade-offs are always made between how many users are affected by a bug, the time it takes to fix the bug, and the time left until the product must be released. The most important bugs are fixed immediately, and minor bugs are scheduled to be fixed with updates or later releases. Today, companies also rely on feedback systems and collect error reports from users, with feedback forms and in some cases through automated reporting.

Article / Updated 07-17-2017

Once you know what your app will do, you can focus on how your app will do it. After breaking down your app into steps, you go over each step to determine how to accomplish it. For more complicated apps, developers first decide which of these two methods is the best way to complete each step: Building code from scratch: This is the best option if the functionality in a particular step is unique or strategically important, an area of strength for the app, and existing solutions are expensive or nonexistent. With this option, you and developers within the company write the code. Buying or using a preexisting solution: This is the best option if the functionality in a particular step is a common, noncore technical area for the app, and existing solutions are competitively priced. With this option, you and developers working on the app use code written by external third-party developers. One company that recently made this decision — publicly and painfully — is Apple with its Maps product. In 2012, after years of using Google Maps on its mobile devices, Apple decided to introduce its own mapping application that it had been developing for two years. Although the Maps product Apple built internally turned out to initially be a failure, Apple decided to build its own mapping application because it viewed mapping capabilities as strategically important and because turn-by-turn navigation solutions were not available in the solution provided by Google. Whether you’re building or buying, research is your next step. Here are some sources to consider when researching: Search engines: Use Google.com or another search engine to type in what you’re trying to accomplish with each step. One challenge can be discovering how the task you’re trying to achieve is referred to by programmers. For instance, if you want to know your current location, you might enter show my location in an app into a search engine, but this results in a list of location-sharing apps. After reading a few of the top-ten results, you see that location-tracking is also referred to as geolocation. When you search again for geolocation, the top results include many examples of code that show your current location. For more generic searches for code examples, try including the name of the computer language and the word syntax. For example, if you want to insert an image on a web page, search for image html syntax to find code examples. Prior commercial and open-source apps: Examining how others built their apps can give you ideas on how to improve upon what already exists, and insight into pushing existing technology to the limit to achieve an interesting effect. For instance, say you wanted to build a mobile app that recognized TV ads from the “audio fingerprint” of those ads and directed viewers to a product page on a mobile device. To create this app, you could build your own audio fingerprinting technology, which would likely take months or longer to build, or you could partner with Shazam, a commercial application, or Echoprint, an open-source music fingerprinting service. Either app can record a 10- to 20-second audio sample, create a digital fingerprint after overcoming background noise and poor microphone quality, compare the fingerprint to a large audio database, and then return identification information for the audio sample. Industry news and blogs: Traditional newspapers, like The Wall Street Journal, and tech blogs, like TechCrunch.com, report on the latest innovations in technology. Regularly reading or searching through these sites is a good way to find others who have launched apps in your space. API directories: You can easily search thousands of APIs for the functionality you need to implement. For example, if you were creating an app that used face recognition instead of a password, you could search for face detection APIs and use an API you find instead of trying to build a face detection algorithm from scratch. Popular API directories include ProgrammableWeb and Mashape. APIs are a way for you to request and receive data from other programs in a structured, predictable, documented way. User-generated coding websites: Developers in different companies frequently face the same questions on how to implement functionality for features. Communities of developers online talk about shared problems and contribute code so anyone can see how these problems have been solved in the past. You can participate in developer conversations and see the code other developers have written by using Stack Overflow and Github.