Goodness Coming Up!

Microsoft is supporting a couple awesome events in the next couple days that I’d love to share with you!

civictechchallenge

First Local Students will be working alongside local techies to pitch solutions in three areas:

1: Data Visualizations to Influence Change
2: Information Communication Technologies (ICTs) for Mass Coordination and Civic Empowerment
3: Digital Storytelling to Raise Awareness

If by chance you are around and interested in participating, either as “hackers” or volunteers, please let me know. You are also welcome to come only for the reception (6-9pm), if you’d like.

Jennifer Pahlka of Code for America will be our keynote speaker!!

Here’s the link: http://www.civictechchallenge.org/site/bay-area-site/

I have discount codes for Brigade Folks.

Also, Microsoft’s new Reactor Space is open!

We’d love to see you there.

For all upcoming events visit: http://microsoftreactor.com/

We have a pretty sweet one coming up for all the Node developers out there.

Node.js and npm for the Windows Developer: Link to Meetup.com

We’re partnering with the folks over at Node Package Manager(npm) to put together an awesome event in our new Reactor community space on Nov 9th. Highlights include:
• Getting started and setting up a rockin’ dev environment
• Overcoming common gotchas without pulling your hair out
• Managing packages for your Node.js apps like a champ
• Bobbleheads (we’ll explain later…)

Source: http://www.programmableweb.com/news/microsofts-plans-to-fork-and-extend-node.js-alarms-developers/2015/05/20
Source: http://www.programmableweb.com/news/microsofts-plans-to-fork-and-extend-node.js-alarms-developers/2015/05/20

Starter Site for Flask On Azure Web Apps

I’ve been spending the last couple of hours learning about Flask deployments on Azure Web Apps.

There are some good resources for development setup on Visual Studio, but if you’re used to more lightweight deployment I wanted to address what is the minimum code required to get a site running locally and being able to push the changes to Azure.

That’s what this guide is all about and includes all the code required for the process.

The steps for this project will be:
Create Azure Web App
Clone Lightweight Code
Learn What’s in the Code
Deploy to Azure
Make Your Changes
Commit the changes
Begin Workflow

Create Azure Web App
Alright, let’s start by creating an Azure Web App.
Web apps are a platform as a service offering from Microsoft that makes deployment and scaling easy.

Sign Up for Azure here or if you’re an entrepreneur BizSpark is a great option for $150 of free hosting.

After you get to the Azure Portal.

Select New in the lower left corner:
new

Then Select Web App -> Quick Create -> And give it a name.
createwebapp
In this snip I’ve named my app flask-azure-demo.
And the URL for my site is flask-azure-demo.azurewebsites.net (for now)

Cool, now that I’ve created a Web App I’ll see it listed with all my other websites:
flask-azure

Double click on the listing to see the Web App dashboard:
dashboard
And select ‘Set up deployment from source control’

Then select ‘Local Git Repository’ then hit the arrow in the lower left hand corner:
deployment

After a second of refresh you should see a page with details about the Azure Repository you’ve setup.
Now scroll down to the section that says “Add remote Windows Azure repository and push your stuff”

It should look like this:
remoteazure

Leave this tab open and/or copy these commands. We’ll use this later, in the section titled ‘Deploy to Azure’

1. git remote add azure https://you@yoursite.scm.azurewebsites.net:443/yoursite.git
2. git push azure master

Great! We have a Web App with an empty repository ready for our Flask Code!

Clone Lightweight Code

I have created a repository with all the code Azure requires to host flask and a bare-bone site as a proof of concept. (If you’re not familiar with how to Git my friend Tobiah has a great guide.)

You can clone the repository or you can fork then clone.
It’s totally up to you. Later in this guide I’ll show you how to remove ‘my remote origin’ if you choose to clone now.
If you’re familiar with GitHub I would recommend forking then cloning and if you’re not super comfortable with git here’s what you do:

Navigate to my the repository on GitHub: https://github.com/timmyreilly/babypython-azure
github

Copy the link at the top of the page or this:
https://github.com/timmyreilly/babypython-azure

Create a directory that the code will live in:
mkdir

cd into that directory using your Git Shell and run this command:

