8 Awesome CodePen Features for Programming and Web Development

Source: https://www.makeuseof.com/tag/best-codepen-features/
Capture Date: 08.10.2018 23:13:43

Getting started with JavaScript web development can be a frustrating process, but there are tools out there which make it easier.

CodePen.io is an in-browser coding environment designed for both learning to code and to quickly prototype ideas with minimal hassle.

In this article, we look at some of the site’s features and how they can help you become a better programmer.

What Is CodePen?

These CodePen features will help you improve your coding

CodePen provides something called a pen, which comprises three different windows for HTML, CSS, and JavaScript, plus a preview pane that updates in real-time as you type.

While it is frequently used for web developers to showcase ideas for websites, it is also a great place to learn the basics of front-end web development. Here are the most notable features you need to know when using CodePen.

1. Preprocessors

Preprocessors are interpreted or compiled languages designed to simplify coding. They can add features to a language for convenience, and make code easier to read. In web development, a combination of preprocessors for HTML, CSS, and JavaScript are used to create clean code quickly.

If you are learning web development and want to try out different preprocessors, CodePen allows you to switch preprocessors on the fly, and see the code it compiles down to in real time. Each of the three panes on the CodePen app has a dropdown menu in the top right. Select View Compiled HTML/CSS/JS to see how the code will be interpreted.

These CodePen features will help you improve your coding

In this pen, we’ve created a simple site using Haml and Sass to style some header text. Selecting View Compiled shows the standard HTML and CSS. In this example the difference is minimal. While learning a new language, however, it can be useful to see how the preprocessed code looks once compiled.

2. External Resources

Alongside native support for preprocessors, CodePen supports external scripts. This makes it the perfect place to get hands-on experience with libraries for your personal projects, or to brush up on popular web app libraries like React.

7 Best Free Tutorials for Learning React and Making Web Apps 7 Best Free Tutorials for Learning React and Making Web Apps Free courses are rarely as comprehensive and helpful — but we’ve found several React courses that are excellent and will get you started on the right foot. Read More

To add an external library, open the Settings pane on your pen, and head to the JavaScript tab. There are two ways to add resources, either by adding the resource URL manually, or by searching.

These CodePen features will help you improve your coding

We used this feature in our article covering web animation with mo.js, along with Babel preprocessing.

Yes, CodePen pens can be embedded! Go ahead and click on the preview pane above to see the results of the Mo.js tutorial!

Other pens can be imported much like external libraries. This means you can take elements from previously written pens to use like modules in your new pens. CodePen user Adam’s Simple Poll pen is a good example of this.

3. Templates

When you are learning new concepts or testing out new ideas, you frequently use similar components and retread the same steps getting started. CodePen allows the creation of template pens which can cut out the repetition, and let you get straight to the point.

To create a template, open a new pen, make your changes, and select the Template slider in the settings menu.

Until recently, free users could only make three templates, but now all users can have as many templates in their account as they want. Perfect for getting started on a new idea with the minimum delay!

4. Collaboration Mode

The ability to collaborate and teach with CodePen may be its greatest asset. There are already a wealth of great collaboration tools for programmers, but CodePen’s approach is simple and intuitive.

Pro users of CodePen can create a new pen, and open it to collaboration under the Change View menu. This changes the pen’s link into a shareable invitation accommodating a scaling number of people depending on your CodePen Pro plan.

In this instance, I wrote HTML while a friend updated the CSS in real-time, with a labelled cursor identified where they were working.

These CodePen features will help you improve your coding

Anyone with the link can join and use the in-browser chat function, regardless of whether they are a pro user or even have a CodePen account. Provided autosave is off only the owner of the pen can save any changes, making it a safe way to open your code to others without risk.

The open-ended nature of this mode is beneficial for beginners as you can invite almost anyone into your pen to guide you through a difficult concept. It is also a handy mode to know your way around as it is perfect for interviewing potential employees, and has already been used professionally in this way!

5. Professor Mode

Professor mode allows one Pro user to host a room in which only they can edit the code. Between 10-100 users can watch and chat depending on the Pro plan of the host.

These CodePen features will help you improve your coding

The Professor mode allows flexibility between classroom learning and distance learning, or a combination of the two. Using Professor mode will enable people at the back of the class to have the same experience of those at the front, and for the teacher to show bugfixes which will update in real time.

6. Presentation Mode

Presentation mode is designed, unsurprisingly, with presenting code in mind. The app displays in a simplified view, designed to work with overhead projectors. CodePen has optimized Presentation mode for use on lower speed internet connections and weaker hardware.

These CodePen features will help you improve your coding

Shrewd readers may have already realized that the free version of CodePen would provide precisely this function, though the Pro mode does have a few useful features. Layout, font size, and themes can be quickly changed on the fly to suit almost any setting, and showing the link to the pen brings up a jumbo-sized shortened URL making sharing the project easier.

These CodePen features will help you improve your coding

These small changes, along with being able to scale the preview window to fit whatever you are showing off, make presentation mode perfect for both teachers, and developers presenting ideas to colleagues. Presentation mode is also a clean-looking, and simple way to present code if you find yourself interviewing for a programming position.

How to Prepare Yourself for a Programming Interview How to Prepare Yourself for a Programming Interview The best advice for programming interviews. Any interview can be daunting. Do you know enough to pass? Will your solutions be good enough? What if you choke? Apply these five tips. Read More

7. Patterns

Searching for inspiration is made much easier with CodePen’s collections of Design Patterns.

Each category is a collection of example code provided by CodePen users for specific tasks. Are you looking for a way to create dynamic buttons for your site? Accordioning menus? There are a wealth of categories to fit almost any example.

These CodePen features will help you improve your coding

These patterns are also a great way to learn how interactive buttons work, and the different ways dynamic user interfaces can function.

8. Emmet

Emmet, previously known as Zen Coding, is widely regarded as the greatest time saver for HTML and CSS development. The plugin takes some of the code you find yourself writing a lot and converts them into simple shortcuts.

Seeing it in action is better than explaining it, so take the usual setup for an HTML document:

These CodePen features will help you improve your coding

Adding this to every HTML document has been reduced to two actions. Using Emmet, type ! and hit the Tab key. Magic!

These CodePen features will help you improve your coding

Emmet is active as standard on CodePen and is especially useful if you are trying to learn a new concept in JavaScript and need to create the supporting HTML and CSS quickly.

Develop With CodePen for a Better Experience

CodePen is an excellent tool for web developers, and the field is continuously growing. JavaScript is a great language to learn for a future in web development.

There are some great tutorials and courses available for people wanting to get started with JavaScript, and CodePen is a great environment to test out your new skills.

Really Learn JavaScript with 5 Top Udemy Courses Really Learn JavaScript with 5 Top Udemy Courses JavaScript is the programming language of the web. If you have a reason to learn JavaScript, these five excellent courses from Udemy could be the place to begin your coding journey. Read More

How to Create a Website in Minutes Using HTML5 Boilerplate

Source: https://www.makeuseof.com/tag/html5-boilerplate-tutorial/
Capture Date: 16.09.2018 22:59:05

When you’re building a new website, these days you’ll want it to be HTML5-compatible. But you also don’t want to spend unnecessary time learning the intricacies of HTML5 from scratch, do you?

Fortunately, the HTML5 Boilerplate template can help. It’s a simple front-end template that you can use to create a HTML5 website in just a few minutes. But it’s also powerful enough that you can use it as the foundation of a complex, fully featured site.

This HTML5 Boilerplate tutorial will go over what comes in the template, the basics you need to know about how to use it, and some resources for further learning. I’ll also show you how I used the template to create a very basic site with only a few lines of HTML.

The HTML5 Boilerplate Template

When you download the template from HTML5 Boilerplate, you get a number of folders and files. Here are the contents of the ZIP file:

css ---main.css ---normalize.css doc img js ---main.js ---plugins.js ---vendor ---jquery.min.js ---modernizr.min.js .editorconfig .htaccess 404.html browserconfig.xml favicon.ico humans.txt icon.png index.html robots.txt site.webmanifest tile.png tile-wide.png

We won’t be going over every element in the template here, only the basics. To make sure you have the resources to use all of the files, though, we’ll start with the help documents.

HTML5 Boilerplate Help Documentation

Boilerplate has a collection of help documents hosted in GitHub. This is a big help when you have technical questions or are wondering why something was designed the way it was.

Almost everything in the documentation is also included in the doc folder of the template. You’ll see a number of Markdown (.md) files that are a big help in figuring out how to build your Boilerplate site.

create website from scratch with HTML5 boilerplate template

If you want to read through everything, start with TOC.md and follow the links from there to other Markdown files. If you’re looking for help on a specific issue, find the file that sounds like it might be related; usage.md is a good place to start.

Starting With HTML5 Boilerplate’s CSS

