<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0" xmlns:cc="http://cyber.law.harvard.edu/rss/creativeCommonsRssModule.html">
    <channel>
        <title><![CDATA[Next Tech - Medium]]></title>
        <description><![CDATA[Making tech education accessible for everyone. - Medium]]></description>
        <link>https://medium.com/nexttech?source=rss----9c3c49ca8a1f---4</link>
        <image>
            <url>https://cdn-images-1.medium.com/proxy/1*TGH72Nnw24QL3iV9IOm4VA.png</url>
            <title>Next Tech - Medium</title>
            <link>https://medium.com/nexttech?source=rss----9c3c49ca8a1f---4</link>
        </image>
        <generator>Medium</generator>
        <lastBuildDate>Sun, 15 Nov 2026 01:12:28 GMT</lastBuildDate>
        <atom:link href="https://medium.com/feed/nexttech" rel="self" type="application/rss+xml"/>
        <webMaster><![CDATA[yourfriends@medium.com]]></webMaster>
        <atom:link href="http://medium.superfeedr.com/" rel="hub"/>
        <item>
            <title><![CDATA[Next Tech’s Commitment to Accessibility]]></title>
            <link>https://medium.com/nexttech/next-techs-commitment-to-accessibility-a9b9b4ff1e94?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/a9b9b4ff1e94</guid>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[accessibility]]></category>
            <category><![CDATA[a11y]]></category>
            <dc:creator><![CDATA[Cullen Schill]]></dc:creator>
            <pubDate>Wed, 22 Jul 2020 20:12:20 GMT</pubDate>
            <atom:updated>2020-07-22T20:14:43.322Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*V7VlPQLCmYG93KrWPlM7kg.png" /></figure><p>Our mission at Next Tech is to make technology education accessible for everyone. While this has always been our goal, it was not something our product truly delivered on until recently, when we made an enormous investment into improving the accessibility of our product for users with disabilities. In this post we talk about the challenges we faced improving the accessibility of our web-based development interface, including specific techniques that we hope will be useful for others striving to do the same. We also discuss how this commitment to product accessibility naturally extends throughout our company and the positive impact that stemmed from this.</p><p>Let us start with a brief story. Starting in 2019, we increasingly heard the word “accessibility” from our customers. It quickly became clear that ensuring products were accessible for users with disabilities was something that students, instructors, and education institutions alike were thinking about more than ever. Seemingly all at once, education companies around the world heard the calls for increased accessibility and began to respond.</p><p>Next Tech did the same. Over the last half of 2019 and the start of 2020, we have launched an engineering initiative dedicated to addressing the problems faced by users with disabilities who are learning to code. After thoroughly researching the challenges presented by web-based products, we educated ourselves on the practical solutions to these problems. At the highest level, the goal of making accessible software is to ensure that it is perceivable, operable, and understandable by all. There are many considerations and methods that make this possible, but the most important thing is to start. Providing an accessible product requires ongoing investment, so the sooner you can begin releasing improvements, the better.</p><p>Our first steps were to assess the visual choices we had made in the past. We identified and fixed several issues throughout our product to make it easier to use for those with limited vision, for example, making colors easier to see by improving their contrast and increasing font sizes that were too small. This, like many accessibility improvements, benefits all of our users — even those without disabilities — by making the product easier for everyone to see.</p><p>After making some of those visual changes, we tackled keyboard usability. This is something critical for people who are visually impaired, as well as people with limited dexterity that leaves them unable to use a mouse or similar pointing device. It is also something that many advanced users, such as software developers, expect from a software development interface.</p><p>This is where we faced our biggest challenge. Because our product contains a full-featured code editor, we needed to ensure users could use their keyboard’s Tab key to navigate through our interface when needed while still being able to use Tab when writing code in the editor. After much internal discussion, we found a solution. By “wrapping” the code editor in an overlay with a message that informs anyone using a keyboard that they can “enter” and “exit” the component using a certain key combination. Once they have “entered” the editor they are able to type and use the keyboard as they would in a standalone application. Once finished they can use an “exit” key combination to resume navigating the page as before. We have found this solution to provide a seamless experience without affecting those using a mouse or similar input.</p><p>Another major challenge we faced was updating our product to be more usable with screen readers. Screen readers allow a visually impaired user to interact with modern applications by reading out the current state of an application or website and enabling them to interact with it accordingly. This is a challenge that the screen reader handles, but to function effectively it depends on the website being programmed in a specific way. The screen reader can expose the structure and state of an application to the user, but only if the website’s code is assembled correctly. This means that visual information (e.g., something that looks like a button or a footer) is not useful to screen readers. The button and footer must be explicitly labeled so the screen reader can convey that information to the user in a useful way. This also includes the state of an application, such as a menu being open or closed or a toggle being on or off.</p><p>Making these changes was quite a daunting task. Historically, much of our application was designed around making it “look right”, leaving a lot of room for ambiguous design choices. Since screen readers cannot handle ambiguity, we had to put some serious thought into some elements of our website. Understanding the expected interaction, what information needs to be conveyed, and how the application should respond were all factors behind our decisions. The strict requirements to ensure screen reader support has required us to be more deliberate in how we develop new user experiences, resulting in dozens of changes that make the product more consistent and usable for everyone.</p><p>We are thrilled with the improvements we have made to the accessibility of our product. But completing them resulted in an unexpected yet positive change: it helped us grow as a company. We have changed our mission statement to “making technology education accessible for everyone” to explicitly encompass our new focus on accessibility in all forms. Accessibility as an idea quickly spread to all levels of the company and became a lens through which we now view every new product, content, and growth initiatives.</p><p>As education continues to move online — an initiative that started years ago and has now been accelerated by COVID-19 — accessibility has become excruciatingly important. Where an instructor could previously help a student in person, there is now only a ZOOM call that presents nearly insurmountable challenges. Now, more than ever, making education products accessible is a challenge well worth the effort. We look forward to continuing to work with our customers in the years to come to ensure our product continues to make technology education accessible for everyone.</p><p>We have come a long way, but this is still the start of a journey for us. Follow us on Facebook or Twitter to stay in touch as we continue to work on making our product and technology education accessible for everyone.</p><p><em>A VPAT is available upon request. Please email hello@next.tech.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=a9b9b4ff1e94" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/next-techs-commitment-to-accessibility-a9b9b4ff1e94">Next Tech’s Commitment to Accessibility</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Build a Blackjack Command Line Game]]></title>
            <link>https://medium.com/nexttech/build-a-blackjack-command-line-game-e9d79caefbd7?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/e9d79caefbd7</guid>
            <category><![CDATA[learning-to-code]]></category>
            <category><![CDATA[game-development]]></category>
            <category><![CDATA[python]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[tutorial]]></category>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Tue, 06 Aug 2019 01:45:38 GMT</pubDate>
            <atom:updated>2019-08-06T01:45:20.929Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/685/1*aqRZ7upqHnffiStjAOTs6w.png" /></figure><p>In this tutorial, we’ll cover how to build a command line game for playing Blackjack using Python! You’ll get to build the game from start to finish, and when you’re done, you’ll have a fully functioning game to play from the command line.</p><p>While building the game, we’ll explore a few handy Python concepts, such as object-oriented programming using classes and how to manage a game loop. This tutorial is also extracted from an entire course on building a Blackjack game using a graphical user environment (GUI), which you can check out <a href="https://c.next.tech/2ZzbU7N">here</a> if you’re interested.</p><p>Sound fun? Let’s do it!</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/820/0*NwpTSgC9TT82IP1n.gif" /></figure><h3>What is Blackjack?</h3><p>Blackjack is a gambling game that requires only a deck of cards. The goal of the game is to get as close as possible to a hand worth 21 points as the dealer flips over your cards — but go over and you’re out!</p><p>In Blackjack, numbered cards (2 through 10) are worth their face value, picture cards (jack, queen, and king) are worth 10, and an ace is worth either 1 or 11 depending on your other cards. To start a hand, players place their bets and are dealt two cards face up. They can choose to “hit” (receive another card) or “stick” (stay with their current hand) as they attempt to get as close as possible to 21. If they chose to hit and go over 21, they “bust” and lose the hand (and the money they bet!).</p><p>Players face off against the dealer, who starts with one card face down and one face up. When all players have chosen to stick or have busted, the dealer then flips over their hidden card and either hits or sticks, their goal being to get a higher hand than any of the players.</p><p>If the dealer busts, they pay out the value of each player’s wager to that player, provided that the player hasn’t already busted. They also need to pay out if they don’t get a higher hand than a player.</p><p>There are a lot of other rules (of course!) that you can <a href="https://bicyclecards.com/how-to-play/blackjack/">read up on</a> if you’re interested, but the above is everything you need to know to build this game.</p><p>Okay, let’s get started with some coding!</p><h3>Installing Python</h3><p>If you don’t already have Python installed on your computer, you’ll need to do so based on the instructions <a href="https://realpython.com/installing-python/">here</a>. If you’d rather avoid that, you can grab an online coding sandbox with Python and other necessary libraries pre-installed <a href="https://nt.dev/python">here</a> (sign in required).</p><h3>Defining Classes</h3><p>Before we begin coding our blackjack game, it’s important we cover how we’ll use object-oriented programming, since we will need to utilize classes for our game.</p><p>We will begin by defining the classes that will be used in order to separate out different aspects of the game of blackjack. We will model three of the components of the game:</p><ul><li>Card: A basic playing card. The card belongs to a suit (hearts ♥, diamonds ♦, spades ♠, or clubs ♣) and is worth a certain value.</li><li>Deck: A collection of cards. The deck shrinks as cards are drawn and contains 52 unique cards.</li><li>Hand: Each player&#39;s assigned cards. A hand is what defines each player&#39;s score and thus who wins.</li></ul><p>Let’s begin with the simplest concept: the Card.</p><h3>The Card class</h3><p>The Card class will be the first class we define, as both of our other classes will need to use it. Create a Python file called <em>blackjack.py</em>, then add the following code:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1b707d512c0bd4968edcb79baf9318f8/href">https://medium.com/media/1b707d512c0bd4968edcb79baf9318f8/href</a></iframe><p>The only import we will need for our game is the random module. This will allow us to shuffle our virtual deck of cards at the beginning of every game.</p><p>Our first class will be one representing the playing cards. Each card will have a suit (hearts, diamonds, spades, and clubs) and a value (ace through king). We define the __repr__ function in order to change how the card is displayed when we call print on it. Our function will return the value and the suit, for example, King of Spades. That&#39;s all we need to do for a Card!</p><p>Next up, we need to create a Deck of these Card classes.</p><h3>The Deck class</h3><p>The Deck will need to contain 52 unique cards and must be able to shuffle itself. It will also need to be able to deal cards and decrease in size as cards are removed. Create the Deck class in the <em>blackjack.py</em> file using the below code:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/bf961a30d9d1b4c18d82320de2eb9b6e/href">https://medium.com/media/bf961a30d9d1b4c18d82320de2eb9b6e/href</a></iframe><p>When creating an instance of the Deck, we simply need to have a collection of every possible card. We achieve this by using a list comprehension containing lists of every suit and value. We pass each combination over to the initialization for our Card class to create 52 unique Card instances.</p><p>Our Deck will need to be able to be shuffled so that every game is different. We use the shuffle function in the random library to do this for us (how fitting). To avoid any potential errors, we will only shuffle a deck which still has two or more cards in it, since shuffling one or zero cards is pointless.</p><p>After shuffling, we will need to deal cards too. We utilize the pop function of a list (which is the data structure holding our cards) to return the top card and remove it from the deck so that it cannot be dealt again.</p><p>That’s it for the Deck class! The final utility class to be created for our game to work is the Hand. All players have a hand of cards, and each hand is worth a numerical value based on the cards it contains.</p><h3>The Hand class</h3><p>A Hand class will need to contain cards just like the Deck class does. It will also be assigned a value by the rules of the game based on which cards it contains. Since the dealer&#39;s hand should only display one card, we also keep track of whether the Hand belongs to the dealer to accommodate this rule.</p><p>Start with the below to create the Hand class in the <em>blackjack.py</em> file:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c896e844ccfbf68556ff3e2c41dccc0c/href">https://medium.com/media/c896e844ccfbf68556ff3e2c41dccc0c/href</a></iframe><p>Much like the Deck, a Hand will hold its cards as a list of Card instances. When adding a card to the hand, we simply add the Card instance to our cards list.</p><p>Within the Hand class, calculating the currently held cards value is where the rules of the game come into play the most:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/72d149d821e8a53eaa02914a665ce7bb/href">https://medium.com/media/72d149d821e8a53eaa02914a665ce7bb/href</a></iframe><blockquote><em>You may note that the above code is already indented. This is intentional and done below too! This way, you don’t need to perform the indents yourself and can focus on reading the instructions and code instead of chasing down whitespace errors.</em></blockquote><p>In this code, we first initialize the value of the hand to 0 and assume the player does not have an ace (since this is a special case).</p><p>Then, we loop through the Card instances and try to add their value as a number to the player&#39;s total, using the following logic:</p><ol><li>If the card’s value is numerical, we add its value to the value of this hand (self.value).</li><li>If it is not numerical, we check to see whether the card is an ace. If it is, we add 11 to the hand&#39;s value and set the has_ace flag to True.</li><li>If it is not an ace, we simply add 10 to the value of the hand.</li></ol><p>Once this is done, we check to see if there was an ace and the increase of 11 points brought the hand&#39;s value over 21. If so, we make the ace worth 1 point instead by subtracting 10 from the hand&#39;s value.</p><p>Now, we need some way for the game to display each hand’s cards, so we use a simple function to print each card in the hand, and the value of the player’s hand too. The dealer’s first card is face down, so we print hidden instead:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1f5e4f87cec5f1ea82413e9816c63f4d/href">https://medium.com/media/1f5e4f87cec5f1ea82413e9816c63f4d/href</a></iframe><p>Now that we have all of our underlying data structures written, it’s time for the main game loop!</p><h3>The Game Loop</h3><p>We will define the game’s main loop within its play method, so that to start a game, you will simply need to create an instance of the Game class and call .play() on it:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ee6afd1f85f0cdded27561613632bae7/href">https://medium.com/media/ee6afd1f85f0cdded27561613632bae7/href</a></iframe><p>The above code is pretty lengthy, so let’s break it down:</p><ul><li>We start off our loop with a Boolean (playing) which will be used to track whether or not we are still playing the game.</li><li>If we are, we need a shuffled Deck and two Hand instances—one for the dealer and one for the player.</li><li>We use the range function to deal two cards each to the player and the dealer. Our deal method will return a Card instance, which is passed to the add_card method of our Hand instances.</li><li>Finally, we display the hands to our player. We can use the display method on our Hand instances to print this to the screen.</li></ul><p>This marks the end of the code that needs to run at the beginning of every new game. Now, we enter a loop that will run until a winner is decided. We again control this with a Boolean (game_over):</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/80537976e860d1c66d12aacd89e8feb4/href">https://medium.com/media/80537976e860d1c66d12aacd89e8feb4/href</a></iframe><p>Before continuing, we first need to check for blackjack. If either player has been dealt an ace and a picture card, their hand will total 21, so they automatically win. Let&#39;s create the method to do this (under the play method):</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ea4b44b30c1768d8363b21c081105f81/href">https://medium.com/media/ea4b44b30c1768d8363b21c081105f81/href</a></iframe><p>We need to keep track of which player may have blackjack, so we will keep a Boolean for the player (player) and the dealer (dealer).</p><p>Next, go back to the while not game_over loop inside the play() method. We need to check whether either hand totals 21, which we will do using two ifstatements. If either has a hand value of 21, their Boolean is changed to True.</p><p>If either of the Booleans are True, then we have a winner, and will print the winner to the screen and continue, thus breaking us out of the game loop. To accomplish this, add the below directly underneath the player_has_blackjack, dealer_has_blackjack = self.check_for_blackjack() line of code:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/7cfb97eac619721562000492ffd74729/href">https://medium.com/media/7cfb97eac619721562000492ffd74729/href</a></iframe><p>We must once again pause to create the method show_blackjack_results(), which will print the winner to the screen. We do this by adding the code below underneath the check_for_blackjack method:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/50791ee918bba156be2bb43ec5c1c8ae/href">https://medium.com/media/50791ee918bba156be2bb43ec5c1c8ae/href</a></iframe><p>If neither player had blackjack, the game loop will continue.</p><p>The player can now make a choice — whether or not to add more cards to their hand (hit) or submit their current hand (stick). To do this, add the below to the playmethod:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1bb73a4a9f2d904c11c0b99291fd9294/href">https://medium.com/media/1bb73a4a9f2d904c11c0b99291fd9294/href</a></iframe><p>We use the input function to collect a choice from the user. This will always return us a string containing the text the user typed into the command line.</p><p>Since we have a string, we can cast the user’s input to lowercase using the lowerfunction to avoid having to check combinations of upper case and lower case when parsing their reply.</p><p>If their input is not recognized, we will simply keep asking for it again until it is:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/2256da66422e304f4c902911aec55fd5/href">https://medium.com/media/2256da66422e304f4c902911aec55fd5/href</a></iframe><p>Should the player choose to hit, they will need to add an extra card to their hand. This is done in the same way as before with the deal() and add_card()methods.</p><p>Since their total has changed, we will now need to check whether they are over the allowed limit of 21. Let&#39;s define a method that does this now:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/4a9c28380786eeed237017972b890e82/href">https://medium.com/media/4a9c28380786eeed237017972b890e82/href</a></iframe><p>This method simply checks whether the player’s hand value is over 21 and returns the information as a Boolean.</p><p>Now, back in the play method, add the following inside the if choice in [&#39;hit&#39;, &#39;h&#39;] block:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/936030642485eab94c236eb83c99b4c6/href">https://medium.com/media/936030642485eab94c236eb83c99b4c6/href</a></iframe><p>If the player’s hand has a value over 21, they have lost, so the game loop needs to break and we set game_over to True (indicating that the dealer has won).</p><p>Okay, now let’s handle when the player decides to stick with their hand. If they do this, it’s time for their score to be compared with the dealer’s. To do this, add the below aligned with the if choice in [&#39;hit&#39;, &#39;h&#39;] statement:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e97e46157a0b105ab03142604383783a/href">https://medium.com/media/e97e46157a0b105ab03142604383783a/href</a></iframe><p>We use the else statement here because we have already established that the user&#39;s answer was either hit or stick, and we have just checked hit. This means we will only get into this block when the user wants to stick.</p><p>The value of both the player’s and the dealer’s hand are printed to the screen to give the final results. We then compare the values of each hand to see which is higher.</p><p>If the player’s hand is a higher value than the dealer’s, we print You Win!. If the scores are equal, then we have a tie, so we print Tie!. Otherwise, the dealer must have a higher hand than the player, so we show Dealer wins!.</p><p>That completes the logic required for a user to play a single game. Now, let’s make it possible for them to play another game by adding the following at the end of the play method, outside of the while loop:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ba2443b7529d13c9a5b6f500d7d4e6f3/href">https://medium.com/media/ba2443b7529d13c9a5b6f500d7d4e6f3/href</a></iframe><p>We once again use the combination of lower and a while loop to ensure our answer is a y or n. If the player answers with n, we thank them for playing and set our playing Boolean to False, thus breaking us out of the main game loop and ending the program. If not, they must have answered y, so we set game_overto False and let our main loop run again. This will take us right back to the top at self.deck = Deck() to set up a brand new game.</p><h3>Running the Game</h3><p>We’ve completed the game! Now, it’s time to run this code. To do this, we simply create an instance of the Game class at the end of the file and call the play()method:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/338e2e791bb52335df38aaab06234f2f/href">https://medium.com/media/338e2e791bb52335df38aaab06234f2f/href</a></iframe><p>Now we have a game, give it a play. You can start the game by typing python3 blackjack.py into your command line (or pressing the blue &quot;Run&quot; button, if you&#39;re using the sandbox mentioned earlier).</p><p>You should see something like the following printed onto your screen:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ecf705318acfdbbd9a1fea464647de97/href">https://medium.com/media/ecf705318acfdbbd9a1fea464647de97/href</a></iframe><h3>Wrapping Up</h3><p>Congrats on working your way through this tutorial! In it, we covered how to build handy concepts like object-oriented programming, game flow design, and even the basics of Blackjack.</p><p>If you got stuck, the complete solution for this project can be found <a href="https://gist.github.com/saulcosta/13909e2e51f94ff7b37700c74b885ab6">here</a>. You can also launch an online coding sandbox with it preloaded <a href="https://next.tech/projects/94217701d98d/share?ref=ce315f8c">here</a>.</p><p>Two limitations of this game are that the dealer will never hit and there is no concept of betting. Feel free to add these features yourself if you’d like! Because a dealer is required to hit or stick at certain hand values, you can develop a program that mimic the dealer exactly.</p><p>You can also check out the <a href="https://c.next.tech/2ZzbU7N">full course</a> behind this tutorial, if you’d like!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=e9d79caefbd7" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/build-a-blackjack-command-line-game-e9d79caefbd7">Build a Blackjack Command Line Game</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Building your first React website]]></title>
            <link>https://medium.com/nexttech/building-your-first-react-website-cbd2919accb2?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/cbd2919accb2</guid>
            <category><![CDATA[javascript]]></category>
            <category><![CDATA[tutorial]]></category>
            <category><![CDATA[web-development]]></category>
            <category><![CDATA[beginner-coding]]></category>
            <category><![CDATA[react]]></category>
            <dc:creator><![CDATA[Andrew Sverdrup]]></dc:creator>
            <pubDate>Wed, 17 Jul 2019 13:31:01 GMT</pubDate>
            <atom:updated>2019-07-18T23:24:56.456Z</atom:updated>
            <content:encoded><![CDATA[<h3>Building Your First React Website</h3><p>React is one of the most popular web frameworks out there. It has been growing steadily in popularity for years, passing Angular for the first time in the <a href="https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks">2019 Stack Overflow developer survey</a>.</p><p>This post will show you how to create your own React website in just a few minutes. If you’re interested in learning more after completing this tutorial, checkout the <a href="https://c.next.tech/2EV7b89">Beginning React</a> course I just created on Next Tech to further improve your React skills.</p><p>For now, let’s dive right into building a website with React!</p><h3>Prerequisites</h3><p>To complete these steps you’ll need to have the Node Package Manager (npm) installed. If you don’t have it installed yet, head on over to <a href="https://www.npmjs.com/get-npm">https://www.npmjs.com/get-npm</a> to download and install npm.</p><blockquote>This will also install npx which we&#39;ll use to run create-react-app.</blockquote><h3>Create React App</h3><p>Create React App is an excellent way to quickly get a React website up and running. Create React App was created by Facebook (the same company that created React!). In their docs, they describe it as:</p><blockquote>Create React App is an officially supported way to create single-page React applications. It offers a modern build setup with no configuration.</blockquote><p>Knowing that <strong>Create React App is supported by the creators of React</strong> is a huge plus. Let’s use it to get started with our website!</p><p>Run the following command to create your site:</p><pre>npx create-react-app hello-react</pre><p><em>Note that it may take a couple minutes for this command to complete.</em></p><h3>Viewing the React website</h3><p>Next, run the following commands to start the React development server:</p><pre>cd hello-react<br>npm start</pre><p>At this point a browser tab should open showing your React site. If it doesn’t, visit <a href="http://localhost:3000/">http://localhost:3000</a> in your favorite browser to see your React site!</p><h3>Updating the site</h3><p>Now, let’s make a change to update the site. Open the <em>hello-react/src/App.js</em> file, then replace the line:</p><pre>Edit &lt;code&gt;src/App.js&lt;/code&gt; and save to reload.</pre><p>with:</p><pre>My first React website!</pre><p>If you open the web page again you’ll see that it updated without you having to refresh the page! Live reloading is one of the awesome features that Create React App configures for you.</p><figure><img alt="Create React App website" src="https://cdn-images-1.medium.com/max/1024/1*ewylDdWgxVjaUojQBXMiAg.png" /></figure><h3>Creating a React Component</h3><p>Next, we’ll create a new React component. First, create a folder in the <em>src</em> folder named <em>components</em>. Then create a file called <em>HomepageImage.js</em> in the <em>src/components</em> folder. This file will hold our new homepage image component.</p><p>We’ll create this component by adding the following code to the <em>HomepageImage.js</em> file:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/2402efe631347f789f2d54804720bca7/href">https://medium.com/media/2402efe631347f789f2d54804720bca7/href</a></iframe><p>Then, in <em>App.js</em>, replace</p><pre>&lt;img src={logo} className=”App-logo” alt=”logo” /&gt;</pre><p>with</p><pre>&lt;HomepageImage /&gt;</pre><p>We also need to import the component at the top of <em>App.js</em> by adding the following code to the top of the file:</p><pre>import HomepageImage from &#39;./components/HomepageImage&#39;</pre><p>Since we removed the image of the React logo, you can then remove this import for the logo as well:</p><pre>import logo from &#39;./logo.svg&#39;;</pre><p>The final <em>App.js</em> file should look like this:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/248c46f79c301b6287a1f357be7ce636/href">https://medium.com/media/248c46f79c301b6287a1f357be7ce636/href</a></iframe><p>Now, open <a href="http://localhost:3000/">http://localhost:3000</a> again in your browser. If everything is working, you should see the following page:</p><figure><img alt="Image of finished website" src="https://cdn-images-1.medium.com/max/1024/1*fKBlZaHbty8Xc23_gxKeWA.png" /></figure><p>Congratulations on creating your first website using React 🎉!</p><h3>Next steps</h3><p>This tutorial was a quick introduction to creating web pages with React. If you want to gain a better understanding of React so you can build awesome sites using it, checkout <a href="https://c.next.tech/2EV7b89">the course</a> I just released that teaches React!</p><p>Have you built a site with React? Feel free to share your URL or a link to your project on GitHub in the comments below to show it off!</p><p>Thanks for reading,</p><p>Andrew, Software Engineer @ Next Tech</p><p>Special thanks to <a href="https://unsplash.com/@mvdheuvel?utm_medium=referral&amp;utm_campaign=photographer-credit&amp;utm_content=creditBadge">Maarten van den Heuvel</a> for taking the photo of the Golden Gate Bridge used in this post!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=cbd2919accb2" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/building-your-first-react-website-cbd2919accb2">Building your first React website</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[An introduction to Object-Oriented Programming with Ruby]]></title>
            <link>https://medium.com/nexttech/introduction-to-object-oriented-programming-with-ruby-d594e1c6eebe?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/d594e1c6eebe</guid>
            <category><![CDATA[ruby]]></category>
            <category><![CDATA[tech]]></category>
            <category><![CDATA[learning-to-code]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[object-oriented]]></category>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Tue, 11 Jun 2019 06:56:01 GMT</pubDate>
            <atom:updated>2019-03-14T17:50:58.004Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1007/1*yk9cvq3T5pHUsObH3XiA1Q.png" /></figure><p><strong>Object-oriented programming</strong> (<strong>OOP</strong>) is a programming paradigm organized around objects. At a high level, OOP is all about being able to structure code so that its functionality can be shared throughout the application. If done properly, OOP can lead to very elegantly written programs that have minimal code duplication.</p><p>This is opposed to procedural programming (PP), in which you build programs in sequential order and call methods when you want shared behavior between pages in the application. Common procedural programming languages include <a href="https://en.wikipedia.org/wiki/C_(programming_language)">C</a> and <a href="https://en.wikipedia.org/wiki/Go_(programming_language)">Go</a>.</p><p>In this tutorial, you’ll learn the fundamental concepts of OOP for <strong>Ruby</strong>, an object-oriented programming language wherein everything is an object. We will be using Ruby since one of its defining attributes — in addition to its elegant syntax and readability — is how it implements OOP techniques. This makes it a great language to start learning OOP with.</p><p>We will cover:</p><ul><li>Creating classes</li><li>Instantiating objects</li><li>Initializing arguments</li><li>Working with inheritance, and</li><li>Private and public methods.</li></ul><p>In learning these concepts, we will build out our own application: an API connector that communicates dynamically with an application that sends a text message. This will include walking through how to leverage concepts such as inheritance and object instantiation to make our code more scalable and reusable!</p><p><em>This brief tutorial is adapted from Next Tech’s </em><a href="https://c.next.tech/2EyLhYk"><em>Introduction to Ruby course</em></a><em>, which includes an in-browser sandboxed environment and auto-checked interactive tasks to complete.</em></p><p><em>You can follow along with the code snippets in this tutorial using Next Tech’s sandbox which already has Ruby pre-installed. If you chose to use your own IDE, make sure Ruby is installed by following the instructions on the </em><a href="https://www.ruby-lang.org/en/documentation/installation/"><em>installation page</em></a><em>.</em></p><h3>Creating Classes</h3><p>Before we begin, let’s define what an <strong>object</strong> is. At its core, an object is a self-contained piece of code that contains data (“attributes”) and behavior (“methods”) and can communicate with other objects. Objects of the same type are created from <strong>classes</strong>, which act as blueprints that define properties and behavior.</p><p>Creating a class in Ruby is fairly easy. To define a class, simply type the class word followed by the name of the class, and end it with the end word. Anything contained between class and end belongs to this class.</p><p>Class names in Ruby have a very specific style requirement. They need to start with a letter and if they represent multiple words, each new word needs also to be an uppercase letter — i.e. “CamelCase”.</p><p>We’ll start by creating a class called ApiConnector:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/73b0b457a106b6f95a8b29b850668167/href">https://medium.com/media/73b0b457a106b6f95a8b29b850668167/href</a></iframe><p>Classes in Ruby can store both data and methods. In many traditional OOP languages such as Java, you need to create two methods for each data element you want to be included in the class. One method, the <strong>setter</strong>, sets the value in the class. The other method, the <strong>getter</strong>, allows you to retrieve the value.</p><p>The process of creating setter and getter methods for every data attribute can be tiresome and leads to incredibly long class definitions. Thankfully Ruby has a set of tools called <strong>attribute accessors</strong>.</p><p>Let’s implement some setters and getters for some new data elements for our class. Since it’s an API connector, it would make sense to have data elements such as title, description, and url. We can add these elements with the following code:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b731ee537464b0c45de91b057321ab10/href">https://medium.com/media/b731ee537464b0c45de91b057321ab10/href</a></iframe><p>When you merely create a class, it doesn’t do anything — it is simply a definition. In order to work with the class, we need to create an instance of it…we’ll cover that next!</p><h3>Instantiation</h3><p>To understand what <strong>instantiation</strong> is, let’s consider a real-world analogy. Let’s imagine that you’re building a house. The first task is to build a blueprint for the house. This blueprint would contain attributes and features of the house, such as the dimensions for each room, how the plumbing will flow, and so on.</p><p>Is the blueprint of the house the actual house? Of course not, it simply lists out the attributes and design elements for how the home will be created. So after the blueprint is completed, the actual home can be built — or, “instantiated”.</p><p>As explained in the previous section, in OOP, a class is the blueprint for an object. It simply describes what an object will look like and how it will behave. Therefore, instantiation is the process of taking a class definition and creating an object that you can use in a program.</p><p>Let’s create a new instance of our ApiConnector class and store it in a variable called api:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/a4746aac137bf36fc1f0db0a3f0258db/href">https://medium.com/media/a4746aac137bf36fc1f0db0a3f0258db/href</a></iframe><p>Now that we have an object created, we can use the api variable to work with the class attributes. For example, we can run the code:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/2344ac460d5379887d806dcd39b25535/href">https://medium.com/media/2344ac460d5379887d806dcd39b25535/href</a></iframe><pre>[Out:]<br>https://next.tech</pre><p>In addition to creating attributes, you can also create methods within a class:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/283ebc5ed0abd7cdc2857d51f012c3cf/href">https://medium.com/media/283ebc5ed0abd7cdc2857d51f012c3cf/href</a></iframe><p>To access this method, we can use the same syntax that we utilized with the attribute accessors:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/00d2bf9d564fcfecc685b6fa006186e8/href">https://medium.com/media/00d2bf9d564fcfecc685b6fa006186e8/href</a></iframe><p>Putting this all together, running the full class code below will result in the url and the test_method message to be printed:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/79fc0d62f78531d861568a06a5d731b3/href">https://medium.com/media/79fc0d62f78531d861568a06a5d731b3/href</a></iframe><pre>[Out:]<br>&quot;https://next.tech&quot;<br>&quot;testing class call&quot;</pre><h3>Initializer Method</h3><p>One thing you may find handy in Ruby development is the ability to create an <strong>initializer</strong> method. This is simply a method called initialize that will run every time when you create an instance of your class. In this method, you can give values to your variables, call other methods, and do just about anything that you think should happen when a new instance of that class is created.</p><p>Let’s update our ApiConnector to utilize an initializer method:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e5846104e20f3204f8720a3eac0affd3/href">https://medium.com/media/e5846104e20f3204f8720a3eac0affd3/href</a></iframe><p>Within the initialize method, we created an instance variable for each of the parameters so that we can use these variables in other parts of the application as well.</p><p>We also removed the attr_accessor method since the new initialize method will take care of this for us. If you need the ability to call the data elements outside of the class, then you would still need to have the attr_accessor call in place.</p><p>To test if the initialize method is working, let’s create another method within the class that prints these values out:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1954b1e1e488613de15f79c666994e1c/href">https://medium.com/media/1954b1e1e488613de15f79c666994e1c/href</a></iframe><p>Finally, we’ll instantiate the class and test the initialize method:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/8e8c1d286b9f6915c2e217b358473584/href">https://medium.com/media/8e8c1d286b9f6915c2e217b358473584/href</a></iframe><pre>[Out:]<br>&quot;My title&quot;<br>&quot;My cool description&quot;<br>&quot;https://next.tech&quot;</pre><h4>Working with optional values</h4><p>Now, what happens when we want to make one of these values optional? For example, what if we want to give a default value to the URL? To do that, we can update our initialize method with the following syntax:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/930f39ed7b88146a849bf27f2bfe8454/href">https://medium.com/media/930f39ed7b88146a849bf27f2bfe8454/href</a></iframe><p>Now our program will have the same output even if we don’t pass the url value while creating a new instance of the class:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/2f8f7f27411f7acc3f5dfd32d86be805/href">https://medium.com/media/2f8f7f27411f7acc3f5dfd32d86be805/href</a></iframe><h4>Using named arguments</h4><p>Though this looks simple, passing arguments can get complex in real-world Ruby applications because some methods may take a large number of arguments. In such cases, it becomes difficult to know the order of arguments and what values to assign to them.</p><p>To avoid this confusion, you can utilize named arguments, like this:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/8181078f26ad383118e1393b6f1e82e4/href">https://medium.com/media/8181078f26ad383118e1393b6f1e82e4/href</a></iframe><p>You can enter the arguments without having to look at the order in the initialize method, and even change the order of the arguments without causing an error:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e6b3160158b7425b5a61df63eb2814e7/href">https://medium.com/media/e6b3160158b7425b5a61df63eb2814e7/href</a></iframe><h4>Overriding default values</h4><p>What happens if we want to override a default value? We simply update our instantiation call like this:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/0b275e3be1bb5ce0844be413ed8719a0/href">https://medium.com/media/0b275e3be1bb5ce0844be413ed8719a0/href</a></iframe><p>This update will override our default value of https://next.tech, and calling api.testing_initializer will now print https://next.xyz as the URL.</p><h3>Inheritance</h3><p>Now, we are going to learn about an important object-oriented principle called <strong>inheritance</strong>. Before going into how it is executed in Ruby, let’s see why it’s important for building applications.</p><p>To start with, inheritance means your classes can have a hierarchy. It is best used when different classes have some shared responsibilities, since it would be a poor practice to duplicate code in each class for identical or even similar behavior.</p><p>Take our ApiConnector class. Let&#39;s say we have different API classes for various platforms, but each class shares a number of common data or processes. Instead of duplicating code in each of the API connector classes, we can have one <strong>parent class</strong> with the shared data and methods. From there, we can create <strong>child classes</strong> from this parent class. With the way that inheritance works, each of the child classes will have access to the components provided from the parent class.</p><p>For example, say we have three APIs: SmsConnector, PhoneConnector, and MailerConnector. If we wrote code individually for each of these classes, it would look like this:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1e1f5559c5a0a72bddc04777adf821a6/href">https://medium.com/media/1e1f5559c5a0a72bddc04777adf821a6/href</a></iframe><p>As you can see, we are simply repeating the same code across different classes. This is considered a poor programming practice that violates the <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a> (Don’t Repeat Yourself) principle of development. Instead, we can make an ApiConnector parent class, and each of the other classes can inherit the common functionality from this class:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c2d54443853614a6abe515cda825a3b3/href">https://medium.com/media/c2d54443853614a6abe515cda825a3b3/href</a></iframe><p>By leveraging inheritance, we were able to cut all of the duplicate code throughout our classes.</p><p>The syntax for using inheritance is to define the child class name, followed by the &lt; symbol, then the parent class name — i.e. our SmsConnector, MailerConnector, and PhoneConnector classes inherit from the ApiConnector class .</p><p>Each of these child classes now has access to the full set of elements provided in the parent ApiConnector class. For example, if we create a new instance of SmsConnector with the following parameters, we can call the send_sms method:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c672fe0fd1ab5dd730c1d986f5d20377/href">https://medium.com/media/c672fe0fd1ab5dd730c1d986f5d20377/href</a></iframe><pre>[Out:]<br>Sending SMS message with the title &#39;Hi there!&#39; and description &#39;I&#39;m an SMS message&#39;.</pre><p>A rule of thumb in OOP is to ensure that a class performs a single responsibility. For example, the ApiConnector class should not send SMS messages, make phone calls, or send emails since that would be three core responsibilities.</p><h3>Private and Public Methods</h3><p>Before we dive into private and public methods, let’s first go back to our original ApiConnector class and create a SmsConnector class that inherits from ApiConnector. In this class, we will create a method called send_sms that will run a script that contacts an API:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ff5db375f8c4d7b318dce689da9d412a/href">https://medium.com/media/ff5db375f8c4d7b318dce689da9d412a/href</a></iframe><p>This method will send a title and url to an API, which will in turn send an SMS message. Now we can instantiate the SmsConnector class and call the send_sms message:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/ed53f5350ad8ab864bef89f0d5897b7d/href">https://medium.com/media/ed53f5350ad8ab864bef89f0d5897b7d/href</a></iframe><p>Running this code will contact the SMS API and send the message. You can go to the bottom of <a href="http://edutechional-smsy.herokuapp.com/notifications">this page</a> to see your message!</p><p>Now, using this example, let’s discuss the types of methods provided by classes.</p><p>The send_sms method is a <strong>public method</strong>. This means that anyone working on our class can communicate with this method. This may not seem like a big deal if you are working on an application that no one else is working on. However, if you build an API or code library that is open sourced for others to use, it&#39;s vital that your public methods represent elements of functionality that you actually want other developers to use.</p><p>Public methods should rarely, if ever, be altered. This is because other developers may be relying on your public methods to be consistent, and a change to a public method may break components of their programs.</p><p>So, if you can’t change public methods, how can you work on a production application? That’s where <strong>private methods</strong> come in. A private method is a method that is only accessed by the class that it is contained in. It should never be called by outside services. This means that you can alter their behavior, assuming that these changes don’t have a domino effect and alter the public methods that they may be called from.</p><p>Usually private methods are placed at the end of the file after all the public methods. To designate private methods, we use the private word above the list of methods. Let’s add a private method to our ApiConnector class:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/df841e89693c45b45b26d3ff43dcad91/href">https://medium.com/media/df841e89693c45b45b26d3ff43dcad91/href</a></iframe><p>Notice how we’re calling this method from the inside of the initialize method of the ApiConnector class? If we run this code, it will give the following output:</p><pre>[Out:]<br>A secret message from the parent class</pre><p>Now child classes have access to methods in the parent class, right? Well, not always. Let’s remove the secret_method method from the initialize method in ApiConnector and try to call it from our SmsConnector child class, as shown here:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/4fd904179ad40590fb2075d7ff1a67c2/href">https://medium.com/media/4fd904179ad40590fb2075d7ff1a67c2/href</a></iframe><pre>[Out:]<br>Traceback (most recent call last):<br>main.rb:29:in `&lt;main&gt;&#39;: private method `secret_method&#39; called for #SmsConnector:0x000056188cfe19b0&gt; (NoMethodError)</pre><p>This is because the SmsConnector class only has access to the public methods from the parent class. The private methods are, by their nature, private. This means that they can only be accessed by the class that they are defined in.</p><p>So a good rule of thumb is to create private methods when they should not be used outside the class and public methods when they have to be available throughout the application or used by outside services.</p><h4>Wrapping up</h4><p>I hope you enjoyed this quick tutorial on the fundamental concepts of object-oriented programming in Ruby! We covered creating classes, attribute accessors, instantiation, initialization, inheritance, and private and public methods.</p><p>Ruby is a powerful object-oriented language used by popular applications, including our own here at Next Tech. With this foundational knowledge of OOP, you’re well on your way to developing your own Ruby apps!</p><p><em>If you’re interested in learning more about programming with Ruby, check out our Introduction to Ruby course </em><a href="https://c.next.tech/2EyLhYk"><em>here</em></a><em>! In this course we cover core programming skills, such as variables, strings, loops, and conditionals, more advanced OOP topics, and error handling.</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=d594e1c6eebe" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/introduction-to-object-oriented-programming-with-ruby-d594e1c6eebe">An introduction to Object-Oriented Programming with Ruby</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Learn the basics of Swift in less than ten minutes]]></title>
            <link>https://medium.com/nexttech/learn-swift-basics-in-5-minutes-30a530e23231?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/30a530e23231</guid>
            <category><![CDATA[tech]]></category>
            <category><![CDATA[coding]]></category>
            <category><![CDATA[learning-to-code]]></category>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[swift]]></category>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Tue, 11 Jun 2019 06:55:45 GMT</pubDate>
            <atom:updated>2019-04-09T18:35:29.075Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*S4__g3knEbuuE6qHyWIbNQ.png" /></figure><p>Swift is a relatively new programming language designed by Apple Inc., and was initially made available to Apple developers in 2014. It was primarily intended as a replacement for the aging Objective-C language that was the foundation of OS X and iOS software development at the time. It was made open source in December 2015. While it remains primarily used by developers targeting the Apple macOS and iOS platforms, Swift is also fully supported on Linux, and there are unofficial ports under development for Windows as well.</p><p>Unlike many object-oriented languages, which are based on older procedural languages — for example, C++ and Objective-C are based on C — Swift was designed from the ground up as a new, modern, object-oriented language that makes programming faster and easier, and helps developers produce expressive code that’s less prone to errors than many languages.</p><p>While not based on an older language, Swift, in the words of its chief architect, Chris Lattner, “<em>was inspired by drawing ideas from Ruby, Python, C#, CLU, and far too many others to list</em>”.</p><p>In this quick crash course, we will cover the fundamentals of using the Swift programming language. You’ll learn:</p><ul><li>Basic Swift syntax</li><li>Swift program structure</li><li>Variables and constants</li><li>Type inference</li><li>Variable and constant naming conventions</li><li>Printing and string interpolation</li></ul><p>Let’s get started!</p><blockquote>This crash course is adapted from Next Tech’s full Beginning Swift course, which includes an in-browser sandboxed environment with Swift pre-installed. It also has numerous activities for you to complete. You can check it out for free <a href="https://c.next.tech/2FkiuWI">here</a>!</blockquote><h3>Swift Syntax</h3><p>In this first section, we’ll look at the basic language syntax for Swift.</p><p>Like many modern programming languages, Swift draws its most basic syntax from the programming language C. If you have previous programming experience in other C-inspired languages, many aspects of Swift will seem familiar, for example:</p><ul><li>Programs are made up of statements, executed sequentially.</li><li>More than one statement is allowed per editor line when separated by a semicolon (;).</li><li>Units of work in Swift are modularized using functions and organized into types.</li><li>Functions accept one or more parameters, and return values.</li><li>Single and multiline comments follow the same syntax as in C++ and Java.</li><li>Swift data type names and usage are similar to that in Java, C#, and C++.</li><li>Swift has the concept of named variables, which are mutable, and named constants, which are immutable.</li><li>Swift has both struct and class semantics, as do C++ and C#.</li></ul><p>However, Swift has some improvements and differences from C-inspired languages that you may have to become accustomed to, such as:</p><ul><li>Semicolons are <em>not required</em> at the end of statements — except when used to separate multiple statements typed on the same line in a source file.</li><li>Swift has no main() method to serve as the program’s starting point when the operating system loads the application. Swift programs begin at the first line of code of the program’s source file — as is the case in most <strong>interpreted</strong> languages.</li><li>Functions in Swift place the function return type at the right-hand side of the function declaration, rather than the left.</li><li>Function parameter declaration syntax is inspired by Objective-C, which is quite different and often at first confusing for Java, C#, and C++ developers.</li><li>The difference between a struct and a class in Swift is similar to what we have in C# (value type versus reference type), but not the same as in C++ (both are the same, except struct members are public by default).</li></ul><h3>Swift Program Structure — Hello, World!</h3><p>To illustrate the basic structure of a Swift program, let’s create a simple Swift program to display the string Hello, World. to the console:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e984243ef0ac9b21ed70fd0a77d4f5a1/href">https://medium.com/media/e984243ef0ac9b21ed70fd0a77d4f5a1/href</a></iframe><pre>[Out:]<br>Hello, World</pre><blockquote>If you are using Next Tech’s sandbox, you can follow along with the code snippets in this crash course by simply typing in the editor. Otherwise, you can follow along with your own IDE — just make sure that Swift is installed!</blockquote><p>Congratulations! In two lines of code, you’ve just written your first fully-functional Swift program.</p><p>Now, let’s move on to learning about and using the Swift language — and break down each part of your Hello World program!</p><h3>Swift Variables</h3><p>Virtually all programming languages include the ability for programmers to store values in memory using an associated name chosen by the programmer. <strong>Variables</strong> allow programs to operate on data values that change during the run of the program.</p><p>A Swift variable declaration uses the following basic syntax:<br>var &lt;variable name&gt; : &lt;type&gt; = &lt;value&gt;</p><p>Given this syntax, a legal declaration for a variable called pi would be:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/fcae71131a8e8fef03e335384304bcdc/href">https://medium.com/media/fcae71131a8e8fef03e335384304bcdc/href</a></iframe><p>This declaration means: “<em>create a variable named </em><em>pi , which stores a </em><em>Doubledata type, and assign it an initial value of </em><em>3.14159</em>”.</p><h3>Swift Constants</h3><p>You may want to store a named value in your program that will not change during the life of the program. How can we ensure that, once defined, this named value can never be accidentally changed by our code? By declaring a <strong>constant</strong>!</p><p>In our earlier Hello, World program, we declared message using let instead of var — therefore, message is a constant.</p><p>Since message was declared as a constant, if we added the following line of code to the end of our program, we would receive a compile-time error, since changing a let constant is illegal:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/10202d44734001f28d2d347c9abfb104/href">https://medium.com/media/10202d44734001f28d2d347c9abfb104/href</a></iframe><pre>[Out:]<br>error: cannot assign to value: ‘message’ is a ‘let’ constant</pre><p>Generally, any time you create a named value that will never be changed during the run of your program, you should use the let keyword to create a constant. The Swift compiler enforces this recommendation by creating a compile-time warning whenever a var is created that is not subsequently changed.</p><p>Other than the restriction on mutating the value of a constant once declared, Swift variables and constants are used in virtually identical ways.</p><h3>Type Inference</h3><p>In our Hello World example, we created the constant message without specifying its data type. We took advantage of a Swift compiler feature called <strong>type inference</strong>.</p><p>When you assign the value of a variable or constant as you create it, the Swift compiler will analyze the right-hand side of the assignment, <strong>infer</strong> the data type, and assign that data type to the variable or constant you’re creating. For example, in the following declaration, the compiler will create the variable name as a String data type:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/54061548ac51451e7ff6b74d5db9c461/href">https://medium.com/media/54061548ac51451e7ff6b74d5db9c461/href</a></iframe><p>As a <strong>type-safe</strong> language, once a data type is inferred by the compiler, it remains fixed for the life of the variable or constant. Attempting to assign a non-string value to the name variable declared above would result in a compile-time error:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/02182d83b0818b3c96ddd80b7127551e/href">https://medium.com/media/02182d83b0818b3c96ddd80b7127551e/href</a></iframe><pre>[Out:]<br>error: “cannot assign value of type ‘Double’ to type ‘String’</pre><p>While Swift is a type-safe language, where variable types are explicit and do not change, it is possible to create Swift code that behaves like a dynamic type language using the Swift Any data type. For example, the following code is legal in Swift:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c5f60af5213470840c1c1efdc2f8ce28/href">https://medium.com/media/c5f60af5213470840c1c1efdc2f8ce28/href</a></iframe><p>While this is legal, it’s not a good Swift programming practice. The Any type is mainly provided to allow bridging between Objective-C and Swift code. To keep your code as safe and error-free as possible, you should use explicit types wherever possible.</p><h3>Variable Naming Conventions</h3><p>Swift variables and constants have the same naming rules as most C-inspired programming languages:</p><ul><li>Must not start with a digit</li><li>After the first character, digits are allowed</li><li>Can begin with and include an underscore character</li><li>Symbol names are case sensitive</li><li>Reserved language keywords may be used as variable names if enclosed in backticks. For example:</li></ul><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b279714a6815c3a97de476ae6b512ed9/href">https://medium.com/media/b279714a6815c3a97de476ae6b512ed9/href</a></iframe><p>When creating variable and constant names in Swift, the generally accepted naming convention is to use a <strong>camelCase</strong> naming convention, beginning with a lowercase letter. Following generally accepted <a href="https://swift.org/documentation/api-design-guidelines/#follow-case-conventions">naming conventions</a> makes code easier for others to read and understand.</p><p>For example, the following would be a conventional variable declaration:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/fcc34abb28a69272def44d9ca95404b2/href">https://medium.com/media/fcc34abb28a69272def44d9ca95404b2/href</a></iframe><p>However, the following would not be conventional, and would be considered incorrect by many other Swift developers:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b522666baad09c2d88c58d238756c4a2/href">https://medium.com/media/b522666baad09c2d88c58d238756c4a2/href</a></iframe><p>Unlike many other programming languages, Swift is not restricted to the Western alphabet for its variable name characters. You may use any Unicode character as part of your variable declarations. The following variable declarations are legal in Swift:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/42a3c81765c05a2cec5a55b120abe2ed/href">https://medium.com/media/42a3c81765c05a2cec5a55b120abe2ed/href</a></iframe><p>Note that just because you <em>can</em> use any Unicode character within a variable name, and can use reserved words as variables when enclosed in backticks, it doesn’t mean you <em>should</em>. Always consider other developers who may need to read and maintain your code in the future. The priority for variable names is that they should make code easier to read, understand, and maintain.</p><h3>Printing and String Interpolation</h3><p>In Swift, you can print a variable or a constant to your console using the print() function. Let’s create a variable and a constant and print them out.</p><p>Execute this snippet in your Code Editor to create a constant named name, and a variable named address:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/c9f2749433fcb216a39c649ba617ea17/href">https://medium.com/media/c9f2749433fcb216a39c649ba617ea17/href</a></iframe><pre>[Out:]<br>John Does lives at 201 Main Street</pre><p>Both name and address store string text. By wrapping the variable or constant name in a pair of parentheses, prefixed by a backslash (\), we are able to print their stored values in a print statement — this is called <strong>string interpolation</strong>.</p><p>I hope you enjoyed this quick crash course on the basics of Swift! We learned about basic syntax and program structure, how to declare and use Swift variables and constants, type inference, printing, and string interpolation.</p><p><em>If you are interested in learning more about Swift, we have a full </em><a href="https://c.next.tech/2FkiuWI"><em>Beginning Swift</em></a><em> course at Next Tech that you can start for free! In this course we cover:</em></p><ul><li><em>Other basic programming concepts such as: optionals, tuples, enums, conditionals and loops, methods, structs, and classes.</em></li><li><em>Creating scripts and command line applications in Swift</em></li><li><em>Using Swift outside of iOS and macOS development lifecycles</em></li></ul><p><em>Happy learning!</em></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=30a530e23231" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/learn-swift-basics-in-5-minutes-30a530e23231">Learn the basics of Swift in less than ten minutes</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Tracking System Metrics with collectd]]></title>
            <link>https://medium.com/nexttech/tracking-system-metrics-with-collectd-f5bcec435fd0?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/f5bcec435fd0</guid>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Tue, 11 Jun 2019 06:54:26 GMT</pubDate>
            <atom:updated>2019-05-30T15:38:17.379Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*QZMGol5KJn_fVQZzyGvLAQ.png" /></figure><p>Collecting system metrics allows system administrators to monitor available resources, detect bottlenecks, and make informed decisions about servers and projects.</p><p>At Next Tech, we use system metrics we gather for many things, such as:</p><ul><li>Detecting an issue, like a server that doesn’t have enough resources.</li><li>Conversely, for identifying areas we could be saving money by reducing a server’s resources.</li><li>Ensuring that all services (like a web server or database) are running.</li></ul><p>In this tutorial we will go over how to install and configure <a href="https://collectd.org/index.shtml"><strong>collectd</strong></a>, which is an open source daemon that collects system performance statistics and provides ways to store and publish them. Then, using the collectd&#39;s write_http plugin, we will send our metrics data to a <strong>Flask</strong> application using HTTP POST requests.</p><p>Let’s get started!</p><h3>Step 1: Load a Python environment</h3><p>The easiest way to jump into a Python sandbox is using the Next Sandbox, which gives you access to an online computing environment in a couple of seconds. You can <a href="https://c.next.tech/2JXL8kg">click here</a> to launch one, or <a href="https://realpython.com/installing-python">here</a> to read about how you can install Python on your computer.</p><h3>Step 2: Installing collectd</h3><p>The first step is to install collectd. You can do this by entering the following commands in your terminal:</p><pre>apt-get update<br>apt-get install collectd</pre><p>Once collectd is installed successfully, move on to the next step — configuring the daemon!</p><h3>Step 3: Configuring collectd</h3><p>We need to configure collectd so that it knows what data to collect and how to send the values collected.</p><p>The collectd configuration file can be found at etc/collectd/collectd.conf. If you know Vim, you can modify the configuration file directly by running:</p><pre>vim etc/collectd/collectd.conf</pre><p>Otherwise, we will link the config file to one that is easily editable in the Sandbox. To do so, run the following three commands in your terminal to link the original configuration file to our new one:</p><pre>cp /etc/collectd/collectd.conf /root/sandbox/collectd.conf<br>rm /etc/collectd/collectd.conf<br>ln -s /root/sandbox/collectd.conf /etc/collectd/collectd.conf</pre><p>Now, open the file and take a look at the default collectd configuration. There are four sections in this file: Global, Logging, LoadPlugin Section, and Plugin Configuration.</p><h3>Global</h3><p>The first part of the file displays the Global Settings. The lines beginning with a hash (#) are commented out — we will remove some of these hashes so that these settings are as follows:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b289a04069ced766bd4d184ab5bc4bdf/href">https://medium.com/media/b289a04069ced766bd4d184ab5bc4bdf/href</a></iframe><h3>Logging</h3><p>The next section of the configuration file displays plugins used for logging messages generated by the daemon when it is initialized and when loading or configuring other plugins.</p><p>For each plugin in this section (and the next), there is a LoadPlugin line in the configuration, followed by the plugin&#39;s options. Almost all of these lines are commented out in order to keep the default configuration lean.</p><p>Only one log plugin should be enabled. We will be using using LogFile.</p><p>Remove the hash before the LoadPlugin logfile line and edit the plugin configuration to write the output to this file by changing the File parameter. This section should look like this:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/d6597d571f85241689ba456d5346a2a8/href">https://medium.com/media/d6597d571f85241689ba456d5346a2a8/href</a></iframe><p>Make sure the default logging plugin syslog is either removed or commented out.</p><h3>LoadPlugin section</h3><p>The next section displays a list of features. By default the following plugins are enabled:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/806/1*TbmAmI5rOaV_tbX14SG4Uw.png" /></figure><p>Our collectd daemon will automatically collect data using these plugins. A full list of the available plugins and a short description of each can be found <a href="https://git.octo.it/?p=collectd.git;a=blob;hb=master;f=README">here</a>.</p><p>We also want to enable the write_http plugin so that collectd will know where to send the data it collects:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/803/1*uik8n6-1G3h1Yq8huOLAJw.png" /></figure><p>Find this plugin in the list and remove the hash to enable it.</p><h3>Plugin configuration</h3><p>The final section shows the configuration for all the listed plugins. You can see all the plugin options in the <a href="https://collectd.org/documentation/manpages/collectd.conf.5.shtml">collectd.conf(5) manual</a>.</p><p>Find the plugin configuration for write_http. We will modify this to look like the following:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/4a712b485beef537a5d3a65463bb53e1/href">https://medium.com/media/4a712b485beef537a5d3a65463bb53e1/href</a></iframe><p>Note that we specified the format of our output to be in JSON.</p><p>We will not be modifying any of the other plugin configurations but feel free to do so on your own.</p><h3>Step 4: Verifying configuration</h3><p>It is important to restart collectd whenever the configuration file is changed. Run the following command in your terminal to do so:</p><pre>systemctl restart collectd</pre><p>You can also run this command to check the status of collectd:</p><pre>systemctl status collectd</pre><p>If all is working, you should see Active: active (running) in the output.</p><p>You should also be able to see that collectd was initialized and plugins were loaded in your collectd.log file.</p><p>Finally, we can verify whether there are issues in the configuration file by running the following:</p><pre>collectd -t ; echo $?</pre><p>This command tests the configuration, then exits. It should return the output 0.</p><h3>Step 5: Creating a Flask app</h3><p>We’ve gotten configd to track our metrics properly...now let&#39;s create a web application using Flask so collectd can send this data via HTTP POST requests!</p><p><strong>Flask</strong> is a powerful microframework for creating web applications with Python. It comes with an inbuilt development server and is a perfect framework to build RESTful web services. The route decorator which helps to bind a function to a URL can take the HTTP methods as arguments that pave a way to build APIs in an ideal manner.</p><p>First, let’s install Flask by running the following:</p><pre>pip3 install Flask</pre><p>Now, create a new file called flask_app.py.</p><p>There are three steps to write this program:</p><ol><li>Create a WSGI application instance, as every application in Flask needs one to handle requests.</li><li>Define a route method which associates a URL and the function which handles it.</li><li>Activate the application’s server.</li></ol><p>Copy the following code into the flask_app.py file in your directory:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1b1557373c59783825adf89ae938fc46/href">https://medium.com/media/1b1557373c59783825adf89ae938fc46/href</a></iframe><p>This snippet executes the first two steps — we created a WSGI application instance using Flask’s Flask class, and then we defined a route which maps the path &#39;/&#39; and the function get_data to process the request using a Flask&#39;s <a href="http://flask.pocoo.org/docs/1.0/api/#flask.Flask.route">decorator function</a>Flask.route().</p><p>Within the Flask.route() decorator, we specified the request methods as GETand POST. Then, our get_data method prints the incoming request data using request.data.</p><p>Continue on to the final step in our lesson to activate the application’s server to see our data!</p><h3>Step 6: Running a Flask app</h3><p>To run your Flask application, you need to first tell the terminal what application to work with by exporting the FLASK_APP environment variable:</p><pre>export FLASK_APP=flask_app.py</pre><p>Then, execute the following to enable the development environment, including the interactive debugger and reloader:</p><pre>export FLASK_ENV=development</pre><p>Finally, we can run the application with the following:</p><pre>flask run</pre><p>After the app start running, in your terminal you should see your collectd data coming in as a JSON output!</p><h3>Summary</h3><p>In this tutorial we covered:</p><ol><li>Installing collectd</li><li>Configuring multiple collectd plugins</li><li>Building a basic Flask application</li><li>Receiving data from collectd inside of Flask</li></ol><p>We hope you enjoyed this tutorial and learned something new! If you have any comments or questions, don’t hesitate to drop us a note below.</p><p>This tutorial was extracted from a lesson on Next Tech. If you’re interested in exploring the other courses we have, <a href="https://c.next.tech/2JYJkI2">come take a look</a>!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=f5bcec435fd0" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/tracking-system-metrics-with-collectd-f5bcec435fd0">Tracking System Metrics with collectd</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Launch VS Code in online computing environments]]></title>
            <link>https://medium.com/nexttech/launch-vs-code-in-online-computing-environments-dab98b35fd5?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/dab98b35fd5</guid>
            <category><![CDATA[developer-tools]]></category>
            <category><![CDATA[visual-studio-code]]></category>
            <category><![CDATA[productivity]]></category>
            <category><![CDATA[microsoft]]></category>
            <category><![CDATA[vscode]]></category>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Tue, 28 May 2019 21:22:07 GMT</pubDate>
            <atom:updated>2019-05-28T23:34:46.787Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LR8jBdsrTkPYPYF6EgZRnw.png" /></figure><p>I’m excited to share that Next Tech has released alpha support for Visual Studio Code!</p><p>VS Code is hands-down one of (if not) the best code editors out there. It’s trounced others (like Sublime and Atom) in popularity in recent years, thanks to the incredible features Microsoft has added and the vast library of extensions tens of thousands of developers have created.</p><p>Installing VS Code is pretty straightforward and you can do it yourself on your computer if you’d like. However, we’ve found that our hosted environments for Python, Node, Go, Haskell, and many other programming languages make it super easy to get started with a new programming project in just a few seconds.</p><p>So we thought, wouldn’t it be great if you could use these environments… and VS Code?!</p><p>Well now, you can. This includes the ability to install extensions, change your settings, debug programs, push to GitHub, <a href="https://c.next.tech/2JJ4PNr">deploy to Azure</a>, and much more.</p><p>This guide walks you through how to get started with VS Code on Next Tech. If you just want to jump into a sandbox with VS Code, click <a href="https://c.next.tech/2JE00Vz">here</a>. In a few seconds you’ll have VS Code running in your browser:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*2b2JRNx3flF6h1OJCYO85A.png" /></figure><p>Or, read on for the details!</p><h3>Why VS Code?</h3><p>Over the years we’ve received many requests for innovative features like code collaboration, debuggers, version control integration, and much more, but our focus is increasingly on our infrastructure offerings. As such, we see VS Code as being able to address a number of these requests as we continue to develop innovative infrastructure offerings.</p><p>VS Code is also the most popular code editor by <em>far</em>. Here’s Stack Overflow’s 2019 developer survey results for the most popular development environments:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/690/1*oJqJ7ZvrI0J_YNjV2N2BYQ.png" /></figure><p>This is also coming at a cost to other editors. Here’s the Google Trends data for VS Code (blue) versus Sublime (red) and Atom (yellow):</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*AgJiQ7tAv1SxjuQoQasE3w.png" /></figure><p>So we feel that our investment into integrating VS Code will be well worth it as we’ll be able to provide a well-loved tool inside our infrastructure.</p><p>This feature is currently in a very early alpha state (current limitations are documented <a href="https://docs.next.tech/sandbox/vscode/alpha-status">here</a>). However, in the coming months we’ll be rolling out a more tightly integrated version and many other related improvements.</p><h4>Here’s what’s currently supported:</h4><ul><li>Intelligent code completion (IntelliSense).</li><li>Powerful debugging functionality.</li><li>Numerous different ways to configure your interface (multiple tabs, zen mode, etc.).</li><li>Integrated terminals.</li><li>Multiple themes.</li><li>VS Code’s command line interface.</li><li>…and many other extensions you can install.</li></ul><h4>Very soon, we’ll also be adding support for:</h4><ul><li>An integrated web browser.</li><li>VS Code’s Live Share feature, which allows you to collaborate with others in real-time.</li></ul><p>For now, I hope you’ll take a look and <a href="https://feedback.next.tech/vscode">share your feedback</a>!</p><h3>Getting Started</h3><p>To get started, head over to the <a href="https://c.next.tech/2KaUHg7">sandbox launchpad</a>. Once you’re there, pick the language you’d like to use (this guide uses Go), then check <strong>Use Visual Studio Code</strong>, as shown below:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/912/0*ypD_Mjn2_pMAr26r" /></figure><p>You’ll be shown a dialog that contains an explanation of the current limitations of this feature (also detailed at the end of this page). Just click the <strong>Sounds fun, let’s go!</strong> button and your sandbox will load with the VS Code interface:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*N00UlUcFrPKFaJ_3" /></figure><p>You may notice that VS Code is just another tab type in the sandbox interface. If you click the <strong>+</strong> to create a new tab, you may notice that some options are now hidden:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/614/0*po14izi2eqQHTPgp" /><figcaption>(eventually these will all be hidden as we integrate them directly inside of the VS Code interface)</figcaption></figure><p>For the best experience, you can click the square in the top right corner of the VS Code interface to make VS Code full screen:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*lnyAclE7854mooun" /></figure><p>To get started, you can click <strong>File</strong>, then <strong>New File</strong>:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/270/0*h6bIGRBMQCVm31Gd" /><figcaption>(note that the Ctrl+N will not work in the browser)</figcaption></figure><p>Save your file as main.go, then put this code in it:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/b332be73eef2021fd4b001f00e1b764f/href">https://medium.com/media/b332be73eef2021fd4b001f00e1b764f/href</a></iframe><p>Now, head over to the extensions marketplace and install the Go extension:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/348/0*mK-6xStVebIVo4sU" /></figure><p>(you may need to press Ctrl+Shift+P, type “reload”, then select <strong>Developer: Reload Window</strong> to get things working correctly)</p><p>You’ll be prompted in the bottom right to install several packages. Go for it!</p><p>You can try typing b in the code editor to see the intelligent autocomplete kicking in. Here, it sees that b is actually an array with 5 ints in it:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/574/0*RNAwfGAOP6J_4y_6" /></figure><p>You can run code using the software normally installed in your sandbox. To run this file, click <strong>Terminal</strong>, then <strong>New Terminal</strong>:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/273/0*YcYjtU6ehcZfrJt4" /></figure><p>Then you can use the already installed version of Go from your sandbox:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/321/0*mV37hQpsML4xs4YG" /></figure><p>And there you have it! You’ve just used VS Code in the cloud to write a Go program.</p><h3>Feedback</h3><p>If you try this new feature, I’d love to hear what you think. Feel free to respond to this post or submit a ticket <a href="https://feedback.next.tech/vscode">here</a>.</p><p>Thanks for reading!</p><h3>Shout-out</h3><p>This integration uses an adapted version of <a href="https://github.com/cdr/code-server">this</a> awesome open source project by Coder!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=dab98b35fd5" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/launch-vs-code-in-online-computing-environments-dab98b35fd5">Launch VS Code in online computing environments</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Packt and Next Tech partner to bring interactive tech education to developers]]></title>
            <link>https://medium.com/nexttech/packt-and-next-tech-partner-to-bring-interactive-tech-education-to-developers-da6e2f33cd5d?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/da6e2f33cd5d</guid>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Wed, 06 Mar 2019 17:15:36 GMT</pubDate>
            <atom:updated>2019-03-06T17:16:20.157Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*q8bMCgJuAUrrZHqAC6KwRA.png" /></figure><p>Technology publisher <a href="https://www.packtpub.com/">Packt</a> and computing infrastructure provider <a href="http://next.tech/">Next Tech</a> have announced that they are partnering in a bid to bring Packt’s diverse library of learning resources to a new audience of software engineers and developers via interactive labs that provide online access to real world developer environments.</p><p>Combining Packt’s considerable experience in publishing on the latest open source software and Next Tech’s innovative approaches to content delivery and learning experiences for technical skills, the partnership promises to be an important step forward in supporting the people powering the growing open source ecosystem.</p><p>Packt Publishing’s Head of Channels and Partnerships Heather Gopsill said “Next Tech is a company that shares many of our values, including a commitment to learning and a belief in innovation. That makes our partnership with them incredibly exciting, as it gives us an opportunity to deliver our latest content in new ways.”</p><p>Next Tech’s CEO Saul Costa was equally optimistic about the potential for the partnership, saying “Packt has done an incredible job of building a vast network of authors who produce high quality technical training materials. We’re excited to combine these with the online IDE we’ve built for teaching tech skills and together take technical education to a new level.”</p><p>The first of these products are currently available via <a href="http://next.tech/xyz">Next Tech&#39;s website</a>. Packt plans to incorporate the products into their <a href="https://subscribe.packtpub.com/">subscription service</a> in the coming months at a large scale. If you&#39;d like to learn more about how you can use interactive tech training labs as part of your offering, please contact <a href="/service/mailto:sales@next.tech">sales@next.tech</a>.</p><p><strong>About Next Tech</strong></p><p>Next Tech’s smart-scaled computing infrastructure powers the learning experiences of hundreds of thousands of students around the world as they master tech skills. Since their founding in 2014 they have maintained a laser focus on building high tech products that both beginners and advanced users can benefit from.</p><p>Visit Next Tech: <a href="https://next.tech/">https://next.tech</a></p><p>Follow Next Tech on Twitter: <a href="https://twitter.com/nextdottech">@nextdottech</a></p><p>Find Next Tech on <a href="https://www.facebook.com/nextdottech/">Facebook</a>.</p><p><strong>About Packt Publishing</strong></p><p>Packt Publishing provides learning resources for software developers. Beginning in 2004 as a book publisher, the organization has evolved to develop courses, videos, and live training on the latest technologies and trends. With a subscription service that offers full access to all of the content the publisher has produced, and a brand new technology news and insights platform, Packt is committed to helping software developers stay up to date with what matters.</p><p>Visit Packt: <a href="https://www.packtpub.com/">www.packtpub.com</a></p><p>Follow Packt on Twitter: <a href="https://twitter.com/PacktPub">@PacktPub</a></p><p>Find Packt on <a href="https://www.facebook.com/PacktPub/">Facebook</a></p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=da6e2f33cd5d" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/packt-and-next-tech-partner-to-bring-interactive-tech-education-to-developers-da6e2f33cd5d">Packt and Next Tech partner to bring interactive tech education to developers</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[How to use the OpenWeatherMap API with Python]]></title>
            <link>https://medium.com/nexttech/how-to-use-the-openweathermap-api-with-python-c84cc7075cfc?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/c84cc7075cfc</guid>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[api]]></category>
            <category><![CDATA[learning-to-code]]></category>
            <category><![CDATA[python]]></category>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Wed, 06 Feb 2019 05:29:48 GMT</pubDate>
            <atom:updated>2019-02-06T05:44:43.569Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*YnqFz742bUVavF7i9TzghA.png" /></figure><p>In this article we’ll explore the powerful OpenWeatherMap API, which allows you to access and use weather data in your programs. It can be used to display information such as the temperature, wind, and humidity, for the current weather and for the forecasted weather.</p><p>We’ll use the Python programming language and an awesome library called Python OpenWeatherMap (PyOWM) to make it easier to use the OpenWeatherMap API in Python.</p><p>This article is based on an interactive course released on Next XYZ by Andrew Sverdrup, a software engineer at Next Tech. The course has Python and the PyOWM library preinstalled and lets you use both directly from your browser. If you want to learn even more about PyOWM , you can <a href="https://c.next.tech/2TtRHgt">check out the course</a> for free.</p><h3>Setting Up Your Environment</h3><p>To run the code snippets in this article you’ll need to have Python and the pyowm library installed (install instructions for pyowm can be found <a href="https://github.com/csparpa/pyowm">here</a>).</p><h3>Getting your OpenWeatherMap API Key</h3><p>Once you have your environment setup, the next step is to get your free API key from the <a href="https://openweathermap.org/">OpenWeatherMap website</a>.</p><p>After you’ve signed up on OpenWeatherMap’s website, you’ll see this at the top of the page:</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/0*__EgV9ddowA__N18" /></figure><p>Click on “API keys” and you’ll see the API key.</p><p>When you work with the the examples below, you’ll need to replace &lt;api_key&gt; with this API key.</p><h3>Weather Conditions</h3><p>Now that you have your API key, let’s check the weather! First we’ll start by checking if there are any clouds in the five-day forecast for Los Angeles. Here’s the code to do that:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/e2790ba2e5a2f169d74f18c6b33e417b/href">https://medium.com/media/e2790ba2e5a2f169d74f18c6b33e417b/href</a></iframe><p>Let’s break this down. We start by importing the pyowm library, then we authenticate using an API key. The authenticated connection to the API is stored in the owm variable.</p><p>Next we use the three_hours_forecast() method to get the forecast for a specified location (in this case, Los Angeles) and store it in the la variable. Note that the three_hours_forecast() method returns a five-day forecast with weather data sampled every three hours.</p><p>Now that we have the weather object, we can call the will_have_clouds() method on it to check if there will be clouds! Within the pyowm library, this will check the weather at each three-hour interval and if any weather sample indicates there will be clouds, the method will return true, otherwise it will return false.</p><p>We can also use PyOWM to see if it will rain, be foggy, or check for other common weather conditions. OpenWeatherMap has data from all around the world as well. For example, let’s take a look at the weather in London:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/1cc02eadb265969c5ce4e1b865f1d7bf/href">https://medium.com/media/1cc02eadb265969c5ce4e1b865f1d7bf/href</a></iframe><p>Awesome! With just a few lines of code you can get and display some amazing information in your program.</p><h3>Current Temperature</h3><p>Now let’s take a look at how to get the current temperature:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/58ad04c570e54d609b0a4b9df3e5f060/href">https://medium.com/media/58ad04c570e54d609b0a4b9df3e5f060/href</a></iframe><p>As you might guess from the use of &#39;fahrenheit&#39; in the above code, you can also request the data in Celsius by passing &#39;celsius&#39; to the get_temperature() method.</p><h3>Sunrise and Sunset Times</h3><p>Another cool thing you can do with PyOWM is request and display the sunrise and sunset times. The get_sunrise_time() and get_sunset_time() methods can be called to get this info. There is a catch when using these methods though- they return the time in unix time by default (e.g., <strong>1542800608</strong>). Passing the timeformat=&#39;iso&#39; parameter converts the time to a more human-readable format (e.g., <strong>2018–11–21 21:16:54+00</strong>). Also, the times are in the GMT timezone (in the Next XYZ course we cover how to convert the times to a specific timezone).</p><p>Here’s an example of getting the sunrise and sunset times:</p><iframe src="" width="0" height="0" frameborder="0" scrolling="no"><a href="https://medium.com/media/8fc2f8d2cb5df000b2803e5b72abe1e0/href">https://medium.com/media/8fc2f8d2cb5df000b2803e5b72abe1e0/href</a></iframe><h3>Wrapping Up</h3><p>If you enjoyed this post and want to learn more about using Python OpenWeatherMap to access weather data, check out the <a href="https://c.next.tech/2TtRHgt">course on Next XYZ</a>, which goes more in-depth into how to use PyOWM. It also includes interactive tasks and quizzes which will help you master the material in the course. By the end of it you’ll have created a weather GUI just like the image below!</p><figure><img alt="" src="https://cdn-images-1.medium.com/max/501/0*iKbug2A-tIRQzvK0" /></figure><p>Have any questions or comments? Just leave a response below!</p><p>Thanks for reading, and happy coding!</p><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=c84cc7075cfc" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/how-to-use-the-openweathermap-api-with-python-c84cc7075cfc">How to use the OpenWeatherMap API with Python</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
        <item>
            <title><![CDATA[Learning Python OpenWeatherMap with Andrew Sverdrup]]></title>
            <link>https://medium.com/nexttech/learning-python-openweathermap-with-andrew-sverdrup-1cc63a51ba82?source=rss----9c3c49ca8a1f---4</link>
            <guid isPermaLink="false">https://medium.com/p/1cc63a51ba82</guid>
            <category><![CDATA[programming]]></category>
            <category><![CDATA[python]]></category>
            <category><![CDATA[api]]></category>
            <category><![CDATA[learning-to-code]]></category>
            <category><![CDATA[learning]]></category>
            <dc:creator><![CDATA[Saul Costa]]></dc:creator>
            <pubDate>Mon, 02 Jul 2018 15:21:01 GMT</pubDate>
            <atom:updated>2019-02-08T16:49:34.874Z</atom:updated>
            <content:encoded><![CDATA[<figure><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*J_WO3Hlwzc0Nyvzzx3jG8A.png" /><figcaption>Building a weather GUI application using the Python OpenWeatherMap API.</figcaption></figure><blockquote>“The ability to provide something of value to many people is the driving force behind my love of technology.”</blockquote><p><em>An interview with Andrew Sverdrup, author of the new Next </em><a href="https://next.xyz/xyz/python-open-weather-map"><em>XYZ Python OpenWeatherMap course</em></a><em>.</em></p><p><strong>Hey Andrew, excited to be sitting down with you and doing this interview! To get started, mind telling me a little about yourself?</strong></p><p>Sure thing! I am a recent college grad and am excited to put the programming knowledge I have learned to use. My degree is in Software Engineering from Embry-Riddle in Arizona. And I recently joined Next Tech as their first full time software engineer!</p><p>I like to stay active by working out and playing basketball. I love learning and trying out new programming languages to see what they’re like. I learn by doing so I enjoy finding new languages and libraries and seeing what I can build with them.</p><p><strong>Awesome. So tell me about your course!</strong></p><p>The Python OpenWeatherMap (PyOWM) course teaches you how to use the OpenWeatherMap API with Python. OpenWeatherMap is a powerful API that lets you retrieve weather data for virtually any location in the world, and they have a generous free tier to get you started! The PyOWM library allows you to easily use the OpenWeatherMap API with Python.</p><p>The first half of the course covers the basics that you need to know to get weather data using PyOWM, including the temperature, wind speed, and humidity. The second half is my favorite though. That’s where we use the temperature data to create a graphical user interface (GUI) to display the temperature forecast! And finally at the end you’re challenged to modify that GUI to display the humidity forecast.</p><p><strong>What made you decide to build this course?</strong></p><p>I decided to build the course because I’ve learned many cool things while programming and I want to share them with others so they can learn too! Programming provides seemingly endless possibilities to create both fun and useful projects. Next XYZ allows me to easily share what I’ve learned with others and I look forward to hearing what people think of the course!</p><p><strong>What got you interested in technology in the first place?</strong></p><p>I’ve been fascinated by computers ever since I was a kid. It takes a lot of money to build things such as houses, but with programming you can create something valuable with very few resources. All you need is a computer, some programming skills, and some ideas! The ability to provide something of value to many people is the driving force behind my love of technology.</p><p><strong>Do you have any ideas for future courses you might build?</strong></p><p>I love sharing what I’ve learned with other people so they can see all the cool things that can be done with programming. I’m always exploring new languages and libraries and I will be creating more courses for some of my favorites, so stay tuned!</p><p><strong>Where can readers find your course?</strong></p><p>The course is published on Next XYZ <a href="https://next.xyz/xyz/python-open-weather-map">here</a>. Give it a try and let me know what you think!</p><h4><strong>You can find Andrew </strong><a href="https://twitter.com/AndrewSverdrup"><strong>on Twitter</strong></a><strong>!</strong></h4><img src="https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=1cc63a51ba82" width="1" height="1" alt=""><hr><p><a href="https://medium.com/nexttech/learning-python-openweathermap-with-andrew-sverdrup-1cc63a51ba82">Learning Python OpenWeatherMap with Andrew Sverdrup</a> was originally published in <a href="https://medium.com/nexttech">Next Tech</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>]]></content:encoded>
        </item>
    </channel>
</rss>