git clone https://github.com/timmyreilly/babypython-azure.git

This is what it looks like on my machine:
cdclone

Great, now we have the code and we can cd into the repository and take a look at what’s in there:

cloningintodir

Looks good, but what is all that stuff?

Learn What’s in the Code

Open the newly cloned repository into your favorite text editor.

This is what it looks like in Visual Studio Code:
vscode

There are a bunch of files in there and very few of them have to do with Flask, so what do they do?

.deployment – tells azure which deployment command to run and can be customized to include various configurations

.gitignore – this lists all the files/file types that git should ignore during commits. This keeps code that’s private out of public repositories. The one in the repo you clones should cover all your bases for now, but if you add a service tokens/api key make sure the file you add is included in your .gitignore

deploy.cmd – this is the default deployment command for Azure web apps. You’ll see it contains ‘if’ blocks to determine what type of code you’re running whether it be Node, Python, or something .NET. As you get more complicated flask apps you may need to edit this, but for this tutorial you can leave it alone.

ptvs_virtualenv_proxy.py – is a script used to retrieve the WSGI handler, activate the virtual environment and log errors. It is designed to be generic and used without modifications. – Thanks Azure Documentation.

requirements.txt – includes the list of all python packages your project requires. Azure git deployment will automatically create a virtual environment and install all the packages listed in your requirements.txt

runserver.py – is a generic flask runserver command that will work with azure, if you have an app of a different name you’ll need to change the from FlaskWebProject import app accordingly.

web.2.7.config & web.debug.config – are the two important files for Web App deployment. They are used to specify how the server handles requests. Because our config file is titled web.2.7.config azure will automatically copy the appropriate file as web.config.

If you’re still curious/plan to deploy any type of production code I would recommend reading ‘Configuring Python with Azure App Service Web Apps.’

The only thing left is our app, which you’ll find under FlaskWebProject!

Let’s get it deployed!

Deploy to Azure

Remember when wrote down these commands:
1. git remote add azure https://you@yoursite.scm.azurewebsites.net:443/yoursite.git
2. git push azure master

Now we get to use them.
Copy the stuff from your web apps deployment page if you left open the tab.

And run the commands as so:
gitpush

After you run that final command git push azure master you’ll see a log of what’s happening in the Azure Web App instance.

You can check the progress back in the browser under deployments. It should look something like this:
runningdeployment

Also when the logging finishes in the git shell you’ll see something like this:
deploymentsuccessful
You shouldn’t see a red star, but I put that in there because you’re awesome at following directions.

Because deployment was successful, you’ll be able to visit your brand new web site!

Check it out by going to 'yoursite.azurewebsites.net' in this case: flask-azure-demo.azurewebsites.net

Looks good!
visitingsite

But not really that unique.
Let’s make it yours.

Make Your Changes

Before we make any changes, lets run our project locally so we don’t have to wait for deployment every time we make a change.

To do that simply use a virtual environment with Flask installed and run python runserver.py.
If you’re confused about this check out this guide I wrote a ways back about using Flask on Windows

Run this command to run the project locally:
python runserver.py

It should look like this:
runninglocally

And we can navigate to http://localhost:5555/ to see our project.

And you’ll see it looks exactly the same as our hosted project on azure:
samesame

Now let’s make a quick change:
Open views.py in your text editor.
Add a new view and a new HTML page to navigate to.
In this case it’s named awesome and includes some other text.

You can find all the code here: https://github.com/timmyreilly/flask-azure-awesome

Then restart your server and view the new page.

The whole process should look like this:
makingachange

Great, now that we have a change let’s commit it and push it to Azure!

Commit the changes

Use git to commit your changes.
git add .
git commit -a -m "made our first change"

You’ll notice our [master] tag went from red to green, but we want it to be blue and at the same commit as our remote repos.

Second let’s remove my repository as one of your remote repository, so you can add your own origin later.

Check which remote repositories you currently have:
git remote

You should see azure and origin listed.

Enter git remote rm origin to remove my repo from your remote repositories.

Now when you enter git remote you’ll only see azure.

Those steps should look like this:
gettinggreens

Great, now we can run:
git push azure master

This will show the azure logging and will deploy our changes to our web app.

