A simple experiment to implement infinite scroll with RxJS Blog post on Angular Implementation : Simple Infinite Scroller directive with RxJS Observables **What is Reactive Programming ?**In simple terms it is programming with asynchronous data streams. There is a great post by — The introduction to Reactive Programming you’ve been missing accompanied by an egghead.io video. Andre Staltz The introduction to Reactive Programming you’ve been missing https://egghead.io/courses/introduction-to-reactive-programming What is RxJS? RxJS or Reactive Extensions is a library developed by Microsoft Open Technologies in Javascript for and data streams. transforming, composing querying https://github.com/Reactive-Extensions/RxJS There is a great talk by on this Ben Lesh Thinking Reactively with RxJS 5 Below are a couple of nice introductions to Observables and a few operators by Netanel Basal . Observables under the hood RxJS — Six Operators That you Must Know What will we be building? We are going to build a naive infinite scroller using observables. Whenever the user scrolls a given container to 70%, we will trigger the api call to get more data from the server. For this implementation we will use the to get the latest news. HackerNews unofficial api Below are the operators we will be using from RxJS : similar to map in an array, map over the stream of incoming data. [map](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-map) : similar to filter in an array, filter the stream of incoming data. [filter](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-filter) : returns an array of current emitted data and also the previous emitted data . [pairwise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-pairwise) : returns an observable emits supplied values before emitting the values from source observable [startWith](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-startWith) : waits to emit value until the passed in inner observable has completed [exhaustMap](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-exhaustMap) Link to the output in jsbin.com : https://output.jsbin.com/punibux — Setup basic html and styles #Phase1 Import the RxJS library and we will use as a scroll container and append news to it. infinite-scroller — Setup helpers functions for data processing, rendering and calculations #Phase2 First three functions are straight forward, — returns the api url with the current page number as query param getQuotesAPI — processes the return data from the api which is performed using and increase the currentPage. processData fetch API — takes each news item and renders to the view. renderNews The next two functions are the ones used for scroll calculations 4. — determines if the user is scrolling down or not. isUserScrollingDown 5. — determines if the user has scrolled to the passed in percentage to get more data. isScrollExpectedPercent — Setup up observable stream #Phase3 To capture the scroll events in the container, we need to create an observable from the scroll event. This can be achieved by using - . It is a convention to append to the variable when referencing an observable stream. Rx.Observable.fromEvent docs $ — Stream logic to process scroll events and call the api #Phase4 We are going to take the scroll event emitted by and over to take only the values we need for our infinite scroll logic. We need only three properties from the scroll element — , and . scrollEvent$ map [scrollHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight) [scrollTop](https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollTop) [clientHeight](https://developer.mozilla.org/en-US/docs/Web/API/Element/clientHeight) We pass the mapped data to operator which emits the current and previous value in an array which will look like below. pairwise Now we can take the pair of positions and pass it to the them to filter according to our conditions filter Is the user scrolling down Has the user scrolled reached seventy percent of the container — It gets invoked when the has passed filter conditions. We start with an initial value of an empty array. requestOnScroll$ userScrollDown$ We going to use to create an observable from a promise. makes the http call and returns a promise. will wait for the fetch to complete and the inner observable to emit the data from the API. [Rx.Observable.fromPromise](http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#static-method-fromPromise) fetch exhaustMap — means they do not do anything until you subscribe to them. We will subscribe to the and pass in to the subscribe method. When emits the data from the api it will be passed on to which will call to render on to the view. Observables are lazy requestOnScroll$ processData exhaustMap processData renderNews Below is the gif of the infinite scroll in action, watch the scroll bar on the right. In my next post I will try to implement it in Angular 2 by creating an infinite scroll directive. Update: Here is the link to my follow post on Simple Infinite Scroller directive with RxJS Observables

Fetch

Microsoft

Mozilla

Twitter

YouTube

Naive Infinite scroll in Reactive Programming using RxJS Observables

source There is no shortage of new content. Millions of new blog posts are written every day. It’s important that we stay informed for our career, growth and general awareness. We’re all familiar with Newsletters. Newsletters are mini publications, curated by experts and enthusiasts on a focused topic. I like Newsletters, and it’s how I keep up with topics that matter to me. I’m already subscribed to several high-quality tech, startups focused Newsletters. You can check out my on Nucleus. I have a couple of good engineering sources like Hacker News, Reddit. But I wanted to expand my knowledge beyond that. So, I started digging the web for some engineering focused Newsletters. After, spending 2 hours online, I came across a couple of guides that looked promising. One of them is . This is a good master list but feels overwhelming. profile https://github.com/kilimchoi/engineering-blogs After couple of hours of further digging the web, I had compiled a master list of all tech blogs. About 200+ resources. All that left was going over this list and start validating. My validation metrics include content quality, freshness, and coverage. I thought it will be useful to others. So, I decided to put together a guide on best engineering newsletters/blogs. Take your time to review, and subscribe to those that you like. If you want to keep them organized, don’t miss out on the last part of this article. I hope you find this list useful and it helps you stay informed in your respective industries. Please let me know if you have a favorite that I missed it. Android Newsletters: Android Weekly - Free weekly Android development newsletterandroidweekly.net Android Weekly - Free weekly Android development newsletter _Android Authority Newsletters View all our recent newsletter campaigns Stay up to date on all the latest technology…_www.androidauthority.com Android Authority Newsletters - Android Authority A Handcrafted Weekly #AndroidDev Newsletterwww.androiddevdigest.com #AndroidDev Digest - A Handcrafted Weekly #AndroidDev Newsletter Database Newsletters : _A weekly round-up of database technology news and articles covering new developments, SQL, NoSQL, document databases…_dbweekly.com DB Weekly: A Free, Weekly Email Newsletter _A free, once-weekly e-mail round-up of PostgreSQL news and articles_postgresweekly.com Postgres Weekly: A Free, Weekly Email Newsletter _A free weekly newsletter featuring curated news, articles, new releases, events, tools and libraries, jobs etc related…_www.nosqlweekly.com NoSQL Weekly: A Free, Weekly NoSQL E-mail Newsletter _In this blog post, I'll look at the types of NVMe flash health information you can get from using the NVMe command line…_www.percona.com Percona Database Performance Blog _Signup for the MSSQLTips.com newsletter and get free SQL Server tips delivered to you._www.mssqltips.com Join the MSSQLTips SQL Server Community Javascript Newsletters : _Edit description_adripofjavascript.com Home - A Drip of JavaScript _A free, once-weekly e-mail round-up of Node.js news and articles_nodeweekly.com Node Weekly: A Free, Weekly Email Newsletter _A weekly newsletter for front-end developers with a specific focus on tools._webtoolsweekly.com Web Tools Weekly | A weekly newsletter for front-end developers _A free, once-weekly e-mail round-up of JavaScript news and articles._javascriptweekly.com JavaScript Weekly: A Free, Weekly Email Newsletter _We come across a lot of great articles on creating, testing and maintaining large JavaScript applications. This page is…_superherojs.com Superhero.js _Fullstack React is a weekly newsletter about the React ecosystem with an emphasis on useful libraries, tutorials and…_newsletter.fullstackreact.com Fullstack React _The free, weekly newsletter of the best React.js news, articles, projects, and more - brought to you by React.js…_reactjsnewsletter.com React Newsletter _Free weekly occasional summary of React Native news, articles, issues & pull requests, libraries and apps curated by…_reactnative.cc React Native Newsletter iOS Newsletters : _This is a quick look at the changes I needed to make to bring Cocoa with Love up to date for Swift 3 and the latest iOS…_www.cocoawithlove.com Cocoa with Love _In this screencast, you'll learn about classes in C# and how C# manages the memory for them. In this screencast, you'll…_www.raywenderlich.com Tutorials _objc.io publishes books on advanced techniques and practices for iOS and OS X development_www.objc.io objc.io _Subscribe to a hand-picked round up of the best iOS development links every week. Curated by Dave Verwer and published…_iosdevweekly.com iOS Dev Weekly - The best iOS development links, every Friday _Tips and techniques for iOS and Mac development - Weekday mornings at 9:42 AM. The goal of each of these 'bites' is to…_littlebitesofcocoa.com Little Bites of Cocoa - Tips and techniques for iOS and Mac development - Weekday mornings at 9:42… _The greatest iOS development tools, including websites, desktop and mobile apps, and back-end services. Updated daily…_iosdev.tools iOS Dev Tools - The Greatest iOS Development Tools _NSHipster is a journal of the overlooked bits in Objective-C, Swift, and Cocoa. Updated weekly._nshipster.com NSHipster _Hi there, I'm @NatashaTheRobot and I'm programmed to love #Swift! Every week, I put together a list of the best Swift…_swiftnews.curated.co This Week in Swift Company Engineering Blogs: A Language agnostic blogs sharing their latest ideas, and best practices. engineering learnings _All Posts - 8th Light's blog is a place for software crafters to indulge their curiosities, share new ideas, and debate…_8thlight.com All Posts | 8th Light _Welcome to the 500px Engineering Blog! This is where we, the engineers at 500px, share and discuss the challenges and…_developers.500px.com 500px Engineering Blog _Edit description_nerds.airbnb.com Airbnb Engineering - Nerds _Making things work_engineering.bloomreach.com BloomReach Engineering Blog _Introduction Location-specific feedback has always been fundamental to collaboration. At Dropbox, we've recognized this…_blogs.dropbox.com Dropbox Tech Blog _In April of 2016 Etsy launched Pattern, a new product that gives Etsy sellers the ability to create their own hosted e…_codeascraft.com Code as Craft _Meet the engineers who code Facebook_code.facebook.com Engineering Blog _The Blog of the GitHub Engineering Team_githubengineering.com GitHub Engineering _At Heroku, we're always working towards improving operational stability with the services we offer. As we recently…_engineering.heroku.com Heroku Engineering Blog _Stories from the people who build @Instagram_engineering.instagram.com Instagram Engineering _Read more about tech-at-instacart. Instacart Engineering._tech.instacart.com About Tech at Instacart _Stories from Lyft Engineering._eng.lyft.com Lyft Engineering _Join our engineers where we talk about solutions to problems presented by big data and the race for big speed._eng.localytics.com LocalyticsEng _Stories from the team who are building Medium._medium.engineering Medium Engineering _This is a Netflix blog focused on technology and technology issues. We'll share our perspectives, decisions and…_techblog.netflix.com The Netflix Tech Blog _Video publishing at The Times is growing For the past 10 years, the video publishing lifecycle at The New York Times…_open.blogs.nytimes.com Code - Open Blog - The New York Times _Engineers build Quora from the ground up, creating APIs and abstractions to solve challenging technical problems. This…_engineering.quora.com Engineering at Quora _This is part two of a three part series on how we created a technical career path for individuals at Spotify and what…_labs.spotify.com Labs _At Squarespace, our mission is to provide creative tools that help anyone bring their ideas to life. In this blog you…_engineering.squarespace.com Home _Follow the Stripe blog for product announcements, feature updates, new countries, and technical posts about payments._stripe.com Stripe Blog _In the last infrastructure blog post we focused on some of the key efficiency and optimization efforts that we've made…_blog.twitter.com Engineering | Twitter Blogs _The Official Blog_blog.twitch.tv Twitch Blog _The work behind Uber Engineering._eng.uber.com Uber Engineering Blog That’s all! Did I miss any awesome newsletter? Let me know. Found this post useful? Kindly tap the ❤ button below! :) This list was originally curated on . You can checkout from Joel. Sign up to curate the best of what you’re reading for yourself or share with who and what matters to you. Nucleus more engineering curations Editor’s Note: Also check out Hacker Noon Letters :-)

