Two useful CSS / SCSS tips

We all struggle with #CSS specificity issues in our codebase as our tech-debt increases while fighting with frameworks that we should try to be avoiding in the first place! But you may have to work with an existing one at times. Here are a couple of ways to avoid and mitigate the issues:

1. To increase specificity in tough cases without using too many selectors, IDs etc.(of course NO !important). Try using the same class twice. A very legit tip which works great, straight from the horse's mouth, from #MDN (Mozilla Developer Network). eg .my-class.my-class { property: value; more rules etc. }
2. If you happen to use #ReactStrap components, you will end up with a lot of generic classes used by the framework everywhere in your components, whether they make sense or or not (eg. the notorious .form-group class). Result... a lot of unwanted paddings and nested paddings on your DOM elements which make your alignments off.
   
   Do yourself a favor and make a little #CSS #reset of your own by setting padding: 0 (and/or similar resets as needed) on all those pesky .form-group, .col, col-n... flex-column what have you, and start with a clean slate. You may need to use !important as a legit use-case if you need to override any !important in the framework itself.
   
   Then add back just a few margins and/or paddings on a couple of parent elements and enjoy the "clean" aligned results!
   
   If your #UI still "jagged", rinse and repeat on more generic classes. Your CSS / #SCSS will only get "cleaner" / better after this.
   

Please donate to this non-profit and/or share:

https://gofund.me/90dcb3f7

Thanks in advance!

Getting and Updating Dynamic Heights for React Components

If you work on #UI you will always have many UI DOM elements that get and/or change height dynamically (eg. help/description strings etc.), with resize events or such, that you can't set and update heights for in CSS. There can also be times you do need some heights on certain elements to calculate heights for something else eg. Some ag-grid container (notorious for needing static height some parent) etc.

The usual way you might do it via dynamic scripts is: Calculate height selecting the DOM element struggle with classes, IDs, with querySelector etc. using yourElement.offsetHeight; use React refs, vars to get it, update it, so it goes....

If you're using React, here's cool, super useful React Component wrapper that was shared on my team! You can set dynamic heights in a much "cleaner" way and it is also good for cases where setting an ID hook may not even be an option as some dynamic IDs might be reserved for it. 

Prerequisites: 

1. You need your div for height calculation as its own div or separate component (eg. Header string component) that can be wrapped in the component wrapper and not as a div that is created by being passed as a prop to another component.
2. You still need to account for resize events calling updateHeight functions in React Life Cycle hooks (componentDidMount, componentWillUnmount as your case may be.)
3.  Need to set state for heights and have functions to update heights based on above. 

Steps:

1.  Usual npm/yarn install, import etc. (import { ReactHeight } from 'react-height';)
2. Set initial heights if any as const s in your constructor
3. Create your main heights calculate function. i.e. componentHeightReadyFunc
4. Create your updateHeight function and use them in 
5. Use it to wrap your component as shown in the usage step.

This is your "main course" / "meal" function

Usage:

This is THE STUFF that you're now ready to use now in your component render.
Voila! you've got your dynamic height/s and updated them. Most likely, you've set them as inline styles on the component where you need them (yes, inline styles are legit use case when you need dynamic heights etc., so don't fret.).

Now just watch it change in the Devtools inspector and enjoy your minute of "glory"! If not, change, debug, rinse and repeat.

References:
https://www.npmjs.com/package/react-height

I have put a lot of thought and time into writing this, so that anyone new to ReactJS (like me at this time) can find it easy to use, consolidating aspects that my team and I have found through research, trial and error.

If you found this post useful please share and donate to these wonderful non-profits that are doing amazing work! It does NOT benefit me monetarily, but does more than any monetary benefit can. I will surely be grateful and motivated to post/share more. 
If you found this post worthless, definitely donate to these worthy causes, so you can feel better by doing something else worthwhile to compensate.

Sheldrick Wildlife Trust
https://www.sheldrickwildlifetrust.org/donate

The Elephant Sanctuary in Tennessee
https://shop.elephants.com/2020YearEndCampaign

Elephant Nature Park, Chiang Mai (of the amazing "Lek" Chailert):
https://www.elephantnaturepark.org/how-you-can-help/
For those in USA: Since ENP is a foreign non-profit, you can match the donation from your companies if you donate to their sister concern 501c3 below:
https://www.abrahamfoundation.org/elephant-nature-park

Highlights from the February Angular Meetup at Google

Highlights from a meetup I attended last week at Google HQ, hosted by Google Developers Group (GDG - SV) and Angular MTV co-hosted by Modern-Web.

Very intriguing and interesting to me for several reasons was the Cypress testing ecosystem geared towards developers... Summed up as "Test anything that runs in the browser!" including unit testing, end-to-end testing as well as visual testing (in conjunction with Applitools).

Resources from Gil Tayar's interesting and objective presentation!
https://bit.ly/celenium-cypress-modern-web

Companion code for his talk, below.

https://github.com/giltayar/cypress-vs-selenium

If you are looking for a one slide summary on how Cypress differs from or similar to Selenium which you might be using, here it is, pulled from Gil Tayar's slide deck...

Bazel would be good to know for folks using Angular in very large enterprise applications. I would sum it up as Webpack for large Angular apps. Speaker  - Keen Yee Liau from Google.

Slide deck from his presentation:
https://github.com/kyliau/slides/blob/master/ModernWebABC.pdf 

Updates on Stackblitz, an online IDE based on VS Code (everyone's favorite now!). Very promising and also available now as a desktop web "app" (powered by PWA).

Companion code for Eric Simon's talk on Stackblitz.

Want to know more about Stackblitz?
https://medium.com/@ericsimons/stackblitz-online-vs-code-ide-for-angular-react-7d09348497f4 

There were a few more presentations on RxJS, Updates on Angular from the team (currently focused  on Ivy, the new Angular compiler) and Schematics (Speaker - Hans Larsen)...

Schematics, as summed up by the speaker, is a powerful way to scaffold and refactor code and projects, and is used extensively by the Angular CLI.

This Meetup was also streamed. Will post more links and resources as they become available!

While this is kind of off-topic here, I also want to share with readers, this serious contender for Webpack, for anyone considering alternatives. I haven't used ParcelJS, but definitely sounds impressive in many aspects.
https://parceljs.org/

Resources for AngularJS to Angular migration and more...

Some resources from the MTV Angular Meetup this month.

AngularJS to Angular migration and new resources around it by the Angular team seems to be a significant milestone considering the recent announcement of the upcoming end of long term support for AngularJS by the Angular team...

Migrating from AngularJS to Angular

Elana Olson's slide-deck on AngularJS to Angular migration (Angular Dev relations developer)

Two resources discussed in the talk by Elana.
Angular Migration Assistant
https://github.com/ellamaolson/ngMigration-Assistant (a command line tool to help assess the AngularJS codebase, migration complexities, path, patterns, needs, approach etc.)

Angular Migration Wiki
https://github.com/angular/ngMigration-Forum/wiki  (they also have consultants, Q&A and more to help with migration or plans thereof, definitely worth checking out if you have an AngularJS codebase.)

Her blog article that discusses the above in more detail
https://blog.angular.io/migrating-to-angular-fc9618d6fb04 

Why upgrade?
https://github.com/angular/ngMigration-Forum/wiki/Why-Upgrade%3F 

Another migration resource
https://www.upgradingangularjs.com/

Yet another migration resource, shared by an attendee… Angular CoPilot.

https://medium.com/angulardoc/angular-copilot-for-angularjs-to-angular-migration-270e78b9f241
https://medium.com/angulardoc/announcing-angular-copilot-v1-0-aae80ec2083f

Angular Console

A cool resource! Angular Console a GUI for Angular CLI (only for Angular, not AngularJS ). Loved it!
https://angularconsole.com/ (from NRWL folks working along with Google.). Presented by Aysegul Yonet

Predictive pre-fetching in Angular

Things to help make your Angular app faster by prefetching by analytics based approach (machine learning, sort of). Presented by Minko Gechev.

https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/ 
https://github.com/guess-js/guess
https://mgv.io/predictive-fetching
https://mgv.io/dd-bundling
https://mgv.io/cost-of-js

Recipients of my volunteer grants in 2016

It was an awesome feeling to redeem 15 volunteer grants (of $250 ea for every 10 hrs.) issued by Adobe Corporate Responsibility Team as a reward for my volunteer work in 2016! A tough target for myself to meet in 2017.

Majority of these grants came from my work for the Cambodia volunteer project organized by Team4Tech, sponsored by Adobe, which was a great learning experience in itself, others from my personal volunteer work at local non-profits and some that were organized at Adobe locations. I have to admit that a big motivation for my volunteer work has been this reward and I find it very satisfying to be able to contribute to causes that I am passionate about. This in my opinion, the best perk of working here (in addition to the donation matches). I hope more employers follow along. 

Much bigger is the effort of these amazing non-profits that I dedicated my grants to:

David Sheldrick Wildlife Trust, getting the "elephant share" of the grants! They do an amazing work of fostering orphaned elephant babies which is very heart breaking to learn about, and reintegrating them back to the wild, some of them even visit them with babies of their own, help with anti-poaching, veterinary assistance for elephants and much more for the protection of elephants, rhinos and other wildlife in Kenyan wilderness.

Photo courtesy, David Sheldrick Wildlife trust.

Serengeti Foundation (of the famed Elephant Nature Park in Thailand)

American Bird Conservancy

National Audubon Society

Ocean Conservancy

The Marine Mammal Center

Sea Shepherd Conservation Society

Amazon Conservation Association

Friends of Children's Eternal Rainforest of Children’s Eternal Rainforest, Monteverde, Costa Rica

All these non-profits have a high ranking on a Charity Navigator and/or have amazing programs for conservation of endangered species. I heartily recommend these organizations to anyone considering donating or gifting!

Related links:

A Volunteer Journey to Cambodia: Prelude

Destination Ban Lung: Vignettes of a Volunteer Journey

A Volunteer Journey to Cambodia: Beyond a Single story

On the first day of our ICT workshop in Ban Lung, a remote town in northern Cambodia, during the second phase of our Adobe volunteer project, we met with a group of very smart and friendly secondary school teachers—participants of our training. In the process of getting to know them better, we started out with a few ice-breakers and some quick in-person and informal “surveys" in which we asked the teachers to align themselves in groups of Yes, No, Unsure… corresponding to the questions asked or the statements made as we also did ourselves, moving along with them.

Pretty soon it got interesting (to me) with statements like "I have done a search on the internet in the last few days”, "I have used a desktop computer in the last week” or "I have sent an email in the last week” which led to realignments of teachers into all three groups indicating that they were somewhat heterogenous in their level of exposure to technology and/or devices. But here’s when it got very interesting for me…  

“I have used a mobile phone for in the last day” said the moderator, referring to the general purpose of "mobile activities"...

The entire group almost instantly shifted to the Yes section without a hint of hesitation and I felt like I was physically in this graph below, experiencing the mobile moment perhaps retroactively, in this remote Cambodian town... or was it the mobile-only moment? Although this was somewhat expected based on our prior knowledge, experiencing it in-person felt very exciting and surreal! It could've also been the excitement of encountering fellow mobile geeks on the other side of the planet.

Mobile Moment? How about the "Mobile Only Moment"... http://t.co/7yopOfKRAY pic.twitter.com/mJfRhhSiu7

— Luke Wroblewski (@lukew) April 23, 2015

https://twitter.com/lukew/status/591265766823034880

For the benefit of readers from other backgrounds, mobile moment is typically defined as the time when companies encounter that the majority of their usage and traffic shifts from desktop to mobile devices or more recently, mobile-only, paraphrasing Luke Wroblewski, whose name is now synonymous with mobile focused experiences and technologies.

But, you may ask... this is so 2013! Does this need to be discussed again? and I say yes, as this also correlated with my observations and UX affirmations I have come across in this project and elsewhere, seeing mobile users subject to experiences predominantly optimized for or a remnant of desktop oriented model. I specifically refer to it as affirmations, as these patterns, behaviors and technology issues have been observed and recorded world-wide and my fellow volunteers and I just got to see it first-hand!

It is indeed getting to be an increasingly mobile-first world, the "computer" is getting tinier by the day and it is about time we change our UX models to correlate with that.

Here are some more of my observations in the course of our volunteer project:

Internet connectivity was a big show staller 

Despite the penetration of mobile to the remotest corners of the world, the lack of internet connectivity keeping up with it made using internet based apps very difficult! Teachers quickly adapted to this by creating hot spots from their own cellular connection for use on laptop and tablets which ended up to be unreliable, not to mention economically taxing! Making some functionality of the app available without the need for internet, or considering of some form of implementation of Progressive Web Apps for your website becomes highly relevant now.



And, if you're thinking, oh my users will be so and so or have such and such, and of course will have unlimited internet and data, "you ain't seen nothing yet..." This reality of internet connectivity not being on par with the technology revolution across the world have been consistent with observations like the ones in the above video and from prior volunteers experiences across many parts of the world. Even if you didn't intend to, the entire world has become your users and it would only make sense to take advantage of it!

Even though we had picked apps that could offer some or most of their functionality without an internet connection for our training, we still had to climb through the big hurdle of getting the teachers to sign into those apps that wouldn’t let them use otherwise, which segways into my next observation.

Make sign-ups easy on your apps or better yet, no sign ups upfront!

Faced with internet connectivity issues, we almost had to spend more than half of our allotted time for some workshops in just getting the users to sign up for their apps although we at least tried to overcome the first hurdle of downloading the apps by pre-loading them into their tablets. Given the language and cultural barriers it was unsurprising to see people getting confused with sign up forms and getting stuck on things we take for granted that users will instinctively know about.  

Here are some simple things we can do to move along users with the dreaded sign-up forms if you must have them upfront, even if at the risk of losing half your users! 

• Use example placeholders in input fields for clarity and give hints on possible issues with input. The word "user name" to a non-english speaker seems like "name of the user" especially when shown as the first field in the form without any hints, and it is also not "obvious" for the user to not include spaces or certain characters in user name or what to do when a certain user name is already taken. 
• Provide hints on a strong password for safe user data. We figured the "national password" of Cambodia was perhaps 12345678 as we came across that everywhere!! This definitely made us realize we can't cut on the topic of internet security in our ICT workshop and now our teachers know better!
  
  
  
• Provide sample inputs of date of birth and similar, as the format will not be obvious or the same worldwide. 
• Make mandatory fields obvious and better yet, remove the optional fields for a short and sweet form!
• Provide tool-tips or hints along the way to help with input entry and have input masks where necessary. 
• Pre-fill fields when possible and also make it obvious that it is pre-filled!
• Avoid using regional words, references or icons that may not be understood globally. 

This is by no means an exhaustive list but just some that struck me during my observations. There are of course books and articles written on this important topic! 

Mobile sign up forms must die

Since retention is the biggest hurdle that needs to be overcome by mobile apps the sooner and easier you can get the users to start using the app, the better!

Even after we got past the hurdle of downloads and sign-up forms and got teachers to the point of actually using the apps, there was the question of how does this app help me do things that I am already doing, better? and also making this obvious thus reducing abandonment, yet another challenge for apps. When there are so many logistical challenges to using an app it is hard to imagine that users are going to try out an app just for fun or curiosity. In fact this question was asked by one of the teachers how does the quiz app help him do things better in his classroom? Obviously that wasn't quite obvious. Also there won’t always be a team of volunteers “selling" the use case for an app if it isn’t already obvious.

Adding on to the list...

• Most likely due to the mobile-first background and touch screen experiences, they don’t seem to notice the mouse pointer on links much, which points to the need for making hyperlinks more obvious and consistent.
• Good to capitalize on mobile messaging platforms and social media as most of these users are natives in mobile forms of communication, and email was new and quite often non-existent until our initiation! 
• Be mindful of language and cultural barriers in content and iconography.
• I rejoiced as a front-end developer when I saw that they were aware of and used multiple browsers, and did not equate internet with IE and the fact that Chrome seemed to be their browser of choice! Well, that doesn't mean much if y/our analytics indicates otherwise, although it offers hope for the future. 
• I found them to be distributed over a range when it came to familiarity with technology. While some had barely ever gotten their hands on a laptop computer there were others who were proficient in hardware or had advanced photoshop skills with a very discerning use of it. This seemed to be the results of the opportunities they had come come across.  A self-described auto didact who learnt it all from YouTube, proudly shared with me his beautiful before and after photos of elegant use of photo retouching with Photoshop!! 
• Geekdom is universal! They love geeky stuff just as you and I. They love their powerpoint animations but discerning enough to not over-do it!  
• They were especially keen on getting deeper knowledge and understanding of concepts or hardcore tricks and tips that would help them along their way.
• Just like a developer focused on getting in harmony with the IDE and their core programming languages, they preferred to learn their "tools of trade” first... internet research, translation tools, word processors to help with lesson plans and presentational software to convey all this goodness to their students. 
• They were more keen on educational apps and very aptly noted that tablets would help them the best in teaching skills more interactively to their students.
• I loved their enthusiasm for exchange of knowledge asking and thinking about cloud sharing to share larger files, between each other and their new laptops and devices, due to the limited physical proximity of their group. Although time constraints limited us from teaching everything we wanted to in our proposed curriculum, I was thrilled to share more information in my one on one interactions and set up cloud sharing with these eager and dedicated learners. 
• They were also quick to learn and adapt new technologies and foreign concepts to their own needs, very evident in the Chemistry teacher's thoughts on creating a Bingo game that he had come across for the first time, to teach elements of periodic table to his students or the ways in which all the teachers made the presentations based on our training, their very own, adding on to it being mindful of their necessities to teach their peers. They were the fastest learners I have come across in spite of all the challenges they had to face!
• They did seem to be somewhat addicted to their mobile devices, although polite enough to not let it interfere during our common lunches or conversations as much. 

Above everything else, I found our Cambodian partners in this journey to be genuinely warm and friendly, super smart and inspirational!

Beyond a single story

Besides all this talk of UX and technology, what struck me most about this lovely group of people was that they were an antithesis to many of the pre-conceptions we see towards the "developing world" or the "third-world", two words that I detest using except when making this point. I am sure this is true of folks in many other parts of the "third-world".  As history tells us, all these countries had already developed way before the current "developed" countries had. 

As it may already be obvious from many of my observations above, they were no different from most of us in other parts of the world, although much nicer and friendlier. Lack of exposure or access to technology, economic conditions and a tumultuous history of struggles and exploitations seem to be the predominant reasons for many of these countries not being able to take advantage of current technologies. 

I was also happy to notice that women and girls raised beyond the societal and biological constraints and excelled in using and adapting to technology. Kudos to one of the teachers who pulled off a great presentation, while having to attend the workshop with her little toddler and taking care of her all along! She was a master multi-tasker! Women also seemed to be very entrepreneurial, working most of the businesses and shops efficiently and single-handedly, but unfortunately I came to know, in-spite of their hard work and lead, the societal norms didn't allow them equal rights with men!

It was a sad state of affairs on the environmental front with the usual problems of deforestation for palm oil, cashew nuts or rubber... any new trend that gets the cash flowing. The unbearable heat which locals said have gotten worse over the years doesn't seem surprising with the little flora that is left. The ubiquitous trash in towns and cities resulting from their inability to handle the omnipotent plastic that replaces sustainable local habits was also disconcerting. 

Although our encounter with students was limited, I cherished a few that we had. It was great to see school girls taking the initiative in getting to know us, taking selfies with us with their mobile phones and perhaps even ahead of adults in their familiarity with mobile. I feel the world seems to be getting more homogenous especially with the younger generation, those we refer to as Gen Z in the US. It now seems to be very ethnocentric to think our digital-native or digital savvy user is mostly a millennial when they could very well be a school girl or a school teacher in a remote village in Cambodia or a retired official or a farmer in India, orphans in Vietnam or school kids in South Africa, who have had their first encounter with the internet through their first mobile device! As Donna Morris, Executive VP, Adobe aptly notes in her article the millennials myth, it is increasingly important to focus on delivering globally inclusive experiences.

If you've made it this far, congrats and enjoy this inspirational TED talk by the eloquent Chimamanda Ngozi Adichie.

Related Links:

A Volunteer Journey to Cambodia: Prelude

Destination Ban Lung: Vignettes of a Volunteer Journey

Recipients of my volunteer grants in 2016

A Volunteer Journey to Cambodia: Prelude

As I was waiting at the gate of San Francisco international  airport, en route to Phnom Penh, Cambodia, the sequence of events in the first phase of this journey crossed my mind...

It all began early this summer when I saw an exciting and intriguing note in our Adobe internal news about a volunteer opportunity sponsored by Adobe Corporate Responsibility team to work with an organization called Team4Tech in collaboration with CARE Cambodia to teach 21st century skills to secondary school teachers and teacher trainers in Cambodia. Having allready been inspired by the amazing volunteer opportunities and rewards provided Adobe for its employees for volunteering, I applied with much interest and anticipation!

A big part of the application process involved writing a couple of short essays describing our experience and service motivation. After a quick couple of weeks, I was excited to hear that I was selected for an interview by Team4Tech and was thrilled to hear pretty soon that I was one of the six Adobe employees selected for the final team from a pool of close to a hundred applicants! I felt privileged  and honored to have been given this opportunity by Adobe and Team4Tech! The support and encouragement from coworkers and leaders at Adobe has been quite invaluable all along.

This post wouldn't be complete without writing about the amazing and motivating opportunities for employees at Adobe for volunteering at local communities, non-profits, pro-bono initiatives organized by Adobe or with our own favorite non-profits on our personal time, not to mention larger scale Adobe sponsored initiatives with non-profits and NGOs abroad such as this, all empowering change agents in our communities for solving social problems and creating positive change (#CreateChange). In addition to the opportunities, Adobe also sweetens the deal further by rewarding employees with a grant of $250 to a cause of employee's choice for every 10 hours of volunteer work at a registered non-profit!

Our Adobe team for this project comprised of six Adobe employees across the globe in four different time-zones! 

In initial kick-off meetings, we learned more about our collaborators, Team4Tech, whose mission is to advance 21st century education in underserved communities through technology volunteers by connecting technology industry professionals and solutions with high impact NGO projects such as the one in our current project, with CARE Cambodia, an international development organization fighting global poverty with a special focus on working with women and girls to bring sustainable changes to their communities.

The mission of our project was an exciting one...  to further  21st century skills like digital literacy, internet communications and education technology in secondary schools in Cambodia.

So what exactly did we set out to teach, and what are 21st Century skills?

After regrouping our team into three sub-teams, we focused on basics of computer and tablet Operating System; file storage and organization with introduction to cloud sharing; Internet security and communications;  digital literacy, productivity tools such as MS Office suite, education technology that would be helpful in classrooms for teachers, and more... We were working to empower teachers and teacher trainers in Cambodia with these skills and also motivating and enabling them to include this in their curriculum to teach their students. 

Set up with this mission, we got to work very quickly in our weekly meetings, individual and sub-team preparation and collaboration to plan for our in-country training sessions.

In addition to our project work, Team4Tech also facilitated discussions around articles and concepts that enable the team to cultivate leadership, empathy and skills critical for the success of the project such as

• Global mindset 
• Critical thinking 
• Extreme collaboration 
• Creative problem solving
• Effective communication with cross functional, global collaboration>

Some of the themes we discussed and experienced during this process were, synthesis of divergent ideas, dealing with ambiguity, prototyping and experimentation, taking risks and encouraging action, anticipating and managing change, inspiring others, strong self awareness, story telling, developing vision for systems, giving and taking objective feedback. 

We collaborated each week to create lesson plans and workshop presentations based on our objectives to deliver in-country.

We based our process on human centric design thinking involving, empathizing with the user, defining each of our objectives, ideating and prototype and our testing phase would be in-country and might involve further adaptations. 

Having converged in Phnom Penh from different parts of the globe, this is where we're at now, looking forward to meeting with our CARE Cambodia partners in Phnom Penh and traveling to several schools in Cambodia with our base in Ban Lung. 

Our team will be sharing our journey through this exciting  project over the next two weeks.

Related links: Destination Ban Lung: Vignettes of a Volunteer Journey

More to come!!