Now when we navigate to ‘yoursite.azurewebsites.net/awesome’ you’ll see the new page you created!

awesomeonazure

Great!

Let’s wrap this up by getting your changes into your own GitHub repo and establishing a solid workflow.

Begin Workflow

First go into GitHub login and create a new repository, give it a representative name and do not initialize with a readme.

Then hit create repository.

Should look like this:
codeonazure

Great now you’ll see this page with repository details. We’ll add this repository as your origin repo just like we added azure as an ‘remote azure’ repo.

Copy these commands:
githubdetails

And run them in your Git Shell like so:
runningpushtogithub

Now when refresh our repo on GitHub we’ll see our code!
codeongithub

Sweet this is all yours now!

Now whenever we make a change to our code we can commit it to two locations this is my current workflow and provides the convenience of git deployment and GitHub redundancy.

This is what it looks like in my shell:
newworkflow

And on Azure and GitHub we can see the changes:
aftertwopushes

That about wraps it up.

Hope this helps you get started developing flask for Azure. Please let me know if you have any questions or comments.
Tim.Reilly@microsoft.com
@timmyreilly

Recycling Can Man! Kinda like Trash Can Man.
Recycling Can Man! Kinda like Trash Can Man.

For the Mentors out There!

Let’s get technical!

Get your Azure Pass:
aka.ms/azurepass
Send me an email if you need a code.

Get your BizSpark
BizSpark gives startups 3 years of free stuff.
eg: $150 Cloud Credit per month!

Check out the new tools:
Visual Studio Code
Light-Cross-Platform-Editor

Visual Studio Community Edition
Think Photoshop for developers.

Try Out Azure:
Full list of services aka.ms/azure.all
Get started with Azure
How about Machine Learning

Hit an API:
There are lots of technologies to hit
Full list
Project Oxford

Build for Windows 10
The Universal Windows Platform!

Watch a Video on Channel 9
YouTube meets Instructables

Go in depth with Microsoft Virtual Academy:
Coursera, Tuts, Etc. For free!

Share your stuff!
Let me know @timmyreilly or Tim.Reilly@microsoft.com

Neature!
Neature!

Minimal Django Site on Azure

I’ve found myself confused in the mire of code deployed when a Django site is pulled down from Azure, so Ryan Joy and myself have stripped it to the bare essentials for a code challenge during DjangoCon.

I found this project to be a great way to learn how Django works and how to get into web development while making your changes actually exist on the internet.

We’ve made a number of repos, but the best one to get started with is MinimalStaticDjango

The main parts of the app can be found in app and djangocon and these are standard django.

The deployment specific code includes:
• .deployment
• deploy.cmd
• ptvs_virtualenv_proxy.py
• web.2.7.config
• web.3.4.config
• web.debug.config

With this site (and quite a bit of bootstrap), you can create and deploy beautiful static sites.

And with a great idea and a database you can extend this basic structure to any kind of Django website.

Look for another example in the coming months after a hackathon or two!

Happy to answer any questions,
Tim

These Students made TeamGrid an awesome hack to speed up debugging and code help for software teams. I also really like what Gin Zukas did to his Microsoft sticker.
These Students made an awesome TeamGrid to speed up debugging and code help for software teams. I also really like what Gin Zukas did to his Microsoft sticker.

10 Great Features of Windows 10

I’ve been running with Windows 10 for the entire insider program.
It was a rocky start but the current state is a an awesome computing experience.

Over the course of the last 10 months (Since October 2014) I’ve been keeping track of the things I like the most, so I’ve compiled this list:

Virtual Desktops
a. Great for presentations
b. Keeping email out of the way
c. Starting fresh when you have a new project
d. Hit Ctrl+Win+Arrow to move between and Win+Tab to get this view:

:)
🙂

Snapping
a. All the Command Prompts, GitShells and Editor windows can become cumbersom quickly being able to quickly put them in the corner makes for organizing the desktop effortless.
b. Ahh yeah corners!
c. When you have a window selected just press Win+Up/Down/Left/Right to get your windows in the right place

So much room for activities!
So much room for activities!