AirBnB

Dropbox

Facebook

Heroku

Instagram

Lyft

Netflix

Stripe

Uber

Engineering Newsletters that You Should Subscribe To

Most of the people I talk with regarding the product or website that I am developing, tend to ask if I’m using any frameworks or libraries. When I say none, they usually look very surprised and ask, “Why!? It’s far easier to use a library, and it saves a lot of development time”. They make me question myself again and again, but every time I confirm that I made the right decision. Each and every single line of code that makes my product alive is written by me, by my own way of thinking, and my own creative ideas. It may not be perfect, maybe even off the web guidelines, but this is how you learn! I must admit that this did not only make my coding more efficient and manageable, but each piece of code is there because it is intended to be there. It has a meaning, its own objective. I hate to see unnecessary data in places that would only just take space. I want to be in control of each part of the process cycle. When I think about the web, I don’t just think about being efficient, but also about the load time and the weight of each request from your machine, back and forth to the server. How can we improve this? How can we make it better for the user? Today I will discuss the main advantages of creating a website from scratch. I will mostly look at the theoretical aspects and share my thoughts from my web development experience. You own the code, you control it! Right click — new file. Blank page — blinking cursor. The moment when your creative ideas await to be written and excitement kicks in for a new project. It is such a great feeling to start developing line-by-line, and turn your ideas and imaginations into a real working digital product. You are constantly concentrated on making your website as clean and efficient as possible. Even if it’s the beginning, and some of your code may not be perfect, you still feel great about the work you are doing. You become proud of it. You see the development files piling up, and realise how much you did before you even knew it. The product or website starts to take shape. You are beginning to be in control of your code. On the contrary, imagine now, opening a new Bootstrap template, you look at the code, you start modifying it, and find hacks to make it work as you envisioned it. Files start to get messy, a lot of the code is actually being written to replace the frameworks’ defaults. If you ask me, this is the worst web development technique one could undertake, but unfortunately many early developers end up following this path. By doing this you are not learning, this is just manipulating ready-made code. How can you expect to learn new skills and advance in this way? How will you learn about new web technologies, if all you do is upgrade to the latest framework version? . Only you know what it took to get there. It is definitely worth the effort. You learn from your mistakes, you continue improving your skills. You know everything about the structure of the website, you can easily maintain it. You are now in control. Trust me, seeing the final product ready to be shipped, knowing that everything is your own doing is an irreplaceable feeling Be unique and creative with your design thinking process . Every part of the design is there because thought about it, and it meets your own level of expectations. Don’t be afraid to think outside the box and experiment with different techniques. Feel free and go ahead with finding your own approach to achieve particular functions. Most of the time you will realise that this is how it’s actually done anyways. Brain storming is highly recommended before you give up and search online. After all, you can always double check your work with others if you have any doubts about compatibility or support. You are now getting familiar with the web development environment. You’re building the website based on your own inspirations and taste you Starting the process from scratch makes you think at a higher level to reach a particular design with a minimal effort. This is what makes your code unique and what teaches you how to become a professional. Easily find bugs, performance hick-ups, and design issues When you are writing all the code of your website or product, you imminently become familiar with the whole structure. This makes it far easier to find what is creating an error, causing a bug, or a design glitch. No time is being wasted to look for a needle in the haystack. There is no excess code that you have to go through, or include hacks to fix an error caused by the framework or library. Something I found helpful is to leave line comments and write documentation throughout the development. You’d be surprised at how easily it can get confusing when you come back to your code, to adjust or implement a new function. The comments will improve your productivity and significantly reduce the expected development time to maintain your product on future updates. Make this a habit! Strongly improve your coding and design skills As we already mentioned above, building your website from the very first line of code, forces you to seek and continue learning to achieve what you envision. You push yourself to research how the required functions could be implemented natively without the use of libraries (this is usually more common for JavaScript coding, for example, to create a custom modal-box that shows a welcome message to a new user). This is what keeps you going forward, that you continually search for new ways and techniques to write and improve your code. Optimize your website performance My was all about how to radically improve your website performance. The following are two main advantages of how building the website from scratch can effect your website performance: previous article . Extra code means extra time for the site to be downloaded. All the lines of code written for the website are only there because they are required. Libraries or frameworks adds all this clutter and unnecessary code for hundreds of tricks and features that 90% of your website will not use. There is no unnecessary code in your development files If you already know what you want to develop, you are building a structure that is optimized specifically for that site. This makes your website highly efficient! Optimized for your specific requirements. Don’t let performance fall behind. Keep yourself motivated to optimize your website performance by aiming to get the best scores on . google page speed insights Experimenting with new technologies Owning the code of your personal website or product means that this can also be your playground. Keep practising how to apply new technologies and advancements on your own site. It is much easier to implement a new technology or function with your existing code, because now you know how it all works, you are already familiar with the website structure. This is crucial for keeping your site adoptable, future proof, and progressive. It keeps you motivated to learn, while improving and keeping your website up to date with the latest web technologies. Closing thoughts How would I keep my website up to date? . If you are afraid of refactoring or to continuously updating your code, then you should reconsider becoming a developer at all. This is something that you should know from the very beginning before diving into web development. Which ever language you’re using, you can easily keep yourself up to date by subscribing to weekly newsletters and updates, from authoritative blogs on your language of choice. This way, you would know if a feature is getting deprecated soon, and prepare your code for future releases. It also forces you not to become lazy and leave your website become outdated. A lot of websites out there are still using libraries or frameworks that are years old, and it becomes more frustrating to upgrade from one version to the other. Pure coding techniques (if used appropriately) can last for decades or more, since these are written as was proposed in the initial preparation for the website or product. Don’t let this be the reason for migrating or starting with building a new website from scratch. Refactoring your code Refactoring your code will become the main ingredient that gets you to a higher level and stay ahead of your competitors! Don’t be afraid of badly written code, all professional web developers today have written messy code before. The only way to keep improving and getting better is to start messing with code now. This will make you comfortable with the language, and help you not be afraid to take on new challenges! If you don’t start by learning the basics of web development, you will get used to the ease of finding ready made templates or pieces of code. This will reduce the amount of effort you otherwise would put into gaining new knowledge. Thank you for reading! You can also have a look at my eBook here — Mastering Web Development Until next time, Owen Far P.S. Follow me here or join my newsletter if you want to keep learning the crucial secrets of web development. More from Owen Far: _Oh, and I’ve been banned from Reddit._hackernoon.com What are frameworks & libraries? — My honest opinion _It’s time to step-up the game and become great at what you love doing the most!_hackernoon.com How to radically improve your website performance (Part 2)

Google

Progressive

The advantages of building your website from scratch

Mobile industry in Russia is quite young and is just starting to take shape. However, the market overall is on the verge of active growth and it’s time to go mobile with your business. App Annie analytics provided detailed research on global mobile market that gives an overall impression on growth tendencies and path of development. Full research you can find on their website, but for those who have no time to read long texts, we created a summary of main trends mentioned in the report. Growth of mobile applications market Last year the market of mobile apps continued to grow and develop. Global , while time, spent in apps, grew by 25%. Key factor there is the growth of profit. App Store and Google Play developers received from their apps in the stores during the last 2016 year. downloads of mobile apps grew by 15% 40% more profit In 2016 China became the absolute master of iOS App Store profits. Other developing markets also proceed with great growth indicators. Games are still the main source of profit, Pokemon GO, for instance, achieved the maximum results in this area. On last week of 2016 the game still was in Top-5 of the most profitable global apps, no matter its launch happened in July 2016. In December one more hit emerged, it’s Super Mario Run game that became #1 in 148 countries. More than 5% of the users have already bought the paid version of the game after the initial free install. In 2016 the . France, Germany and UK were the leaders in growing number of session in mobile commerce apps. mobile shopping also grew Users are still spending most of their time on social apps and messengers. Still, great number of other categories also became noticeable. For example, the usage of apps for fitness and healthy living, such as , increased enormously. Sportlife Club app One of the most important metrics of 2016 is the average usage of apps among iPhone users. Generally, people use from 30 to 40 apps per month. In 2017, according to current trends, new mobile records will be established for mobile apps ecosystem. The growth of business apps is finally happening! For years analytics and growth hackers all over the world say that mobile apps will change its’ vector . And finally this prognosis comes tr from games to business applications Both main app stores are grew in terms of business apps over the year. More and more users adapt to the idea that all important things they needs can be found in mobile apps, whether it’s or just . in iOS App Store the most growing categories are Finance, Travel and Photo and Video, in Google Play such categories as Tools, Social and Management are leading the way. Still, the games are winning the battle in terms of profits. calling a doctor to your home finding out the new route for their bike ride In 2016 games give 75% and 90% of profit to App Store and Google Play accordingly. Half of the App Store market share depended on Role-play games in 2016. App Store is an absolute leader in terms of payments in apps In 2016 developers for both App Store and Google Play received 35 mlrd USD of profit. As the matter of fact, annual growth in terms of payments was 40%, that was way more than in 2015. Together with growth in installs the profit growth happened thanks to China that alone gave more than a half of the annual profit to the stores. Mutual time users spent in apps is growing together with profits on all three markets. This is great news to well-known apps and to young promising ones too. In the end such results confirm that growth of installs is a great base for future payments and profit from usage. New approach towards well-known spheres Users are ready to pay for their subscriptions through mobile apps. For example, the profits of mobile streaming services have risen enormously in 2016. Even while users have options how to pay outside of the actual store (e.g. with bank card on the streaming website) they prefer to use mobile payments due to its comfort. Youtube became a leader of streaming services in USA and UK in terms of user numbers, but Netflix was the most profitable one in both stores due to its’ mobile subscription option. The growth of mobile retail Mobile commerce is growing rapidly all over the world. In fact, in 2016 . We can forecast that these numbers will continue to grow with people getting used to mobile shopping options and spending more and more time in such apps. 44% of whole retail internet traffic and 31% of sales was happening in mobile area Traditional retailers and outlets need to invest into strategic mobile development in order to preserve their competitive advantages in mobile world. Even such services and aggregators that are dealing with retail, e.g. various , prefer to develop their own mobile projects. delivery services One of the most recent mobile trends is . During holidays sales from Black Friday to Cyber Monday the profits grew way beyond the numbers from the previous year. The main achievement so far is that USA mobile sales for the first time exceed 1 mlrd USD during Black Friday 2016. In such countries as China, India and South Korea the number of apps installed and the number of purchases made with is also constantly growing. holiday shopping going mobile Social apps for marketing goals World top social apps have great loyal audiences. Still, the question is how to transform this advantage into profit, remains. In 2016 we saw many attempts to answer this question. Twitter may be the most unsuccessful example. This company tries to monetize its’ platform for the long period of time with no actual success. All successful cases state that you need to add . marketing tools into your social apps Instagram has launched Instagram Stories in August together with package of simple advert and analysis tools. From September to December Instagram share in advertisement via on the iPhone grew more than 50%. Facebook network Snapchat, that inspired Instagram Stories in the first place, remastered its’ Discover feature, and integrated developers content into Snapchat Stories even more. Such feature supposed to increase the number of users seeing this content. Pinterest also supported new trend and redesign its’ targeting options similar to individual target audiences that Facebook has. Bank sphere innovations Retail mobile banking in Europe is also growing. In France, UK and Germany the number of sessions in retail banking apps increased significantly. As in USA, main users of such apps are Millennials. Total growth in sessions numbers happened due to increase of user database and number of sessions per user. Mobile games industry is changing Pokémon GO will stay in our minds as the brightest app of 2016, for sure. This game gained success and attract great number of non gamers to play. Easy game mechanisms, VR gameplay, social functions of the game and the main idea based on well-known and lovable characters made it possible. Game metrics grew dramatically — in 110 days after the launch users spent more than 800 millions of dollars in game. It’s faster than some of the most successful mobile games in the whole history of industry grew. Overall, 2016 showed that original ideas in terms of gameplay is a promising field for mobile games of the future. To conclude, mobile sphere is developing into several directions at the same time. This is great thing that is happening due to great investments into mobile industry and overall inspiration to stay with mobile features instead of common general web ones.

