Have you ever wondered how hard it would be to recreate a text editor like the one we use right here on Medium? If you haven’t seen Medium’s text editor, I would highly recommend checking it out. You are able to write, edit, and style your content (within Medium’s provided styles) right here in your browser. No tech knowledge is needed. No html tags appear in the text. Would you believe me if I said you’d need nothing more than vanilla JavaScript, CSS, and HTML? Take a look: An example of inline editable content with document.designMode Hopefully that example demonstrated a few things for you: You have two options. for the entire document, and for just one element. document.designMode element.contentEditable The browser gives us all the methods we need. Anything outside of is simply for demonstration purposes and error handling. document.execCommand The commands modify the HTML by adding new tags around our content. This allows us to use CSS to style those tags. So simple. The only “gotcha” is that you have to use if you trigger the command from a button click. Otherwise the focus will shift to the button and the command will fail. event.preventDefault(); If nothing is selected, the command will fail . (sometimes) If it serves your purposes better, you can also create editable content with HTML. <div contenteditable="true">  This text can be edited!</div> This could work nicely with frameworks like React, Angular, etc. Where you could use a component’s state to control if the content is editable. Using The Data Now, we have to be careful what we do with this. You have a few options here: Take the entire edited content, strip out anything dangerous (like JavaScript) and render what you are given, or you can come up with a system of grabbing the changed data individually. Either way you need to: Get the new text when it changes. Make sure the text is safe. Render back your entire HTML. Below you will find the same example above, but this time when you change the text there will be some information logged to the console. I am using the API to watch for these changes. MutationObserver So what did I do? I added an attribute to every element that I wanted to watch. You don’t have to do this, but it lets you hone in on specific editable items. If you do this, be careful not to turn on edit mode for tags you aren’t watching for changes. I inspected the mutations to find out if they contained the attributes I was looking for. If they did, I sent that element’s attribute name and new content to the output (in this case, the console). I think that’s pretty simple. For your purposes, you can replace the console with a backend service that saves the changes. You’ll want to make sure no dangerous JavaScript has been added, so that it doesn’t open you up to attacks. XSS 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

Bank of America

Easily create an HTML editor with DesignMode and ContentEditable

Digital to analog (DAC) converter with an Operational Amplifier (Op Amp) Today in my linear circuits 2 class, I learned about making a 4-bit DAC from an Op Amp. I’m going to assume the reader knows about (Best definition I have so far is the ability to do math in a circuit: Integration, derivatives, etc.) Op amps Analog signals, for example audio, are time-varying, where a digital signal is discrete (what computers deal with). So its important to be able to go from a digital signal to an analog signal and reverse. An example is you want your computer to process some sound, then output it to a speaker with some transformations to the signal. You will need an ADC for your computer program to be able to deal with the data, then you want to use a DAC to send your transformed signal back out the speaker. The following is a 4-bit DAC with a simulation showing the digital version [V4, V3, V2, V1] to the Vout analog signal. EDIT: Added simulations on my github

Making a DAC from an Op Amp

Setting up your own server will require good knowledge of the subject so that you do not leave any corner untouched. This is not the case with Amazon SQS as it is pretty quick to get started with. The beauty of SQS is also that things do not get lost–independent of any server–and also it eliminates two threads trying to do the same job and bumping heads. Once anything receives the message in the queue, they have an exclusive lease on it for a certain period of time. This makes it especially great once you need to scale to multiple worker servers. Each one just gets the next job in the queue and does its thing, independent of any of the others, and then removes it from the queue once done( ). from Jason Byrne Remark: — Before starting steps below, Clone , and do npm install. Sample Git Step: set up access-key and secret-key $ node sqs_createqueue.js $ node sqs_listqueues.js $ node sqs_getqueueurl.js (the reture url is used in step 5 and 6) $ node sendMessage.js $ node receiveMessage.js 1- set up access-key and secret-key Go to to create an user whom the system is going to generate access-key and secret-key to ( ). IAM management console for more information Before creating the user, a configured group with SQS permission is required. In the permission windows, select the click-box for , and next. AmazonSQSFullAccess Add user to the group with access SQS permission. Generating and , which will be used in later. access-key secret-key config.json Create a file under the Node.js directory, in which paste the and which generated from the previous step to field and . config.json access-key secret-key accessKeyId secretAccessKey 2- Creating Queue Amazon not only brings us Another great things Amazon provides us are, very easy to read documentation and super easy to use sample code. With the and git example, running the Helloworld example, sending/receiving message is just a piece of cake. diverse doc Creating a Queue run sqs_createqueue.js file $ node sqs_createqueue.js Success https://sqs.us-east-1.amazonaws.com/xxx/SQS_QUEUE_NAME List Queue $ node sqs_listqueues.js Success [ 'https://sqs.us-east-1.amazonaws.com/xxx/SQS_QUEUE_NAME' ] Get Queue Url $ node sqs_getqueueurl.js Success https://sqs.us-east-1.amazonaws.com/xxx/SQS_QUEUE_NAME In , set value to valuable from the return result, and the is going to be sent: sendMessage.js QueueUrl message “Information about current NY Times…” Sending Message to Queue $ node sendMessage.js Success 169607bb-xxx-xxx-xxx-d4d1cc270e9f Receiving Message from Queue In , Set value to from the result: receiveMessage.js QueueUrl sqs_getqueueurl.js $ node receiveMessage.js { ResponseMetadata: { RequestId: 'f7ae9017-0692-5eae-874e-c0e0a13a070b' }, Messages: [ { MessageId: '169607bb-3d5a-4dab-a8bf-d4d1cc270e9f',ReceiptHandle: 'xxx',MD5OfBody: 'xxx', Attributes: [Object],MD5OfMessageAttributes: 'xxxx',MessageAttributes: [Object] } ] } Body: 'Information about current NY Times fiction bestseller for week of 12/11/2016.', Note Message Attribute VS Message Body — are supposed to be used as message metadata (like timestamp or possibly some category) and not the message itself. Message attributes — Reference: https://github.com/awsdocs/aws-doc-sdk-examples/tree/master/javascript/example_code/sqs http://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/sqs-examples-using-queues.html https://github.com/wahengchang/aws-sqs-example

Amazon

Super

Fast setup Helloworld in AWS SQS(Message Queuing Service)