The HTML5 Boilerplate template comes with two CSS files: main.css and normalize.css.

The second file, normalize.css, helps different browsers render elements in consistent ways. To learn more about how it works, check out the normalize.css project at GitHub.

Meanwhile, main.css is where you’ll put in any code that you need to format your site with CSS. The standard CSS included with the template is the result of research conducted by developers and the HTML5 Boilerplate community. It’s readable and displays nicely in different browsers.

10 Simple CSS Code Examples You Can Learn in 10 Minutes 10 Simple CSS Code Examples You Can Learn in 10 Minutes We’ll go over how to create an inline stylesheet so you can practice your CSS skills. Then we’ll move onto 10 basic CSS examples. From there, your imagination is the limit! Read More

If you want to add your own CSS, you can add it to the Author’s Custom Styles section. I’ll add a bit of link styling for our example page:

create website from scratch with HTML5 boilerplate template

There are also a number of useful helper classes included in the base CSS. Some of them hide items from standard browsers and screen readers (or some combination).

Also in main.css you’ll find support for responsive design and helpful print settings.

All of these items are clearly explained by comments in the CSS:

create website from scratch with HTML5 boilerplate template

In general, you can get started with the base CSS.

Adding Your Own HTML to the Template

Boilerplate includes two HTML files: 404.html and index.html.

The index page is where you’ll create your homepage (or your only page, if you’re going for a simple one-pager).

Just a Single Page Website: 3 Reasons Why It Can Work For Your Idea Just a Single Page Website: 3 Reasons Why It Can Work For Your Idea Read More

If you open the index page in a browser, you’ll see a single line of text. But looking into the HTML reveals a lot more hiding in the code. The only thing that you really need to worry about changing is the Google Analytics code (find the text “UA-XXXXX-Y” and replace it with your own tracking code).

The rest of the HTML on the index page includes information for web apps, notifications for old browsers, and useful JavaScripts. When you’re getting started, you shouldn’t need to mess with any of this.

Having them already pre-populated, however, is a good way to make sure that your site is prepared to get the most out of HTML5.

To create your page, insert your HTML between the <body> tags in the file. Here’s some basic information that I’ll add about myself:

create website from scratch with HTML5 boilerplate template

Want to create more pages? Create copies of this file and rename them so you don’t have to copy and paste all of the HTML over. Then add your content.

If you’d like to customize your 404 page, just modify the HTML file. Not sure what to put on your 404 page? Check out these great 404 page design examples.

How To Make a Great 404 Error Page & 10 Examples How To Make a Great 404 Error Page & 10 Examples A smartly designed 404 error page can be the difference between a boring website and a memorable website. Read More

Adding a Favicon (and Other Icons)

Want to replace your favicon? Then favicon.ico is the file you’ll need to replace.

If you don’t have one yet, you’ll need to create one. You can use an online favicon generator or design your own. Just make sure that it’s 16 x 16 pixels and has the .ico file type.

It’s a good idea to put some thought into your favicon. Use these famous favicons to guide your brainstorming. Make sure that when you add the new favicon it’s called favicon.ico.

Your Favorite Icons: 14 Favicons That Stand Out From The Crowd Your Favorite Icons: 14 Favicons That Stand Out From The Crowd Once you start noticing favicons, you realize how much they differ. Most are boring, predictable, and instantly forgettable. But some are good enough to stand out from the crowd. Read More

You may notice that there are three other images in the root directory of your site: icon.png, tile.png, and tile-wide.png. What are these for?

  • icon.png is used for Apple touch icons. If you build a web app, this icon will be used when an iPhone or iPad user adds the app to their homescreen.
  • tile.png and tile-wide.png are for Windows’ “pin” functionality, and will show up in Windows 10.

It’s a good idea to provide icons for all of these cases—but if you’re not building a web app, it can be a lower priority.

Adding More Functionality

Once you’ve added your HTML and a favicon (as well as any CSS you may want to include), your site is ready to be published. That’s how easy it is to use HTML5 Boilerplate. Upload it to your server, and you’re done!

Here’s what our page looks like:

create website from scratch with HTML5 boilerplate template

As you can see, just a few lines of text has created a fully functional (if a bit bland) website. It’s not much, but it only took a few minutes. And it’s highly extensible with HTML5. That’s the power of the Boilerplate template.

But there’s plenty more you can do with the Boilerplate template if you’d like. If there’s something specific you’re looking for, there’s a good chance you’ll find it in the help documentation.

If you’re not sure what you can do with HTML5, but you’d like to find out, there are plenty of web design tutorials out there to help you out.

Need a Website Design Tutorial? Use These 10 Awesome Resources Need a Website Design Tutorial? Use These 10 Awesome Resources Web design is a great skill to have — it lets you create your own website and can be a great path to a new career. Here’s how to learn the basics. Read More

5 of the Best Websites to Create Your Own Android Apps without Coding

Source: https://www.maketecheasier.com/create-an…8Make+Tech+Easier%29
Capture Date: 16.09.2018 22:56:06

Have you ever wished you could create an app? Maybe you want one for your business or just for yourself? Apps are not only useful for all kinds of business situations but in day-to-day activities as well. For example, you could make an app to help plan a wedding or other event. Only a few people would need it.

There are a seemingly unlimited number of websites promising an easy way to make apps. Most of them will be fronted with the word “free.” And to be fair, most of them are free to start. After that is when it changes. Depending on your need for the app, whether for your business or party planning, your budget may not allow for an expensive app or a substantial monthly commitment.

So if you’re not looking to make a million dollars from your app (or spend a boatload of money to create it), these five sites will allow you to create your own Android apps and still have money in your pocket when it’s complete.

1. Andromo

Andromo is the most popular Android app-maker platform.

create-apps-adromo

It only require three steps to create your own app:

  1. Create an Andromo project.
  2. Fill out a few simple forms to add features, graphics, content and whatever makes your app unique.
  3. Click a button to build your app.

Unlike many of the other app builders, Andromo does not have a preview screen for you to see what your app will look like while adding items or changing formatting. After you create your app, they will email it to you. They do not support uploading of the app to the Play store. For free, you can create one app with ads. If you upgrade to the lowest cost plan for $8 a month, you can have up to fifty apps and monetize them.

2. AppsGeyser

create-apps-appsgeyser

AppsGeyser is totally free. They boast no fees, charges, subscription plans, or limits. There are over fifty different available templates to get you started and make creating the app even easier. The site uses a preview screen to show what your app looks like, but I had a little trouble getting that to work consistently. Because it’s free, they don’t support the publishing of the app to the stores. They will get fifty percent of any monetization you do to make up for the cost.

3. AppMachine

create-apps-appmachine

On the surface when you look at pricing, AppMachine seems more expensive, but you only need to pay if you plan on publishing the app to Google Play or another platform. There are 92 different templates available to choose from to begin making your app and a preview screen to keep up with the changes you make. They make it easier to imagine what you can place on a screen by comparing the building of the app to building with Legos. When you want to test out the app, they give you a QR code to scan which then opens it on your phone.

4. AppMakr

create-apps-appmakr

Appmakr charges $2 a month to have an app in the AppMakr market with their branding on the app. There is a free plan allowing you to publish mobile websites, but to have an app, you need at least that basic plan. Use their drag-and-drop interface and the preview pane to make as many apps as you want to for free. You choose a plan only when you decide to promote or publish an app. If you are only interested in creating an app to share with coworkers or friends, you can’t beat the price. It has tech support, a stats dashboard, and no charges or time limits for changes.

5. AppyPie

create-apps-appypie

AppyPie has a straightforward user interface with a preview screen which allows you to drag and drop items onto your app and see the results. They also offer video tutorials to help you along as you create a Progressive Web App (PWA), not an Android. They do have a free plan that only allows you forty-eight hours to edit your app. The next plan jumps to $15 per month to create Android apps. AppyPie branding is on every app unless you are using the highest-priced plan.

How would an app that you design, just for your needs, make something in your life better? Give one of these sites a try and see if you can make it a reality.

Image credit: Closeup of designers creating mobile app prototype by baranq/Shutterstock

Teach Yourself Computer Science

Source: https://teachyourselfcs.com/
Capture Date: 16.09.2018 22:30:34

If you’re a self-taught engineer or bootcamp grad, you owe it to yourself to learn computer science. Thankfully, you can give yourself a world-class CS education without investing years and a small fortune in a degree program 💸.

There are plenty of resources out there, but some are better than others. You don’t need yet another “200+ Free Online Courses” listicle. You need answers to these questions:

  • Which subjects should you learn, and why?
  • What is the best book or video lecture series for each subject?

This guide is our attempt to definitively answer these questions.

TL;DR:

Study all nine subjects below, in roughly the presented order, using either the suggested textbook or video lecture series, but ideally both. Aim for 100-200 hours of study of each topic, then revisit favorites throughout your career 🚀.