Super

Target

The Verge

It’s time to go mobile with your business

As one! Building top performance teams is very difficult. Sometimes it’s actually a matter of luck. But is it possible to create a culture that improves the odds and lays the ground for great teams? Fellowship It’s mandatory that members have a good and friendly relationship. Pressure, deadlines and many problems will arise and how the team behaves will make all the difference. There will be the time when someone will make severe mistakes or cause slowdown. At that time, the team should act as one, be supportive when needed and do everything to get past obstacles. team On the other hand, after successfully overcoming the obstacles, problems need to be addressed. Sometimes the team is very friendly and there is no confrontation. The team members should be direct, expose all the facts and leave nothing unsaid. Feelings should be kept aside and team members must understand that teammates may not agree with some solution or may believe that something could be improved. That does not mean that people don’t like each other! Having a postmortem culture is handy to achieve this. Forces the team on learning how to communicate via facts and consider processes or guidelines to overcome future obstacles. Challenges What good does a tight team do if there is no use for it? There should be challenging tasks to perform. The team needs to put the skills and to the test, constantly. This will make the team evolve and become better. It will also foster the need to continuous learning and improvement. teamwork Starting projects or tasks that are challenging should always be motivating to the team. And completing those tasks with success yields a sense of achievement and should be celebrated. Continuous evolution is a core responsibility of the team. Team members should always be looking for better ways to solve existing problems. But it’s also a responsibility of management, because the business needs to evolve in such way that people feel the healthy pressure to always overcome themselves. Ownership The team should have ownership over what they do. And with ownership comes responsibility. Given a set of challenges or goals, the team should be autonomous to define the path to get there, and should be held responsible if things go wrong. The responsibility part is important because it forces the team to consider the future. If you are building something that you’ll have to support later, you’ll put more thought into it from the start and have more quality considerations. It also forces better communication. If the team has the ownership and responsibility of something that will not be done in time, for example if it’s getting behind to meet a deadline, that should be communicated as soon as possible and should be addressed. Impact What the team produces should have a clearly defined impact. Sometimes teams build great things that are not used or have no practical effect on the business. That is very frustrating for a highly skilled team. In the past I considered that providing the impact was not the team’s responsibility. However, there is always something that the team can do. — understanding why something is important to do greatly adds to the motivation of implementing it. Will it help our customers? What additional value will it bring? What is the goal? When receiving a task, the team can and should ask why the task is important — sometimes the teams have some refactoring to do, or want to improve processes or learn new things. These team tasks should be properly communicated and there should be consensus on what should be done first. New tasks versus housekeeping — how will we be able to measure the success and usage of something that we’re doing? We need this information to be able to iterate on the task and improve it. That’s the only way we can know that what is being done has impact. Demand success metrics The team should have knowledge of the business and have a vision for the product. It helps to have someone with a mindset. product engineering Vision It’s important to have a clear and inspiring picture of what’s ahead. The team should be focused on the short term. Of course they need to consider the impact and quality of what they are doing, in terms of future maintenance and evolution. But the team should be focused on a short period, like a sprint. Again, knowing the why is more important that knowing what. Ideally the vision is supported by data and not based on intuition. In my opinion there are two more thresholds of vision that are important. — this is usually the responsibility of the team leader. There should be a clear vision on what will be accomplished on the next 3 to 4 months. This forces the team leader to organise and communicate the next developments and that information may be precious for what the team is currently doing. Medium term vision — this is usually the responsibility of the direction of the company. There should be a vision on where the company is going on the next year. Maybe two years even. This could be more abstract and more in terms of objectives and goals. Long term vision In summary, the team should have its mind on the ball, the general manager needs to provide and tune up the strategy for the game, and the president should focus on what’s needed to win the championship. Another metaphor I like to use is the bridge building one. You may have a top team who knows how to build strong bridge parts. But what good will it do if you don’t build straight to the destination, but build in circles? Or if you build it at the wrong spot! At the end of the day, teams are not alone. They should work together with teams from all areas. This will be mandatory to achieve success. If teams are motivated, have a sense or purpose, are continuously improving, and know that their work has impact, that is a recipe for success. Do you agree with my ideas on the requirements for strong teams? What would you change or what would you add? Thanks for reading and you may reach me out at @donbonifacio

Ball

Requirements for strong engineering teams

Because writers will do almost anything to get published A designer friend and I were discussing Medium’s recent announcement about starting a consumer subscription model during this quarter. My friend is primarily a designer, and though he does write, it’s mostly to support his design. He agreed with me that Medium has a lot of interesting reads, but he doesn’t believe people will pay to read on Medium. He says that if at all he would pay to read anywhere, it would be on Apple News or Flipboard. I had to admit he had a point. Internet content has always been free, and breaking that habit won’t be easy. That why the advertising model works. Businesses are the only ones who will pay for their stuff on the internet, as they hope to make money by hooking us with their ads. Ad nauseam. This eventually led to a stalemate between users and content providers with the latter crying plaintively, “We notice you have your ad blocker on…” Well, we wouldn’t be blocking them if they hadn’t swamped us with ads that deceptively ask us to click on the ‘X,’ and then pop up another million ads that maddeningly refuse to close, and cover what we were trying to read. So if readers won’t pay, who will? I kept chewing on this fact like a dog on a bone, hoping it would crack. And that’s when it popped up. A thought I mean, not an ad! The only people who will be willing to pay are writers. Hear me out, please. Writers like to publish stuff, and they are willing to go to great lengths to make it happen. Like this old college mate who recently wrote a book. He published it at his own cost, and enthusiastically went around marketing it. I don’t think he recovered his investment, but it wasn’t for lack of trying. And that’s the thing. If you give a writer a bit of hope to cling on to, he or she will be willing to gamble a fair bit on their writing. So why not ask writers who want to publish their stuff on Medium to pay for the privilege? Of course, writers are generally a broke species. So Medium might want to keep that fee quite nominal. The successful App Store model of micropayments like 99 cents sounds doable to me. Say 99 cents a month. Let’s say 100,000 writers on the platform pay up. That’s $1.2 million a year. Is that enough to run a company like Medium? I haven’t the faintest idea. But the way, I see it, that’s just for starters. What’s important is what Medium does (or should do) next. Medium must find some basis to reward good writers. The obvious way seems to be those who bring in the most traffic. Fair enough, but I don’t think that should be the only criteria. Again, this needs to be worked out. Let me give an analogy. It’s award season in the movie industry now, and there are many categories where people can win an award. Winning an award is a life changing event. An Oscar can make the winner’s reputation, which in turn makes it possible for him to earn his living by practising his craft. And it doesn’t have to be an Oscar for acting, or even an Oscar per se. It can be an award from the media, or from the actors’ guild, or from the critics. It can be for comedies, drama, musicals, biopics, animation… the possibilities are endless. My point is it’s not just the box office stars who shine in the movie industry. There are a whole lot of great actors whose movies may not be minting money. But industry recognition makes it possible for them to practise their craft, and earn a decent living from it. And the world is a better place because of that. The parallel is obvious. It shouldn’t just be the high traffic generating writers who get paid. Great writing which does not appeal to the everyone, does not make it any less great. Poetry, short and long stories, non-fiction, haiku, stories in different languages, entertaining posts in tech, sports, music… I think this is a mind boggling opportunity for Medium. Medium can be to writers, what Google is to search. Building on its existing base of writers, Medium can establish itself as the only platform where all types of writers can gain recognition, and eventually make a living by practising the craft they love. Once writers begin to view the platform in this light, established writers as well as would-be-writers from every corner of the world will flock to Medium. All Medium has to do to make this work, is to put the reward system into place. The details need to be figured out, but I think it’s possible. Here are some thought-starters. The obvious way is to pay certain writers, say with articles generating above a 1000 reads. The payment goes up proportionately as ‘reads’ go up. Other ways would be to get existing users to vote for the best articles in different categories. Or get panels of famous writers to choose the ‘Oscar’ winners in multiple categories. Or ask the media to vote for best stories covering a variety of topical issues. Once the momentum of writers joining the platform speeds up, the 99 cent fee can even be reduced, or even done away with, while keeping Medium viable. And it may be possible to do this without Medium being bogged down in the swamp of commercial advertising. To do this, Medium could again take a leaf from Google’s model, and have advertisers on Medium’s terms. A-la the text ads of Google on its search pages that are related to the content of the page. Of course, this will lead to the same privacy issues that Google has, and may cause unrest among Medium’s core users. To avoid that, Medium can maybe avoid advertising altogether, and instead get the industry to support writers financially by subtly branding themselves, rather than having in-your-face advertising. For instance, Medium can tie up with Amazon to publish and promote the top 25 short stories as a compilation. Or Penguin can give a book deal to the top five writers in different categories. Or Warner Brothers can adapt the three best drama stories into movies. Or McDonalds can institute an annual prize of $ 1 million to be split among the ten best health related stories. Or Tesla can give away cars for the best environmental related stories. Or Apple can sponsor cash prizes for the ten best tech stories of the year. Or Disney could sponsor cash prize for the top ten humour stories. While we are at it, why not take another trick from Hollywood? Let’s take the main image in this post. Maybe there’s a phone placed besides the writer’s hand so the company’s logo is visible, and the company pays Medium for the exposure. This means Medium will need some good designers to subtly photoshop in company logo onto images on posts that the advertiser wants to be on. I know this sounds impractical, but why not? Moving on, good writing will bring in many ‘read-only’ readers. As Medium is not using a paywall, how can it make money from them? If they enjoy an article, they may be willing to voluntarily donate, something along the lines of the Brain Pickings newsletter model. Maybe, Medium can go a step further, and insert a donate button at the end of every post, next to the green heart. And if Medium does an Apple, and sets a revolutionary fee of just 10 cents per click, it’s just possible that the reader may click on the button, provided we make it easy. Wait a minute, thinking on my feet here, but I see interesting possibilities here. Let’s say every Medium user has a voluntary option to open a Medium payment wallet on the site with a minimum of $1. Clicking on the ‘donate button’ can be set to instantly deduct 10 cents from this wallet. No further effort required from the reader. $100 for 1000 clicks is not much. But for a broke writer, it could be just enough to motivate him to keep writing. Of course, there are a lot of loopholes. The biggest one is writers are investing their time and energy to write. I believe they will pay to publish, but I also believe I am likely to get a good kick on my backside for believing this. Another issue is if someone hacks the number of reads, just as clicks were once faked on ads. Maybe the techies will sort this one out. There will definitely be many more loopholes. If I try to figure them all out, I’m going to end up strangling myself in all those loops! So I’ll generously leave it to my readers to organise a loophole search-and-plug party. I would like to add that the above are just suggestions on how Medium can generate income to pay writers. Some may have been considered and discarded long ago as being basically flawed. Some of it may be impractical. Some may be plain dumb. Some of you may completely disagree with me. That’s fine. I’m just a layman, and I’m sure those in the writing industry know a lot more about it than me. But instead of just shooting my thoughts down, why not use them as stepping stones to come up with better ideas? Because there is one indisputable fact. No one has cracked how to make online writing remunerative for writers (ignoring the ad model). So I’m sticking my neck out, and hoping my head doesn’t get chopped of. If what I say sparks off something which leads to a solution, I’ll be delighted. If not, I’ll sleep happy as I’ll know I gave it my best shot.