Photo credit : http://www.magic4walls.com/crop-image?id=14269 My career started two-and-a-half years ago, when I transitioned from back-end development to mobile , along with the support of a four-person Android team. A year later, I joined a series-B startup, where I was one of two Android engineers for most of my time there. Working on small teams was a great way to have independence and also learn from other engineers. Android development But then, five months ago, I took a leap from small team to no team when I joined a seed-funded startup of six employees as their Android engineer. In my new role, I’ve been building the app from scratch, which just got ! only Winnie released It turns out this was a big leap. Flying solo has been a challenge, but it’s also been extremely rewarding. I’ve learned along the way that there are pros and cons to working alone. Most importantly, there are things you can do to set yourself up for success. Here are some of the tactics that have helped me thus far. Be connected with the community. Do your homework. One of my worries about going solo was not having Android teammates to discuss new ideas with or be a sounding board for their ideas, which I’ve thoroughly enjoyed in my previous roles. The good news is that there are tons of resources available online to expand your knowledge and perspectives. From online talks from various conferences such as etc to your timely dose from and , there are many ways to broaden your thinking. DroidCon , 360|AnDev , Fragmented Podcast , Android Dialogs Android Weekly My personal favorite is — the code samples with every bite-sized lecture keeps me on my toes! Local meet ups or virtual communities like the , Slack groups and Twitter are great places to continue the conversation and ask questions when stuck! Caster.io AndroidDev subreddit Google+ communities , Review your own PR’s and maintain high standards. I highly encourage opening PR’s and then reviewing them yourself. It will feel silly commenting on your own PR’s, but I think it’s a healthy habit when working by yourself (also discussed in this relevant Android Dialogs ). episode I do a first-pass using the preview feature of Github, and then let it sit for a while before I look at it again. I try my best to review my PR’s as I would review PR’s from a peer, and thus hold myself to the same standards. A second look at all your code also helps catch bugs and edge-cases, as well as keeps your code consistent and clean. A “bad” pattern is often better than no clear pattern. You will have to make many decisions — should you use , , , and/or another architectural pattern? Fragments or custom ViewGroups? What should have abstractions and what shouldn’t? MVVM MVP Flux It’s not uncommon to start with one pattern and then realize another pattern is better when you’re at the beginning of a project, which leads to either some refactoring or diverging of patterns. While it makes sense to break your patterns for certain cases, it is best to be mindful of refactoring and changing it consistently everywhere when you’ve found something you like better. This might sound obvious but it’s easy to just use the new pattern for all the new code when you’re working by yourself, which can quickly result in a confusing and incoherent codebase before you know it! . Even if the patterns aren’t great, consistency makes it easier to fix down the line Strongly consider using Kotlin. Especially if you are starting from scratch! If not, consider giving it a shot with the next class you’re going to write. I didn’t end up using because I wasn’t confident about pitching the idea, since I had zero experience with it at the time and didn’t want to discourage the back-end Java developers on the team from contributing to the codebase. Kotlin However, after watching on Kotlin and doing more research, Kotlin has plenty of advantages — even just avoiding crashes because of null pointer exceptions and not dealing with Java boilerplate has me sold! This by Jake Wharton is also a great starting-point. Christina’s talk if I were to do it again, I’d have at least tried it. talk Try to keep control by not being too reliant on third-party libraries. I remember spending a bunch of time trying to decide on a library to use for MVP, as there are many of them. While being spoiled for choice is a great problem to have, I ended up implementing a simple version myself and have been very happy with it! When choosing what third-party libraries to use, I’d suggest considering whether you really need it and how it would restrict the development of the app in the future — does it make unit testing harder? Does it restrict using features that Android gives for free, like transition animations between screens? Is it actively under development and do many apps use it? This helped me make informed trade-offs and decisions. There is a library out there for pretty much everything, but you’re better off implementing some stuff yourself. I’d recommend optimizing for retaining as much control as possible without reinventing the wheel. Have a testing and accessibility plan. If you are building from scratch, it is very exciting that you have a from day one! And if not, you can try doing it right with all the new code you write! chance to do this right It isn’t uncommon that testing and accessibility take the backseat when trying to hit aggressive deadlines — and when you’re solo, it can be harder to find time for it since you aren’t sharing the load with anyone else. I will admit that I am only in the beginning of this journey myself, however I wrote code with testing in mind by using dependency injection, Model View Presenter pattern, exposing only interfaces of my model objects to the UI, and so forth with the goal of making it easier to test. I also had build after each commit from the beginning of the project, as a sanity check and to get closer to running tests. CircleCI For accessibility, I add content descriptions whenever I can, and use the before a release to figure out what I should focus on next. There is definitely more work to be done, but it is a start. Here is a great by Kelly Schuster on actionable steps that developers can take to make their apps more accessible. Accessibility Scanner talk If you aren’t able to spend time on writing tests, then have a manual testing plan handy. For example, write down different test cases (positive, negative) in a document for each feature and make sure to test those before every release! . Set deadlines for yourself to start writing tests, and do the same for accessibility improvements, otherwise they’ll most likely never get done Tell your iOS designers that they are wrong and look for potential Android converts :-). Don’t be afraid to stand up for what is right for your platform! When you’re solo, you are responsible for bringing others up to speed with the latest Android UI patterns, as well as the codebase. I mostly worked off iOS screenshots but used the and well-designed Android apps as resources to help me convert those designs to Android. Also, there is nothing better than linking to the official material design documentation to make your point! material design spec Regarding the codebase, I helped bring my CEO up to speed with our architecture and concepts like MVP, Dagger2, RxJava2 and so forth when she helped out for a couple of months. I’d recommend keeping a lookout for potential Android converts, as explaining your decisions to someone or teaching them a new concept helps you really own it or alternatively, realize your mistake. Go to beta as early as possible. This is applicable if you are working on app that hasn’t been launched yet or are making major changes to an existing app. Google play has an , and within the beta channel you can either have a closed or open beta. alpha and beta channel If you are working on an existing app, you can still have a beta run in parallel, so long as it’s version is higher than the production app. If it is an open-beta, users will be able to opt in on the playstore or by clicking on a link. If you are trying to test out changes of a smaller scale, then might be better for that. staged-rollouts If you are working on a new app, I’d suggest Our first closed beta had very few features, but it helped us iron out bugs early on, get onto a regular release train and receive valuable feedback throughout the process. This also resulted in a stress-free and smooth launch! having a closed beta as soon as possible, and converting that to an open beta when it’s ready, before the launch. Going solo for the first time is a great learning experience as you get to like never before, be more self-reliant, exercise total creative control over the codebase (for better or for worse), learn more about what you like, and deal with making mistakes that you only have yourself to blame (yay). I was nervous about going solo but it turned out to be a fun experience as the above suggestions worked for me. I hope they will be helpful for you too! challenge yourself Are you considering going solo or want to share your experience? I’d love to hear from you! Please comment or ❤ the post, or feel free to get in touch on . Twitter

