How to use Butter Knife Actions in your Android App If you’re an Android developer you’ve probably heard of . Butter Knife Butter Knife makes binding your views in code really easy — no more pesky calls! findViewById It also has bunch more bindings for methods like and etc. OnClickListener OnTouchListener But there is a little-known feature you may not have heard of: Butter Knife Actions Butter Knife Actions work in conjunction with binding multiple views into a list of views: @BindViews({ R.id.product_name, R.id.product_description, R.id.product_price })List<TextView> productViews; Using Actions, you can apply an action to all views at once. Cool right? ButterKnife.apply(productViews, View.ALPHA, 0.0f); Actions work on Android like: View Properties Alpha Translation Scale etc But what if you want custom actions? Custom Actions Toggling view visibility is something you probably do a lot, and often on multiple views at once. While Actions don’t support this out of the box, we can write a custom action to make this super easy. We have 2 options here: a custom , or a custom . action setter An will simply perform an action on a view. For example set the visibility to GONE, or set text to null. action //custom actionpublic static final ButterKnife.Action<View> = new ButterKnife.Action<View>() { GONE @Override  
public void apply(View view, int index) {  
    view.setVisibility(View._GONE_);  
} }; //usageButterKnife.apply(productViews, ); GONE A is more flexible, and supports parameters. Setting a views visibility is better suited to a — we can create one setter rather than 3 separate actions: setter setter //custom setterpublic static final ButterKnife.Setter<View, Integer> = new ButterKnife.Setter<View, Integer>() {@Overridepublic void set(@NonNull View view, Integer value, int index) {view.setVisibility(value);}}; VISIBILITY //usage://with a setter we can pass an extra visibility parameterButterKnife.apply(productViews, VISIBILITY, View. ); VISIBLE What are you waiting for? Instead of doing this: productName.setVisibility(View.GONE);productPrice.setVisibility(View.GONE);productDescription.setVisibility(View.GONE); Do this: ButterKnife.apply(productViews, VISIBILITY, View. ); GONE Your code will love you for it ❤️ If you liked this article make sure to give it a few 👏’s, and follow me . on twitter

BUNCH

Super

Twitter

Take Action with Butter Knife

Do I have an issue with the iPad or is it the other way around? It’s been a few years since Steve Jobs talked about the post PC era. But my 2011-circa iMac is still chugging along as I type. However apps have been learning to do more things, and demanding more processing power to do those things, and my old Mac is having difficulty keeping up with them. The thing is I like my iMac. Its classic minimalist design looks, enhanced by the wireless trackpad and keypad, is every bit as contemporary as the day I got it. And I still get a thrill out of just turning it on, and seeing the world through its 21 inch screen. It’s not too small like an iPad, nor too big like a TV, but just the right size for relaxed reading, writing and watching videos. Unfortunately, it’s also a bit like one of those well preserved 70 year olds, whose age shows when asked to sprint. For instance, opening the latest versions of even an Apple app like Pages can involve a wait of close to one minute. If the Mac happens to be turned off when I need it suddenly, like say to answer a Skype conference call, it could mean a wait of five minutes for the people on the other end of the call, which can be interminable in today’s world of instant gratification. So I’ve been thinking of retiring the old guy lately, and replacing it with the latest iMac. That would come with goodies like fusion drive for quick starts, and the latest bluetooth for easy handover of docs I’m working on to my other Apple devices, and more. But all this comes at a hefty price. My problem is my iPad 3 is also having age-related issues. It’s slowed down to such a significant extent that I had to reset it, erase all apps, and reload with just a few basic apps. So the question I have been asking myself is instead of buying two devices, why not instead replace both with the latest iPad that is due any time now. On mulling this over, I realised that would means compromises on many fronts, and I’m not sure it’s worth it. Take the screen size. I can still have the same size by mirroring it, but it’s not the same. An app working on the iPad screen is optimised for it, and it may appear in low resolution on the Mac making for a poor user experience. Desktop versions of apps also tend to have more features. To illustrate, I’m currently working on Medium in my Mac’s browser, and it certainly is more flexible and has several more features than my iPad’s Medium app. Precision is another issue. I’m not a designer but I do touch up images once in a while. That kind of precise work is a lot easier on my Mac than with my finger on the iPad. My brother recently got the iPad Pro with the iPencil, but it has some way to go before it gets on the same level as the Mac. Though I’m willing to concede that may be because I’m not too familiar with the iPencil. Then there’s connectivity. I can stick a USB into the Mac and transfer almost anything. Or connect to my backup disks, and access old files. It’s possible on an iPad too, but it involves jumping through a lot of hoops. Finding stuff on the Mac is also much easier via the finder, while I have never been able to quite figure out how and where the iPad files away stuff. That way, Android and Windows tablets are far easier to use, but going outside the Apple ecosystem has its own issues. Even health wise, I think the Mac is better than the iPad, especially for long hours of use. My Mac’s screen is set at eye level, two feet or more from my face, which makes it less of a strain on my eyes and my back. I also suspect the distance reduces the effect of the light emitted by the screen on my eyes. The iPad does have its positives. The touchscreen, for one. I’m not too sure how useful that is on a desktop. We have a Windows touchscreen laptop whose vertical screen means your hand dangling is in the air while using the touchscreen, which is tiring. There’s the iPad’s portability, but that comes with the negative of having to remember to charge it. There are also a lot more apps for iPads, but again most of the apps on my Mac, do a bit more. All said and done, I think I will hang on to my old iPad for another year, but get myself a new iMac sometime this year. This should effectively postpone the post PC era for another five years for me. By then, the iPad should have got around its drawbacks, and be ready to take me into that fabled post PC era. On the other hand, maybe it’s the iPad who has an issue with me instead of the other way around. Jobs did give an analogy of people preferring trucks in the agrarian era, and switching to cars as the world went urban. Maybe I’m just a digital dinosaur pottering along the information highway in my old jalopy, and feeling a bit bewildered by the post-PC Ferraris zooming by.

Apple

Postponing the post PC era by five years