Subject Why study? Best book Best videos
Programming Don’t be the person who “never quite understood” something like recursion. Structure and Interpretation of Computer Programs Brian Harvey’s Berkeley CS 61A
Computer Architecture If you don’t have a solid mental model of how a computer actually works, all of your higher-level abstractions will be brittle. Computer Organization and Design Berkeley CS 61C
Algorithms and Data Structures If you don’t know how to use ubiquitous data structures like stacks, queues, trees, and graphs, you won’t be able to solve hard problems. The Algorithm Design Manual Steven Skiena’s lectures
Math for CS CS is basically a runaway branch of applied math, so learning math will give you a competitive advantage. Mathematics for Computer Science Tom Leighton’s MIT 6.042J
Operating Systems Most of the code you write is run by an operating system, so you should know how those interact. Operating Systems: Three Easy Pieces Berkeley CS 162
Computer Networking The Internet turned out to be a big deal: understand how it works to unlock its full potential. Computer Networking: A Top-Down Approach Stanford CS 144
Databases Data is at the heart of most significant programs, but few understand how database systems actually work. Readings in Database Systems Joe Hellerstein’s Berkeley CS 186
Languages and Compilers If you understand how languages and compilers actually work, you’ll write better code and learn new languages more easily. Compilers: Principles, Techniques and Tools Alex Aiken’s course on Lagunita
Distributed Systems These days, most systems are distributed systems. Distributed Systems, 3rd Edition by Maarten van Steen 🤷‍

Why learn computer science?

There are 2 types of software engineer: those who understand computer science well enough to do challenging, innovative work, and those who just get by because they’re familiar with a few high level tools.

Both call themselves software engineers, and both tend to earn similar salaries in their early careers. But Type 1 engineers grow in to more fulfilling and well-remunerated work over time, whether that’s valuable commercial work or breakthrough open-source projects, technical leadership or high-quality individual contributions.

Type 1 engineers find ways to learn computer science in depth, whether through conventional means or by relentlessly learning throughout their careers. Type 2 engineers typically stay at the surface, learning specific tools and technologies rather than their underlying foundations, only picking up new skills when the winds of technical fashion change.

Currently, the number of people entering the industry is rapidly increasing, while the number of CS grads is essentially static. This oversupply of Type 2 engineers is starting to reduce their employment opportunities and keep them out of the industry’s more fulfilling work. Whether you’re striving to become a Type 1 engineer or simply looking for more job security, learning computer science is the only reliable path.

Subject guides

Programming

Most undergraduate CS programs start with an “introduction” to computer programming. The best versions of these courses cater not just to novices, but also to those who missed beneficial concepts and programming models while first learning to code.

Our standard recommendation for this content is the classic Structure and Interpretation of Computer Programs, which is available online for free both as a book, and as a set of MIT video lectures. While those lectures are great, our video suggestion is actually Brian Harvey’s SICP lectures (for the 61A course at Berkeley) instead. These are more refined and better targeted at new students than are the MIT lectures.

We recommend working through at least the first three chapters of SICP and doing the exercises. For additional practice, work through a set of small programming problems like those on exercism.

For those who find SICP too challenging, we recommend How to Design Programs. For those who find it too easy, we recommend Concepts, Techniques, and Models of Computer Programming.

Structure and Interpretation of Computer Programs

Computer Architecture

Computer Architecture—sometimes called “computer systems” or “computer organization”—is an important first look at computing below the surface of software. In our experience, it’s the most neglected area among self-taught software engineers.

The Elements of Computing Systems, also known as “Nand2Tetris” is an ambitious book attempting to give you a cohesive understanding of how everything in a computer works. Each chapter involves building a small piece of the overall system, from writing elementary logic gates in HDL, through a CPU and assembler, all the way to an application the size of a Tetris game.

We recommend reading through the first six chapters of the book and completing the associated projects. This will develop your understanding of the relationship between the architecture of the machine and the software that runs on it.

The first half of the book (and all of its projects), are available for free from the Nand2Tetris website. It’s also available as a Coursera course with accompanying videos.

In seeking simplicity and cohesiveness, Nand2Tetris trades off depth. In particular, two very important concepts in modern computer architectures are pipelining and memory hierarchy, but both are mostly absent from the text.

Once you feel comfortable with the content of Nand2Tetris, our next suggestion is Patterson and Hennessy’s Computer Organization and Design, an excellent and now classic text. Not every section in the book is essential; we suggest following Berkeley’s CS61C course “Great Ideas in Computer Architecture” for specific readings. The lecture notes and labs are available online, and past lectures are on the Internet Archive.

Algorithms and Data Structures

We agree with decades of common wisdom that familiarity with common algorithms and data structures is one of the most empowering aspects of a computer science education. This is also a great place to train one’s general problem-solving abilities, which will pay off in every other area of study.

There are hundreds of books available, but our favorite is The Algorithm Design Manual by Steven Skiena. He clearly loves this stuff and can’t wait to help you understand it. This is a refreshing change, in our opinion, from the more commonly recommended Cormen, Leiserson, Rivest & Stein, or Sedgewick books. These last two texts tend to be too proof-heavy for those learning the material primarily to help them solve problems.

For those who prefer video lectures, Skiena generously provides his online. We also really like Tim Roughgarden’s course, available from Stanford’s MOOC platform Lagunita, or on Coursera. Whether you prefer Skiena’s or Roughgarden’s lecture style will be a matter of personal preference.

For practice, our preferred approach is for students to solve problems on Leetcode. These tend to be interesting problems with decent accompanying solutions and discussions. They also help you test progress against questions that are commonly used in technical interviews at the more competitive software companies. We suggest solving around 100 random leetcode problems as part of your studies.

Finally, we strongly recommend How to Solve It as an excellent and unique guide to general problem solving; it’s as applicable to computer science as it is to mathematics.

The Algorithm Design Manual How to Solve It

I have only one method that I recommend extensively—it’s called think before you write.

— Richard Hamming

Mathematics for Computer Science

In some ways, computer science is an overgrown branch of applied mathematics. While many software engineers try—and to varying degrees succeed—at ignoring this, we encourage you to embrace it with direct study. Doing so successfully will give you an enormous competitive advantage over those who don’t.

The most relevant area of math for CS is broadly called “discrete mathematics”, where “discrete” is the opposite of “continuous” and is loosely a collection of interesting applied math topics outside of calculus. Given the vague definition, it’s not meaningful to try to cover the entire breadth of “discrete mathematics”. A more realistic goal is to build a working understanding of logic, combinatorics and probability, set theory, graph theory, and a little of the number theory informing cryptography. Linear algebra is an additional worthwhile area of study, given its importance in computer graphics and machine learning.

Our suggested starting point for discrete mathematics is the set of lecture notes by László Lovász. Professor Lovász did a good job of making the content approachable and intuitive, so this serves as a better starting point than more formal texts.

For a more advanced treatment, we suggest Mathematics for Computer Science, the book-length lecture notes for the MIT course of the same name. That course’s video lectures are also freely available, and are our recommended video lectures for discrete math.

For linear algebra, we suggest starting with the Essence of linear algebra video series, followed by Gilbert Strang’s book and video lectures.

If people do not believe that mathematics is simple, it is only because they do not realize how complicated life is.

— John von Neumann

Operating Systems

Operating System Concepts (the “Dinosaur book”) and Modern Operating Systems are the “classic” books on operating systems. Both have attracted criticism for their writing styles, and for being the 1000-page-long type of textbook that gets bits bolted onto it every few years to encourage purchasing of the “latest edition”.

Operating Systems: Three Easy Pieces is a good alternative that’s freely available online. We particularly like the structure of the book and feel that the exercises are well worth doing.

After OSTEP, we encourage you to explore the design decisions of specific operating systems, through “{OS name} Internals” style books such as Lion’s commentary on Unix, The Design and Implementation of the FreeBSD Operating System, and Mac OS X Internals.

A great way to consolidate your understanding of operating systems is to read the code of a small kernel and add features. A great choice is xv6, a port of Unix V6 to ANSI C and x86 maintained for a course at MIT. OSTEP has an appendix of potential xv6 labs full of great ideas for potential projects.

Operating Systems: Three Easy Pieces

Computer Networking

Given that so much of software engineering is on web servers and clients, one of the most immediately valuable areas of computer science is computer networking. Our self-taught students who methodically study networking find that they finally understand terms, concepts and protocols they’d been surrounded by for years.

Our favorite book on the topic is Computer Networking: A Top-Down Approach. The small projects and exercises in the book are well worth doing, and we particularly like the “Wireshark labs”, which they have generously provided online.

For those who prefer video lectures, we suggest Stanford’s Introduction to Computer Networking course available on their MOOC platform Lagunita.

The study of networking benefits more from projects than it does from small exercises. Some possible projects are: an HTTP server, a UDP-based chat app, a mini TCP stack, a proxy or load balancer, and a distributed hash table.