Mail and Calendar
a. My favorite part is that they don’t take up the whole screen
b. Also, they’ve added Google calendar integration, which makes planning with Android friends much easier.
c. Win+S brings up search and type mail or calendar to begin

Responsive, Clear, and Compatible with Google Calendar.
Responsive, Clear, and Compatible with Google Calendar.

New Settings Page
a. Pulling the most used settings out of the control panel has made for a much easier time understanding what’s going on with your computer
b. I find this more user friendly and convenient, but there is still room for improvement and there are some privacy choices that should be easier to manage.

Touch Friendly
Touch Friendly

d. Also all the settings are searchable from Cortana or the settings menu for super quick configuration
Using Search puts settings two clicks away. Mozilla Complaint... Scott Hanselman response
Using Search puts settings two clicks away. Mozilla Complaint… Scott Hanselman response

Universal Windows App
a. Having a consistent app experience across devices is something I’ve been looking forward to for some time.
b. By allowing developers to create apps regardless of device they can move more towards services to the consumer and away from silly gimicks
c. Take Uber for example.
By integrating with W10, Cortana, O365, Band, and other SDKs they can provide services to users in new ways without being cumbersome on each device.
Another Example is Reddit or other link sharing sites
By creating an app experience that unifies across devices, I can quickly engage with the content without having to learn how to control a new app.
Here’s the new Universal Twitter App looking good in the desktop:

Learn more about Twitter and their  Universal App.
Learn more about Twitter and their Universal App.

This leads to my next favorite feature

Windows Hello
a. Ahhhh finally, no more passwords.
b. Everything I like to use is behing a secure OS identity and password/biometric protection.
c. No more passwords for every site, by letting ‘Hello’ and edge handle my passwords I don’t have to think twice about my browser storing them.

HELLO WINDOWS!
HELLO WINDOWS!

Cortana
a. Have I said Cortana yet?
b. I think its low on my list, because I’ve been in the habit of now using because of the Beta Builds. It hadn’t been working very will until the last couple releases.
c. Having said that, I am very excited about querying cortana instead of rifling through folder, documents, and applications.
d. 4 Favorite Cortana Commands:
Remind me to move the motorcycle at 7pm
What’s the weather like in Portland
What’s on my calendar today
What’s 20% of 80 (Tip Calculation)

Go Ms! Scores, flights, tickets, meetings, travel times, all in one handy app.
Go Ms! Scores, flights, tickets, meetings, travel times, all in one handy app.

Groove & Pictures
a. The new Groove and Pictures apps are excellent.
b. Groove
I get a larger collection of music than Spotify for far less money.
I can also control the experience with my voice
‘Play… pause… next song… play playlist…’
The app is responsive and fast
c. Pictures
Rich display of photos
It looks nice
It runs fast
It does cool smart albums based on location and other tags
It pulls my pictures from all of my computing history

ODESZA Like the new background! https://www.youtube.com/watch?v=bEBlEp85PNA
ODESZA Like the new background! LINK

Snipping Tool and App/Game Recorder
a. The new snipping tool has a timer! Ahh that makes taking screen shots so much richer.
b. I can now open a context menu, or show a menu that only appeared during a zoom
c. The game recorder is really just fun to have when I get an occasional game of Poly Bridge, Goat Simulator, or Team Fortress in.

Record That... Awesome paragraph I just wrote!
Record That… Awesome paragraph I just wrote!

Continuum
a. I carry a surface with me when I travel and the new continuum feature is spot on.
b. I’m amazed at how quickly it came together too.
c. The builds for Surface were always a little bit funky and the driver support seemed off for turning on the device, using the pen, and working with multiple desktop.
d. But everything tightened up in the last couple weeks and it works better than ever.
e. When interfacing with a pen in continuum mode a an excellent handwriting recognizer pops up and makes using the surface super fun.

If you have any questions about Windows 10 feel free to reach out!

SITUP CONTEST!!! Kat and John are fit.
SITUP CONTEST!!! Kat and John are fit.

10 Awesome Features of Windows 10!

Cool Things about JavaScript

JavaScript is cool. I don’t know why, but that’s what I hear. So I decided to dedicate a quiet week to learning all about JavaScript from this book Eloquent JavaScript. The author is great and the explanations/examples are clear and interesting.