Amazon

Apple

Disney

Instantly

Tesla

What if Medium puts a paywall for writers

Using Azure Functions to automate your pull requests validation If you have an open source project, the more you can automate around the pull requests review process the better, at least that’s what I believe. So if you go through your checklist for expectations you have some things are obvious continuous integration which there already exist good services for, but some of your checks could be unique and currently manual — one my just recent automated check is the example in this post. The Example The example explain in this blog post will be validating so each commit in a pull request comes from an known GitHub user, it’s a quite easy check, but also easy to miss when reviewing yourself as the pull request itself will always originate from an known GitHub user — so just by looking at the pull request on GitHub it’s not an obvious issue. The reason to do this could be i.e. if you want to automate attribution of authors in release notes, validate CLAs and so on. The reason for this occurring often isn’t malicious intent, but rather that a to GitHub unknown email address had been used to do the commit, i.e. issuers corporate email address. The easiest fix is just to add all email addresses under their GitHub Settings/Emails, the other option is to amend the commit with the desired email address and do force push with the new commit. The Concept FaaS — Functions as a Service — is very well suited for these kind of scenarios as you don’t need a web site/server up and running 24/7, but instead FaaS enables you to have code that’s only up and running when invoked — where the idea is paying only for what you use when you use it. Roughly the flow will be GitHub triggers a webhook call to a function, the function will parse out what’s needed from the GitHub payload and place it on an Azure Storage Queue, the queue will trigger a function that does the validation and reports back status to the pull request using the GitHub rest API. New Function I usually use the Azure Functions CLI scaffolding, write my functions in VS Code and then deploy via KUDU or CI/CD of choice. But the Azure portal is quite capable too and can be a quick way to get started and it’s fully possible do get the code to source control later ( ) source control should always be the way when in production, but when getting started, prototyping and playing around the portal is actually quite productive Azure Functions has a ready template to quickly get started with a GitHub webhooks. This template will give you a good starting point to dynamically parse the data posted from GitHub, making easy to support most scenarios. Adding a queue So now we got data setup to come in to the service and got the ability to parse the incoming data. Now we just want to quickly cherry pick what’s needed out of the GitHub payload, push it to a queue for later processing and tell GitHub we got it. Go to “Integrate” to add a queue output via the portal, click “+ New Output”, in this case we want an Azure Storage Queue You then give the “queue output” a parameter name which will be the name of the output parameter in your function, then name of the queue to push messages to and last choose the where your storage queue connection string resides.Hit save and our queue parameter binding is ready. appsetting Filling the queue Now we just need add it as an output parameter to our function so we can assign content to it: As you might see here using output parameter you lose the async/await capabilities, if you don’t need multiple outputs and just want to return“200 — OK” if processed and queued successfully, then you can keep using async/await by going under “Integrate” removing the HTTP result binding and setting the queue to bind to the return value of the function. So a complete function that parses and queues while still supporting async/await could look something like this: Typed parameter A neat thing is that the queue item can be changed to custom class and then it will automatically serialize and deserialize the JSON string.So lets create an class and to keep it nice and tidy we’ll add it to it’s own file.Hit “View Files”->”+Add”, then type in the filename hit enter. The class to our payload would look something like below We can then in our function use the directive like , it’s available to us in our function and we can change our function method signature to a typed return value and end up with something like below: run.csx #load #load "GitHubPayload.csx" So what does the above do? Not much and a lot, it parses the GitHub ’s action, URL to post status to and URL to fetch pull request commits. As we bound the return value to the queue it’ll be automatically serialized as JSON and queued. pull request event Pop the queue Now we need something to pop the queue and do the actual work. To get up and running quickly Azure Functions actually offers an scaffolding option that will get you up and running quickly. If you go to Integrate and the queue output we previously created there’s a “Create a new function triggered by this output” action . This will pre-select a C# Queue Trigger, fill in the queue name and the storage account connection used. All you need to do his hit create, but you probably want to name your function more meaningful than too. QueueTriggerCSharp1 The function crated will look something like below. It gets triggered when something gets enqueued and the dequeued value is what you get in and the template example just outputs it to the trace log. Parse & Validate Also the dequeue trigger can be typed by reusing the class we previous created, this way Azure Functions will automatically deserialize the queued JSON into an typed object we can easily work with. The above code will validate that it’s an event/action we’re interesting and make sure we’ve got status API URL needed to report back status and commits API URL needed to fetch pull request commit details. GitHub authorization Now we got queue item parsed and ready, next step is to fetch the commits from GitHub, before we can do that we need to be able to authenticate against them. GitHub has several ways of against their APIs, one way is thru personal access tokens, which is what I’ll be using for this blog post. authenticating You’ll find your personal access tokens by going to “Settings” and then click on “Personal access tokens” in the left menu. Then click the “Generate Token” button, give the token a description, choose the required access, there’s loads of available permissions, but for this post “repo:status” is the only access needed Hit “Generate token” and you’ll be presented with the newly generated token. App settings We don’t want to store our token in our source code, fortunately Azure Functions just as the other Azure app services provide means to store app settings. You find it under “Function app settings” -> “Configure app settings” There you have a list of key value pairs, which you can add, delete and modify both app settings and connection strings. All app settings & connection strings can be accessed as environment variables, which makes it easy to access regardless of which of the languages supported by Azure Functions you choose to use. Connection strings environment variables are prefixed with it’s provider, i.e. if you choose the custom provider it’ll be prefixed , so if you enter a variable named you’ll access it as . CUSTOMCONNSTR_ GITHUB_TOKEN CUSTOMCONNSTR_GITHUB_TOKEN Calling GitHub So now we got our token and app setting in place we want to and iterate over pull request commits, validate each and then to if it passed or failed validation. The .NET is used to call to the GitHub API, for convenience and to keep it nice and tidy I’ve wrapped it in two helper methods and , both utilizing the same method for common headers and authentication, all placed in it’s own file get post HttpClient GetObjectAsync PostObjectAsJsonAsync HttpClientHelper.csx Finishing the puzzle Putting all the pieces together we end up with a function like this And we now we’re feature complete, ready to queue GitHub webhook request, validate input, validate and report that commits has an registered GitHub user as author. Configuring webhook Now we just need to configure GitHub to call our function when a pull request is created or modified. This is done under repository (or organization) settings “Webhooks”->”Add webhook” You can under your GitHub webhook function find the URL and secret to be used. Enter these as Payload URL, Secret and select as Content type application/json Choose to select individual events and select only the pull request event then just hit “Add webhook” and your done. Testing first PR Now we create our first PR to the repository we’ve configured our webhook on. If all goes to plan, you should see that 1 author validation has been performed and as I’m a known GitHub user the test passes and all’s OK. Now we’ll add a commit from an unknown user, easiest way to test this is by overriding the author when doing the commit. From command line that would look something like this git commit -a -m "Unknown update" --author "John < >" John@unknown.doe.com Then we push our changes, it’ll trigger the GitHub pull request event and our functions synchronize Pressing the details link will take us to the commit displaying the unknown author. Conclusion It probably took a lot longer to read this post than it would take to get the functions up and running — as with many things it’s easy when you know it. It really lets you focus on what you want to solve and as I’ve shown combining with third party APIs is super simple which makes it really powerful. Working with queues is a breeze and for incoming web hooks that’s a great approach as you just receive and acknowledge — doing the actual work in a separate function, you can hook up functions to a poisonous message queue for each queue making it a very robust solution — without turning it complex. too On a final note extending your GitHub pull request review process with small automatic checks is a great way to not only save you time, but also speed up the communication towards your contributors — and the sky truly is the limit on what you can check! You can also do bot like things like certain maintainer comments triggering a integration test, creating new issues, a Microsoft Teams message, etc. So I think for these scenarios the functions as a service approach fits like a glove! What do you think? Would love to hear your feedback! The Code The complete code for the functions in this blog post can be found on GitHub _Contribute to OnlyKnownCommitters development by creating an account on GitHub._github.com azurevoodoo/OnlyKnownCommitters Previous posts If you want to learn more Azure Functions please checkout some of the previous posts I’ve done on the topic! _Breathe life into your static website using Azure Functions_hackernoon.com Bring static to life using serverless⚡ _Using Azure functions to hook up Azure app service deployment notifications to a Microsoft Team channel_medium.com ⚡Azure Deployment -> Microsoft Teams _Why should JavaScript developers have all the fun?_medium.com Going serverless with PowerShell

Flow

Trace

GitHub statuses made easy with FaaS