You can’t gaze in the crystal ball and see the future. What the Internet is going to be in the future is what society makes it.

— Bob Kahn

Computer Networking: A Top-Down Approach

Databases

It takes more work to self-learn about database systems than it does with most other topics. It’s a relatively new (i.e. post 1970s) field of study with strong commercial incentives for ideas to stay behind closed doors. Additionally, many potentially excellent textbook authors have preferred to join or start companies instead.

Given the circumstances, we encourage self-learners to generally avoid textbooks and start with the Spring 2015 recording of CS 186, Joe Hellerstein’s databases course at Berkeley, and to progress to reading papers after.

One paper particularly worth mentioning for new students is “Architecture of a Database System”, which uniquely provides a high-level view of how relational database management systems (RDBMS) work. This will serve as a useful skeleton for further study.

Readings in Database Systems, better known as the databases “Red Book”, is a collection of papers compiled and edited by Peter Bailis, Joe Hellerstein and Michael Stonebraker. For those who have progressed beyond the level of the CS 186 content, the Red Book should be your next stop.

If you insist on using an introductory textbook, we suggest Database Management Systems by Ramakrishnan and Gehrke. For more advanced students, Jim Gray’s classic Transaction Processing: Concepts and Techniques is worthwhile, but we don’t encourage using this as a first resource.

It’s hard to consolidate databases theory without writing a good amount of code. CS 186 students add features to Spark, which is a reasonable project, but we suggest just writing a simple relational database management system from scratch. It will not be feature rich, of course, but even writing the most rudimentary version of every aspect of a typical RDBMS will be illuminating.

Finally, data modeling is a neglected and poorly taught aspect of working with databases. Our suggested book on the topic is Data and Reality: A Timeless Perspective on Perceiving and Managing Information in Our Imprecise World.

Readings in Database Systems Data and Reality

Languages and Compilers

Most programmers learn languages, whereas most computer scientists learn about languages. This gives the computer scientist a distinct advantage over the programmer, even in the domain of programming! Their knowledge generalizes; they are able to understand the operation of a new language more deeply and quickly than those who have merely learned specific languages.

The canonical introductory text is Compilers: Principles, Techniques & Tools, commonly called “the Dragon Book”. Unfortunately, it’s not designed for self-study, but rather for instructors to pick out 1-2 semesters worth of topics for their courses. It’s almost essential then, that you cherry-pick the topics, ideally with the help of a mentor.

If you choose to use the Dragon Book for self-study, we recommend following a video lecture series for structure, then dipping into the Dragon Book as needed for more depth. Our recommended online course is Alex Aiken’s, available from Stanford’s MOOC platform Lagunita.

As a potential alternative to the Dragon Book we suggest Language Implementation Patterns by Terence Parr. It is written more directly for the practicing software engineer who intends to work on small language projects like DSLs, which may make it more practical for your purposes. Of course, it sacrifices some valuable theory to do so.

For project work, we suggest writing a compiler either for a simple teaching language like COOL, or for a subset of a language that interests you. Those who find such a project daunting could start with Make a Lisp, which steps you through the project.

Compilers: Principles, Techniques & Tools Language Implementation Patterns

Don’t be a boilerplate programmer. Instead, build tools for users and other programmers. Take historical note of textile and steel industries: do you want to build machines and tools, or do you want to operate those machines?

— Ras Bodik at the start of his compilers course

Distributed Systems

As computers have increased in number, they have also spread. Whereas businesses would previously purchase larger and larger mainframes, it’s typical now for even very small applications to run across multiple machines. Distributed systems is the study of how to reason about the trade-offs involved in doing so, an increasingly important skill.

Our suggested textbook for self-study is Maarten van Steen and Andrew Tanenbaum’s Distributed Systems, 3rd Edition. It’s a great improvement over the previous edition, and is available for free online thanks to the generosity of its authors. Given that the distributed systems is a rapidly changing field, no textbook will serve as a trail guide, but Maarten van Steen’s is the best overview we’ve seen of well-established foundations.

A good course for which some videos are online is MIT’s 6.824 (a graduate course), but unfortunately the audio quality in the recordings is poor, and it’s not clear if the recordings were authorized.

No matter the choice of textbook or other secondary resources, study of distributed systems absolutely mandates reading papers. A good list is here, and we would highly encourage attending your local Papers We Love chapter.

Distributed Systems 3rd edition

Frequently asked questions

What about AI/graphics/pet-topic-X?

We’ve tried to limit our list to computer science topics that we feel every practicing software engineer should know, irrespective of specialty or industry. With this foundation, you’ll be in a much better position to pick up textbooks or papers and learn the core concepts without much guidance. Here are our suggested starting points for a couple of common “electives”:

  • For artificial intelligence: do Berkeley’s intro to AI course by watching the videos and completing the excellent Pacman projects. As a textbook, use Russell and Norvig’s Artificial Intelligence: A Modern Approach.
  • For machine learning: do Andrew Ng’s Coursera course. Be patient, and make sure you understand the fundamentals before racing off to shiny new topics like deep learning.
  • For computer graphics: work through Berkeley’s CS 184 material, and use Computer Graphics: Principles and Practice as a textbook.

How strict is the suggested sequencing?

Realistically, all of these subjects have a significant amount of overlap, and refer to one another cyclically. Take for instance the relationship between discrete math and algorithms: learning math first would help you analyze and understand your algorithms in greater depth, but learning algorithms first would provide greater motivation and context for discrete math. Ideally, you’d revisit both of these topics many times throughout your career.

As such, our suggested sequencing is mostly there to help you just get started… if you have a compelling reason to prefer a different sequence, then go for it. The most significant “pre-requisites” in our opinion are: computer architecture before operating systems or databases, and networking and operating systems before distributed systems.

Who is the target audience for this guide?

We have in mind that you are a self-taught software engineer, bootcamp grad or precocious high school student, or a college student looking to supplement your formal education with some self-study. The question of when to embark upon this journey is an entirely personal one, but most people tend to benefit from having some professional experience before diving too deep into CS theory. For instance, we notice that students love learning about database systems if they have already worked with databases professionally, or about computer networking if they’ve worked on a web project or two.

How does this compare to Open Source Society or freeCodeCamp curricula?

The OSS guide has too many subjects, suggests inferior resources for many of them, and provides no rationale or guidance around why or what aspects of particular courses are valuable. We strove to limit our list of courses to those which you really should know as a software engineer, irrespective of your specialty, and to help you understand why each course is included.

freeCodeCamp is focused mostly on programming, not computer science. For why you might want to learn computer science, see above.

What about language X?

Learning a particular programming language is on a totally different plane to learning about an area of computer science — learning a language is much easier and much less valuable. If you already know a couple of languages, we strongly suggest simply following our guide and fitting language acquisition in the gaps, or leaving it for afterwards. If you’ve learned programming well (such as through Structure and Interpretation of Computer Programs), and especially if you have learned compilers, it should take you little more than a weekend to learn the essentials of a new language.

What about trendy technology X?

No single technology is important enough that learning to use it should be a core part of your education. On the other hand, it’s great that you’re excited to learn about that thing. The trick is to work backwards from the particular technology to the underlying field or concept, and learn that in depth before seeing how your trendy technology fits into the bigger picture.

Why are you still recommending the Dragon book?

The Dragon book is still the most complete single resource for compilers. It gets a bad rap, typically for overemphasizing certain topics that are less fashionable to cover in detail these days, such as parsing. The thing is, the book was never intended to be studied cover to cover, only to provide enough material for an instructor to put together a course. Similarly, a self-learner can choose their own adventure through the book, or better yet follow the suggestions that lecturers of public courses have made in their course outlines.

How can I get textbooks cheaply?

Many of the textbooks we suggest are freely available online, thanks to the generosity of their authors. For those that aren’t, we suggest buying used copies of older editions. As a general rule, if there has been more than a couple of editions of a textbook, it’s quite likely that an older edition is perfectly adequate. It’s certainly unlikely that the newest version is 10x better than an older one, even if that’s what the price difference is!

Who made this?

This guide was written by Ozan Onay and Myles Byrne, instructors at the Bradfield School of Computer Science in San Francisco. It is based on our experience teaching foundational computer science to hundreds of mostly self-taught engineers and bootcamp grads. Thank you to all of our students for your continued feedback on self-teaching resources. Thanks too to Alek Sharma, Omar Rayward, Ammar Mian and Tyler Bettilyon for feedback on this guide.

You may also like to join our mailing list:

Managing API Keys

Source: https://www.learnhowtoprogram.com/androi…ts/managing-api-keys
Capture Date: 03.07.2018 21:28:06