I’m almost halfway through the book and these are just a few of the cool things I’ve learned:

Lexical Scoping

Lexical Scoping is not just fun to think about it can be very powerful. What is going to happen when the scope of a function is determined by the function that calls it?

You can get functions to do all sorts of crazy stuff this way.

Here are a couple different ways to get it into your head:

From Eloquent JavaScript: 
“…each local scope can also see all the local scopes that contain it. The set of variables visible inside a function is determined by the place of that funciton in the program text. All variables from blocks around a functions definition are visible — meaning both those in function bodies that enclose it and those at the top level of the program. This approach to variable visibility is called lexical scoping.” – Marijn Haverbeke

Helpful StackOverflow

Helpful Blog

“The scope of an inner function contains the scope of a parent function.”

My example:
Each local scope, can see the variables of the containing scope. Each new set of braces does NOT create a brand new environment. It’s like the octopus holds another octopus.


var octopus1 = function(){
  var smallArms = 5;
  var octopus2 = function(){
    var largeArms = 8;
    console.log(largeArms > smallArms);
  }
}

octopus1();
--> True

It’s like each new function is a new Octopus, and one of the octopus tentacles is on the octopus that called it.

It seems like kind of a backward metaphor. Like the thing that harkens for information ends up being help by the provider.

So the biggest octopus will be found at the most inner scope. Holding a chain of sequentially smaller octopuses.

Other things that I found cool…

NaN and Undefined (Null?)

Very much a pitfall to be aware of, on second thought this isn’t really cool, but just good to know.

Here’s a helpful blog that helped me wrap my brain around the reasoning and differences

He references this source for his blog: which I’ve found helpful .

NaN: Not a number, bad arithmetic

Undefined: variable doesn’t have a value

Null: Not a value, will return empty object.

Infinity and -Infinity

As my little cousin would say, “You’re it times infinity!”

For loops like C++

for(var i == 0; i < 10; i++){
  console.log("ahh yeah");
}

C++ was my first language so these for loops remind me of my first CS class, even though that’s where I got my first C on an exam, it was the first time I felt the power of computing.

Strings can be wrapped ‘with single quotes’ or “double quotes”

‘That\’s nice’
“How convenient!”

Ternary Operator


console.log(true ? 1 : 2)
// --> 1

console.log(false ? 1 : 2)
// --> 2

This is cool. I’ve never used a ternary operator. I could see this saving lots of lines for if statements.

Variables as Tentacles

‘rather than boxes. They do not contain values; they only grasp them … when you need to remember something, you grow a tentacle to hold on to it or you reattach one of your existing tentacles to it.’ – Marijn Haverbeke

Like lexical scoping, this is a cool metaphor for looking at your programs and functions. Gosh octopi are cool and smart!

do loops

Do this…
Then loop if the condition is met.
When you just need to get something done. DO it!

Finally:

Optional Arguments are handled nicely.

function power(base, exponent){
  if (exponent == undefined)
    exponent = 2;
  var result = 1;
  for(var count = 0; count < exponent; count++)
    result *= base;
  return result;
}

console.log(power(4));
// --> 16
 console.log(power(4, 3));
// --> 64
  

Ahh that’s sooo sweet.

Looking forward to continued JavaScript development and I hope this list has whet your appetite for more JavaScript to come.

Happy Friday,
Tim

If that doesn’t load, here another photo that I enjoy:

Pickup truck full of kegs
This pickup truck looks like Seattle

Visual Studio Code Information

What is Visual Studio Code?
—————————

Visual Studio Code is a source code and text editor for Windows, Linux and OS X. It includes support for debugging, embedded Git Control, rich development experiences such as intelligent code completion (also known as IntelliSense), and other features. It is also customizable, which means that users can change the editor’s theme, change the editor’s keyboard shortcuts, change the editor’s preferences, and others.
Visual Studio Code is based on Electron, a piece of software that is based on Chromium, which is used to deploy io.js applications for the desktop. Visual Studio Code uses the Blink layout engine to render the interface

How does it work?
—————–

Built on the Electron Shell with HTML based editor ‘Monaco’ used in F12 and Azure Websites.