Using “codetag” comments as productive reminders Introduction Hello there, my name is Eido, I’m a software developer and I want to ask you a question: Have you ever encountered the moment when you had a you wanted to implement that ? super duper idea while coding just jumped into your mind Guess what? It also happened to me! What are the chances?! So, you created some sort of nice comment as follows: // todo implement < > super duper idea This nice comment surely written from several good reasons, such as: You didn’t want to give it too much attention. You know it’s relevant for another part of your code. You assume it should be implemented by itself in another time. You didn’t want this “data” to be lost. The truth is, this happened, happens and will happen to you, to me, and to all programmers while coding, how wonderful! But there are some elusive problems in using this approach to remember your , what are they? super duper ideas There is no term to include this sort of comments (TODO, FIXME, etc.) Incomprehensible inconsistent short written comments “what-I-was-working-on” time wasted while reading your code either before actually coding or when returning from any break, such as lunch. Luckily, you came to the right place, and the concept of will solve you those problems: codetags use the term (or plural codetag , you can even codetag it! nice eh?) whenever referring to any sort of these code comments. From now and on codetag s Save you a LOT of “what-I-was-working-on” time waste. NEVER forget ANYTHING you are considering, want to do, keep for further implementation, currently working on etc. It’s time to take action and convene the concept of these kind of comments, which can be found almost in any software project written. Who are you, “codetag”? As you probably already understood by reading the introduction, codetag is: A widely used ad-hoc code comment markup convention to serve as of section of code that need closer inspection or review. reminder I firstly read about this subject from which originally written by Micah Elliott in 2005. In this article, we’ll improve it a little for purposes. PEP350 — Codetags productivity How codetags are used? Codetags can be written in that supports comments. any programming language I have using them for a while in Java programming language, XML, JavaScript and C#. I also find them useful while working on multiple projects at the same time (don’t ask me why, but it happened) when I used them as my reminders to what I wanted to do when coming back to a project after a few days (using DOING mnemonic). How NOT to write a codetag // fixme <incomprehensible short summary of tech important note> One of the problems in the above codetag is “data” loss — when you read a codetag that wasn’t written accurately enough the following questions start to float around: What exactly the author ? had this weird idea? for god sake how much is it lays here? meant who Those questions can be really critical because maybe the of this “codetag” was the developer of this class when it was on and is that he thinks that developers of this class should write a technology specific important implementation by code that will prevent a slowdown that most probably will appear in the future, but he didn’t had the the time to do it and there was no slowdown at his time, so he continued, perhaps moved to another project and this part left alone. author early stages, what he meant How can we avoid this elusive “data” loss? How to write a codetag Write the codetag as if you are writing it to someone that doesn’t have any idea about what you are writing, even if you write it to your own self. Use the codetag format as the following section of code (start those lines with your used programming language comment character): <CODETAG MNEMONIC>: <Codetag subject><Optional codetag multi-line message><(date)> <Author> Here is an example of a codetag which sticks to above written rules: /** * The login will happen automatically when the service starts up.* A get service status will be called.* The methods that he calls will use server responses cache.* (23/01/2017) Aurobindo Boghos */ TODO: Change client request from this server You probably ask yourself “why the hell should I write those lines and waste my time instead of continue coding faster toward my goal ?” The answer to this question is divided into two parts: By sticking to this format, other teammates and you can easily read and understand it quickly without wasting any time trying to figure out what’s going on and what’s the “poet” intention. You don’t waste your time — you can avoid the time to output (such as mnemonic, date, author and priority) that can be scripted by using custom variable text code snippets. Quickly writing well-formatted codetag in Android Studio IDE using Live Templates feature Mnemonics and their purpose There are numerous mnemonics mentioned in , the mnemonics I found the most useful for me are the following: PEP350 — Codetags — Mnemonics TODO - something that someone need to do someday (notnecessarily) in the below section of code. DOING - self reminder for what are you currently DOING (notnecessarily) relate to the below section of code. CONSIDER - reminder to CONSIDER some sort of things (notnecessarily) about the below section of code. BUG - the below section of code causes BUG. FIXME - the below section of code need to be FIXed. HACK - the below section of code is a workaround. XXX - important note for you and other programmers (notnecessarily) relate to the below section of code. CLARIFY - very incomprehensible section of code below that you need someone to CLARIFY for you. Tools So, you wrote some well-formatted codetags to save both your using snippets and your teammates precious time when they’ll read them, you’d probably want a way to those codetags so it will be much easier for you and your teammates to organize and navigate back to them, see how many codetags do you have, filter them by their mnemonics etc. super duper ideas easily manage , the following recommended tools are the ones that I’m familiar with, that will provide you the solution to easily manage your codetags: As of today — “…Organizes your codetags in a Kanban board like Trello. It integrates with GitHub issues and leverages TODO.txt syntax for metadata…”, with support to write and nicely display codetags using Markdown markup language, currently available as Atom IDE package (Thanks to ). Imdone Jesse Piascik — Organize, filter codetags and allow custom codetags syntax, available only as IntelliJ IDEA built-in tool window (including in Android Studio IDE). IntelliJ IDEA TODO You guys are welcome to that you are familiar with and I’d be happy to try and add them to the above list. share more similar tools The future Finally, after understanding the concept of codetags, how to save both your own and your teammates , and how manage them, you might already seen that we only use them as super duper ideas reminders. Currently, I don’t know if there are tools to generate the output of the purposes I’ll mention below, but you also use them for the following purposes: might Build your own/team road-map dynamically while writing your code — use the right mnemonics and right tools to create your road-map. Issue tracking marker — lays exactly at the issue specific relevant code, so you can modify the codetag format by adding additional fields such as assign to, priority, etc. (cleverly supported by with its ). Imdone GitHub integration Use your imagination while using codetags and you’ll find them useful for more than just . maybe reminders Examples /** * Also handle the login result* (29/01/2017) Demeter */ TODO: Implement Json send via socket /** * read answer most voted comment -   http://stackoverflow.com/questions/7042272/how-to-properly-implement-parcelable-with-an-arraylistparcelable#comment39567370_7042753* (18/01/2017) Eido */ FIXME: parcelable object reading and writing // // (28/11/2016) Eido CONSIDER: Do we need secret key?  DOING: Add a video which constructed from h264 aac /** * or remove by being irrelevant for the user.* (16/01/2017) Bob */ TODO: Change to user friendly message

Trello

Never Forget Anything Before, After and While Coding

This article is the follow up of Angular 2+ and Ruby on Rails user authentication Part 1: Backend Intro I will separate the frontend section into 3 different subsections: Conception & Bootstrapping/Configuring the project Building login/register Building Profile View and its Router Guard So in this part we’ll do some conception, then bootstrap and configure our project with , for UI, and for user management on the frontend. Angular CLI Materialize Angular2Token If you don’t want/need to do any of this, I prepared a bootstrapped and fully configured project for you ready to go, just pull this repo and jump straight to . https://github.com/avatsaev/angular-token-auth-seed part 3 Layout/UI The UI of our application will be pretty simple, with a classic toolbar encapsulating the title & actions, and an area to display the current page’s content: Application behaviour Initially, the application will display a welcome page in the content zone. The will have two states, display actions when user is not logged in, or display actions when the user is logged in, these states will switch in real time when the user logs in or out. actions zone Login & Register Show profile & Logout When the user clicks on or we’ll display a Modal Dialog with the appropriate form (Login or Register from). Login Register When the user clicks on action, we’ll display his profile data in the Profile content zone. When the user switches between Login and register modes, we’ll display the appropriate form in the same dialog. When the user successfully logs in or registers, we’ll automatically close the dialog and redirect him to his profile page. Pretty simple and straightforward stuff, so let’s dive right in. Bootstrapping and configuring the frontend Installing Angular CLI Angular Team has created a very handy tool called that allows us to bootstrap and manage an Angular app easily from within terminal, install it globally via NPM: Angular CLI $ npm install -g @angular/cli Bootstrapping an Angular CLI project $ ng new angular-token-auth --style=sass --skip-tests=true --routing=true This command will generate a new Angular CLI project named will use SASS as default styling format, for the purpose of this tutorial we’ll disable unit test files, and initialise the project with a routing module, because we’ll need at least 2 routes in our app, and . angular-devise-token-auth, Welcome Page Profile Page Using MaterializeCSS with Angular To build our UI, we’ll use , good news is, Materialize components are available for Angular with library, so let’s install it with its dependencies: MaterializeCSS angular2-materialize $ npm install materialize-css angular2-materialize jquery@^2.2.4 hammerjs font-awesome --save Include dependencies and styles in file: ./.angular-cli.json In array we’ll need the materialize stylesheet: styles "styles": ["styles.sass", ], "../node_modules/materialize-css/dist/css/materialize.css","../node_modules/font-awesome/css/font-awesome.css" And in array we’ll need jquery, hammerjs and materializejs: scripts "scripts": [ ] "../node_modules/jquery/dist/jquery.js","../node_modules/hammerjs/hammer.js","../node_modules/materialize-css/dist/js/materialize.js" That way, Angular CLI will know what additional 3rd party libs to compile into our final bundle. Next, we’ll need to into our M so we can use Materialize Components in our app**,** open and import MaterializeModule MaterializeModule ain App Module ./src/app/app.module.ts import { MaterializeModule } from 'angular2-materialize'; Then add it to array of our : imports AppModule @NgModule({declarations: [AppComponent],imports: [BrowserModule,FormsModule,HttpModule,AppRoutingModule, ],providers: [],bootstrap: [AppComponent]})export class AppModule { } MaterializeModule Installing and Configuring Angular2 Token To make user management on the frontend easier, we’ll use library, it was designed to work with gem that we used on our RoR backend for user management. Let’s install and configure it: angular2-token DeviseAuthToken npm install angular2-token --save Import and inject it into our Main App Module (./src/app/app.module.ts): import { Angular2TokenService } from 'angular2-token'; @NgModule({declarations: [AppComponent],imports: [BrowserModule,FormsModule,HttpModule,AppRoutingModule,MaterializeModule,], bootstrap: [AppComponent]})export class AppModule { } providers: [ Angular2TokenService ], Next we’ll need to create a default configuration for it, considering configurations might be different in production and development environments, we’ll use Angular CLI’s env config files in folder. ./src/environments In this folder we have two files, which will be used as default configuration store during development process and will be used for production when you build your app with Angular CLI’s flag ( ) environment.ts environment.prod.ts prod ng build --prod Angular2Token offers different configuration keys, you can check them out , but we will need only one, which is the address of our backend server, considering Rails is running on port 3000 by default, the address will be . here apiBase, http://localhost:3000 Let’s create the config in ./src/app/environments/environment.ts export const environment = {production: false, }; token_auth_config: {apiBase: 'http://localhost:3000'} Initialize Angular2Token Now we need to initialize the Token Service with this configuration, open and import Angular2TokenService: ./src/app/app.component.ts import {Angular2TokenService} from "angular2-token"; then import the environement configuration: import {environment} from "../environments/environment"; Inject the Token Service into our and initialize it with our config: ApplicationComponent export class AppComponent {title = 'app works!'; } constructor(private authToken: Angular2TokenService){this.authToken.init(environment.token_auth_config);} Your should look something like this: AppComponent Testing the Token Service Let’s now see if we can login with our default user, if you remember his email was and password user@example.com monkey67. Let’s use method of the which takes an object with and keys as parameter, and returns an Obesevable<Response>, to which we can subscribe and log out the result (don’t forget to start our RoR Backend if it’s not already running): signIn Token Service email password Start our Angular app by running: $ ng serve The server will start on http://localhost:4200 If you look into the console, you will see the auth token in the response headers and user data in the the body: Before continuing don’t forget to remove this Sign In test and clean up your browser cache to remove the auth token from the local storage. Now that we have our frontend up and running, we can start building our Angular application, for the fun stuff. let’s head out to part 3 Part 3: Frontend, login/register