BUNCH

Caster

Google

Slack

Timely

Twitter

YouTube

Flying Solo with Android Development

Photo by Evgeny Tchebotarev When a startup in California wants to work on a new mobile app, a group of guys get together and start working. When it’s time to release a newly baked app, the means are always the same — launch it on Product Hunt, maybe do an AMA on Reddit, and hopefully get a TechCrunch or Recode coverage to boost the downloads. After this is done, there is some hope and pray (and some growth hacking) involved to ensure the app is viral enough to get organic downloads. That’s about it. Both Google Play and Apple App Store are walled gardens. The effect of a walled garden has created some new types of agencies, focusing on ASO (App Store Optimization). Just like more traditional SEO shops, but without clear rules of engagement, both stores change how their treat those “optimizations” from time to time, moving apps in ranking depending on title spamming, keyword spamming, and so on. To understand why we are here today, we need to go back in time. The change from telecom-owned market to a software-owned market happened in the last 10 years. Telecoms lost their ability to control what they can place on a consumer phone (it often was ), while Google and Apple were able to force their rules of engagement onto the market. The walled garden was erected, first by Apple and later by Google, and left everyone else out. nothing High profile breakups, like throwing Google Maps out of the Apple Store, affect a lot of smaller players too. For example, 500px was of App Store for a week. And some apps were banned or , like F.lux, as an example of walled garden approach. kicked out removed altogether This scared a lot of big app developers, including Facebook and WeChat. So they are building their own app stores within their apps, like games and gifs for Messenger, and for WeChat. mini programs Of course, big players aren’t afraid to be kicked out from App Store, but rather they understand that the app discovery is utterly broken, and needs to be moved to a place where people can potentially discover new things — by chatting and sharing them more naturally. It’s a step to end the dominance of existing kingmakers, Google and Apple. However, in China, along with South East Asia, the things aren’t done the same way. For starters, there are several app stores serving as an alternative to Google Play, which is available in a very limited form in Mainland China. The names of these Chinese app stores will sound familiar: Baidu App Store, Tencent App Gem, Xiaomi App Store, Huawei App Store, Wandoujia, and so on. The names of these Chinese app stores will sound familiar: Baidu App Store, Tencent App Gem, Xiaomi App Store, Huawei App Store, Wandoujia, and so on. The reason for multiple App Stores is twofold. First, Android is free, and becoming a commodity, so manufacturers are forced to fork a version of Android and supplement it with own App Store to improve their diminishing margins from selling hardware. Generally, other than Apple and Samsung, the rest of the industry is . Having own App Stores allows phone makers to make money in two main ways: paid apps, with a revenue split, and pre-installs, pushing specific apps to handsets directly. losing money on hardware For smaller players, like India’s Micromax or Indonesia’s Advan, operating own app stores is expensive (and using Open Handset Alliance original Android means non-existing margins on hardware with zero upside on services), so they turned to third-party Android makers, who would do three-way revenue share — with app makers, smartphone manufacturers, and themselves. I first got a wind of this around 2012 when a big smartphone maker approached 500px to work on the pre-install deal of 20 million phones. We turned down the offer, but I didn’t realize that it was just the tip of the iceberg — manufacturers are now starting to act as kingmakers, promoting apps to hundreds of millions handsets at the same time. This approach is like turning Silicon Valley on it’s head — instead of spending $1–5 per download ( ) to acquire a user, these companies do revenue share deals, but don’t have to spend upfront capital to gain millions of users, effectively crushing competition before they can realize what happened. mileage can vary As more Chinese handset makers start expanding into developing markets, like Indonesia, India, Brazil, Russia and so on, we’ll see more localized approach to controlling App Stores, app distribution, and the making of kings through aggressive distribution deals. Evgeny Tchebotarev is a founder of 9m+ strong community 500px , and currently does these five things to help companies succeed. He is based in Taipei, Taiwan. You can email him at e@e15v.com. If you enjoyed reading this, please click the heart ❤ icon below. It helps other people like you discover good stories.

Apple

Discovery

Facebook

Huawei

Samsung

Techcrunch

TENCENT

A World Of Difference: How Mobile App Distribution Is Shaping Up In Asia

A for Building Successful & delightful Products Framework Lots of products are born every day, and as a product manager, it’s your responsibility to ship your product making sure it’s the right one for the right audience. So, what are the guidelines you should follow while developing your product, what are the things you should care about and how will you know whether you have delivered a good product or a bad useless one? I have recently been able to develop a Framework for thinking that will help answer these questions and put us on the right track making sure we are setting the right goals and knowing where we are headed to. I called this framework: or VER Value, Experience & Reward. As the name states, the framework is built up of three key components: Value: You will have to ask yourself: What is the value my product is providing and how will it make the users life better. Delivering valuable products is not easy at all, actually it’s a harsh and long process of many iterations. The world is full of useless ideas that people have shipped and no one is using it just because they have not asked themselves such questions. Thinking about the value is, of course, valuable in every stage although it’s relatively more important at the beginning when you want to validate your assumptions and make sure you are on the right track. Experience: How will users reach and use your product? What will be the medium, will it be on mobile, desktop or indirectly via an API? How will users interact with your system and other users and what will be the overall experience? Again the world is full of loads of applications which can be valuable but their creators did not give the right amount of effort into thinking about the user experience, user journeys and activity maps. The definition of a successful user journey is crucial in this step. Reward: So now you have developed an amazing product with great value and astonishing experience, the next important question to ask yourself is: What will be the reward the users will be getting in return for the investment of time and effort they have put into using it? Sometimes, the value in itself is enough as a reward, but in most of the cases, the user needs to get a reward which can be physical or emotional and can also be direct or indirect. Finally, you will have to make sure you are ensuring the right balance between these three key components and setting their relative importance and priority based on the stage of the product. This is a framework of thinking which I think is useful to work on during the whole life cycle of a product and not just a one-off in a specific stage. I have applied this framework in my current company (I am working as a Product Manager) as well as my baby . At , we are working on delivering the best content for companies and helping them work faster and more efficient by increasing their teams Knowledge. Onfido startup Knowledge Officer KO KO is not about NEWS; we focus on the life-changing, deep and timeless knowledge that gets you ahead of the curve! Our is differentiating between Knowledge and News and also between Low-quality Knowledge and Hard-earned Knowledge. We are hoping that everything you read on KO should take you a step further and deepen your knowledge more and more. value We also believe that reading and sharing knowledge does not have to be thought of as a Feed-Surfing boring process! The process needs to be redesigned in a way that makes the of gaining knowledge both beneficial and amusing at the same time. experience We believe that something you learn today may help shift your career in the near and far future, these things are what make changes to the humanity and such information is too invaluable not to be shared. If you have not heard of Knowledge Officer , please check out our Launch Post and if you liked the product please give it your love on product hunt and follow our updates on facebook & twitter . Let me know your thoughts about the VER framework!