In the previous lesson we acquired the secret access token we’ll use to request information from the Yelp Fusion API. But as you know, API keys, tokens, and credentials should not be stored directly in source code pushed to GitHub. This simply isn’t secure; especially if the API has a rate limit, charges for use, or provides access to sensitive information. We don’t want others obtaining our credentials!

Thankfully we can easily conceal our API keys, similar to what we did in JavaScript. The process is a tad different in Android, but we think you’ll get the hang of it quickly. In this lesson we’ll discuss how to obfuscate API credentials in Android apps, as we walk through integrating our Yelp access token into MyRestuarants. Once our API key is safely integrated we’ll begin constructing our first API call in upcoming lessons.

Hiding API Keys

1. Add Credentials to gradle.properties

First, we’ll add our new token the gradle.properties file located in the root directory. gradle.properties is simply a file where properties and configuration settings for gradle-built projects reside.

gradle.properties

YelpToken = "Bearer YOUR-UNIQUE-ACCESS-TOKEN-HERE"

We must include a space between Bearer and the access token itself. And the term Bearer must be capitalized. This format looks a little funny compared to API credentials you’ve likely seen in the past, but it’s simply what this particular API requires. If we don’t follow this exact format, we won’t be able to successfully retrieve data.

2. Ignore gradle.properties

Next, let’s hide our gradle.properties file from GitHub by adding it to .gitignore so that the credentials we just listed will not be pushed to Github:

.gitignore

*.iml ... /gradle.properties

If you don’t see a .gitignore file in your project’s directory, you may have to switch from Android view to Project view in Android Studio. The Android view displays only the key source files of an Android project, whereas Project displays all files.

switching-from-android-to-project-view-in-android-studio

If you’ve already committed gradle.properties file to your Git repository you’ll have to retroactively remove it in order to begin ignoring it moving forward. To remove files listed in r .gitignore from your local repository, run the following command:

$ git rm --cached -r .

This will reset which files are staged for committing. You should be able to run $ git status, and see that all files are unstaged (including gradle.properties). After this, you can $ git add . and $ git commit -m "your commit message" again, and your new commit should not contain gradle.properties. For more details, check out the Removing Ignored Files from a Project section in this Java lesson.

3. Initialize String Constants

Next we’ll create a class to contain references to our Yelp credentials. Right-click on the primary package containing our source code and select New > Java Class. Name this new class Constants.java:

creating-new-class-in-android-studio

Within this file we’ll include the following code referencing the access token from gradle.properties:

Constants.java

public class Constants { public static final String YELP_TOKEN = BuildConfig.YELP_TOKEN; }

Here, we’re instructing the application that the value for our YELP_TOKEN constant can be found in the BuildConfig file. BuildConfig.java is a file that is generated automatically when gradle builds our project. You’ll likely receive an error when you add the code above. But that’s alright, this is simply because we haven’t added YELP_TOKEN to our Build Config yet. We’ll do this next.

4. Connect Credentials When the Project Builds

Next, let’s instruct our application to include our token in the BuildConfig file when it is created. We’ll add the following to our build.gradle file:

build.gradle(Module: app)

apply plugin: 'com.android.application' android { ... buildTypes.each { it.buildConfigField 'String', 'YELP_TOKEN', YelpToken } }

Here we’re instructing our application to include the token placed in gradle.properties in the BuildConfig file when it is built. The keys in our Constants.java class will now refer to the strings added to gradle.properties at runtime. And none of our credentials will be visible on GitHub!

The 10 Best Programming Games to Test and Build Your Coding Skills

Source: https://www.makeuseof.com/tag/best-programming-games/
Capture Date: 18.05.2018 00:08:14

Advertisement

Programming is fun once you’re confident and know what you’re doing, but getting to that point can be a grueling experience.

Which is why, in between classes and lectures and tutorials, you should set aside time to play these programming games and challenges. Not only do they serve as fun breaks, but you’ll learn faster and retain more info thanks to the hands-on practice and experience.

1. Robocode

programming games - robocode

Robocode is a complex programming game where you code robot tanks that fight against each other. Your job is to write the artificial intelligence that drives your robots to success—using real languages like Java, Scala, C#, and more. To get started, check out the Robocode Basics and Tutorials.

The Robocode installer comes with a development environment, built-in robot editor, and Java compiler. You’re actually writing real code! Despite launching back in 2000, Robocode is still regularly updated and maintained, helped along by the fact that it’s open source and extremely addictive.

What Is Open Source Software? [MakeUseOf Explains] What Is Open Source Software? [MakeUseOf Explains] “Open source” is a term that’s thrown around a lot these days. You may know that certain things are open source, like Linux and Android, but do you know what it entails? What is open… Read More

2. Codingame

programming games - codingame

Codingame is a game-like web app where you solve puzzles and challenges by writing real code. Over 25 programming languages are supported, including Java, C#, Python, JavaScript, Lua, Go, Rust, and more. Each puzzle/challenge has a theme (e.g. program the turret to shoot down airships that come too close), which kicks up the fun factor.

3. Codecombat

programming games - codecombat

Codecombat is another web app for game-like puzzles and challenges that can only be solved by writing code. But whereas Codingame is more entertaining, Codecombat has a significant educational bent with a “Classroom Edition” that teachers can use to help their students learn how to code. As of this writing, three course paths are available: Computer Science, Web Development, and Game Development.

4. Codewars

programming games - code wars

Codewars isn’t so much a game as it is a gamified way to practice coding and solving algorithmic challenges. You get points for completing puzzles and point values are determined by how efficient your solutions are. Codewars lets you view solutions submitted by others, which you can study and learn from. I believe it’s one of the best ways to learn a new programming language and its idioms.

7 Useful Tricks for Mastering a New Programming Language 7 Useful Tricks for Mastering a New Programming Language It’s okay to be overwhelmed when you are learning to code. You’ll probably forget things as quickly as you learn them. These tips can help you to better retain all that new information. Read More

5. Codehunt

programming games - code hunt

Codehunt is a game that can be played using either Java or C#. It’s designed to teach you the fundamentals of whichever language you pick, starting with Training, moving through topics like Loops and Strings, and ending with intermediate challenges like Sorting, Cyphers, and Puzzles. What’s interesting about Codehunt is that it doesn’t tell you how to win each challenge—figuring that out is part of the fun!

6. Vim Adventures

programming games - vim adventures

Vim Adventures is a fun game-like tutorial for learning how to use Vim, a highly unusual but extremely powerful text editor that many programming pros love to use. It has a huge learning curve though, which is why tutorials like this exist. So while Vim isn’t a programming language per se, mastering Vim can help you become a more efficient coder, hence why I’ve included it in this article.

The Top 7 Reasons To Give The Vim Text Editor A Chance The Top 7 Reasons To Give The Vim Text Editor A Chance For years, I’ve tried one text editor after another. You name it, I tried it. I used each and every one of these editors for over two months as my primary day-to-day editor. Somehow, I… Read More

7. TIS-100

hqdefault.jpg

“It’s the assembly language programming game you never asked for!” It says so right there on the tin. TIS-100 is a video game like no other, forcing you to learn and use a mock version of low-level assembly coding to solve its puzzles. This game is not a joke—it’s difficult, it’s open-ended, and it has incredible replay value as long as you don’t become so frustrated and confused that you uninstall in a fit of rage.

Download: TIS-100 ($7)

8. Shenzhen I/O

hqdefault.jpg

From the same studio behind TIS-100 comes Shenzhen I/O, a puzzle game where you’re tasked with creating simplified circuits and writing simplified assembly code that runs on said circuits. Between the two games, Shenzhen I/O is easier to get into and more enjoyable yet just as satisfyingly complex.

Download: Shenzhen I/O ($15)

9. Human Resource Machine

hqdefault.jpg

In Human Resource Machine, you play as an office worker who completes tasks by combining various instructions together. In a sense, this game is all about puzzle solving through visual programming, even going as far to touch on concepts like logical flow and memory management—but presented in an easy-to-digest, office-themed way. It’s a great game for exercising your programmer’s brain.

Download: Human Resource Machine ($10)

10. Screeps

hqdefault.jpg

Screeps (which stands for “scripted creeps”) is an MMO strategy game where you use JavaScript to code the behaviors of in-game entities and build an empire for yourself. The base game comes with a private server where you can play on your own, plus 30 days of full access to the official server. After that, you can keep playing on the official server in a limited capacity, which can be lifted with a monthly subscription.

Download: Screeps ($15, optional subscription for $9/mo)

Other Ways to Sharpen Your Coding Skills

Looking for yet more ways to hone your programming ability? I highly recommend exercising what you know with one of these programming project ideas, and you may benefit further by listening to some of these podcasts for coders and developers.

However, if after everything you’re still struggling and can’t seem to grasp the basics of programming, you may want to step back and consider whether programming may or may not be right for you. Let us know how it goes!