This is a story of how the load time of the UrbanClap website went from 13+ seconds to less than 5 seconds (3G Singapore Server on Mobile) in a month. And to corroborate that, let me start with some screenshots. This is where we were before we started this performance exercise: And below is the progress we made. Webpage Test(urbanclap.com/delhi-ncr-wedding-photographers), Singapore — EC2 — — — Mobile (Jan 2017) Chrome Emulated Nexus 5–3GFast Background We are a (mostly) responsive webapp using ReactJs with server side rendering, and (v1) as our bundling tool. We also have a on top to reduce our server load, and to further reduce our . For details on our tech stack and choices, you can . webpack varnish caching layer Time to First Byte(TTFB) read this post Start of 2017, we took on a month long project to improve our website performance, specifically the first time load of our listing pages (eg. ). These are our Google Search listing pages, which means most of our website traffic enters through here. Most of the users are unique and come through google search. So paying special attention to the first time load is extremely crucial when the user visits without any expectations. First impression could indeed be a last impression. Also, its well documented that the Google Search Engine prefers sites that are better performing and load in lesser time. www.urbanclap.com/delhi-ncr-wedding-photographers Why did we choose these pages? Why specifically the first time load? We researched a lot of resources, tried a lot of ideas, and did a lot of things. With the mammoth task now over, I listed down all the things we did (with helpful resources) for the benefit of rest of the community. One important thing to note is that . We still need to make sure we don’t hamper product, user experience, analytics etc. I can’t stress this enough. It’s easy to go overboard with engineering, but at the end of the day you are solving a business problem with end user and business in mind. we just can’t be blinded by website performance With that in mind, I have tried to bucket all the things which we did in roughly two areas: ship less assets, change order of things. In part 1 of this two-part series, I will talk about shipping less. Shipping less assets You can be as clever as you want about how you order the resources you send, but at some point, the bottleneck will be the amount of resources you are sending. Every single line of js code you write, external script you include, css tag you add, image you render on the page has to be not only downloaded, but also processed by the browser. This becomes especially important on mobiles ( , so don’t ) — connections are often shoddy (3g connection is a good scenario; there is still 2g and edge), hardware could be cheap and phone takes time to process css and js — all of which cannot be ignored. roughly half of the traffic comes from mobile Stats for urbanclap.com/delhi-ncr-wedding-photographers I will try to list down all the things which we did to trim down what we were shipping to the browser. The overall result of these steps is summarized nicely in the adjoining image. 1. JS Chunking If you are using react-router, it is relatively easy to create route specific chunks via . Here is a pretty good on how to achieve that with require.ensure. Make sure to name your chunks. When you have a lot of routes, it makes things a lot easier. webpack's code-splitting tutorial // creates a code split, and then asynchronously gets the js file// for that route.<Route name="details" path="/details" getComponent={(location, cb) => {require.ensure([], (require) => {cb(null, require('./containers/Details/DetailsPage'));}, 'detailsChunk');}}/> 2. CSS chunking While js chunking comes out of the box with webpack, for css chunking (ie different css for each route) you need to have some workarounds. For small apps, it might not be worth it to do css chunking. But for an app our size, it almost became a necessity. To achieve this, first you have to set in webpack config, one for each route you want to have a separate css for. Each entry point would now produce its own js and css. multiple entry points // produces detailsChunk.js and detailsChunk.cssentry: {...'detailsChunk' : ['./src/containers/Details/DetailsPage.js'],...} Finally it requires a bit of trickery to include the css for a route. Not only you have to get the name of the css file for that route, but also insert it as a stylesheet (make sure its browser compatible) in your document. // requireStyle - gets the name of the css file (detailsChunk.css)// and adds it as a stylesheet to the document as here:// https://github.com/guybedford/require-css <Route name="details" path="/details" getComponent={(location, cb) => {require.ensure([], (require) => {requireStyle('detailsChunk', () => {cb(null, require('./containers/Details/DetailsPage'));})}, 'detailsChunk');}}/> Note: An obvious question would be that some common app and vendor libraries (like React) would be included in every chunk. The solution to that is to create a separate chunk for it. is your friend here. CommonsChunkPlugin 3. Mobile vs Desktop The age old question: Whether to go responsive or adaptive. but whichever way you go, you need to have a UX which is specially designed for mobile. So whether you handle it with tons of media queries as in responsive (which means more unneeded code being shipped for a certain device type), or keep js and css separate for mobile and desktop (which means possibly more dev resources needed), its upto you. But since our page had significantly different design (even different cover images for mobile and desktop, which meant we had to download both images for both platforms), we decided to finally completely separate out our mobile and desktop components and bundle them separately. This helped us set up an infrastructure where by default our pages were responsive, but we could change any route to serve device specific components if need to. We can have a longer debate on it First we had to split our code itself into desktop and mobile. A simple following file structure helped achieve this, enabling room for code refactoring between desktop/mobile components. containers--- Details---DetailsPageDesktop.js---DetailsPageDesktop.scss---DetailsPageMobile.js---DetailsPageMobile.scss---DetailsPageCommon.js **DetailsPageDesktop.js** import {} from 'DetailsPageCommon.js';var styles = require('DetailsPageDesktop.scss'); class DetailsPageDesktop extends Component {...} Then we had to create separate chunks (js and css) for mobile and desktop versions of the route. We did this by tweaking our entry points in webpack config. // this will create detailsChunkDesktop.js, detailsChunkDesktop.css,// detailsChunkMobile.js, detailsChunkMobile.css// detailsPageCommon will be automatically included in both the js// chunks. entry: {...'detailsChunkDesktop' : ['./src/containers/Details/DetailsPageDesktop.js'],'detailsChunkMobile' : ['./src/containers/Details/DetailsPageMobile.js'],...} Finally, we have to tweak our routes config to resolve to different components for mobile and desktop. // isMobile() -> Make sure this function works on both client and// server side. Easiest way is a regex on user agent. <Route name="details" path="/details" getComponent={(location, cb) => {if (isMobile()) {require.ensure([], (require) => {requireStyle('detailsChunkMobile', () => {cb(null, require('DetailsPageMobile.js'));})}, 'detailsChunkMobile');} else {require.ensure([], (require) => {requireStyle('detailsChunkDesktop, () => {cb(null, require('DetailsPageDesktop.js'));})}, 'detailsChunkDesktop');}}}/> We faced an additional problem: we were caching our markup on varnish based on url. Since desktop and mobile devices would have different markup, we had to make . varnish cache device aware 4. On demand chunks Sometimes even for the same route, we might have components which are heavy and don’t need to be shipped with the current route. These can be loaded on demand, either after visit on the page or after an event handler (click of a button). Any sort of dialogs/modals (where the route doesn't change) or below-the-fold components are prime candidates for this. For such components, we can create separate chunks (with its own js and css), which only get downloaded when needed. First, we create separate chunks for such component in the entry in the webpack config as described earlier. Then, we trigger the asynchronous retrieval of these chunks when required. // splits code for this component, and also asynchronously gets the// component. Returns a callback with the component. function loadHeavyDialog(cb) {require.ensure(['./components/HeavyDialog/HeavyDialog'], (require) => {requireStyle('heavyDialogChunk', () => {const dial = require('./components/HeavyDialog/HeavyDialog');if (cb) {cb(dial);}});}, 'heavyDialogChunk');} **DetailsPage{Desktop}.js** // on a button click to load the dialog asynchronously and ensuring // this component doesn't get shipped with the parent route.function onLoadHeavyDialogButtonClick() {// show loader possiblyloadHeavyDialog((dialogComponent) => {// do something with the component now.// hide loader.});} For further optimisation, you could get this component to be automatically downloaded after the document has been loaded for the route. This will ensure your user experience isn’t adversely affected; now the user doesn’t have to wait for chunks to be downloaded when the need for them actually arises. <Route name="details" path="/details" getComponent={(location, cb) => {require.ensure([], (require) => {requireStyle('detailsChunk', () => {cb(null, require('./containers/Details/DetailsPage'));// pre-emptively get a component which we know we might// use later.loadHeavyDialog(null);})}, 'detailsChunk');}}/> The same strategy could also be used for route based chunks which have a high chance of being visited from the current route. 5. Size/Quality of images For media heavy pages, cut down the size of images you are shipping. Apart from the usual image compressions, make sure the size of images you are requesting is what you need. Be extra strict on mobile, you will be surprised by how much you can manage with smaller images. We were able to reduce the media content being downloaded on mobiles by more than half without affecting any product metrics. 6. Remove unneeded fonts We were earlier using 3 custom fonts, 2 for rendering text, and 1 for icons. To prevent , fonts are pretty much considered as a render blocking resource by the browser. After working with the design team, we cut down to just 1 custom text font and 1 icon font. We went even stricter for mobile and removed the need for the custom text font, using just the system fonts. The form factor is so small in mobiles, that the additional benefit of using custom fonts is negligible. So we were able to render content much faster on mobiles. FOUC 7. Be choosy about third party/open source libraries Third party libraries are great. But they normally come with a lot more functionality than you need. Be picky. Use them for motivation, and then either implement your own or be careful with what you need from them. Examples of some common third party libraries whose usage needs to be looked at are: Whenever you see , it's a bad sign. The lodash library is a good 10kb (gzipped) in size and usually you only need a few functions and not the whole library. Luckily, . Lodash: import * from lodash lodash provides support from that and is very well documented here No doubt material ui is a great place to start, but it is very heavy. We had a few components which were using material ui, but we were able to easily mimic them, saving quite a bit of size in the process. Material UI: Do you need babel-polyfill? Short answer: no, if you are already using babel-runtime. Removing the dependencies on babel-polyfill can significantly reduce your bundle size. Here is an . babel-polyfill (or babel-runtime): excellent piece that explains the use of one vs the other Once again, a very popular, but a heavy library given the amount of code you actually use out of it. Here is a on how to regulate its size. moment.js: good discussion 8. Reduce api content/react redux store content This only applies if you are doing server side rendering. If you are, you should be familiar with the server sticking a replica of its redux (or whatever store you are using) in the bottom of document. If your page relies on a heavy api (ours was), there could be a significant addition to the payload of the initial document. On careful inspection, we realised there was a lot of unneeded data in our store and were able to trim that. 9. Keep analysing your chunks While all of this is a good one time effort, over a period of time, developers will often become careless (especially in a bigger team) and won’t be disciplined or aware about implications of bundle size. Here are some helpful tools/tips: : The Best way to look at your bundle sizes. Webpack Analyzer (or Chrome Dev Tools): Gives a good synopsis on all the assets required by your site, and sizes of different types of assets. webpagetest.org Periodic Monitoring: We wrote a over releases. Housing has a too. quick utility to track bundle sizes great post on continuous integration That's all for now. Ofcourse, a lot of these things will add only a small value. But performance is rarely ever achieved via just one thing. It's a combined and a continuous effort of a lot of small thing. If you have other such tips to reduce website code size, do let me know in the comments below! The next part of this series will discuss how to chain your assets in a way that the most essential assets are downloaded/executed as soon as possible, providing further boost to performance.

Chain

Google

Improving first time load of a Production React App (Part 1 of 2)

Most documentation is useless. These types are absolutely vital. Also in response to the article on “ ”, I also find that none of my clients believe in an afterlife, or at least none of them reach out to me after I pass on. ;) Documentation is a bit like people dying I agree on technical code documentation. The best form of technical code documentation is a well written integration test. At least it feels like that, not sure if anyone else ever feels the same. Also the best form of technical documentation are function names. This also assumes you’re not shoving tons of code into the same function. (1 metric ton = 30 lines of code.) All code documentation that isn’t written into the code is pretty useless. I’ve also noticed the people most interested in coding are managers that no longer code. They say, I’m not going to use this but it would be nice to learn so I can support others. It’s like death bed repentance- sorry folks, you’re going to hell… er, I mean, you still won’t understand the code. Instead of trying to come up with meaningless technical documentation about what is already written, have regular code review sessions. You know, like how you should be calling grandma on mother’s day instead of saving up for a bouquet of flowers and a catchy tag line for the funeral home guest book. If you do feel the need to write, write samples of how to create new functionality using existing code. Document for reuse. But overall, just write simple code or else create a document that says, “please kill me now.” We all fret in retrospect about whether it would’ve been easier to fix a problem or just write it all over again. There are forms of documentation that are very much needed. Business documentation. Please. Please… There’s nothing worse than trying to troubleshoot a half million dollar accounting bug on several thousand lines of code, and when you ask the accountants why the software does what it does they give you a blank face. (This is also how I ended up the basics of accounting.) learning Just as important, integration. This means your topology and other spelling out of exactly how system A works with system B. (Don’t forget to explain what those acronyms mean.) And while I’m on a paragraph about integration, let’s call the database an integration. It is a totally independent system with its own language. If nothing else, a data dictionary can go a long way. network Last, keep documentation on how to setup your environment. I’ve proudly stampeded through the trial and error of getting an application working without having an actual current database schema provided. I documented what process I went through. I was a pioneer. Then the contractors hired to replace me took the next six weeks setting up their environment in spite of the several emails I sent all ending in “this step was just like step x in the documentation and why are my eyes bleeding?” So yeah, there’s no such thing as fool proof environment setup documentation- there’s always some new fool who’s got something to prove. (Or maybe the other contractor team got assigned a driver developer to lead a web project because his bosses needed more utilization.) But yes- besides integration, business and environment setup- your last hours would be better spent on your bucket list rather than a boring cliff notes autobiography. The next time I get asked for documentation I’m going hand over a Bible and say, “read my words, for they give life and never die.” Then inside the Bible will be a gift card to Pluralsight and Udemy. If you enjoyed my response, please recommend and press the heart. 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

Facebook

If documentation was written but never read, did it ever exist at all?

Maker

AirBnB

Amazon

Discovery

Slack

Target

Techcrunch

Trello

Read My Stories

Launching on Product Hunt: what works and what doesn’t [guide & case study]

I have been working with for 5 years and figured out that this is the best language ever made for the web. Of course, I tried other languages like , , , , , , in my previous projects. But finally decided to use due to his LiveScript Typescript CoffeeScript OCaml Javascript Haskell C# F# LiveScript JSON support pipings pattern matching partial application **OCaml-**like syntax Prelude Library All other functional features If you familiar with functional development you will love . LiveScript And most of the time I was working with for front-end and was pretty satisfied. AngularJS All my friends around who used started to use and provided nice feedback about it but nobody uses . They prefer to write in Object-Oriented Style or so lazy to learn. AngularJS React LiveScript I decided to try as well but with a little condition that I will still use LiveScript as my first language. React Finally, I was surprised that are pretty friendly and I even didn’t exit my comfort zone in order to use it. LiveScript + React More examples here https://github.com/askucher/lsxc For your better understanding, I do provide the compiled into the LiveScript JavaScript https://gist.github.com/askucher/8173dc8815dce0df547ef7f3b5c5796e Install the library which provides you pug syntax to write . lsxc React DOM This code looks much more elegant and I think developers will like it. Pug/Jade By the way, Syntax can be used for other purposes. Not just for React but for Angular Templates as well. Pug/Jade Join and collaborate :)

React + LiveScript + Pug + SASS

A tale of investigating rising costs in a high velocity startup is the leading music & platform in the Middle East. We’ve been dubbed the , though we prefer just Millions of users use our services daily to enjoy , or . Anghami entertainment Spotify of the Middle East Anghami . Music Music Videos Expressions We have been on the Cloud since Day 0, which is 4 years ago, I joined 2 & 1/2 years ago (and my oh my does time fly) and we mostly love the scale and flexibility we get. We rely on AWS’s (Simple Queue Service) to move data asynchronously back and forth through some of our systems. For those that don’t know how SQS or what we call Message Queues work: they are systems (or a service in the case of SQS) where you can push some data we call to, from what we call , you can then subsequently pull data from it and process it on what we call to accomplish the processing of tasks asynchronously, where run the longer running tasks needed to be done like sending out emails to welcome a New User. AWS SQS “Messages” “Producers” “Consumers” “Consumers” usually The wrapper and core processing implementation around SQS was written before I joined and was working pretty well at the scale we were running it back then. Then something happened, we need to process more data and so we started adding more “Consumers” latching on to SQS to fetch and process “Messages”. That’s when we started to see our SQS costs go up disproportionately to the increase in the number of “Messages” we were processing! Queue panic mode and investigations. Total SQS Costs with a BIG jump in July I opened our AWS Billing Dashboard (it was my first time back then) to check what was going on. I found that they provide a tab called “Cost Explorer” which contained the link to “Daily Spend View”. There I chose the date range I was interested in (before and after the jump in costs and addition of “Consumers”), followed by adding a filter for the Service SQS shown above. Then I noticed the option and then tried to see what the different options were, the magical option for our case was grouping by which makes sense as SQS charges by number of API Operations, not “Messages”. Grouping API Operation SQS Costs grouped by API Operation The chart provided gave me all the insight I needed to make sense of things. Most of our spend was going towards the call (in blue above). Interesting! I opened up the old piece of code for the SQS Wrapper core we had and checked for calls to the method that invokes that API call, it was being called before every time we try to fetch messages to process to check if the queue had any contents and sleep if it didn’t. This was weird but without it we would keep calling the API in a loop (at the time this code was initially written SQS didn’t have long polling). By the time I had adopted the code SQS had long polling so first things first I updated all our Queues to set the to the max (20 seconds), which basically tells the SQS library to keep the HTTP connection to SQS waiting up to 20 seconds given that it can still receive more messages with the limit being 10 messages per call. GetQueueAttributes ReceiveMessage Receive Message Wait Time Then I updated the code to utilize the long polling, this removed all our reliance on API Calls and I removed them from the code. That was the first sweep that cut down the bulk of the cost that was basically waste at that point. GetQueueAttributes After the rush of victory from my first investigation I looked into how I can take this further and tune it down. We know we will always be receiving “Messages” in batches of up to 10 and we are processing those on the same node. When a message is processed successfully you must call the API to tell SQS to delete it from its pool of messages (there is a safety in SQS that sets a Timeout on the Message after which it is released back into the pool of available messages). What came next was batching those into instead of delete message taking care of not crossing the of the Queues in question. After I changed that code we saw another reduction in cost since we were basically calling once for every 10 messages (in reality it’s lower, at around one for every 7 Messages, since we don’t always get 10 messages or fail to process etc.). DeleteMessage DeleteMessageBatch Visibility Timeout DeleteMessageBatch I continued to then batch some of the calls that could be which also resulted in some reduction there, but due to the nature of these systems not much can be batched when Sending as they are generated one by one when our API instances receive some calls etc. We also added logic to our “Consumer” tier and with the above changes we no longer needed to worry and reduced costs further by only having the number of instances we need to process the load of messages we needed to process. SendMessage autoscaling Thanks for reading!

Fetch

Velocity

Reducing Costs in the Cloud

In this blog I will show you how to pick up an existing codebase example to build your very own beautiful , powered by the The portfolio app includes portfolio management, contact form (powered by MailGun) and a beautiful frontend by . Install, deploy and edit every part of this portfolio website from your Bucket Dashboard. Portfolio Website Cosmic JS GraphQL API . HTML5UP.net Cosmic JS Why is GraphQL Special? GraphQL gives you the power to be more efficient with your API calls by allowing clients to query only specific values, limiting the amount of data returned. Read more about the . Cosmic JS GraphQL API I’ll be using for this example app. 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 . Cosmic JS API-first CMS cloud-based Content Management Platform If you haven’t already, get started by for . Helpful resources are provided below to streamline your development operations. Signing Up Cosmic JS Portfolio Website App Page Portfolio Website App Demo Portfolio Website App Codebase on GitHub 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 “Cosmic JS GraphQL API” to remain concise for our example blog. 2. Install the Cosmic JS Portfolio Website 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 Portfolio Website App Installation Options gives you the ability to filter between functions languages such as Web, iOS, Android, Blog, Contact Form and more. Cosmic JS Simply click “Install” underneath the icon to get started, or visit the . Portfolio Website 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 Branch Confirmation Modal I’m drawing from a repo, my branch is clarified and I have a deployed location that matches my slug / bucket name that I made in Step 1. Deploy, Deploy Away A little reassurance that you’ll soon be up, alive and well on the web. :) 4. Edit Global Objects 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

