If you have been doing some React development recently, you must have come across terms like HOCs and Render Props. In this article, we’ll go deep into both these pattern to understand why we need them and how we can correctly use them to build better react applications.

React offers a simple method for code reuse and that is Components. A component encapsulates many things ranging from content, styles and business logic. So ideally in a single component we can have a combination of html, css and js all of which have a single purpose, a single responsibility.

The future of infrastructure is bright, and new tools let us focus on who we’re building for instead of how we're building. At its heart, infrastructure exists to solve peoples' problems. The key to choosing the right tools is seeing infrastructure for what it is: A product used by people.

This talk presents the story of Moda—GitHub's internal service platform. Moda is a set of tools, practices, and ideas for running software on Kubernetes. We’ll share how we approached big infrastructure changes, what has worked well, and why we made the decisions we did. Our success is rooted in treating infrastructure like a product, remembering that we build tools to enable other developers, and focusing on what can help them build the future of software.

In order for a product to succeed, designers should know their competition and collect as much data as possible. This data helps to create a solid product that users will actually want to use, rather than a product we want or imagine. Competitive analysis is one of the ways to get this data and to create a user-friendly product.

There are two opposing narratives in the design tool space which have been evolving for many years. These narratives reflect two very different schools of thought when it comes to understanding the specific value our tools provide and which direction they should be headed.

The first narrative is selling the notion that design artefacts can and should be the Single Source of Truth™ for the product. In this narrative, code is secondary—its job is to reproduce the design artefacts as accurately as possible. Platform constraints are mostly ignored in favour of speed and boundless creativity.

This conversation is unlikely to happen but a price could be close to that sum. Important message: one doesn’t simply estimate all the costs with 100% accuracy. But I’m going to help you get as close as possible.

So you decided to create a web app. Regardless how many technical details or promoting ideas you have about your product, you first need to understand expenses.

Web app cost estimation is something very few know how to approach. Partly, because clients tend to demand to hear an accurate number, like $17,659, while a development team is constantly trying to explain why it’s more tricky than that.

Material Dashboard is a free Material Bootstrap Admin with a fresh, new design inspired by Google's Material Design. We are very excited to introduce our take on the material concepts through an easy to use and beautiful set of components. Material Dashboard was built over the popular Bootstrap framework and it comes with a couple of third-party plugins redesigned to fit in with the rest of the elements.

Material Dashboard makes use of light, surface and movement. The general layout resembles sheets of paper following multiple different layers, so that the depth and order is obvious. The navigation stays mainly on the left sidebar and the content is on the right inside the main panel.

Last week marked the fifth anniversary since the Ghost Kickstarter campaign which started it all.

It's always fun to use these milestones to take a step back and reflect on the journey so far. On previous birthdays I've talked about revenue milestones and product updates, but this year I'm going to focus more on all the things we've learned since we started.

Just for context though, here's a quick overview of where we are today:

Games People Play

There’s some debate going on around the use of gamification in UIs: 24 empirical studies, for example, arrived at varying conclusions as to how effective it was. But then again, effectiveness depends on what you were trying to accomplish by designing those shiny achievement badges.

For many product creators, including Akar Sumset here, the point of gamification is not letting users have fun per se — it’s gently pushing them towards certain behaviors via said fun. Achievements, ranks, leaderboards tap into the basic human need of esteem, trigger competitiveness, and supposedly urge users to do what you want them to, like make progress, keep coming back to the app, or share it on social media.

One of the things that affect how users interact with our applications is its speed. Even though some users generally have a poor connection, they are expecting some minimum level of speed when using the application. To give our users a seamless experience, we are going to consider the possibility of optimizing our requests in node by using the concept of caching.

Trust me, your users will thank you.

In this article, we are going to look at how to optimize requests in our Node applications by caching responses to requests. Now, you may be wondering what caching is all about. Caching generally involves storing and retrieving data from a high-performance memory

Over the last few years, we have seen designers move up the chain of command and, thankfully, we are starting to see designers occupy senior roles within organizations. The emergence of designers as part of the C-Suite in companies is a welcome development and, with it, we are seeing the emergence of CDOs, Chief Design Officers.