Different

Angular 2+ and Ruby on Rails user authentication Part 2

Note: 4 Weeks to Launch is an ongoing series about building passive income across multiple startups — a new startup every 4 weeks. Read the first post on 4 Weeks to Launch to get started. Overnight success is awesome, right? Wake up in the morning to see thousands of dollars in your bank account? Ok, that’s enough daydreaming. Back to reality. We all have a vision of successful people. They are superhumans. Titans. Unlimited willpower, perfect problem-solving abilities, and the ability to work tirelessly. In truth successful people aren’t as as imagined. They’re a combination of systems, testing for quick results, and having the right team. super #1 Build systems, not willpower I’ve been struggling with blog posts because I’ve been trying to brute force my way into writing. Every Monday I begin by bashing my head against my keyboard for hours until I have a blog post. It hasn’t become easier. That’s because willpower is really tough to “tap into”. It’s a finite resource, and is only useful in spurts. If it was limitless, then sure, we could solve all problems by force but willpower is not on willcall. That’s where systems come in. Systems (and habits) are far more effective than willpower. Once a habit is in motion the amount of effort needed to sustain is reduced. It’s like going to the gym–going every week is more important than going for 5 hours once a month. To help with my blogging I’ve built a writing schedule to work on blog posts throughout the week instead of just one day. I also made a to help with getting started. blog post template document Simple systems like this may seem small but have power when put together. Don’t wait a “moment of inspiration” to get started. This isn’t sustainable and you will fizzle out. Instead, focus on your average speed. Pick a pace that is comfortable, and do it every single day. James Clear has a post about someone writing using this technique. 3 books in 9 months Get scrappy–big results, small effort I’ve also had trouble with gaining traction with in Week 2. Now that the product is finished (fun part), I need users (unfun part). And since I don’t enjoy , I’ve stalled. JFDI.ninja marketing A nice side effect of 4 Weeks to Launch is exposing my weaknesses to the world. Marketing is one of those weaknesses. I was supposed to focus on marketing this week and didn’t. How do I fix this? Focus on the right mindset. Don’t sulk and complain, but come up with solutions. Ask yourself, “If I knew nothing about X but I had to have results in 24 hours, what would I do?” This is a powerful question. As an open ended question, there are no wrong answers so you start focusing on solutions not blockers. My list of scrappy hacks to get users: Post on forums Post in comment sections on blogs Reach out to bloggers Get on indiehackers.com Post on Reddit DM friends Ask for people to share/refer Tell more people about it Redefine how to make it shareable and pitchable. It’s hard to describe Pitch to press Email people daily asking, “what’s 1 thing you’ve been putting off?” Adwords/fb Producthunt Add social proof to website Hand out fliers that say, “Get free time @ http://JFDI.ninja” Voila! Readymade marketing strategy. I pared the list down to actionable tasks: Find forums/blogs about productivity and post, offering my service Reach out to bloggers about productivity and see if they will endorse my site DM friends on social media and ask them to use JFDI.ninja or ask if they can refer busy friends Add customer testimonials on the website Post on Reddit This week I’ll try as many different tactics as I can and see what sticks. Seek professional free help Most of us try to do everything on our own. Who wants to ask for help? I’ve many had friends and strangers offer to help with 4 Weeks to Launch, but have been stubborn. But why not ask for help? Seriously, why not? You can’t build greatness on your own, so find others who are excited about what you’re doing. I’m starting to get people involved with 4 Weeks to Launch. The more I get others involved the more 4 Weeks to Launch will succeed. Metrics & goals See Metrics for JFDI.ninja See Metrics for 4 Weeks to Launch Week 2 Revenue: $8 This week’s plan/goals Focus: Get Users ( ) weekly goals link Revenue Goal: $50 or 25 orders by next post This week has been a big learning experience. Hitting the marketing wall forced me to work on solving the problem, even if the solution will take time. Marketing is a huge part of building a company and without users there is no business! What are you pissed at yourself for? What long term goal do you have but you can’t quite seem stick to? Let me know in a comment and hold yourself accountable! if you want to these weekly updates in your inbox. Promise, no spam, only posts. Sign up for mailing list

Startup 1 : Week 3 — Overnight** Success

I get it. . Creative juices are unleashed; salespeople have new reasons to hit the streets (and they have you to thank for it), maybe some promotional budget dollars are available, and you get to pick customers’ brains. Huzzah! Introducing a new widget can be FUN You know where this is going — eventually every is going to face the grim reality that it’s no longer the fresh-faced kid. . product The Thrill Is Gone Instead of turning into (been there, done that), use this as an opportunity to expand your skillset. Consider the following: The Morose Product Manager Instead of you begging for customers and considering whether to adopt some sketchy growth hack — the shoe is now on the other foot. Customers are accustomed to using your product. B2B customers are especially loath to change, especially if swapping out your part requires taking down a manufacturing line for re-tooling. Diplomacy is a valuable AND TRANSFERABLE skill. There’s a decent chance that if your product has survived to this point, t . Your pricing and costs have usually stabilized thanks to the magic of cumulative learning. (Which means those quarterly financial forecasts no longer require a Ouija board and personal charm.) he number of direct replacement solutions has diminished to nil So, here’s your chance to turn a Product into an appreciated elder statesman of your company. To do this, you’ll need the following skills: Sundown Instead of sending “new & improved” promotional literature to whomever will read it — . Be cognizant that they will probably introduce pain into a customer’s life. You learn to appreciate having succinct early warning dates (last order, last ship, etc.), links to potential replacements, and contact points if an escalation is necessary. you’re now in charge of gentle “here’s our phaseout plans” to a targeted customer list . They are being graded on inventory levels, lead times, minimum order quantities, and whether to scrap unloved material. Your ability to find homes for remaining inventory will make you very popular at quarter-end. You’ll become best friends with your Operations team If you’re replacing a product with another, even better. , and manage the transition for your customers. (As an aside: I know most PMs consider project management to be another domain. Trust me, you want to have this skill in your toolbox.) You still get to use your “new/improved” features & benefits magic Ideally you have products in the pipeline that will replace your long-lived babies — or your firm is pivoting to new markets. (You DO have a revenue replacement, right?) . (No photos of pets or grandparents were used in the making of this article. You’re welcome.) Appreciate those old friends for what they’ve brought you

“Sundown” Products Need Love Too

In my last blog, I talk about . As a refresher, a decoupled CMS architecture is one in which the front end application and the content management system are decoupled and function independently of one another. The Benefits of a Decoupled CMS Architecture Developers are more readily understanding that they can build slicks apps and websites without a locally installed content management system, and instead can go API-first to deliver content to more application destinations. Within the space, you’ll notice a few buzzwords that do have a striking difference in terms of application and use: Content Management API Decoupled vs. Headless. While both of these buzzwords insinuate that the CMS is separated from the management environment and that content is made available via API endpoint, the management and delivery of said content changes per buzzword. Headless vs. Decoupled A CMS is reactive — it manages content, then just sits and waits for some process to ask for it. Headless A CMS is proactive, preparing content for presentation and pushing it into the specified delivery environment of your application. A decoupled system concerns itself with what happens in the delivery environment. It usually has some concept of a templating system with editorial tools. Decoupled Content available via API Endpoint Reactively assumes content delivery being handled elsewhere Headless CMS Content available via API EndpointIntuitively concerns itself with delivery and presentation layer Decoupled CMS While both headless and decoupled CMS systems make content available via API endpoint, a decoupled system like takes it all a step further with the presentation layer of said content. Cosmic JS can manage content and users while storing media and making it readily available via API endpoint, but goes the extra mile of providing “forgiving delivery” so that content editors can plan, manage and deploy content, knowing that Cosmic JS will deliver the content as and will be globally devourable by any internet-connected device. Cosmic JS JSON is an that makes managing and building websites and applications faster and more intuitive. By , Cosmic JS empowers developer flexibility while ensuring content editors can plan and deploy content as it best suits them. If you haven’t already, get started by . If you have questions about the , please reach out to the founders on or . Cosmic JS API-first CMS decoupling content from code Signing Up Cosmic JS API 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

Slack

Follow me on Twitter

Read My Stories

Headless vs. Decoupled CMS Architecture

That’s David Logan writing in . Tribal Leadership At we try to bring together the big ideas of the , the mental models, and combine them to help us make better decisions, avoid stupidity, and live a more meaningful . Farnam Street world life Want to explore more? Check out Einstein on The Essential Feature of Productive Thought Seneca on Gathering Ideas And Combinatorial Creativity Commonplace Books as a Source for Networked Knowledge and Combinatorial Creativity Steve Jobs on Creativity If you’re looking to successfully diverge and work smarter not harder, sign up for my weekly Brain Food digest . You can follow Shane on Twitter and Facebook .

Big Ideas Emerge By Synthesis

Today, websites are more and more relying on JavaScript to be fully functional. errors can dramatically affect end user experience. It’s important to detect such errors and fix them before they hit your end users. The vast majority of , if not all, help to find JavaScript errors with Real User Monitoring. This kind of tools is not the silver bullet though. For example, they can trigger a significant volume of false positives due to extensions like ad-blockers or proxies. Moreover, these services break the “never trust the client” rule. JavaScript tools By crawling and detecting JavaScript errors in a controlled and secured environment, offers a reliable alternative. Indeed, it is the only SaaS able to crawl JavaScript-based websites and yield such errors by using up-to-date Chrome browsers. SEO4Ajax It’s simple, there is nothing to install! Register and crawl your site on SEO4Ajax, then just look at the SEO reports to identify pages with JavaScript errors. Demo showing the JS errors report Like any other SEO tools, SEO4ajax will also report broken links, duplicates, pages with low word count or missing hreflang tags. Feel free to contact us to get a free trial and start detecting your JavaScript errors! The SEO4Ajax team https://www.seo4ajax.com

How confident are you that {{ site.url }} website has no JS errors?

Nothing Kills a Product Like Ego