Between Visual Studio and Notepad. It fairs right in the middle with other Editors like Atom, Sublime and Brackets.

To be clear, this is not a stripped down version of Visual Studio. This is an entirely new editor built from the ground up to be lightweight and highly usable right out of the box.

What makes it cool?
——————-

Command Palette

Ctrl + Shift + P = Everything!

Shortcuts! (Choice Few)

* Alt + Click = multi line edits!
* Ctrl + F2 = Select all occurances of current selection!
* Ctrl + K Ctrl + C = Add line Comment!
* F12 = Go To Definition
* Ctrl + \ = split editor
* Ctrl + 1/2/3 = switch between panes
* Ctrl + w = close window
* Alt + Up/Down = move line
* Ctrl + B = toggle sidebar
* Ctrl + Shift + V = Toggle Mardown Preview

Customizable shortcuts!

Customizable workspace settings!

settings.json to make changes!

File -> Preferences -> Keyboard Shortcuts

What kind of projects can I create?
———————————–
Build and debug modern web and cloud applications.

List of Samples

These are supported languages:

There are bunch of Syntax coloring and bracket matching languages:

* Batch
* C++
* Clojure
* Coffee Script
* DockerFile
* F#
* Go
* Jade
* Java
* HandleBars
* Ini
* Lua
* Makefile
* Markdown
* Objective-C
* Perl
* PHP
* PowerShell
* Python
* R
* Razor
* Ruby
* Rust
* SQL
* Visual Basic
* XML

+IntelliSense for ‘rich languages’:
* CSS
* HTML
* JavaScript
* JSON
* Less
* Sass

+Refactoring and references:
* C#
* TypeScript

Learn more about supported languages here:
https://code.visualstudio.com/Docs/languages

Why should I use it?
——————–

* Bracket Matching!
* Selection and Multi Cursor!
* Alt + Click
* Ctrl + Alt + Down/Up to add cursors
* What
* Why
* How

Intellisense for Rich Languages!

Not just code completion, but helpful fuzzy search suggestions!

Parameter Help!

x.toExponential(???)

Snippets!

Cheat Sheet: http://docs.emmet.io/cheat-sheet/

Create your own:
File-> Preferences

Here’s a couple for fun:
* a:link
* nav>ul>li

And more!
* Goto Definition
* Goto Symbol
* Open Symbol by name
* Gutter Indicators for Git
* Peek
* Hover -> CSS rules
* Reference Information for C# -> Like VS
* Errors and Warnings

Check out the whole list here:
https://code.visualstudio.com/Docs/editingevolved


Where can I get it?

——————-

Right Here!

Documentation

W10 Retro Logo
W10 is almost here! Link to original post on reddit WOO

Flask-SocketIO, Background Threads , Jquery, Python Demo

This week I’ve been making progress on the Huggable Cloud Pillow website.

In the process I’ve learned about some sweet stuff you can do with Javascript, Python, and Flask-SocketIO.

The first thing to take note of is Flask.

Flask is the tiny server that allows us to host websites using Python to deliver content to the client. While on the server side you can manage complicated back ends or other processes using Python in conjunction with Flask.

This type of development is nice, because you can start seeing results right away but can take on big projects easily.

It might not be the most robust Framework, but its great for small projects…

If you want to get into Flask Web Development checkout this extensive MVA.

Small and simple, Flask is static on its own. This allows us to present static content, like templates and images easily and deals with input from the user using RESTful calls to receive input. This is great for static things with lots of user actions, but if we want something a bit more dynamic we’re going to need another tool.

In this case I’ve found Flask-SocketIO, similar to Flask-Sockets but with a few key differences highlighted by the creator (Miguel Grinberg) here.

Sockets are great for is providing live information with low latency. Basically, you can get info on the webpage without reloading or waiting for long-polling.

There are lots of ways you can extend this functionality to sharing rooms and providing communication with users and all sorts of fun stuff that is highlighted on GitHub with a great chunk of sample code. The following demo is based off of these samples.

For my project, I need the webpage to regularly check for differences in the state of the cloud and present them to the client, while also changing the image the user sees.

At first I tried to implement it using sockets passing information back and forth, but that wasn’t very stable.