Value, Experience & Reward

This is part four in a series. You should also read , and . part 1 part 2 part 3 So we have at least one remaining major problem. When Elm removes the node at the root of our component tree as part of a route change we are potentially removing a large sub-tree that is under angular’s control without telling angular and without giving it a chance to perform its normal cleanup operations. This can and does lead to memory leaks and eventually crashes. You won’t notice this in the sample code because the effect is probably too small. To recap, when Elm changes route we trigger a digest loop as follows: function triggerDigest() {if(!compile) {return;}var $body = angular.element(document.body);var $rootScope = $body.injector().get('$rootScope');var $location = $body.injector().get('$location');var $compile = $body.injector().get('$compile'); $location.$$parseLinkUrl(window.location.href);  
$rootScope.$apply(function() {  
    $compile($body)($rootScope);  
});  
observer.disconnect();  
listenForRouteChanges = true; } In order to preserve the $destroy behaviour of angular and hopefully avoid memory leaks we need to do something different. We must create a scope each time from the $rootScope and then compile our root node against that new scope. Then in the next iteration, if that scope we created exists, we will call $destroy on it before we overwrite it with the next new scope. This way, angular will cascade the $destroy call down through the scope hierarchy and everything that needs to be cleaned up will be cleaned up. So the code above will now look like this: new let activeScope = null; function triggerDigest() { if(activeScope) {activeScope.$destroy();} if(!compile) {  
    return;  
}  
var $body = angular.element(document.body);              
var $rootScope = $body.injector().get('$rootScope');    
var $location = $body.injector().get('$location');    
var $compile = $body.injector().get('$compile');

**activeScope = $rootScope.$new();**

$location.$$parseLinkUrl(window.location.href);  
**activeScope.$apply(function() {  
    $compile($body)(activeScope);  
});**  
observer.disconnect();  
listenForRouteChanges = true; } Using the AngularJS chrome plugin it is now easy to see that scope hierarchy is now being pruned on each route change as we would expect and hopefully, the memory leak problem goes away (or at least is no worse than it might be with regular angular). As before, full source for this proof of concept can be found . here

Different

Replacing the angular 1 router with Elm — Part 4