6 Signs That You Are Not Meant To Be A Programmer 6 Signs That You Are Not Meant To Be A Programmer Not everyone is cut out to be a programmer. If you aren’t completely sure that you’re meant to be a programmer, here are some signs that may point you in the right direction. Read More

How the Heck Do I Use GitHub?

Source: https://lifehacker.com/5983680/how-the-heck-do-i-use-github
Capture Date: 04.05.2018 00:18:10
18efmtxt7i5nvjpg.jpg

Dear Lifehacker,
I’ve learned to code and want to start using GitHub to manage my projects. Despite the introductory lesson they provide, I still don’t understand how it works at all. Can you help me?

Sincerely,
Git Help

Dear GH,
GitHub’s a great tool but it’s definitely a little confusing the first time around (and, possibly, a few times after that). That’s likely why GitHub created software (for OS X and Windows) to make the process a bit easier. Nevertheless, it’s good to learn the old-fashioned way otherwise your options in the simplified software won’t make sense. Let’s start by walking through the basics.

Step One: Sign Up for GitHub

Here comes the easy part: make yourself a GitHub account signing up on the front page. After completing the form, GitHub will sign you in and take you to your empty news feed. In the middle of the page, you’ll see the boot camp (pictured to the right). We’re going to go through it to set up your account and, later, create your first repository. Click on “Set Up Git” to get started.

Step Two: Install Git

GitHub exists because of a version control application called git. The site is based around how git works, and git is pretty old. It runs via the command line and has no fancy graphical user interface. Since it’s made to manage code you wrote, this shouldn’t sound too scary. (Of course, as previously mentioned, GitHub did make wonderful software to allow you to use their service without the command line but that won’t help you too much unless you know the basics.)

Git works by reading a local code repository (just a folder containing code for your project) on your computer and the mirroring that code elsewhere (in this case, GitHub’s servers). Initially we’ll commit (i.e. send) your entire local repository to GitHub, but that’s just a one-time affair. As you continue to work on your code, you’ll simply commit changes. GitHub will then keep track of the changes you made, creating different versions of files so you can revert back to old ones if you want (or just keep track of those changes for other reasons). This is primarily why you’d want to use a version control system like git on your own, but additional benefits surface when using git to manage code with other people working on your project. When multiple developers commit code with git, GitHub becomes a central repository where all the code that everyone’s working on can stay in sync. You’ll commit your changes, and other developers will pull them (i.e. sync them to their local repository). You’ll do the same with their code.

Git makes this all happen, so you need to download the latest version and install it. On OS X, you’ll just install the command line app. On Windows, you’ll get a few more items. We’ll discuss how they work in the next step.

Step Three: Set Up Git

To set up git, you need to make your way into the command line. On OS X, that means launching the Terminal app (Hard Drive -> Applications -> Utilities -> Terminal) and on Windows that means launching the Git Bash app you just installed—not the Windows command prompt. When you’re ready, tell git your name like this:

git config --global user.name "Your Name Here"

For example, mine would look like this because I’m using a test account for this example:

git config --global user.name "Adam Dachis"

You can put in any name you like, but afterwards you’ll need to input your email and that email must be the email you used when signing up for GitHub:

git config --global user.email "your_email@youremail.com"

If, for whatever reason, you signed up for GitHub with the wrong email address, you’ll need to change it.

Now, to avoid always entering your login credentials and generating SSH keys, you’ll want to install the credential helper so your passwords are cached. If you’re on Windows, download it and install it. If you’re on OS X, you’ll need to handle this through the Terminal. To start, use this command to download the credential helper:

curl -s -O
http://github-media-downloads.s3.amazonaws.com/osx/git-credential-osxkeychain

This will download a tiny little file and shouldn’t take too long. When finished, enter the following command to make sure the permissions are correct on the file you just download (and fix them if not):

chmod u+x git-credential-osxkeychain

Now it’s time to install the credential helper into the same folder where you install git. To do so, enter this command:

sudo mv git-credential-osxkeychain `dirname `which git``

You’ll be prompted for your administrator password because the above command began with sudo. Sudo is shorthand for “super user do” and is necessary when performing a task that requires root access. The sudo command allows you to become the root user (a user with permission to do pretty much anything) on your operating system for a moment so you can perform this task. You’re asked to enter your password to prove you’re an administrator on the computer and should be allowed to do this. Once you’ve entered your password and the credential helper has been moved, finish up the installation with this command:

git config --global credential.helper osxkeychain

Now you’re all set and can move on to actually using git and GitHub!

Step Four: Create Your First Repository

Now that you’ve made it this far, you can actually use GitHub! As a first order of business, we’re going to create a repository (or “repo” for short). Head on over to GitHub and click the “New Repository” button on the top right of your account page. (Note: If you’re still displaying the GitHub bootcamp section, it’ll show up underneath it.)

When creating a repository you have a few things to decide including it’s name and whether it’ll be publicly accessible or not. Choosing a name should be pretty simple because you likely already have a name for your project. If you’re just following along for learning purposes, use “Hello-World.” Why “Hello-World” and not “Hello World”? Because spaces and special characters will cause problems. Keep it simple and easy to type in the command line. If you want to include a more complex name, you can add it to the optional description field beneath the name field.

If you’re creating an open-source project, you want a public repository. If you want to code by yourself or share only with specific people, a private repository will do. Make the choice that works best for you and your project.

When you’re all done, you can click the “Create repository” button but you might want to do one other thing first: check the “Initialize this repository with a README” checkbox. Why? All repositories require a README file. Ideally that file would contain a little information about your project, but you might not want to deal with that right now. By initializing the repository with a README, you’ll get an empty README file that you can just deal with later. For the purposes of this tutorial, we’re going to leave the box unchecked because, in the next section, we’re going to create a README file from scratch to practice committing (sending) it to GitHub.

Step Five: Make Your First Commit

When you send files to GitHub, you commit them. To practice, we’re going to initialize your local repository and create a README file to commit as practice. Before you start, you need to know where your local code repository is on your computer and how to access it via the command line. In this tutorial, we’re going to assume there’s a directory called “Hello-World” in your computer’s home folder. If you need to create one, just run this command (same for Git Bash on Windows and OS X’s terminal):

mkdir ~/Hello-World

Now change to that directory using the cd (change directory) command:

cd ~/Hello-World

In case you were wondering, the ~ represents your home directory in Git Bash and Terminal. It’s simply shorthand so you don’t have to type it all out (which would look more like /Users/yourusername/). Now that your repository is ready, type this:

git init

If you already had a repository ready to go, you’d just need to cd to that directory and then run the git init command in there instead. Either way, your local repository is ready to go and you can start committing code. But wait, you don’t have anything to commit! Run this command to create a README file:

touch README

Let’s take a break for a second and see what just happened. Go into the home folder on your computer and look at the Hello-World folder (or look at whatever folder you’re using for a local repository). You’ll notice a README file inside, thanks to the command you just ran. What you won’t see is a .git folder, but that’s because it’s invisible. Git hides it in there, but because you ran the git init command you know it exists. If you’re skeptical, just run the ls command in Git Bash/Terminal to display a list of everything in the current directory (which, if you’re following along, is your local repository).

So how does git know we want to commit this README file we just created? It doesn’t, and you have to tell it. This command will do the trick:

git add README

If you want to add other files to commit, you’ll use the same command but replace README with the name of a different file. Now, run this command to commit it:

git commit -m 'first commit'

While the other commands were pretty straightforward, the commit command has a little more going on so let’s break it down. When you type git, that’s just telling the command line that you want to use the git program. When you type commit, you’re telling git you want to use the commit command. Everything that follows those two thing count as options. The first, -m, is what’s known as a flag. A flag specifies that you want to do something special rather than just run the commit command. In this case, the -m flag means “message” and what follows it is your commit message (in the example, ‘first commit’). The message isn’t absolutely necessary (although you’ll usually need to provide one), but simply a reference to help you differentiate the various versions of a file (or files) you commit to your repository.

Your first commit should go by in a split second because you haven’t actually uploaded anything yet. To get this empty README file to GitHub, you need to push it with a couple of commands. Here’s the first:

git remote add origin https://github.com/yourusername/Hello-World.git

You need to replace “yourusername” with—you guessed it—your GitHub username. For me, it’d look like this:

git remote add origin https://github.com/gittest1040/Hello-World.git

This command tells git where to send your Hello-World repository. Now all you need to do is send it:

git push origin master

Once you run that command, everything (in this case, just your README file) will make it’s way over to GitHub. Congratulations on your first commit!

Learning More

Using GitHub requires more than just committing a README file, but these basics should give you a good grasp on how to interact with the git app and the service. Now that you know how GitHub works at its core, you can use the GitHub apps to manage your code instead if you prefer. If you want to learn more about GitHub, there are some great tutorials. For starters, take a look at how to fork a repository and LockerGnome’s GitHub guide.

Have fun managing your code!