The solution I’ve found, uses a background thread that is constantly running while the Flask-SocketIO Application is running, it provides a loop that I use to constantly check state of our queue.

Let’s break it down…
a. I need my website to display the current state of the cloud.
b. The Flask application can get the state by query our azure queue.
c. Once we determine a change of state we can display that information to the webpage.
d. To display the new state to the webpage we need to use a socket.
e. And pass the msg to be displayed.

This demo intends to break down problem a, c, d, and e.

I’ve created this little guide to help another developer get going quickly, with a nice piece of code available on GitHub.

The five steps to this little demo project are as follows:
1. Install Flask-SocketIO into our Virtual Environment
2. Create our background thread
3. Have it emit the current state to our client
4. Call the background thread when our page render_template’s
5. Have the Javascript Catch the emit and format our HTML.
Celebrate! Its Friday!

1.

Flask-SocketIO is a python package that is available for download using

pip install Flask-SocketIO

Make sure you instal it into a Virtual Environment. Check out my earlier tutorial if you need help with this step.

*Edit Here’s the top part of the “main.py” for reference:

#main.py
from gevent import monkey
monkey.patch_all()

import time
from threading import Thread
from flask import Flask, render_template, session, request
from flask.ext.socketio import SocketIO, emit, join_room, disconnect

app = Flask(__name__)
app.debug = True
app.config['SECRET_KEY'] = 'secret!'
socketio = SocketIO(app)
thread = None

2.

Create our background thread.
You’ll see in the sample code from Flask-SocketIO’s github a simple way to send data to the client regardless of their requests.

For this example we’ll be changing the current time every second and display that to our client.

Background Thread:

def background_stuff():
     """ python code in main.py """
     print 'In background_stuff'
     while True:
         time.sleep(1)
         t = str(time.clock())
         socketio.emit('message', {'data': 'This is data', 'time': t}, namespace='/test')

3

This is the emit statement from above, but is the meat of our interface with SocketIO. Notice how it breaks down…

socketio.emit('message', {'data': 'This is data', 'time': t}, namespace='/test')
socektio.emit('tag', 'data', namespace)

This emit will be sending to the client (Javascript) a message called ‘message’.

When the Javascript catches this message it will be able to pull from the python dicionary msg.data and msg.time to get the result of this package.

4

So how do we call background_stuff?

We can call it wherever we want, but for this simple example we’ll put it right in our ‘/’ base route. So when we navigate to 127.0.0.1:5000 (Local Host) we’ll see the result of our background thread call.

Here’s our route:

@app.route('/')
def index():
    global thread
    if thread is None:
        thread = Thread(target=background_stuff)
        thread.start()
    return render_template('index.html')

Pretty simple… Notice global thread and target=background_stuff

Creating different background threads is a good way to iterate through your changes.

5

Next step is catching this on the other side…

So for our Javascript…

we’ll be using the socket.on method.

socket.on('message', function(msg){
    $('#test').html('&lt;p&gt;' + msg.time + '&lt;/p&gt;');
});

When we receive the emit labeled ‘message’ we’ll pick up the msg from the second parameter and have it be available to our JQuery work.

Here’s the small piece of HTML that we’re selecting to edit.

<body>
    <p id='test'>Hello</p>
</body>

I’ve posted all of this code at github.

Feel free to download it and start working with dynamic sites using SocketIO. Please let me know if you have any questions!

Code for SF's Hackathon gave out awesome tattoos!
Code for SF’s Hackathon gave out awesome tattoos!

Microsoft Wants Your Opinion

New Microsoft products!

TLDR: 

We have some new products & we want you to help shape their future:

Visual Studio Code & Feedback Page

Visual Studio Community Edition & Feedback Page

Windows 10 & Feedback Page

Edge Browser & Platform Page + Feedback Page

Open Sourced ASP.NET & Feedback Page

Here’s more info if you’re curious!

Visual Studio Code

Visual Studio Code is a cross platform text editor. Think Sublime, Atom, Notepad++, but with intellisense, git integration, and debugging!

A fellow TE, Tobiah Zarlez, has broken down some key features that I found super helpful: Tobiah’s Post

There is also great documentation on the code website about…

Supported Languages

Editing

Debugging

