Posts

Customizing Okta login flow (messages, controls, logos, bk img, styles and more)

  Here's the Okta Dev Guide to customizing Okta login pages You can customize lots of properties including customizing UI, Email and sms logo, labels including i18n string translations. Okta provides a dashboard to customize flow as well as manage people, workflows etc. logo, background image and theme; easy to customize in Settings -> Appearance emails; in Settings -> Emails & SMS have to edit a version of each email for each language you support and manually enter the text for each country! UI Screens;  Customize in Settings -> Customization.  Includes these flows signin flow (incl mfa flow) mfa setup flow password reset flow account unlock ...but most customizations are done for these pages in css styles and javascript (see below) unlike emails there is no editor where you can edit each page. Instead you have to customize the pages through javascript and css. This is what you'll typically change and how: hide control reposition add controls ...

Chrome emulate print mode rendering

 This is pretty cool for debugging and styling print mode css https://developers.google.com/web/tools/chrome-devtools/css/print-preview

css attribute selectors combined as logical AND

Challenge : you need to match a css id that has a stable beginning and end but a middle that could change and you don't have control over it. You could look at using ends with $ attribute selector or starts with ^ attribute selector. Not bad but not necessarily a strong match esp if ending is generic, like '-container' The wildcard is not a good match (pardon the pun) because of how it works, any match in a string versus wildcarding one or more characters in middle Solution : combine attribute selectors When combined like so they function as an AND. Perfect! Combine the starts with and ends with as in "starts with x AND ends with y" e.g. [id^='third-party-'][id$='-container'] this will target classes like so:  ' third-party-*-container' love it Good css tricks article

Performance testing web pages

Image
Performance of web apps is a big topic and has a direct impact on users engagement. Users will simply not wait for, nor use, slow apps (over 50% of users abandon a website which takes more than 3 seconds to load).  Performance is part of the User Experience. What users experience and what it costs to use. As well as direct user experience, large apps also impact users plan bandwidth costs and cpu performance of their device. Performance (aka speed) is not just the time it takes to load an app. It includes loading feedback, time to show useful content when a user can interact with the page and the ongoing experience of using the app. Google in  web.dev identify phases which they call  "core web vitals" which are "loading"                  "interactivity"          "visual stability"   Metrics such as First Paint, First Meaningful Paint and Time to interactive can be used to measure these  ...

Story points and estimating per Ron Jeffries

Image
 This is simply a great read , pure gold from Ron Jeffries "To me, the important thing in Real Agile is to pick the next few things to do, and do them promptly. The key question is to find the most valuable things to do, and to do them quickly. Doing them quickly comes down to doing small slices of high value, and iterating rapidly" "This makes me think that estimation, be it in points or time, is to be avoided." "we’d work to have a list of the few most important next things to do." I feel we often try to do too much for completeness sakes or other reasons, when we should be ruthless about going after where the value is. Now how do you decide what is valuable? How do you, like a sculptor working on a slab of rock, whittle it down to fine grained pieces? Ron has advice for that too which he calls story slicing: split a larger story into smaller stories  work on the slices that deliver value drop any that don't any value "Every set of requirements ...

OKRs and Agile process

Does your organization use Objectives and Key Results (OKRs)?  How do OKRs work in an Agile development process? Lets think and blog about this. Objectives and Key Results recap:  an Objective is "a clearly defined goal and 3-5 key results - specific measures used to track the achievement of that goal" - wikipedia A key result must be measurable e.g. %, $, number and easy to answer if it was achieved or not. Objective vs goal? basically the same but Objective has added specificity. But its what you want to achieve Originated at Intel, popularized at Google and now lots of other companies including where I work for years. Objectives are often defined by senior company & product leadership and then cascade down to be decomposed by departments and groups and ultimately teams/squads. Often the Objective is for multiple quarters. A key part of the Agile process is frequent delivery of software (often every day or week), learning from releases and being flexible (agile) to new ...

cypress 6.0 and cypress-cucumber

  We've used cypress for a couple of years now to write e2e tests for our apps. Recently I have the opportunity to setup an cypress test suite using cypress-cucumber node package which supports gherkin syntax (new for me). These are my notes and learnings. cypress.io created in 2014, written in javascript, first beta 2017 lots of cool features, can view state on each line of cypress tests, api info logged to console wait on apis (no more sleeps or set wait times and flakey timing problems) now up to version 6.5, e.g. route replaced by intercept uses testing tech you're used to describe and it from Mocha and expect from Chai ( see more here ) cypress docs, guides, tutorials, recipes are awesome cypress-cucumber write cypress tests using gherkin syntax (feature, scenario, given when then etc.) which is based on BDD (see below) npm package a way to write, organize and reuse cypress tests BDD  a way for business and technical people to work together to reach a shared understandin...