Ind.ie is a social enterprise striving for justice in the digital age. It is founded by Aral Balkan and Laura Kalbag who defined an “Ethical Hierarchy of Needs” that describe the core of ethical design very well.

The 'Ethical Hierarchy of Needs' (licensed under CC BY 4.0) (Source: ind.ie)

As with any pyramid-shaped structure, the layers in the Ethical Hierarchy of Needs rest on the layer below it. If any layer is broken, the layers resting on top of it will collapse. If a design does not support human rights, it is unethical. If it supports human rights but does not respect human effort by being functional, convenient and reliable (and usable!), then it is

Since Shopify launched the style guide for the Polaris design system last year, many of the questions I’ve been asked have been about how we were able to produce something that feels so integrated - where design, content strategy, and front-end development come together to form a holistic picture of how we build our product. These questions usually assume that we were battling to fill a gap between developers and designers, or that some kind of peace treaty must have been brokered between different disciplines to achieve the kind of unity reflected in Polaris.

This article will outline some of the ways Shopify structures its UX team and how we used the process of building our style guide to rethink and reinforce the integrated way we approach product development. Whether you work in-house on a team or as a freelancer with different clients, it includes practical advice to help you think about creating a system to enable harmonious, integrated, and fundamentally successful product development.

An Adventurous Story Of An (Un)Spectacular User Journey

Whatever the nature of a configurator, usually it exists for two reasons: to inspire customers to explore a product, or to help them configure an existing product to match their needs. The former doesn’t necessarily matter only for undecided customers, and the latter doesn’t necessarily serve only customers who have already committed to a purchase. Sometimes, customers find themselves in between these two states; so, although they might not want to purchase an item at the beginning of the user journey, they might choose to buy it when they start customizing it.

According to StackOverflow’s 2016 Developer Survey, participating in a mentorship program is more highly correlated with job salary than a PhD, and devs value learning new things over other job motivators like building new things, believing in the company mission, and promotions.

Good mentors can help manage most of the top challenges developers face on the job, including:

Unrealistic Expectations (by understanding when and how to push back & manage expectations when the management process is faulty)

Poor Documentation

Inefficient Development Processes

Fragile Code Base

Senior mentors play an indispensable role on development teams. But it’s hard to find true, qualified senior developers with the experience to guide a team well.

This was first published on my mailing list The Looking Glass. Every week, I answer a reader’s question.

Q: As the only UX/UI designer in my company, I worry that my growth will be limited because there are no other designers around that I can learn from. I could consider joining a company with a larger design team, but I enjoy my current company and believe in our values. What else can I do to continue my growth?

One of the things I believe the most firmly is that everyone has something to teach you if you’re looking for the lessons. And these people don’t have to be other designers at your company! There are many paths to becoming an awesome product designer and many people to learn from along the way:

As we worked on React 16, we revamped the folder structure and much of the build tooling in the React repository. Among other things, we introduced projects such as Rollup, Prettier, and Google Closure Compiler into our workflow. People often ask us questions about how we use those tools. In this post, we would like to share some of the changes that we’ve made to our build and test infrastructure in 2017, and what motivated them.

While these changes helped us make React better, they don’t affect most React users directly. However, we hope that blogging about them might help other library authors solve similar problems. Our contributors might also find these notes helpful!

Click-bait-y articles about the fall of UX can make designers anxious about their careers. But if you have been working in this industry for long enough, you have probably seen this happen before. From “webmaster”, to “information architect”, to “interaction designer”, to “UX designer”, we have always been able to adapt what we do and call ourselves – while maintaining our mission of creating meaningful experiences for people.

What we see now is not any different. Our field is maturing, budgets are increasing, and the design landscape is getting more complex and competitive. We can’t expect every designer to be the jack of all trades. We can't be doing our job in 2018 the same way we did in 2008.

According to StackOverflow’s 2016 Developer Survey, participating in a mentorship program is more highly correlated with job salary than a PhD, and devs value learning new things over other job motivators like building new things, believing in the company mission, and promotions.

Good mentors can help manage most of the top challenges developers face on the job, including:

Unrealistic Expectations (by understanding when and how to push back & manage expectations when the management process is faulty)

Poor Documentation

Inefficient Development Processes

Fragile Code Base

Senior mentors play an indispensable role on development teams. But it’s hard to find true, qualified senior developers with the experience to guide a team well.

I like React as a templating engine, not only on the client side but on the server as well. Over the last year or two rendering templates with React.js on the server has become commonplace. Services from rather static content driven sites to Universal JavaScript Applications built on frameworks like Next.js are serving dynamic of server side rendered views using React.

While I like the concept of the guarantees of structure and validity, I do recognise that there’s a lot of overhead in how it works for constructing just a single view server side. This is why I decided to examine just how much overhead there is compared to more traditional templating engines that work on strings and don’t guarantee structure of the generated HTML markup.

In this article I’ll show that the typical approach for deploying sophisticated static sites is not sufficient, and explain how we can apply the principles of Continuous Delivery to improve the situation. We’ll then walk through a worked example, building a fully functional continuous delivery pipeline for a single page React application.

The rise of the static site

The client-side capabilities of modern browsers have made great strides in recent years. We’ve also seen an explosion in PaaS products aimed at replacing functionality which would previously have been delivered via custom backends. It’s become more and more feasible to deliver an app as a static site, where all functionality is implemented via HTML, CSS, client-side javascript and 3rd party APIs, with no custom backend code at all.

Testers: when we speak of “manual testing”, we help to damage the craft.

That’s a strong statement, but it comes from years of experience in observing people thinking and speaking carelessly about testing. Damage arises when some people who don’t specialize in testing (and even some who do) become confused by the idea that some testing is “manual” and some testing is “automated”. They don’t realize that software development and the testing within it are design studio work, not factory work. Those people are dazzled by the speed and reliability of automation in manufacturing. Very quickly, they begin to fixate on the idea that testing can be automated.

1. When you read here, you in fact read dozens of the best Node.JS articles - this is a summary and curation of the top-ranked content on Node JS best practices

2. It is the largest compilation, and it is growing every week - currently, more than 50 best practices, style guides, and architectural tips are presented. We welcome issues and PR to ever keep this live book updated. We'd love to see you contributing here, whether fixing some code mistake or suggesting brilliant new ideas - be part of the Node.JS best practices book

(This is a sponsored post). Testing is a fundamental part of the UX designer’s job and a core part of the overall UX design process. Testing provides the inspiration, guidance and validation that product teams need in order to design great products. That’s why the most effective teams make testing a habit.

Usability testing involves observing users as they use a product. It helps you find where users struggle and what they like. There are two ways to run a usability test:

So, how do the rules from the start of this post help solve these problems? First let’s take a look at the elements that we applied a z-index to and work out if they fall into the ‘local’ or ‘global’ category.

The full-screen modal is global

The drop down menu is global

The header could go either way, but I’ll say global

The product list item is local

When it comes to global stacking, we care about how two elements stack relative to each other when they’re both on the screen at the same time. Since the relationship is important, the only sensible thing to do is to record the z-indexes for each of these elements in the same place.

Techniques, strategies and recipes for building a modern web app with multiple teams using different JavaScript frameworks.

What are Micro Frontends?

The term Micro Frontends first came up in ThoughtWorks Technology Radar at the end of 2016. It extends the concepts of micro services to the frontend world. The current trend is to build a feature-rich and powerful browser application, aka single page app, which sits on top of a micro service architecture. Over time the frontend layer, often developed by a separate team, grows and gets more difficult to maintain. That’s what we call a Frontend Monolith

Compared to the Full Stack Designer, we seem to be more familiar with the Full Stack Developers. So what is full stack designer exactly? Can we simply think he/she is a versatile designer?

In the past, designers and developers have a clear role assignment. They rarely do the both at the same time. While with the changes in product design and the evolution of team collaboration, many web designers are able to manage web developing and UX design at present.

So there comes a question: what’s the character of the so-called full stack designer? He/She is only a designer? Also coding while being a designer? Or he/she is a designer as well as a web developer?