Love,
Lifehacker

Getting Started With Scratch on the Raspberry Pi

Source: https://www.makeuseof.com/tag/raspberry-pi-scratch/
Capture Date: 29.03.2018 23:45:35

Advertisement

The Raspberry Pi is a great way to learn both DIY tech and programming on a budget. They are also great cheap computers for kids, with plenty of great learning resources included to help young minds grasp useful concepts for the future.

There are many great beginner projects out there which use the Pi’s GPIO (general-purpose input/output) pins. It’s great for coding too, since the Raspbian operating system comes with Python built-in. There is even a version of Minecraft for the Pi which can help you learn both beginner electronics and Python!

While this is great for people with some coding experience, what if you wanted to teach someone how to use the Pi’s GPIO pins without having to learn a programming language?

With Scratch, you can.

Today we will use Scratch to turn on an LED attached to our GPIO pins, while learning about some basic animation and programming ideas—all without having to type any code! This tutorial is perfect for getting kids involved with DIY electronics and programmatic thinking from an early age. Both the video and the article are perfect for the home or classroom.

hqdefault.jpg

What You’ll Need

getting started with scratch on raspberry pi

  • 1 x Raspberry Pi with Raspbian installed. A Pi 3 is used today, but any Pi will do
  • 1 x LED
  • 1 x 220 Ohms or higher resistor
  • 1 x breadboard
  • 2 x hookup wires

Setting Up the LED

We want to set up our LED and resistor on the breadboard like this:

getting started with scratch on raspberry pi

Here is a diagram of that same setup. Notice that in this diagram the LED is the other way around, but the circuit is still exactly the same.

getting started with scratch on raspberry pi

We want to set it up so that the hookup wire from GPIO pin 5 connects to the leg of our resistor. The resistor’s other leg attaches to the positive side of our LED. If you are wondering which side that is, look at the top of your LED. One side should be curved, and the other side should be flat. The curved side is positive, and the flat side is negative. Use a piece of hookup wire to connect the negative side of the LED to a GND pin.

Check that your circuit is correct, and boot up your Pi! If you are wondering which pin is which, our beginner’s guide to the Pi can help you. Raspberry Pi: The Unofficial Tutorial Raspberry Pi: The Unofficial Tutorial Whether you’re a current Pi owner who wants to learn more or a potential owner of this credit-card size device, this isn’t a guide you want to miss. Read More

Scratch Basics

To open scratch, click on the Raspberry Pi start menu and navigate to Programming > Scratch 2.0. When scratch opens it will look something like this:

getting started with scratch on raspberry pi

There is a lot going on here, but it’s quite simple to get the hang of. The left side of the screen is where the action happens. Anything we code will play out in this box.

getting started with scratch on raspberry pi

Just below it is the sprite window where you can load images into your program, or paint your own sprites if you are feeling creative!

getting started with scratch on raspberry pi

In the middle panel, you’ll find all of the blocks you can use to make your programs. You’ll also notice two tabs called Costumes and Sounds which you can use to customise your project even more, but today we won’t be using them.

On the right is where you can drag these blocks to make the magic happen!

getting started with scratch on raspberry pi

The right side is currently empty. Let’s do something about that!

GPIO Pins

Before we go any further, we’ll need to add a few blocks to our toolkit to access our GPIO pins and turn on our LED. In the middle panel, click on More Blocks.

getting started with scratch on raspberry pi

Now click Add an Extension and choose Pi GPIO. This will add blocks we can use with our Raspberry Pi pins.

getting started with scratch on raspberry pi

Now that we’ve got all the tools we need, lets make a program!

Light Emitting Cat

Since we already have a cat sprite loaded in, let’s use it. We are going to make a program which makes the cat take a step whenever a button is clicked, and make the LED light up for one second every time. Start by grabbing the move 10 steps block from the Motion tab, and drag it to the empty space on the right. Now click on the More Blocks tab and drag the set GPIO output to to the right and connect it to the bottom of the first block. It should look like this:

getting started with scratch on raspberry pi

You’ll notice that there is a number 5 in my GPIO block, click on the white circle and enter the number of your GPIO pin here. If you set up your LED the same way as was shown above, it will also be number 5. Now if you click on the code block it will glow for a moment. This means it is running, so you should see your cat move, and the LED will turn on. Progress!

Making It More Complicated

Now that we have a basic start, let’s add some more logic to our code. Right now, our light comes on and never goes off again. What we want is for it to wait a moment before going off again. We are going to use a wait block for this.

Under the Control tab, grab a wait 1 secs block and attach it to the bottom of your stack. Now the program knows to wait for a second every time it gets there. To turn the LED off again, grab another set GPIO output to block and drag it to the bottom.

This time we want it to turn the LED off, by setting the GPIO to output low. Click the little drop down arrow next to output high and change it to output low. Don’t forget this block also needs the same GPIO number as the one above it!

It should look like this:

getting started with scratch on raspberry pi

Now when you click the block of code, the cat should move and the LED should turn on for one second before turning off. Right now, this only works when we click our code block. Let’s make a button to do it instead.

Button, Button, I’ve Got the Button!

We need something to click to tell our cat to move. An arrow should do the trick! In the Sprites window on the bottom left, click the button next to New sprite. This will let us choose from a library of sprites that comes with Scratch.

getting started with scratch on raspberry pi

We are using the sprite Arrow1 as it seems appropriate for our program, but you can use whichever sprite you like. You can even draw your own sprites in Scratch, or upload images you have made elsewhere to use. Once you have added your arrow it should appear in the same pane as your cat on the left. Drag the cat to the left side of the screen and your arrow to the top like this:

getting started with scratch on raspberry pi

We need to give our arrow its own set of blocks. Double click on the arrow sprite, you should see that the pane on the right is empty now. We want our cat to run their block of code every time the arrow is clicked.

To do this, grab the when this sprite clicked block from the Events tab. This means that whenever you click on the arrow, its block will start running. Now we need to send a message to our cat whenever that happens. Luckily, Scratch will let us do exactly that.

Receiving You, Loud and Clear!

We will send a message to our cat using the broadcast block. Grab it from the Events tab and slot it under the when this sprite clicked block. This block will send a message to every other sprite in our program. Right now it says message1, but lets add our own message by clicking the drop down arrow next to message1 and selecting new message. Type go into the window that pops up and click ok.

getting started with scratch on raspberry pi

Now double click on the cat again. We need to tell the cat to listen for this broadcast message. Drag the When I receive block to the very top of the stack we have already made, and make sure the drop down menu reads go as well. Now, every time you click the arrow in the left pane it broadcasts go, the cat receives go and moves, and the LED should light up.

getting started with scratch on raspberry pi

Well done! It’s looking good! There is just one final thing we can do to make it even better.

Never-Ending Cat Story

If you’ve clicked your arrow enough times, you’ll probably notice that your cat has gone off the right side of the screen. We could just grab it and drag it back each time, but good programmers are lazy, and they make the code do the work for them. Lets be good programmers and use blocks to make our cat move back by itself.

Drag the cat back to the left side of the screen, and make sure it isn’t touching the edge. Place your mouse pointer over the middle of the cat sprite, and look in the bottom corner of the left pane. There will be an x and a y there followed by two numbers. Write these down, we will need them in a minute.

getting started with scratch on raspberry pi

Every time our cat moves we want to tell it: if you are touching the right side of the screen, go back to the start. We can use blocks to tell it this. Start by grabbing the if then block from the Control tab and drag it under your code blocks. This one looks a bit different, it has a diamond gap at the top, and a gap in the middle. We use these gaps to tell it what to do.

getting started with scratch on raspberry pi

Now go to the Sensing tab, and select touching mouse-pointer? block. You will notice it is a diamond shape, which fits perfectly into the diamond gap in the if then block. If you are having trouble getting it to fit in, drag it to the right side of the if then first, and move it left until you see the diamond shaped gap glow. You’ll also notice it says mouse-pointer which isn’t what we want. Use the drop down menu to select edge instead.

getting started with scratch on raspberry pi

So far, this part of the block is saying If the cat touches the edge do… nothing so far. Let’s change that.

Back to the Beginning

Our if <touching edge> then block has a gap that needs filling. Go to the Motion tab, and select the go to x: y: block, and drag it into the gap in our if <touching edge> then block.

Scratch is quite clever, and will have put the x and y numbers where your cat sprite is positioned already, but check that these numbers match the ones you wrote down earlier. If they don’t, change them by clicking on the white boxes next to x: and y:.

The full code block for your cat should look like this.

getting started with scratch on raspberry pi

This is now a fully functional program! When you click the arrow enough times that your cat hits the other side of the window, he will pop back to the start again.

getting started with scratch on raspberry pi

That’s it, we are finished. Well done!

Now You Can Use Scratch on Raspberry Pi