Build a GraphQL API-Powered Portfolio Website

This article is intended to: People, looking for some Mobile UXD information, tips and answers For those who are willing to avoid common usability pitfalls Provide customers with a list that will help them to describe their requirements in a better way and provide them with a better understanding of a job done by designers squad 1. App icon Don’t be shy to put some efforts in creating a custom design for your app icon. Make it easily recognizable among other apps on the relevant app store and user’s mobile device.Be sure to keep it simple, with a single focus point and avoid transparency. Do not forget to test your icon vs different wallpapers. It should look amazing regardless of the background image your end user will choose. 2. Splash Screen chat by Django Stars — / | Eye2eye Google Play App Store ShareTheMeal — App Store The first decision here is if the splash screen is actually needed. Think of the actual use cases of your app. Is your app designed for a quick access to some data? Is it designed to push users to make some actions? Do not use a splash screen that simply wastes user’s time. Use it to show the application’s loading progress or as an appeal to user’s feelings and emotions, to prepare them for a journey through your app as the app does. Share the Meal 3. Neat interface Dating app by Django Stars — on Dribbble “Simplicity is the ultimate sophistication” — William Gaddis said. Make things clear and easy to interact with. Every extra button, form, image or any other part of the interface makes the screen looking bulkier and adds more pressure on user’s attention, which should be directed appropriately. Keep all the most important things on the main screen, try to hide all the secondary. “Simplicity is the ultimate sophistication” 4. Content is legible Text should be legible for users to be able to read it with no zooming. Recommended font sizes and tips are described in details in the following official recommendations by and . Apple Google 5. Forms Forms should be as easy to use as possible. Input field’s height and width should be selected accordingly. Once again and did a great job to provide you with the recommendations. Form should provide you with the understanding of where you are right now, and what will be next. Autocomplete is the good choice to save user’s time, while including autocorrect will become an additional pain for the end-user. Type of data that user is going to enter in some specific fields matters. That’s obviously nice to have “@” and “.com” buttons on your keyboard, while filling down the email form and the numpad while putting in the phone number. And finally, try to avoid the manual data input where it’s possible (e.g. locating address via GPS). Apple Google 6. Images App concept by Django Stars — on Dribbble In case we are talking about the “selling” app such as online shop, food delivery, etc. — images should be in the highest resolution possible to provide the most detailed view of what you are actually trying to sell. Zoom-in photos is a great idea to give your users a better look at the product. Pick a default image that is shown in full size and display clickable thumbnails that produce enlarged images A thing to consider here is the geolocation of your main user group. In some countries internet connection speed doesn’t give an opportunity to load highly detailed images fast enough. 7. Do not forget about white spaces is an area with no content, that performs an important function — adds a neatness to design and helps to set priorities visually (it creates a clear hierarchy of where to look first and where to look next), while also preventing users from random misclicks. White space 8. Empty States These not only make the screen look more esthetic but provide users with important info and guidelines. Make sure that user is always in the know of what’s happening or what is missing on the every step of interaction with your app. 9. Good color contrast Timedom booking app by Django Stars — on Dribbble Make sure to keep a solid contrast between the font and the background color. That will make your text better for perception. The recommends the following contrast ratios for body text and image text: W3C Small text should have a contrast ratio of at least 4.5:1 against its background. Large text (at 14 pt bold/18 pt regular and up) should have a contrast ratio of at least 3:1 against its background. 10. Navigation Navigation through the app should be natural and represent the common ways to interact with the OS chosen. Do not move the navigation controls to unexpected places — that will just disorient the user. While planning the way of placing the navigation elements you should also consider the hand position. It will be different on the mobile phone and tablet, same as in the portrait and landscape layouts. 11. Portrait/Landscape layouts Decide if you really need both types of layout. We recommend you to deny the layout changing option in the applications with a complex UX architecture, that has a lot of navigation elements (for example facebook, which has even made its Messenger as a separate app to make the interface of the initial app less cluttered) as it will lead us to the dramatic loss of space for the content. In case of multimedia applications such as Youtube, where the user spends most of time viewing the content, instead of navigating through the sick amount of options — things goes the opposite way and adaptation is required. Also, do not forget that landscape layout forces you to use both hands for manipulations, that will affect the controls positioning. 12. Confirmation of the deleting actions Even in case your tap targets are big enough and the distance between those are solid there is always a chance for a “user error”. Implementation of the confirmation step (this may also include the undo option) for the destructive actions is essential. 13. Do not request to rate your app too quickly or too often Give users some time to form their own impression of the app. Avoid the frequent, annoying, iterative CTA process. You can find more useful articles in our blog Originally published in Djangostars blog Signup for email digest