“There are no limits. There are only plateaus, and you must not stay there, you must go beyond them.” — Bruce Lee 1. Sketch You CAN design (or at least get by) Price: $99 Design is outside of the comfort zone for many developers. I was once complacent to say that “I don’t design”. But developers designers. Even a basic ability to crop and resize images and create rough mocks will help you and your team build great-looking products. I use and believe it’s the best tool out there if only for performance reasons. Photoshop is ok too (although I always had issues with it crashing), but the more savvy web shops use Sketch. are Sketch “A fight is not won by one punch or kick. Either learn to endure or hire a bodyguard.” — Bruce Lee 2. Atom or Sublime Price: Atom Free, Sublime $70 is my code editor of choice, it’s a great product that I’ve used for years. I have a bit of a lock-in because it’s already setup exactly how I like it. So although is popular among a lot of developers I haven’t had any pressing issue to justify a switch. Sublime Text Atom You’re going to spend a lot of time in this application, so make sure it’s something you enjoy using. 3. GitHub Price: Public Repos Free, Private Repos $7/month , the water-cooler for the world’s software, is absolutely essential. You can learn so much about any programming language just by getting lost in different repositories. Obviously learning Git is a priority and I recommend learning from the command line verses a GUI. Here’s a great resource to learn the basics of the pattern that I use: . GitHub Git Flow “Be like water making its way through cracks. Do not be assertive, but adjust to the object, and you shall find a way round or through it.” — Bruce Lee 4. Terminal Price: Free Learning the command line is essential for every developer. It may seem overwhelming if just getting started, but if you start out with a few commands like navigating directories and file / folder maintenance, you will have a big advantage. You really can do some amazing things with commands and, as you develop your skills, you will feel like you have super powers. Here’s a great resource for learning . the Art of the Command Line “I always believe that the easy way is the right way.” — Bruce Lee 5. Cosmic JS Disclaimer: I’m the CEO, Co-Founder of Cosmic JS . API-first Content Platform Price: Free and Paid Plans After you’ve completed the development of your website or application, the next step is giving your end user a way to manage the content. There are many installed content management systems out there, but the old installed CMS approach is not built for the modern demand of multiple channels and devices. The general trend is moving toward a “Decoupled” approach (or some also call it “Headless” a term that I don’t agree with or use to describe a strategy with such thought and foresight). You are much better off connecting your application to an API that can distribute content to different devices, regardless of programming language. for building content-powered apps in any programming language. It gives developers tremendous freedom in building their applications and gives content editors an intuitive content editing experience. Plus it integrates well with all the tools you love and you can deploy your GitHub repos live in a matter of minutes. Cosmic JS is an API-first CMS “The only limitation is your imagination.” — My old music teacher Conclusion I hope you enjoyed this list of some of the essential tools available to the modern web developer and reasons for choosing them. if you have any questions. If you think I left any tools out, let me know in the comments below. Reach out to me on Twitter

ATLASSIAN

cosmic js

5 Essential Tools for Web Development Mastery

How to add language translation, gauge emotion, or enable text-to-speech to your realtime messaging apps enables you to process your data mid-stream, to execute functions on your data in motion. This is huge, because you no longer need to spin up and manage new servers to run a simple function. It’s all done in the network. That’s why we say that PubNub is a PubNub BLOCKS programmable network. is a powerful technology that brings cognition to applications, with the ability to understand, reason, learn, and interact. I like to say it gives your application a brain, extending the capabilities of your application beyond simply interacting through a set of rules. It’s deep AI, and it’s incredibly accessible (and affordable). IBM Watson Now available on BLOCKS, this means you can now bring the power of Watson directly into the network. This opens up an infinite amount of doors, from IoT, to business collaboration, to chat, and everything in between. Any data being streamed over PubNub can now be consumed by Watson, and sent out once it’s processed, all in realtime, with no additional servers. In this specific post, we’ll talk about three Watson APIs, and how to integrate them into your chat application to do some pretty amazing things. The APIs: : Translate content into multiple languages Language Translator : Enable computers to speak like humans Text to Speech : Natural language processing for advanced text analysis AlchemyLanguage With these three APIs, you can create chat applications that transcend those that exist today, and build the chat app of tomorrow. Multilingual, Language Translator Chat App In this tutorial, we utilize the Language Translator API to that takes an input, translates it into any of the 11 supported languages, and sends the output to any number of end users in realtime. build a chat application Beyond just a simple 1:1 chat app, there’s a ton of business value to something like this. You could extend your support desk to eleven different languages, allowing users from across the globe to interact seamlessly. Or news websites could automatically translate articles and deliver them to their target market. Much easier than shoving the Babelfish into your ear. Sentimeter: Gauge User Emotion In this tutorial, we utilize the powerful AlchemyLanguage API to . Our application processes an input, and rates the user’s sentiment on a scale of 1–100, ranking it as positive, negative, or neutral. build an application that analyzes and gauges user sentiment in realtime Once again, beyond simple chat, this API provides a ton of business value. If you have an application that aggregates social media mentions, you could gauge the feelings of a group of users based on their messages. AlchemyLanguage doesn’t just only do sentiment analysis.There are a lot of API methods available for things like emotion analysis, entity detection, concepts, authors and more. It really is a powerful tool for distilling meaning from text. The Talking Chat App: Text to Speech Our last tutorial utilizes the Text to Speech API to . The major advantage of this tutorial when compared to others is cross-device and cross-platform compatibility. convert a text input to a voice output Many text to speech apps work well in a single technology stack, but require substantial effort and engineering resources to maintain across a diverse array of targeted platforms. However, this tutorial makes it easy to voice-enable your applications with straightforward WAV stream playback (or a variety of other formats). Using this functionality, you can build accessibility into your chat applications for users with vision, or vice versa, hearing impairments. Beyond chat, your could provide audio instead visual output to avoid distracted driving in connected car, and especially other cases where a screen may not be present. Wrapping Up Those are three awesome tutorials on integrating IBM Watson functionality directly into your data streams for chat and beyond. We’re incredibly excited about what IBM Watson and PubNub can do together, so keep an eye on our for new IBM Watson BLOCKS, as well as our . BLOCKS Catalog blog for tutorials like these

3 ways to level up your chat app with IBM Watson

This article is the follow up of Angular 2+ and Ruby on Rails user authentication App Architecture Components Home component (Welcome Page) Toolbar component Auth dialog component Login from component Register form component Profile component Separating Login and Register forms into different components is useful, because we can reuse them in other pages if needed (for example dedicated login and register pages without a dialog) Routes Home route Profile route Route Guards : will check if user is logged in, if not, will redirect to home Profile route guard Services : will manage login, register, logout, user profile data, verify token authenticity, and check wether the user is logged in or not TokenAuthService Home Component and Home Route Let’s start by generating our first component, Home, with Angular CLI: $ ng g c home g = generate and c = component This will create ./src/app/ folder with home component class, its template and stylesheet, Angular CLI will also add it to Main App Module’s declarations array automatically. home Now we need to create a route for it, open ./src/app/app-routing.module.ts Import the HomeComponent: import {HomeComponent} from "./home/home.component"; and add home route to routes array: const routes: Routes = [{path: '',children: []}, ]; {path: 'home',component: HomeComponent} We’ll also make it the default route: const routes: Routes = [{path: '',component: HomeComponent,pathMatch: 'full'},{path: 'home',component: HomeComponent}]; Now if we go to HomeComponent will be displayed by default http://localhost:4200 Toolbar Component Same procedure for Toolbar Component: $ ng g c toolbar Setup toolbar’s html template: For now we’ll display all actions, we’ll implement the conditional state later. Change to something more appealing: ./src/app/home/home.component.html Edit as follows to display our toolbar and wrap the router outlet in class: ./src/app/app.component.html container And here’s what we get so far: Auth Dialog Now we need to create the which will display Login/Register forms: AuthDialogComponent $ ng g c auth-dialog Let’s edit the AuthDialogComponent file in ./src/app/auth-dialog/auth-dialog.component.ts Auth Dialog Component will have an decorator (line 11) , it takes 2 possible values, ‘login’ or ‘register’, this will allow us to pick the initial form to display when the dialog shows up (login or register form). The default value of this input is ‘login’. Input authMode (line 12) is an event emitter, required by Materialize Dialog Directive, we’ll emit events on it to open or close our dialog. modalActions (line 18) method takes a as its parameter, will set the current auth mode and display the dialog, if no parameter is passed, login will be the default. openDialog mode and methods will help us to display the login or register forms conditionally. isLoginMode isRegisterMode Edit this dialog’s template, : ./src/app/auth-dialog/auth-dialog.component.html On line 2, we are using , and passing event emitter for its input to be able to control the dialog by emitting events on it. materialize modal directive modalActions materializeActions For now all this dialog is displaying is its current mode on line 17, and the ability to switch modes on lines 23 and 26. The structural directive takes a boolean expression, if the expression is , it will display the node, or hide it otherwise (remove it from the DOM). *ngIf true Let’s display this dialog when we click on register or login actions in the toolbar. In include the auth-dialog component, and create click events on Login and Register actions to open the Auth Dialog: ./src/app/toolbar/toolbar.component.html (line 24) is a reference to the AuthDialogComponent of our ToolbarComponent view, it will allow us to access the AuthDialogComponent class from the ToolbarComponent class. #authDialog ./src/app/toolbar/toolbar.component.ts: import {Component, OnInit, } from '@angular/core'; ViewChild import {AuthDialogComponent} from "../auth-dialog/auth-dialog.component"; @Component({selector: 'app-toolbar',templateUrl: './toolbar.component.html',styleUrls: ['./toolbar.component.sass']})export class ToolbarComponent implements OnInit { @ViewChild('authDialog') authDialog: AuthDialogComponent; constructor() { } ngOnInit() {} presentAuthDialog(mode?: 'login'| 'register'){this.authDialog.openDialog(mode);} } decorator will reference the from our template so we can access its methods and attributes directly from our class. ViewChild AuthDialogComponent ToolbarComponent method takes an parameter , AuthDialogComponenet’s method defaults the mode to ‘login’, so if we want to open the login dialog, we can just call without any params. presentAuthDialog optional mode (notice the question mark) openDialog presentAuthDialog() So this is what we get for the Auth Dialog so far: We’ll use the to display the correct actions in the toolbar depending on wether or not the user is authenticated, for that, we can use which returns true of the user is logged in. Token Service the userSignedIn() method Import and inject into our : Angular2TokenService ToolbarComponent Now we can use it on our toolbar template to hide/show actions conditionally, we’ll also attach the method to its action: signOut Login & Register forms We’re almost finished. Let’s generate login and register form components. $ ng g c login-form $ ng g c register-form Login form template We have two text inputs (email & password) both of which are required for form to have a valid state. We are using Angular’s two way data binding on line 12 and 24 to bind the input values to signInUser object in our component class, which means the values will be updated when they are modified in the HTML form by the user, and also updated in the view if they are modified programatically in the component class. Submit button (line 31) will be in disabled state unless the form becomes valid (line 32). Login form component Login form will have an output (line 16), which is an event fired when login request completes, so the parent components can listen and act on it. onFormResult We’ll inject the into our component (line 17) and use its method when the form is submitted. When the login action completes, we’ll emit an event on output, with a payload containing the result (lines 31 and 37), this will notify the parent components. Token Service signIn onFormResult Register form template Pretty similar to login from, but have have an additional password confirmation text field and its validation. Register form component Similar to login form, register form has an Output event emitter, , that fires when register request completes. onFormResult Hooking up the outputs in auth dialog In the auth dialog component class, create the event handlers for events emitted by and form components, if the the login/register was successful, close the dialog, otherwise display the error returned by our RoR server in an alert window: onFormResult login register Final Auth Dialog Notice the toolbar actions updating their state automatically when user logs in and out. Final source code for this part is available on Github: https://github.com/avatsaev/angular-token-auth-seed/tree/final Part 4: User Profile, Auth Service and Auth Router Guard.

Angular 2+ and Ruby on Rails user authentication Part 3

Users Table Mutations