Customization

Feedback

The VS Code documentation is loaded with images and is an efficient way to become productive quickly.

Visual Studio Community Edition

If you’re looking for a more robust toolkit, I would also recommend Visual Studio Community Edition. This new edition is a free version of the previously priced $1000 pro version. It still supports plugins, server integration, and advanced debugging, but is free for teams smaller than 10 people. For students this could be an invaluable tool for projects.

Here are some helpful links:

Visual Studio Community Edition

Download page

Helpful Announcement Blog

Visual Studio Plugin Gallery

Visual Studio Jump Start

Feedback Page

Windows 10

Is the latest and greatest Windows operating system. Its right around the corner with some pretty awesome features.

It will be officially available July 29th, but is currently in free insider preview for people willing to get their hands on the latest bits.

Here’s a quick breakdown:

Windows 10

Insider Program

Neat Features

Feedback Page

Edge Browser

Alongside the new OS is a brand new browser. This browser is fast, modern, and built for the next generation of the internet. It was previously codenmaed Spartan.

Here’s a quick breakdown:

Edge Browser

Developer Landing Page

Developer Feedback

User Feedback

Both the Browser and Windows 10 are in (free) preview until July 29th when Windows 10 is released as a free upgrade for licensed PCs running Windows 7, 8, or 8.1.

Speaking of development pipelines… Open Sourced .NET!

Open Sourced .NET Core and ASP.NET: 

Open sourced .NET means .NET on different operating systems. Giving developers with all background the opportunity to build extremely powerful and extensible applications. Check out the Wikipedia article.

Here’s a quick breakdown:

Announcement Blog

The GitHub

The Reddit Reaction

The ASP.NET open source page for Javascript fans

The Feedback Page for ASP.NET

The best part of these new products and innovations is the way they are being built. The consumers, myself included, are the product owners and our voice and suggestions are taken into account at each build cycle. So as you use the product you can post suggestions and upvote ideas to see them get sent down the development pipeline!

We want your opinion! You can shape the future of these projects!

Wooot!


Group of Student with Matt Thompson
Inspiring Middle Scholars to Hack @developerfish

Quick Edits Using VS Code

I’ve been working in Visual Studio pretty heavily in the last two weeks, but every once in a while I need to make quick edits to my .gitignore file, which isn’t in my project directory.

I usually open up a small text editor right from PowerShell and now that VS Code is out I thought ‘why not use that?’

Here’s how you can easily open files using code from PowerShell in three steps:

1.Find the path to VS Code
2. Edit your PowerShell profile
3. Open Files!

1. Find the VS Code Path

First thing we need to do is find where VS Code is in our directory.

If you have Code pinned to your start menu or on your desktop simply right click the icon and ‘select open file location’.

File explorer should now open to the location of the .exe.
Right click the Code.exe file and select ‘properties’.

If you selected a Shortcut Icon you should see a screen like this:

vscodeshortcutpath

If you navigated to the actual location in directory of VS Code it should look like this:

vscodelocationpath

Now right click and copy the path.

In my case: C:\Users\tireilly\AppData\Local\Code\app-0.1.0

2. Edit our PowerShell profile

To edit our profile we need to find the Microsoft.PowerShell_profile.ps1 file.

My file is located here:

profilelocationpowershell

I open the file in notepad to make my edits:

notepadpowershellprofile

Now that we have our profile open we’ll create an alias for labeled code followed by the path to our .exe
eg: Set-Alias code ‘C:\Users\user\AppData\Local\Code\app-0.1.0\Code.exe

noticed how I added the Code.exe to the path so the program will launch!

Here’s a photo of my current PowerShell profile for reference:

powershellprofile

Now we can save and close this file and open a new PowerShell window!

3. Edit some files!

Let’s edit our PowerShell profile with Code this time!

symmetryisgood

Something oddly satisfying about getting exactly what you want with words.

codeeditorpowershellprofile

And there we go. The brand new Code editor at your fingertips whenever you need it!

Let me know if you have any comment or questions!

Amazing Dude
Professor Chang Yun is an excellent man with an amazing imagine cup record. His mentorship has led teams to US finals for 8 years straight. With 6 teams making it into the World Finals.