Django Stars

YouTube

Mobile UX Design Checklist. 13 things to keep in mind

Note: the code samples may be displayed improperly because of markdown. I recommend to to make sure all the examples are displayed properly. continue reading the original article on our blog CI definition and its main goal Continuous Integration (CI) is a software development practice that is based on a frequent integration of the code into a shared repository. Each check-in is then verified by an automated build. The main goal of continuous integration is to identify the problems that may occur during the development process earlier and more easily. If you integrate regularly — there is much less to check while looking for errors. That results in less time spent for debugging and more time for adding features. There is also an option to set up inspection of the code style, cyclomatic complexity (low complexity makes the testing process more simple) and other checks. That helps to minimize the efforts of the person responsible for the code review, saves time, and improves the quality of the code How it works Developers check the code locally on their computers When completed — they commit changes to the repository Repository sends a request (webhook) to CI system CI server runs job (tests, coverage, check syntax and others) CI server releases saved artifacts for testing If the build or tests fail, the CI server alerts the team The team fixes the issue CircleCI vs Travis CI vs Jenkins Now, when the process of continuous integration is clear (I hope so) we can move to the comparison of some of the most popular CI platforms nowadays. Each of those has its pros and cons. Let’s start with CircleCI. CircleCI Features : CircleCI is a cloud-based system — no dedicated server required, and you do not need to administrate it. However, it also offers an on-prem solution that allows you to run it in your private cloud or data center. It has a free plan even for a business account Rest API — you have an access to projects, build and artifacts The result of the build is going to be an artifact or the group of artifacts. Artifacts could be a compiled application or executable files (e.g. android APK) or metadata (e.g. information about the tests`success) CircleCI caches requirements installation. It checks 3rd party dependencies instead of constant installations of the environments needed You can trigger SSH mode to access container and make your own investigation (in case of any problems appear) That’s a complete out of a box solution that needs minimal configuration\adjustments CircleCI is compatible with: Python, Node.js, Ruby, Java, Go, etc Ubuntu (12.04, 14.04), Mac OS X (paid accounts) Github, Bitbucket AWS, Azure, Heroku, Docker, dedicated server Jira, HipChat, Slack CircleCI Pros: Fast start CircleCI has a free plan for enterprise projects It’s easy and fast to start Lightweight, easily readable YAML config You do not need any dedicated server to run CircleCI CircleCI Cons: CircleCI supports only 2 versions of Ubuntu for free (12.04 и 14.04) and MacOS as a paid part Despite the fact CircleCI do work with and run on all languages tt supports only the following programming languages “out of the box”: Go (Golang), Haskell, Java, PHP, Python, Ruby/Rails, Scala Some problems may appear in case you would like to make customizations: you may need some 3rd party software to make those adjustments Also, while being a cloud-based system is a plus from one side, it can also stop supporting any software, and you won’t be able to prevent that Travis CI Travis CI and CircleCI are almost the same Both of them: Have YAML file as a config Are cloud-based Have support of Docker to run tests What does TravisCI offer that CircleCI doesn’t? Option to run tests on Linux and Mac OS X at same time Supports more languages out of the box: Android, C, C#, C++, Clojure, Crystal, D, Dart, Erlang, Elixir, F#, Go, Groovy, Haskell, Haxe, Java, JavaScript (with Node.js), Julia, Objective-C, Perl, Perl6, PHP, Python, R, Ruby, Rust, Scala, Smalltalk, Visual Basic Support of build matrix Build matrix language: python  python:    - "2.7"  - "3.4"  - "3.5"env:    - DJANGO='django>=1.8,<1.9'  - DJANGO='django>=1.9,<1.10'  - DJANGO='django>=1.10,<1.11'  - DJANGO='https://github.com/django/django/archive/master.tar.gz'matrix:    allow_failures:    - env: DJANGO='https://github.com/django/django/archive/master.tar.gz' Build matrix is a tool that gives an opportunity to run tests with different versions of language and packages. You may customize it in different ways. For example, fails of some environments can trigger notifications but don’t fail all the build ( that’s helpful for development versions of packages) You May Also Like: _Django development of products is usually easy and straightforward: great documentation, many tools out of the box…_djangostars.com Merging Django ORM with SQLAlchemy for Easier Data Analysis _I frequently face a recurring situation when developers receive a task to make a performance optimization on Django…_djangostars.com Django Performance Optimization Tips TOX In case you prefer any other CI platform — there is always an option to create a Build Matrix by using Tox. [tox]envlist = py{27,34,35}-django{18,19,110,master}

[testenv]deps =      py{27,34,35}: -rrequirements/test.txt    django18: Django>=1.8,<1.9    django19: Django>=1.9,<1.10    django110: Django>=1.10,<1.11    djangomaster: https://github.com/django/django/archive/master.tar.gzcommands = ./runtests.py

[testenv:py27-djangomaster]ignore_outcome = True Tox is a generic virtualenv management and test command line tool. You may install it by using or command. pip install tox easy_install tox Travis CI Pros: Build matrix out of the box Fast start Lightweight YAML config Free plan for open-sourced projects No dedicated server required Travis CI Cons: Price is higher compared to CircleCI, no free enterprise plan Customization (for some stuff you’ll need 3rd parties) Jenkins Features: Jenkins is a self-contained Java-based program, ready to run out-of-the-box, with packages for Windows, Mac OS X and other Unix-like operating systems With hundreds of plugins in the Update Center, Jenkins integrates with practically every tool in the continuous integration and continuous delivery toolchain Jenkins can be extended via its plugin architecture, providing nearly infinite possibilities for what Jenkins can do Various job modes: Freestyle project, Pipeline, External Job, Multi-configuration project, Folder, GitHub Organization, Multibranch Pipeline Jenkins Pipeline. That’s a suite of plugins which supports implementing and integrating continuous delivery pipelines into Jenkins. Pipeline provides an extensible set of tools for modeling simple-to-complex delivery pipelines “as code” via the Pipeline DSL Allows you to launch builds with various conditions. You can run Jenkins with Libvirt, Kubernetes, Docker, and others. Rest API — have access to Controlling the amount of data you fetch, Fetch/Update config.xml, Delete a job, Retrieving all builds, Fetch/Update job description, Perform a build, Disable/Enable a job Jenkins Pros: Price (it’s free) Customization Plugins system Full control of the system Jenkins Cons: Dedicated server (or several servers) are required. That results in additional expenses. For the server itself, DevOps, etc… Time needed for configuration / customization Conclusion What CI system to chose? That depends on your needs and the way you are planning to use it. CircleCI is recommended for small projects, where the main goal is to start the integration as fast as possible. Travis CI is recommended for cases when you are working on the open-source projects, that should be tested in different environments. Jenkins is recommended for the big projects, where you need a lot of customizations that can be done by usage of various plugins. You may change almost everything here, still this process may take a while. If you are planning the quickest start with the CI system Jenkins might not be your choice. Which CI system do you prefer? Leave us a comment to share your thoughts. You are always welcome to ask questions and share topics you want to read about! The article is written by ( — a PR Manager at . This article about is originally published on Django Stars blog. Oleksandr Shaporda ALEXANDER SHAPORDA ) Django Stars continuous integration Specially shared with readers. Hackernoon If you find this post useful, please tap 👏 button below :)

Heroku

Continuous Integration. CircleCI vs Travis CI vs Jenkins

(Photo credits: AP via Business Insider) Denmark is the first country to appoint an ambassador to liaise with Internet giants like Google, Apple, and Facebook. While still being rooted in tradition, diplomacy is changing. And so is the role of ambassadors. The nature of diplomacy itself — its DNA — is desperately trying to adapt to an ever changing, hyper-connected world in which non-state actors and a approach seem to have a much bigger role. glocal In a new effort to better interact with the tech community — given the role of technology in today’s world and its impact on citizens — Denmark is naming a new tech ambassador who will represent the government with Internet companies. “Just as we engage in a diplomatic dialogue with countries, we also need to establish and prioritize comprehensive relations with tech actors, such as Google, Facebook, Apple, and so on,” Danish Foreign Minister Anders Samuelsen . told The Washington Post “The idea is, we see a lot of companies and new technologies that will in many ways involve and be part of everyday life of citizens in Denmark. And some [of these companies] also have a size that is comparable to nations.” Indeed, the size of some of the world’s biggest tech companies is comparable to countries, whether you look at them in terms of population (or users) or in terms of economic impact. _If Facebook was a country it would be the largest in the world._hackernoon.com Social media is bigger than countries In fact, if you compare and the monthly active users of some of , a whopping 15 out of 20 are in the digital space, not sovereign nations. Obviously the comparison is forced, but it provides an easy picture of the size and impact of the Internet on the real world. the biggest countries in terms of population the largest social networks TOP 2016 RANKING (by estimated population or monthly active users): 1.  Facebook      1,712 million             11. US              3232.  China         1,373                     12. Twitter         3133.  India         1.266                     13. Baidu Tieba     3004.  WhatsApp      1,000                     13. Skype           3004.  Messenger     1,000                     14. Sina Weibo      2825.  QQ              899                     15. Indonesia       2586.  WeChat          806                     16. Viber           2497.  QZone           652                     17. Line            2188.  Tumblr          555                     18. Brazil          2059.  EU              513                     19. Pakistan        20110. Instagram       500                     20. Snapchat        200 Sources: CIA World Factbook - Statista (as of Oct 2016) While China and India remain the most populous countries in the world, they are outpaced by Facebook in terms of numbers. WhatsApp and Messenger are both 4th and Instagram is 10th. Outside of the Facebook family of apps and tools, Tumblr is 8th, while Twitter, quite static in the ranking with a little over 300 million users, is 12th and Snapchat, with around 200 million MAUs, ranks 20th. In China, Tencent controls QQ, WeChat, and QZone, which are 5th, 6th, and 7th in the list. Weibo ranks right after Twitter, in 13th position. The sheer numbers are a representation of these companies’ economic impact. “In economic terms, the scale of these enterprises can be compared to that of your average country. If Apple were a state, its profits would ground it firmly within the G20…minus the debt and unemployment!,” French Senator Nathalie Goulet . commented on The Huffington Post While Denmark’s decision is unique as it creates an official ambassadorship to the tech community — embedded within the foreign ministry — it is not the first time governments interact with Internet giants. : “In the U.K., Matt Hancock serves as , overseeing cyber-security and digital markets, among other things. Back in 2014, France appointed Axelle Lemaire to the post of ‘digital minister,’ where she’s now pushing for more companies to startup locally.” As Inc. reports minister of state for digital and culture Samuelsen assures that the decision is not symbolic. “This tech ambassador will have a tight connection to the rest of our system,” he said. “They will work with the embassies all around the world and use the staff all around the world also. This tech ambassador will not in any way be alone, they will have a big system behind their back that will work together with them. And they will make sure that we have a good relation with these companies.” I do believe that the intersection between tradition and innovation is key for the future of diplomacy… Whether it’s about the use of social media in foreign policy, interacting with less traditional players and actors, embracing a true culture of innovation, or posting ambassadors to tech industry. And I do agree with Samuelsen when he says: “Instead of just leaning back and looking only at the world as it was yesterday, we have to think of the world as it will become tomorrow — and perhaps as it is already today.”

Instagram

TENCENT

Read my book!

The world’s first tech ambassador

Is online research annoying you? Because I’m often pissed at search engines. Do I really have to crawl through ads, clickbait content and fake sites? Isn’t there a better way to find the information I need to finish a project? I’m here to tell you that I found my solution in . this dumb web app And that it might be just what you need, too: When I say dumb, I don’t say it out of spite — I love this little app. My brother built it to speed up research when he was working at a research facility. It often took him days to search through countless PDFs to find that one crucial bit of data. Until he wrote a simple engine in PHP to crawl through all documents and search for a pattern of keywords. Then I gave him the idea to plug it into Google’s search API (he also added Bing later on), build a simple website and see if it could be useful to others, too. So when I call this app dumb, I just mean that it’s stupid simple. View my incredibly professional video tutorial to see for yourself: I know the app looks quirky, and the website isn’t the prettiest design on the web either (let’s be honest, it hasn’t been designed at all). But the crucial bits of information are there. The app continuously helps me create content. My clients need detailed articles with deep research — I just plug the topic with 3 crucial keywords into the app. I’m always shocked that virtually all links that it generates are useful references. How often does that happen in Google? My brother claims that he spends much less time on research, and much more doing actual work and pushing things forward. Though I know that he likes to exaggerate — I know this is sincere, because I’m equally impressed with this little dumb web app. Are you working on a tough project now? Looking for that implementation or bit of code that you need to finish and commit? Writing a blog article and finding zero inspiration online? Need to know exactly what precursors can be used at 700 degrees to make carbon nanotubes grow? Tired of pointless questions that are a weak attempt at marketing, supposed to build a false sense of urgency to check out a dumb web app? This promo article is such a trainwreck. Anyways, regardless of your answers to the questions above the meme, just check out this dumb little web app if research is so tough that googlin’s not enough — . https://slavingway.com/prizm Peace out!

Finish your project faster with this little dumb web app

Initial Design of Varuna: The Smart Water Quality Meter by Axis Design At the end of this blog post I will ask for a contribution to fund the development of the water quality device in the image above. Whether you do or not, please read the post and share. I’ve been told I do not ask for what I want and I bury the lede. Not this time. I hope you contribute . Parts and of this post can be found and . #2 #3 here here A few months ago, after a great conversation with friends/designers at , I decided to write a thematic article covering what we discussed. The issue was (and still is) the design of Internet of Things (IoT) devices and the missing element in these products; . The article, ‘ ’, has received Axis Design Empathy The One Missing Ingredient In Connected Devices 70k views, 5k shares and a couple hundred comments. We also had a few public companies reach out but I was so blown away by how many people read/shared/loved the post, that I totally missed the point… Flint, Michigan and the Poisoned Wells of The Water Utility There is hardly anyone in the US who hasn’t heard about the water issue that happened in Flint Michigan; 2 years ago Flint city officials chose to stop paying Detroit for water from Lake Huron and chose to get water from filthy Lake Flint. The water was corrosive and iron seeped from the pipes into the water for 2 years, turning it brown. As officials claimed the water was fine, Dr Mona Hanna-Atisha, a pediatrician, tested and found thrice the recommended lead levels in kids exposed to this water. The water was switched back to Lake Huron’s but the damage was done. . 9000 kids affected by decisions made by folk who didn’t have . By this time, at least 9000 children in Flint had been affected by lead poisoning empathy for these kids The issue in Flint is not a one-off. Almost all water infrastructure in the US needs replacement. Earlier this week, due to possible spillage at the Oroville dam, the evacuation of 200k people in California brought the fractured state of water infrastructure right before all our eyes. What is the scope of this problem? The EPA classifies 52,000 community water systems and 21,400 not-for-profit non-community water systems. In 2012, the concluded that the replacement value for more than one million pipes was approximately $2.1 trillion if all the pipes were to be replaced at once and $1 trillion if the costs could be spread out over 25 years. This amounts to $7000/American citizen just to get the water utility system up to par with, for example, telecoms technology. American Water Works Association Source: ‘Buried No Longer’ Report American Water Works Association Like most pipes that ran through Flint, system in the US was laid with . From a the water infrastructure lead running through it all 2008 article Over the past several years, significantly elevated lead levels in many cities have provoked public outcry. Lead-contaminated water in homes and schools has been detected in Boston, MA , ; Durham, NC ; and Camden, NJ, among many others. In Washington, DC, in 2004, there was considerable public concern when more than half the homes with lead service pipes were found to exceed the Environmental Protection Agency’s (EPA’s) action level of 15 parts per billion. 8 9 10 11 The shouts from Flint MI, St Joseph’s LA and Evanston IL echo that quote above, from 2008, and speak to the urgency of the work required. In December 2016 the , authorizing $100M’s of spend to address some of these upgrades, was signed into law. Almost countering the impact of that decision to improve the water situation is a congressional review act bill, signed on 02/16/2017, that . With every big step forward we seem to immediately then take a huge back flip. Water Resources Development Bill now allows coal companies to dump their waste into streams Unfortunately, these large scale solutions will not address the issues we are now facing daily. Daily. We have to start at the grassroots level. This grassroots approach will be aided by technology that we have today. No marks for guessing why searches spiked in 2015/2016 Two other factors add to the urgency around the water situation in America. These are . 97.5% of the water on the planet is salty water. The remaining 2.5% is freshwater but 65% of the freshwater is locked up in glaciers. Leaving only .33% drinkable without some treatment. A scarcity of drinkable water : In many parts of the world, the wars and conflicts are actually about access to water sources. And in the US in particular, It’s a nexus of need and at the rate we are going water demand will exceed supply by 2050. Increasing demand for water utilities (that generate our power) also use a lot of water. Technology Solutions of technology and smart devices. The water industry, like its sister electricity industry, is moving to a more distributed model where the customers (due to the technological capabilities they have in their homes) can personally monitor and adapt their usage to suit their needs. Throw in intelligent devices that take the work of management out of consumer hands ( ) and there is hope for hyperlocal solutions right in our homes. We are seeing an explosion “Alexa, switch off the sprinkler” Doing the work that matters: Varuna We live in a time where we have more devices than friends. Where Artificial Intelligence threatens to take our jobs. And with all these systems issues it feels like we need gods and heroes to save us from the convergence towards a global water calamity. Especially as we lose trust in our governments and need to take more personal responsibility for the care of our families and our stewardship of the planet. While the problems are systemic, the solutions have to be local. I believe is one of the ways to solve the problem at the most local level for low to middle income consumers who will suffer most from any calamity… Varuna As the views racked up for the blog post, . That consumers were telling me that they would like to be warned about possible issues with their water quality before it does any damage or causes any illness. I realized that the message I was hearing from people was that a smart water quality sensor is a product that thousands of people want That I was being called to do work that matters at the intersection of resource utilization and health. Hacking away at a Smart Water quality Meter. Considering water industry inertia, due to lack of money and aging business models, I realized the product has to go directly to the consumer. . The image above is of the work currently going into the electronics of the smart water quality meter. And the image below is of the current form factor we are considering for the product. The two initial quality measures the product will focus on are turbidity (pollutants in the water) and lead content, these are the two most recurring choices requested by respondents. It will also measure usage. We are plugging away excited about the impact this can have on millions of lives. But we need your help. And it’s why I’m reaching out to you today. Something else I realized was that building this product would have to be done in a different way How can you help? By . Or by And please share this post. But why donations though? Why not the traditional Venture Capital (VC) model? Donating here if you’d like to see this product exist in the world. No amount is too small donating your skills and time to bring this product out to the world. You can email me at seyi at asha-labsdotcom or fill out this form . We need your help! Why you should not contribute Reaching out to the mass market to donate and fund product development for a product that might not work seems, on the face of it, counterintuitive. But it’s not as radical as it seems. It’s a variation on the approach that’s now been established by sites like and . It’s a form of funding that rewards the work that goes into creating something new. It’s also how we fund (what we consider) movements in the form of political contributions. Kickstarter Indiegogo It also recognizes the fact that creating something new opens up room for failure. The disappointment by contributors to failed kickstarter projects stem from the feeling that the creator had duplicitous intentions in the first place. I’ve personally contributed to several kickstarter campaigns but only received 1 of the products (a book of poems). And so there are reasons why you should not donate to Varuna. https://stevebanfield.blog/2012/03/19/the-wiggles-of-false-hope/ While the technology risk is low, this is more about integration than invention, what will win is branding. We are not yet Kohler but give us a few years. This method, building a brand with your help and support, actually helps us do that. We are sharing the warts and all; the goal is to get a device to market at a cost that works for the mass market, we’ll need help to get there. We’ll share a lot of our screw ups and that might be uncomfortable viewing if you donate. What if someone steals the idea? Then the product gets to market and I’ll be over the moon at the number of people who are prevented from drinking dangerous water. It would be great to feed my family or make a lot of money doing this, but the loose collective working on this can feed our families now without Varuna. It’s work worth doing regardless of the outcome. You’re being too unconventional about this! I’ve gained enough idiosyncrasy credits to try to build a new business on a new product/platform in a new way. If we fail, I want it to be because we tried our best and it wasn’t enough and not because we didn’t try. Rather than trying the old non-iterative ways of product innovation for the utility market, we are trying this approach. ! Join us This will be hard! Of course!! That’s why we need all the help we can get. Despite how tough we know it will be, we believe strongly that no one should unknowingly drink or use water that is dangerous for them and that we now have smart technology that prevents that from happening. The first step to that optimal product is Varuna, a smart water quality meter. or . Thanks! Donate here to help our work sign up here to lend your expertise Donate here Please tap that heart below if you liked the article. It helps other people see the story, and it helps me know you’d like to see me write more (we all need some validation :)).

HackerNoon Tech Stories Archive February 14th, 2017

Take Action with Butter Knife

@AthorNZ
Josh Burton

Postponing the post PC era by five years

@babulous
babulous

Improving first time load of a Production React App (Part 1 of 2)

@kanavarora
Kanav Arora

If documentation was written but never read, did it ever exist at all?

@CodingJoe
Joseph Nielsen

Launching on Product Hunt: what works and what doesn’t [guide & case study]

@pappgab
Gabor Papp

React + LiveScript + Pug + SASS

@token0x
Andrey Stehno

Reducing Costs in the Cloud

@helmz
Helmi Rifai

Build a GraphQL API-Powered Portfolio Website

@carsoncgibbons
Carson Gibbons

Mobile UX Design Checklist. 13 things to keep in mind

@djangostars
Django Stars

Continuous Integration. CircleCI vs Travis CI vs Jenkins

@djangostars
Django Stars

The world’s first tech ambassador

@asandre
Andreas Sandre

Finish your project faster with this little dumb web app

@mslupski1
Michal Slupski

Doing Work That Matters…Why?

@seyi_fab
Seyi Fabode

HackerNoon Tech Stories Archive February 14th, 2017

@AthorNZJosh Burton

@babulousbabulous

@kanavaroraKanav Arora

@CodingJoeJoseph Nielsen

@pappgabGabor Papp

@token0xAndrey Stehno

@helmzHelmi Rifai

@carsoncgibbonsCarson Gibbons

@djangostarsDjango Stars

@djangostarsDjango Stars

@asandreAndreas Sandre

@mslupski1Michal Slupski

@seyi_fabSeyi Fabode

@AthorNZ
Josh Burton

@babulous
babulous

@kanavarora
Kanav Arora

@CodingJoe
Joseph Nielsen

@pappgab
Gabor Papp

@token0x
Andrey Stehno

@helmz
Helmi Rifai

@carsoncgibbons
Carson Gibbons

@djangostars
Django Stars

@djangostars
Django Stars

@asandre
Andreas Sandre

@mslupski1
Michal Slupski

@seyi_fab
Seyi Fabode