How do you build a successful open source project? For co-founder/CEO the recipe is simple. “Find a community in need and translate the dark arts for them.” Font Awesome Dave Gandy Gandy did this by figuring out how to use font files as a vessel to deliver easily-styled icons to front-end developers. As a result, Font Awesome is now used by , , the , the , and is a fixture of (an upgrade made by the prior tenant). Khan Academy DoorDash Washington Post Onion WhiteHouse.gov Font Awesome is the with 48,687 stars and 8,473 forks. In 2016, Fonticons than any other project on the platform. It also holds — it is the ($1,076,940) and (35,550 pledges) software project in the crowdfunding site’s history. 11th most popular project on Github had more contributors two Kickstarter records most funded most backed Clearly, there is much to be learned from Font Awesome’s success, both about how to ignite a passion for something as seemingly prosaic as icons and how Kickstarter might be an ideal, alternate means of funding for many open source projects. I asked Gandy to share some of his insights: How Font Awesome Came to Be Before we get into what makes Font Awesome, well, awesome, let me explain what it does in more detail. In 2012, the year the company was founded, most developers handled icons on websites by managing individual .png files or controlling clumsy sprite maps with CSS. A small group of “ ” used icon fonts, which made the glyphs easier to style, but also broke screen readers. alpha geeks A selection of Font Awesome’s wares. For instance, a “check mark” icon would be mapped to the “K” key in an icon font, leading screen readers to announce a bewildering string of unrelated letters to users any time an icon was use. Gandy saw the promise of icon fonts and looked for ways to solve their technical shortcomings. The solution came to him after learning that there was a “private use area” inside of font files reserved for arbitrary applications. By putting the icon graphics in that space, the fonts could deliver stylish icons to the sighted . “Font Awesome was a small technical shift, but one that made accessibility dead simple,” says Gandy. This elegant hack, inspired by a drive to improve accessibility, has become the backbone of a widely-used tool that streamlines development in many other ways. without introducing erroneous letters that confused the visually-impaired How Do You Build Something People Want? There’s a big difference between solving a problem technically and getting users to undertake the workflow disruption to use it. Gandy says that developers evaluate new frameworks and tools against an invisible checklist of requirements — Does it save time? Use all known best practices? Expand capabilities? Add stability? — and the more of them your tool checks (including ALL of the technology best practices), the more likely they are to use it. “Every field has a few nasty curmudgeons,” says Gandy. “They know their stuff backwards and forwards and immediately scoff at projects that don’t get it ‘right.’ They’re awesome.” Product management is the fine art of solving this problem, but Gandy offers two simple constraints to help in the development process. First, confine the problem you are solving so that it can be solved in one month of your time. Second, make it simple enough so that your users can start using it by adding one line of code. You Get One Month… Like another of our portfolio companies, , the first version of Font Awesome was launched just a month after Gandy envisioned it. This is a good yardstick to measure your project against. If you can’t provide tangible value to the developer community by putting in a month of hard work, perhaps your goals are too ambitious or not focused enough on a clear use case? Ionic The idea here isn’t that what you build in one month will be the sum total of your project or company, but it is an elegant way to prevent feature creep. Stop thinking about a sprawling product roadmap and instead focus on the one thing you can do to make a developer’s life easier. Somewhat non-intuitively, embracing constraints has a strange way of actually making things far better. Embracing constraints head-on is another one of those non-intuitive secrets. …And One Line of Code The easiest way to get traction is to build an adjunct to an already popular product. FontAwesome targeted developers who were using what was then called Twitter Bootstrap. Gandy used Bootstrap’s naming conventions so that engineers could swap in Font Awesome by copying and pasting a single line of code. “If you knew how to style text with CSS, you knew how to use Font Awesome,” says Gandy. This is incredibly important. It’s not enough to solve a problem for a user; you also have to convince them that it is worth scaling the learning curve for. Measure your user experience by its “copy and pasteability.” How fast can someone get up and running? Put another way, make your tools powerful enough for the elite, yet simple enough for the noob. How to Sell Once you build something people want, how do you get it out to the masses? The surprisingly simple answer Gandy offers is to post it on Hacker News. ProductHunt and blogs are both good backups, but according to Gandy, if you’re looking to get the word out about a new open source tool, nothing comes remotely close to Y Combinator’s forum. Marketing is important, but don’t think that you’ll be able to get a so-so software project off the ground based on off-the-shelf growth hacks. An earnest presentation at a hacker meetup will fall on deaf ears unless your product is truly transformative. “No one cares about evangelization. You gotta make something really useful. Like 10x better,” says Gandy. That said, there are some things that can be done on the margin: Know Thyself Part of what makes FontAwesome successful is that they care deeply about the design-focused developers who are their core users. For instance, there is a Font Awesome barcode icon actually scans and spells “FA”. Gandy says, “I’d forgotten I’d ever done it until someone called it out on Twitter.” This humble barcode generates a surprising amount of goodwill. It is technically pointless, but it’s just the kind of grace note that signals that Font Awesome understands the importance of aesthetics, and fun. Font Awesome is not some soulless dev tool maker, but the kind of team that cares about details no one may ever even see, like a gratuitous glyph, just for the joy of it. This resonates with a certain kind of developer. Find Your Geremia For those that live in the world of code, providing customer service for a successful project can be a surprising challenge. All of sudden you need to manage thousands of pull requests, answer questions about implementation, and dozens of other tasks. Gandy’s advice is to find good samaritans in your community and deputize them to help. was appointed by Gandy to watch over Font Awesome on Github, to upvote positive contributions and burn down open tickets, to destroy and overthrow abuse, to build and to plant a thriving open source community. Geremia Taglialatela He’s become a core contributor to the project and spends 20+ hours a week resolving issues with users, helping manage pull requests, and surfacing latent needs from the users. It’s an extraordinary amount of work, a huge benefit for the team, and to date, his only compensation has come in the form of some beautifully designed swag and encouragement. This attention to community pays off. When Gandy sent out a 45-minute survey to the community in an effort to better understand the needs of power users, over 6,000 people took the time to fill it out, a testament to the community helped to build. If your project is lucky enough to attract someone of his caliber, treat them like gold. Taglialatela Tell Stories Only You Can Tell Content marketing is a great tool, but too often founders fail to produce truly useful content. As with your product development, think about how you can use words to truly change a developer’s work-life. The Font Awesome team doesn’t blog often, but after they shattered several Kickstarter records, they had shared their playbook for others to follow. Read the whole thing here: _The Font Awesome 5 Kickstarter raised $1,076,940 with 35,550 backers, making it the most funded and most backed…_articles.fortawesome.com How Font Awesome 5 Became Kickstarter’s Most Funded Software Project How to Make Money on Kickstarter Font Awesome is still in the early days of turning its immense user base into a stream of ongoing revenue, but it has proved beyond belief that Kickstarter is a serious funding source for open source. To put it in perspective, Gandy raised twice as much from his users in this campaign as he did from his venture capitalists to date. That’s an encouraging sign and a model that more projects could stand to follow. It’s not crazy to imagine a future where some projects that truly don’t fit the venture model figure out a way to co-opt the pledge drive format popularized by NPR, and more recently, Wikipedia. Just imagine a Patreon for pull requests. Be warned; this is harder than it looks. A key part of Font Awesome’s success has been the carefully-cultivated user enthusiasm, built up over years. One surprise for Gandy was that asking for money actually goodwill among the users. He had expected users to grumble about the cash grab and that there would be some backlash, but instead they were enthusiastic to back the project. built “We chanced into one of the great open source monetization tools,” says Gandy. “We’re not asking you for money; we’re asking you to support something you love.” You don’t have to be original, just good. If you watch the Font Awesome Kickstarter video, you’ll notice immediately that it was inspired by the iconic Dollar Shave Club video. The smooth-talking pitchman, the colorful cast of characters, the non-sequiturs are all there, but so are so funny jokes about icon management. It’s a parody, but it works. Don’t overthink your strategy, just be sure to execute like crazy against whichever strategy you choose. Do It Yourself. Fail. Then Hire a Pro. When it comes to explaining marketing to neophyte techies, Gandy offers a three step process. Try doing it yourself. Sometimes fail. When you do, it’s a good thing because now you know enough to hire someone who knows what they’re doing better than you do. Sometimes it turns out you can do it better than other folks. But for the rest of the cases, hire a professional. And now that you’ve screwed it up, you know how to hire the perfect person. For instance, prior to setting records on Kickstarter, Font Awesome ran a campaign that netted a still-respectable $80K and taught Gandy a tremendous amount. The most important lesson was that making a compelling video was hard. Moreover, it’s hard in surprising ways. Gandy notes that his first video had “fine picture quality and a boring script delivered by someone who should not be on camera,” as he puts it. really This experience, and these learnings, directly informed their decision about who to hire to produce the video for the next campaign. Transactional emails are marketing opportunities Password resets and billing notifications don’t seem like revenue-generating opportunities, but Gandy claims that these quotidian dispatches actually drove more fundraising for his Kickstarter campaign than the “official” newsletters sent to the folks who signed up to be notified. The team at Font Awesome has assembled a list of 150K email subscribers to their newsletter. They also have 400K email addresses for people who use their CDN service. Surprisingly, the content-driven emails converted at a lower rate than credit card billing invoices. “Every single time we sent an update email, it added $10K to $40K to our total,” says Gandy. “Every single email.” Just One Regret Gandy and company have done a remarkable job growing quickly and building a massive amount of traction around Font Awesome, but he does have one regret. “We should have made paid version sooner,” he says. The company is doing fine financially, but it could be further along. So follow Gandy’s advice in this post, but don’t forget about the $$$.

HackerNoon Tech Stories Archive February 9th, 2017

@Sureshkumar_AshAshwin Sureshkumar

@arunagrahriArun Agrahri

@owenfarOwen Far

@HeadsnHandsElena Lysiakova

@donbonifacioPedro Pereira Santos

@babulousbabulous

@devleadMattias Karlsson

@eido.askayoEido Askayo

@avatsaevA. Vatsaev

@elijahmurrayElijah Murray

@brianpiercybrian piercy

@carsoncgibbonsCarson Gibbons

@farnamstreetFarnam Street (Shane Parrish)

@seo4ajaxSEO4Ajax

@jlelsejlelse

@tonyspiroTony Spiro

@joehansonJoe Hanson

@avatsaevA. Vatsaev

@rap2hRaphaël HUCHET

@foundercollectiveFounder Collective

@Sureshkumar_Ash
Ashwin Sureshkumar

@arunagrahri
Arun Agrahri

@owenfar
Owen Far

@HeadsnHands
Elena Lysiakova

@donbonifacio
Pedro Pereira Santos

@babulous
babulous

@devlead
Mattias Karlsson

@eido.askayo
Eido Askayo

@avatsaev
A. Vatsaev

@elijahmurray
Elijah Murray

@brianpiercy
brian piercy

@carsoncgibbons
Carson Gibbons

@farnamstreet
Farnam Street (Shane Parrish)

@seo4ajax
SEO4Ajax

@jlelse
jlelse

@tonyspiro
Tony Spiro

@joehanson
Joe Hanson

@avatsaev
A. Vatsaev

@rap2h
Raphaël HUCHET

@foundercollective
Founder Collective