Improving your web page loading is not a trivial task. It takes a lot of time and requires a lot of knowledge. To make it easier we have library which should help you with that. pwmetrics How do you always measure? Let me guess — you open chrome, timeline tab and so on and so far. What do we provide you with? Command in console — . pwmetrics uses API for getting metrics values like , , , , and . pwmetrics Lighthouse [First Contentful Paint](https://docs.google.com/document/d/1kKGZO3qlBBVOSZTf-T8BOMETzk3bY15SC-jsMJWv4IE/mobilebasic?pref=2&pli=1) [First Meaningful Paint](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) [First Interactive](https://docs.google.com/document/d/1GGiI9-7KeY3TPqS3YT271upUVimo-XiL5mwWorDUD4c/edit#heading=h.k1h25blerz3i), Perceptual Speed Index ([more about it](https://www.instartlogic.com/blog/perceptual-speed-index-psi-measuring-above-fold-visual-performance-web-pages)) First Visual Changing Visually Complete 100% Visually Complete 85% Those values you can get in format using json . pwmetrics https://example.com --json {"runs": [{"timings": [{"title": "First Contentful Paint","id": "ttfcp","timestamp": 82750857804,"timing": 838.263,"color": "green"}, {"title": "First Meaningful Paint","id": "ttfmp","timestamp": 82750857814,"timing": 838.273,"color": "green"}, {"title": "Perceptual Speed Index","id": "psi","timestamp": 82750873600,"timing": 854.059,"color": "blue"}, {"title": "First Visual Change","id": "fv","timestamp": 82750873541,"timing": 854,"color": "blue"}, {"title": "Visually Complete 85%","id": "vc85","timestamp": 82750873600,"timing": 854.059,"color": "blue"}, {"title": "Visually Complete 100%","id": "vc100","timestamp": 82750873541,"timing": 854,"color": "blue"}, {"title": "First Interactive (vBeta)","id": "ttfi","timestamp": 82750859471,"timing": 839.93,"color": "yellow"}, {"title": "Time to Consistently Interactive (vBeta)","id": "ttci","timestamp": 82750859471,"timing": 839.93,"color": "yellow"}],"timestamps": [{"title": "Navigation Start", "id": "navstart", "timestamp": 82750019541}],"generatedTime": "2017-05-17T11:50:08.096Z","lighthouseVersion": "2.1.0","initialUrl": "http://example.com","url": "http://example.com/"}]} Or you can use pwmetrics [http://example.com](http://example.com) to see fancy chart with , , , values. First Contentful Paint First Meaningful Paint Perceptual Speed Index Time to Interactive Results of run “ pwmetrics [http://example.com](http://example.com)" command Nexus 5X Note: Results are measured with device emulation, _5x_ CPU throttling, _1.6 Mbps_ download speed and _750 Kbps_ upload speed. To get approximated results use median run option. pwmetrics http://example.com --runs=3 It will get 3 different metrics and approximate them. Note: As far as _pwmetrics_ depends on _Lighthouse_ you can pass all flags to it, using CLI. Available Lighthouse flags - are described here . Example_:_ _pwmetrics --disableDeviceEmulation "chrome://history/" --save-assets_ CI usage Lets go further and decide to use it with CI. You really don’t wanna accept new changes which downgrade your site/app . We took care of it too. performance Run pwmetrics --expectations What do you need before running that, is to set up some config either in your or in your own file? package.json Other then , configuration file can be used. See more at package.json docs pwmetrics --config=./path-to-file.js package.json "pwmetrics": {  "url": "http://example.com/",  "expectations": {    "ttfmp": {      "warn": ">=500",      "error": ">=1000"    },    "ttfcp": {      "warn": ">=500",      "error": ">=1000"    }  }} Result of its work You also can look a we’ve made for integrating it with build . recipe tools Show results in a DevTools Timeline Viewer it’s standalone project helping developers share their traces between each other. DevTools Timeline Viewer How it works together: pwmetrics --view --config=./pwmetrics-config.js Read how to configure. docs https://goo.gl/4opmye What a background of this? We just get traces, upload them to your Google Drive and open Timeline Viewer with these traces. Ok. That’s it you might think. But not. We prepared one more cool feature. Analytics purposes It’s really helpful when you can submit metrics results into service/docs/sheets, make some graphics and share these results with others. Here it is pwmetrics --submit Read to configure config. more This command will submit all received metrics into . Google Sheets Note: For now we support just Google Sheets, but are open to new contribution to make it works with other services :) : Example pwmetrics --submit --config=./pwmetrics-config.js : Results See at . Google Sheets Enjoy! :) Thanks to ‏ ! @paul_irish @samccone @pedro93_ UPD: Article was updated due to version 3 release.

Progressive

Yellow

Easy Progressive Web Metrics

Okay, This is bit of a crazy claim. Everyone tells you build your web app in a language you are most familiar with but I am going to share my experience and why I think ruby on rails is worth learning for your new project. programming I am a software developer with around 4 years of software development experience. Around 2 years of nodejs/javascript and 2 years of java. So I have seen fair amount of 2 competently different kind of languages. Enough about me lets get to the point. I had the idea of building 4–5 months back and were deciding on building basic prototype to validate the initial idea. Nodejs experience was not so good for me in my first job so nodejs was out of question. Java is too verbose and slow for prototyping so I tried play framework since it usages java and scala which is close to java and created a basic prototype in play. Then after doing little bit of experimentation and getting positive feedback on prototype my friend joined me and suggested we build from ground up in ruby on rails. I was little bit hesitant as I had no idea about ruby as a language and rails a framework. Since then I have been amazed with how fast development is with ruby on rails. Here are few points why I think ruby on rails is amazing and you should use it for your next web app/project. Colearn startup After doing bit of research on internet and bit of convincing from my friend we decided to go with ruby on rails. Rails follows a convention over configuration philosophy and has a strong focus on web application development. Rails provides fantastic tooling that helps you to deliver more features in less time. It provides a standard structure for web apps, where all the common patterns are taken care of for you. There’s a gem (3rd party module) for just about anything you can think of. It’s ORM(Object relational model) Active record is simply best so you don’t have to worry about writing queries and managing database. Db versioning, migration, hot reloading, email framework and any other thing you can think of is already solved in ruby on rails. Don’t believe me try building small blog website in rails by following guide http://guides.rubyonrails.org/getting_started.html Finally I am still learning new things about ruby on rails. I simply loved ruby on rails and changed my view about frameworks and really improved my understanding of designing API, frameworks etc and it is worth learning just for that. We are trying to solve the problem of learning together by building Colearn and deeply believe learning should be a social activity. Let me know your experience and hit like/recommend if you liked the content. Edit-1: We are no longer maintaining colearn :( but it has been . So feel free to host it or use it for any purpose. if you need any help. made open source contact me

Ruby on rails is more productive even after learning from scratch for your new web app.

Like an invading army, the popular kids at my middle school would spread across the halls in the morning wearing Starter jackets like this: Things changed in high school when Ted from Oregon arrived. He was so exotic to us midwestern kids: rather than an expensive jacket, he wore faded t-shirts. He wore flip flops vs. expensive Nike Airs. Sometimes his hair was a mess. Ted became popular because he was a nice, smart, fun guy — not for expensive clothes. Foosball tables, scooters, and kegerators: you can’t buy your way to cool It’s intimidating to start a self-funded business, show up at a cool startup office for a meetup, and think: “My God, they have a Sub-Zero fridge full of La Croix. How can I compete with that?” What follows are some suggestions for perks based on what works at . Anyone can implement these: they don’t cost any money. They are soft on the surface, but universally embraced. I like to think Ted from Oregon might like these. Scout Three $0 Perks : smart, motivated folks like to know they will rise or fall based on their own merits. Let your employees answer the following question: “what’s your vision for your work over the next 3 months?”. You’ll knowing your employees are thinking about their time at a macro level, just like you. Autonomy love : the word is out — — but the freedom for doctor appointments, picking up kids from school, etc. makes a huge difference in the day-to-day life of our employees. Unlimited PTO unlimited vacation time is a scam : On Friday afternoons, we have our own company-wide meetup (aka Social Coding). Most of our employees have young kids, and it’s difficult for them to find time to attend meetups in the evenings. The golden rule of Social Coding: no work references. It’s about learning new things. Internal Meetups Now, more than ever The superficial startup perks offered today are a bit like showing up with a Starter jacket 5 years late: everyone, even the company offering them, knows they are following the crowd. Don’t be afraid to be authentic: great folks will appreciate it. What are your favorite cheap perks?

Nike

Read My Stories

Are you even startup-ing if you don’t have a foosball table?

Given the fact that it’s one of the fundamental packages for scientific computing, NumPy is one of the packages that you must be able to use and know if you want to do with Python. It offers a great alternative to Python lists, as NumPy arrays are more compact, allow faster access in reading and writing items, and are more convenient and more efficient overall. data science In addition, it’s (partly) the fundament of other important packages that are used for data manipulation and which you might already know, namely, Pandas, Scikit-Learn and SciPy: machine learning The Pandas data manipulation library builds on NumPy, but instead of the arrays, it makes use of two other fundamental data structures: Series and DataFrames, SciPy builds on Numpy to provide a large number of functions that operate on NumPy arrays, and The machine learning library Scikit-Learn builds not only on NumPy, but also on SciPy and Matplotlib. You see, this Python library is a must-know: if you know how to work with it, you’ll also gain a better understanding of the other Python data science tools that you’ll undoubtedly be using. This cheat sheet means to give you a good overview of the possibilities that this library has to offer. Go and check it out for yourself! NumPy Cheat Sheet Download the cheat sheet here: https://www.datacamp.com/community/blog/python-numpy-cheat-sheet You’ll see that this cheat sheet covers the basics of NumPy that you need to get started: it provides a brief explanation of what the Python library has to offer and what the array data structure looks like, and goes on to summarize topics such as array creation, I/O, array examination, array mathematics, copying and sorting arrays, selection of array elements and shape manipulation. NumPy arrays are often preferred over Python lists, and you’ll see that selecting elements from arrays is very similar to selecting elements from lists. Do you want to know more? Check out DataCamp’s Python list tutorial. PS. Don’t miss our other Python cheat cheets for data science that cover , , and the Scikit-Learn Bokeh Pandas Python basics. Originally published at www.datacamp.com .

NumPy Cheat Sheet: Data Analysis in Python

Here’s the code for some Game of Fifteen implementation. (the I : -1- -15){the Tile = "tile_" & I; ( Tile- - ) ( ((Tile- ) - ("tile_16"- ))+ ((Tile- ) - ("tile_16"- )) == 105 ) -Tile- -"tile_16"- -200- , -"tile_16"- -Tile;} -"cursor"- -( -x)-( -y); for from to if is clicked if abs x x abs y y slide on in ms teleport on teleport to mouse mouse What can you say about the language this piece is written in? You may probably conclude that it is some kind of DSL. It has some very application specific functions like and . It is verbose, but it is meant to be read by someone who doesn’t know all the conventions like do you set time in hours or milliseconds. It has some kind of dynamic typing and its functions may receive arguments from both ends. slide teleport But what is this language anyway? It’s C++. Here you can . It’s a completely valid C++ piece of code written in a language inside a language. And this nested language is completely different from the host one. It has different typing and different syntax. But it’s still C++. see for yourself Never mind this piece though. It’s not important, it’s only an example of how deep one can go. And ‘can’ doesn’t mean ‘should’ anyway. Rather the opposite. What’s important is that the edge between making a new language and expanding an old one is rather thin. You don’t have to sit in a committee or be a compiler designer to make a language. In fact, making the language is the part of every programmer’s day-to-day job. Every time you introduce a new word: write a function, or a data type, or a type class— you make a bit of a new language. And while the idea of each team member contributing to the whole system by writing in his own language, like Forth, Python and Java, is horrifying, the reality of each team member making his own language without giving it a name is somehow less so. But it’s basically the same thing. Bluntly introducing new words to the language doubtlessly increases the complexity of the code written in it. Of course you can actually reduce complexity by providing good modularity, and each module would require a name hence adding a new word to the language. But that’s an investment. You buy some simplicity with some complexity. Still every investment needs a good ROI justification. Is this abstraction layer truly unavoidable? Are these wrappers helpful? Who will benefit from this data types redefinition? Do you really want this method? IsZero() These are not at all rhetorical questions. Sometimes you do, sometimes you don’t. Sometimes you just don’t know, and you have to learn more about your users and how do they plan to benefit from your work. But this will pay off eventually with simpler code and happier users. This little exercise — thinking of adding entities to the system like an investment — is the key to stop making a new language nobody really wants to learn and start living.

Mind

How to stop making new languages and start living

The future of open source software is incredibly bright, and we have and to thank for building the foundation. Webpack OpenCollective It’s a future where teams actually contribute to the sustainability of the open source code they use and are incentivized to do so not for charity, but for real ROI. It’s a future that I’d argue might even calm down the constant introduction of new tech in the industry. How it began , the world was given , a fundraising site for groups (but is primarily dominated by open source and coders). In early 2016 OpenCollective One of their goals that I love is to , but rather is a way to sustain a project that your company’s product relies on. shift the idea that giving money to an open source project is charity It wasn’t until October 2016 though that that vision started to come to life once the increasingly popular project joined the site. Webpack $15,000 in 3 months It didn’t take long before companies started contributing $100 or more per month to . Webpack on OpenCollective Here’s just a small chunk of the list of sponsors:( ) shameless plug for my company X-Team in the bottom left as we are big Webpack fans CapitalOne even committed to $12,000 throughout the next year. A year ago, these sorts of contributions to an open source project just didn’t exist unless you were backed by a massive company like Google (Angular), Facebook (React) or Acquia (Drupal)/Automattic (WordPress). Although I suspect some of these companies are sponsoring Webpack for marketing-related reasons, many are contributing because Webpack is a vital piece of their development workflow now. If Webpack’s core team were to drop out one day, a lot of companies wouldn’t have a sustainable workflow for the long-term. Also the speed at which new improvements and bug fixes can be made increases the better funded a project is. Not to mention just pure accountability — most open source projects get abandoned because actually getting paid through a job tends to trump their priorities. Webpack isn’t alone, just look at Vue.js Evan You, the creator , for about a year now so he could focus full-time on the project. Vue.js has been earning a living via Patreon The result? Companies now choosing Vue.js over React. When you put money behind these projects, the chances of creating sustainability for open source projects is far greater. Remember ? That’s what happens when an open source project (OpenSSL) gets a shoe-string budget. Heartbleed The future: Open source projects creating incentives for sponsors , Webpack gave us a glimpse into the future once again. Just today Below you’ll see that they are now offering, via their OpenCollective, office hours and on-site training for any of their sponsors contributing $500+/mo. I can already hear CapitalOne opening their wallets. In the future, not only will contributing funding to open source projects help ensure sustainability of projects, but it’ll also deliver value in the form of support to help your team get even better at using those projects. And Webpack goes on to show us glimpse into the future. yet another At you can vote on how the core team should be spending their time: https://webpack.js.org/vote/ And best of all (and perhaps even a debatable topic), sponsors are given “Golden influence” with some more weight to their votes. I imagine this is of the ways to incentivize companies to become sponsors, and I can’t wait to see what Webpack and other projects will bring in the future. just the beginning The Larkin Effect Sean Larkin of Webpack at NEJS Conf It’s important to note that this future isn’t possible without more people in the dev community like , Webpack’s ambassador and core team member. Sean Larkin He close-to-religiously promotes Webpack and does a damn good job at ensuring Webpack has a strong future. Much like Evan You of Vue.js, these guys create confidence for companies to want to invest in them. What I hope and pray is that this movement does not stop here, that more open source projects follow Webpack’s lead and find creative ways to entice businesses to fund their projects by providing real value back to them. Otherwise, we’ll be looking back at this time in history as no more than , that which happens when you get Sean Larkin on your core team. The Larkin Effect As a greater dev community, we need to support and create more Larkinians (yep, just coined it) if we’re going to create this bright future. Consider this also a request to Sean to help teach others how to do what he does :) A slowdown in constant new tech? Finally, this future makes me wonder if it can create a slowdown in the dev community constantly needing to create new frameworks and libraries. If projects are actually sustained and supported and not dropping out all the time, does there become less desire to constantly reinvent the wheel? Is it possible that the cause of constant new tech in our industry is the result of projects lacking any support before they fall to the ? next cool thing Looking at well-funded projects like React and Angular and their relatively long existence, I can’t help but wonder this theory. Would love your thoughts in the comments. I put heart into every post I write. I’m incredibly grateful to anyone who returns the favor by clicking 💚 :) Ryan Chartrand is the CEO of X-Team , a global team of extraordinary remote developers who can join your team and start executing today. Check out and subscribe to X-Team’s blog at http://x-team.com/blog

Funding

How Webpack raised $15,000 in 3 months, and the future of open source

I remember from my agency days the age-old dilemma of an ‘interim fix’. You’ve scoped your app project, wireframed, designed and developed, and it’s finally time to launch. The client’s existing website needs to go dark while the new website propogates and comes to life. Did you remember the “Coming Soon” page? Some use it for weeks (others months 😂) but no matter who you are, at some point in your career you will launch a Coming Soon splash page for a client. Pre-meditated or not, it will happen. Today I will be showing you to how to build a simple Coming Soon splash page. The splash page that I will be using is a content-ready web application from . The landing page captures email addresses and ports them directly to MailChimp. It features beautiful full page rotating background images. Cosmic JS Once you’re done installing the app and deploying, you can edit its objects, change background images, copy, button call-to-actions, the works. If you want to move the splash page into production, you can easily slap a custom domain on the web app and deploy, then simply delete the bucket once the new site is live, or you can edit and curtail the bucket for your next client who needs an interim fix. Cosmic JS is an that makes managing and building websites and applications faster and more intuitive. By decoupling content from code, Cosmic JS empowers developer flexibility while ensuring content editors can plan and deploy content as it best suits them. We’ll be using Cosmic JS to install our example app, deploy and make content updates moving forward from the . API-first CMS cloud-based Content Management Platform Get started by for . Helpful resources are provided below to streamline your development operations. Signing Up Cosmic JS 1. Create a New Bucket Your bucket’s name is the name of your website, project, client or web application that you are building. I named mine “Something Big: Coming Soon” to remain concise for our example blog. 2. Install the Email Capture Landing Page Application Once you’ve signed up and named your bucket, you’ll be prompted to start from scratch or “see some apps”. For this blog I simply clicked the right button to “see some apps” so that I could begin the installation process for the . Cosmic JS Email Capture App App Installation Options gives you the ability to filter between programming languages such as , , , and more. Cosmic JS Node.js PHP React AngularJS Simply click “Install” underneath the icon to get started, or visit the . Email Capture Cosmic JS Apps Page 3. Deploy to Web I clicked “Deploy to Web”. I can then edit Objects while my web application is deploying. You will receive an email confirming the deployment of your web application. If you encounter any issues during deployment, you may be routed to the . Cosmic JS Troubleshooting Page Confirm Deploy Location and Branch Deploy, Deploy Away A little reassurance that you’ll soon be live and capturing leads! 4. Edit Global Objects Now you can edit Global Objects, Files, Users, Media and more. To edit the Email Capture app’s content and email triggers, click into “Pages” and scroll down to “Metafields” to edit social links, MailChimp List URL, Call-To-Action button text and more. Editing is a dream come true in the Cosmic JS Dashboard. To read more about how was built with editing content in mind, read . Cosmic JS Building With the Content Editor in Mind App Deployment Confirmation It’s as easy as signing up, creating a new bucket, installing the web application(s), edit objects and deploy! I get my confirmation email to access my web application and also see my options for bucket upgrades like . custom domains, one-click SSL, webhooks and localization is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the Cosmic JS API, please reach out to the founders on or . Cosmic JS Twitter Slack is the Co-Founder & CMO of , an API-first Cloud-based that decouples content from code, allowing devs to build slick apps and websites in any programming language they want. Carson Gibbons Cosmic JS Content Management Platform

Follow me on Twitter

Launch a Splash Page in 4 Steps

I used to write a lot of Angular back in 2015. But recently, the JS community has largely moved on from Angular 1 to other libraries, and in turn, so have my projects. I always knew in the back of my mind that technology — and the knowledge that goes along with it — becomes outdated, but this was the first time I experienced it for myself. I wondered: what parts of my Angular knowledge are now obsolete? What parts are long-lasting? And most importantly, how can I make sure that I always get better as an engineer in the face of all those fleeting frameworks and libraries? Fleeting Knowledge Let’s start by identifying the fleeting knowledge — the kind that won’t help us 10 years from now. That would be a framework’s API and syntax, like Angular’s syntax for one-way vs two-way binding, or the mechanics for how to make a directive. Knowing those nitty gritty details of Angular and its API is necessary to be productive in an Angular codebase, but it’s useless in any other codebase. I refer to this type of knowledge as the “how” — as in, “How do I do X in Angular?”. It’s also the kind of knowledge that’s easy to acquire. Picking up the keywords of a framework is easy — just google it, copy paste from StackOverflow, some basic pattern matching here and there, and we’re done. So not only is this type of knowledge fleeting, it’s also less valuable since it’s so commonplace. Companies don’t hire senior engineers for this type of knowledge. Enduring Knowledge The more enduring kind of knowledge is the “ ”. Why does Angular exist? Why does it have the features that it has? What problems is it trying to solve? why Frameworks like Angular may have a short lifespan, but the problems they tackle live on for much longer. Angular was built to tackle the problem of writing, maintaining, and iterating on complex web apps. Any knowledge that helps us approach this problem will be valuable for a long time. In fact, it’s not a huge stretch to swap “web apps” for “software”, and suddenly we’ve got a problem that’s going to last an entire career! That’s the kind of knowledge we want — the kind. enduring Diving Deep Asking “why” and getting to those enduring nuggets of knowledge isn’t always easy unfortunately. The context and motivation behind a particular feature is the kind of knowledge that’s harder to come by, but it’s well worth the effort. Let’s go through an example. Say I google “Why should I use Angular”. I might run into reasons like this: MVC and separation of concerns Two-way data binding Dependency Injection If I don’t know what MVC and dependency injection are and why they’re good practices, then I’m simply left with more questions. Why would I want dependency injection? And why is separation of concerns useful? So let’s keep digging (disclaimer — this is super simplified): Angular uses dependency injection… …and dependency injection is useful for writing unit tests …and unit tests are useful for maintaining and iterating on software Got it! Now I learned about dependency injection, which a generic design pattern that’ll be useful to me past Angular’s lifetime. This knowledge also helps me better understand how and when to use that Angular feature, and when I can ignore it. Practical knowledge for our Angular work today, and enduring design pattern knowledge for the future. Win-win! In general, asking why is a process, just like installing a software dependency. We have to follow all the recursive dependencies until they all resolve, otherwise we end up with broken software — or in this case, incomplete understanding. We have to continually dig deeper until we hit a layer whose value we understand. ! recursive Kids know this intuitively Your brain’s dependency tree Here’s how I (simplistically) imagine the “Why Angular” knowledge dependency tree: Angular├─┬ MVC| ├─┬ Separation of concerns| | ├── Software Maintainability├─┬ Dependency Injection| ├─┬ Unit Testing| | ├── Software Maintainability| | ├── Development iteration speed├─┬ Two way data binding| ├─┬ Reconciling state| | ├── Reducing bugs At the top level we have the most specialized and most fleeting solutions: frameworks like Angular. One level deeper, we get into specific patterns that are common across different frameworks: DI, MVC, etc. As we dive deeper, we get into more fundamental software practices, and so on until we arrive at core problems in software engineering. engineering I love this visualization because it exposes the deeper level concepts for what they are: . Once we dive deep into a framework that uses MVC and learn what MVC is all about, then we’ll carry that understanding over to any other MVC framework we use in the future. It’s just like when a package manager installs a new package and finds one of the dependencies already installed — it can just reuse it. building blocks Having more building blocks doesn’t just makes us faster learners, it’s also essential for innovating new solutions. Almost every new piece of software is inspired by many other ideas before it. One example is , which is inspired by , , , and probably more (perhaps ). We stand on the shoulders of giants not just by using the software they built, but by understanding the ideas they introduced. redux Flux CQRS Event Sourcing Clojure atoms Personal Reflection I often find that the path of least resistance when working on a project is to just look up exactly what I need, paste it in, and ship it. But now I realize that plowing through projects semi-blindly isn’t the best idea for my personal growth. Looking back, I could’ve gotten more out of my Angular experience by: understanding Angular’s decisions within the context of the problems it was solving asking why and not being afraid of following the rabbit holes understanding the motivations and tradeoffs behind the Angular features We should learn frameworks not just to build stuff, but to learn new ideas because once a framework is out of use, the ideas are all that’s left. But when a framework doesn’t teach us anything new, I am reminded of Alan Perlis’s quote: “A language [or framework] that doesn’t affect the way you think about programming, is not worth knowing.” Even if frameworks come and go, we can still learn the ideas behind them and become better engineers, as long as we dive deep enough. 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

HackerNoon Tech Stories Archive January 17th, 2017

Easily create an HTML editor with DesignMode and ContentEditable

@justindanielfuller
Justin Fuller

Making a DAC from an Op Amp

@marclave
Marc Laventure

Fast setup Helloworld in AWS SQS(Message Queuing Service)

@peterchang_82818
Peter Chang

Flying Solo with Android Development

@anitas3791
Anita Singh

A World Of Difference: How Mobile App Distribution Is Shaping Up In Asia

@tchebotarev
Evgeny Tchebotarev

Value, Experience & Reward

@Ahmed_Sharkasy
Ahmed El-Sharkasy

Replacing the angular 1 router with Elm — Part 4

@julianjelfs_61852
Boolean Julian Jәlfs

Easy Progressive Web Metrics

@denar90
Artem Denysov

Ruby on rails is more productive even after learning from scratch for your new web app.

@kamalkishor1991
Kamal Joshi

Are you even startup-ing if you don’t have a foosball table?

@dlite
Derek Haynes

NumPy Cheat Sheet: Data Analysis in Python

@kacawi
Karlijn Willems

How to stop making new languages and start living

@okaleniuk
Oleksandr Kaleniuk

How Webpack raised $15,000 in 3 months, and the future of open source

@ryanchartrand
Ryan Chartrand

Launch a Splash Page in 4 Steps

@carsoncgibbons
Carson Gibbons

“How” ages faster than “Why”

@abdulnimeri
Abdul Nimeri

HackerNoon Tech Stories Archive January 17th, 2017

@justindanielfullerJustin Fuller

@marclaveMarc Laventure

@peterchang_82818Peter Chang

@anitas3791Anita Singh

@tchebotarevEvgeny Tchebotarev

@Ahmed_SharkasyAhmed El-Sharkasy

@julianjelfs_61852Boolean Julian Jәlfs

@denar90Artem Denysov

@kamalkishor1991Kamal Joshi

@dliteDerek Haynes

@kacawiKarlijn Willems

@okaleniukOleksandr Kaleniuk

@ryanchartrandRyan Chartrand

@carsoncgibbonsCarson Gibbons

@abdulnimeriAbdul Nimeri