Today you have created a program which incorporated animation (when the cat moved), DIY electronics (building an LED circuit and controlling it), and some programmer’s logic to make your life a little easier.

All without having to write a single line of code.

If you are a parent or teacher, there are lots of great ways to introduce kids to coding, and plenty of fantastic beginner hardware projects suited for young minds. Anything that makes DIY electronics and computing accessible to children can broaden the way they think and set them up with the fundamentals to learn bigger and better things down the line. 7 Best Coding Apps for Kids to Learn Programming 7 Best Coding Apps for Kids to Learn Programming Coding apps offer ample opportunities to teach children programming. It’s a fun, controlled environment. Rather than send children to a coding boot camp, check out these five coding apps for kids to learn programming. Read More

Enjoyed this article? Stay informed by joining our newsletter!

The Best Google Online Courses You Aren’t Taking

Source: https://www.makeuseof.com/tag/best-google-online-courses/
Capture Date: 27.03.2018 23:54:39

Advertisement

Did you know that Google offers a vast array of online courses? They cover everything from digital marketing to Android app development. Some even come with a certification.

Despite the impressive breadth of topics, Google doesn’t make it particularly easy to find the courses it offers. There’s no centralized dashboard or list of links. To complicate matters further, some courses are accessible through Google’s portals, whereas others require you to register with a massive open online course (MOOC) service such as Udacity.

Which are the best online Google courses? We’re going to take a closer look. This list looks at seven great options. For each one, we’ve looked at real-world benefits such as median pay and employer demand.

1. Digital Marketing

hqdefault.jpg

Cost: Free
Timeline: Self-paced

The Digital Marketing course teaches students the concepts of clickthrough rates, landing page experience, campaign optimization, and return on investment.

They’ll also learn about the benefits of targeted advertising and understand the technical and cultural challenges that can impact on the success of an online advertising campaign.

The course came in the form of the Google Online Marketing Challenge (GOMC). Students formed teams of three to six members and devised an online advertising strategy for a client business or a non-profit organization. Google won’t host the GOMC for 2017-18 though all educational materials remain free on the site.

At the end of the course, students will need to need to pass 2 of the AdWords certification exams to become an AdWords certified professionals. The exam is optional but encouraged.

According to Glassdoor.com, the average salary for a digital marketing professional in 2018 is $67,230 per year. Better yet, according to a Left Bank report, demand for digital marketing talent is at 56 percent, but active supply is only at 24 percent.

2. Android Development for Beginners

best google online courses

Cost: Free
Timeline: Approximately 2 weeks

The Android operating system controls around 85 percent of the global smartphone market share. Given its popularity, and given we’re increasingly moving towards an app-driven economy, knowing how to create content for the Android platform is a fantastic skill to develop. 6 Awesome YouTube Videos To Help You Learn Android Development 6 Awesome YouTube Videos To Help You Learn Android Development Want to learn how to develop Android apps? Then these YouTube videos are perfect for you. Read More

The free Android Development for Beginners course is only available on Udacity. It’s a self-study course aimed at people with no prior experience of coding. If you have a personal blog or small online store that you’d like to make an app for, this is the course for you.

It consists of five modules: User Interface, User Input, Multi-Screen Apps, Networking, and Data Storage. Over the course of the five modules, you will build a complete and functioning Android app.

If you’re willing to pay Udacity’s $199 per month fees, you can upgrade the free course into a “nanodegree.”

Glassdoor lists the average annual salary for an Android developer as $97,986. Obviously, this course alone won’t be enough to get you a high paid job; you also need experience. It will, however, get you started on track towards a well-paid career.

3. App Monetization

best google online courses

Cost: Free
Timeline: Approximately 1 month

Having a business idea, creating a company, and marketing your product is only half the battle. You also need to monetize your concept in a sustainable way. 10 Low-Cost Ideas for Online Businesses You Can Start 10 Low-Cost Ideas for Online Businesses You Can Start If you’ve ever wanted to start a business, now is the time! Here are 10 ideas for free or low-cost business you can start online to make your fortune. Read More

In the digital world, that’s easier said than done. Traditional sources of income—such as online ad revenues—are falling for many organizations. And the lack of a successful monetization strategy continues to hamper several tech giants, with Twitter perhaps the most noteworthy.

This course, which is free on Udacity, mixes theory with real-world examples. It aims to help to develop, implement, and measure your monetization strategy.

A Senior Monetization Manager at a well-known tech company like Twitter or Facebook can expect to earn at least $120,000 per year. Some roles offer as much as $180,000.

4. Mobile Web Specialist

hqdefault.jpg

Cost: Free
Timeline: Self-paced

The days when everyone used to access the web using a desktop monitor are long gone. Today, you can access websites using everything from your smartwatch to your television.

The vast array of devices we use to go online cause headaches for web developers. Sites and web apps need to be flexible and responsive.

If you take the Mobile Web Specialist course, you’ll learn how to write code to create offline-first experiences, audit an app’s performance, debug problems and a whole lot more.

At the end of the course, you will receive an official Google certification. The exam for the final certificate consists of coding challenges and an interview. The course and exam combined cost $99 to undertake.

Glassdoor’s research suggests you will earn an average salary of $88,488 per year if you’re a mobile web developer in 2018.

5. E-Commerce Analytics: From Data to Decisions

hqdefault.jpg

Cost: Free
Timeline: 2 to 4 hours to complete

E-commerce Analytics introduces you to reporting and analysis techniques for online e-commerce businesses. In the business world, e-commerce analytics is a sought-after skill. Glassdoor says the average salary is $110,232 per year.

The self-study course is divided into three units and a total of 15 lessons. Unit One offers an introduction to e-commerce analytics, Unit Two looks at how to understand your customers, and Unit Three is about understanding shopping behavior.

The course assumes that students have a good understanding of Google Analytics, so it’s not for complete beginners. If you’re new to Google Analytics, you should take Google Analytics for Beginners first.

An e-commerce manager can earn about $110,000 per year.

6. Google Analytics Individual Qualification

hqdefault.jpg

Cost: Free
Timeline: Self-paced. The exam is 90 minutes long.

It’s quite easy to learn the basics of Google Analytics, but it’s an enormously powerful tool when in the hands of a more knowledgeable user.

The Google Analytics Individual Qualification exam is part of the Academy for Ads. It covers all aspects of the Google Analytics app, including planning, implementation and data collection, configuration and administration, conversion and attribution, and reports, metrics, and dimensions.

To undertake the exam, you first need to complete Google Analytics for Beginners and Advanced Google Analytics.

The exam is free to take. When you complete it, you will get a certification that’s valid for 18 months from the date that you pass. Also, the Google Analytics certification assessments are available in 19 languages. Check out the bundle of courses from Google Analytics Academy.

A web analytics manager is a vital role within any company that has a significant web presence. Salaries are often around $110,000 per year.

7. Localization Essentials

hqdefault.jpg

Cost: Free
Timeline: Approximately 2 weeks

It’s easy to forget that there’s a whole world of web content out there that’s not in your native language. English is responsible for about 40 percent of all web pages, but only 25 percent of web users speak English as their first language.

If you’ve successfully created an app or product, you might want to try and break into the non-English markets. And for that, you need localization skills.

Localization is about more than translating an app into another language (though that is part of it). It’s also about adapting your product to be a cultural fit for another geographic market.

Localization Essentials will teach you about the importance of intangible things such as language tone, but also about technical issues such as date and time formats, alphabetization, and the direction of reading. The course is free.

A localization specialist earns $61,263 per year, according to Glassdoor.

The Best Google Courses to Take Now

We’ve introduced you to seven of the best Google online course. But there are hundreds more out there. Some only take a few hours to complete. Check out the lists on Udacity and Class Central to get a flavor of what else is available.

Enjoyed this article? Stay informed by joining our newsletter!

Google’s New Playbook Beta App Helps Developers Create And Launch Successful Apps

Source: https://www.androidpolice.com/2016/05/18…nch-successful-apps/
Capture Date: 21.03.2018 00:14:06

Developers got a nice treat earlier today when Google released a new dashboard app in the Play Store. That one is available to all right away, but there’s another new developer-oriented release called Playbook that you’ll have to join a beta to get. Playbook is an app that aggregates help articles, tips, and videos that help you create a better app.

As with all Play Store betas, the link below will not work right now until you join the beta. After you get the app installed, it’ll ask you to personalize by choosing the areas of interest to you. It has everything from kids apps, to design, to enterprise apps. Everything is split up into general topics including, develop, launch, engage, grow, and earn.

Your settings are used to generate the My Playbook section of the app. It keeps track of your progress through this suggested list and includes swipe actions on each item. There’s also a full “Explore” part of the app where you can just check out everything Google has to offer. We’ve got the app on APK Mirror in the event you don’t want to mess around with the beta signup.

Playbook for Developers - Tips to Grow a Business