DEV Community: Arshabhi Rai

Recapping Day 2 of SmashingConf Toronto 2019

Arshabhi Rai — Sat, 29 Jun 2019 01:12:48 +0000

I recently recapped my experience at the first day of Smashing Conference in Toronto, and didn’t want to leave you hanging so here’s a quick summary of day 2. As before, I’ve published a fairly comprehensive writeup over on Medium.

Day 2 covered trending topics in front-end development such as service workers, performance, CSS grid, color systems, and component-based development and design.

The day also featured a mystery speaker who frankly blew me away – renowned English artist and calligrapher Seb Lester. I was mesmerized by his work and presentation, and took away some things that will reshape the way I work – like knowing when to stop and move on, and how experimenting with ideas away from corporate work can give way to more creative, expressive designs.

Here’s a summary of my take on the rest of the speakers:

For the Love of the Grid: In just forty minutes, and in front of our very eyes, Jules Forrest transformed a printed restaurant menu into a responsive web page using CSS Grid and CodePen. She emphasized the fact that getting overly creative isn’t always necessary or good, as sticking with common UI patterns can help users more easily navigate your site.
Diving into Service Workers, Live: Phil Nash demonstrated how “service worker” strategy can be used to make websites work offline.
Seeing the Pages for Components: Graphic designer Dan Rose then shared his thoughts on how to identify common symptoms of non-cohesive design. He explained how component connectivity can help you prioritize consistency to create a steady visual flow among all components, while working with the content team because content drives design.
The Secret Lives of Color Systems: In this session, Diana Mounter demonstrated the work behind adding a new feature to offer users the ability to change GitHub’s color theme from white to dark mode. She used a Gatsby app and a sample repository of the GitHub to demonstrate the process, techniques, and challenges of updating the color scheme of an enterprise-level web application.
Move Fast and Don’t Break Things: In this forty minutes session, Scott Jehl talked about issues in web performance and shared some ways of improving them. One example being “progressive enhancement” that can accelerate a web site regardless of network speed and device type.

Day 2 ended with a Photo Walk, which we unfortunately missed, but here is a fun picture of the “Smashing Family.” Smashing Family, thank you for a great event!

The post Recapping Day 2 of SmashingConf Toronto 2019 appeared first on Solace.

Recapping Day 1 of SmashingConf Toronto 2019

Arshabhi Rai — Thu, 27 Jun 2019 19:10:51 +0000

I was stoked to attend SmashingConf in Toronto this year. SmashingConf is the place to be if you want to learn about front-end and UX development. My colleague Blaine Hussey and I were so excited that we showed up at 8:00 a.m. and waited anxiously for the doors to open.

Me on left, Blaine on right

On the first day, seven speakers delivered compelling talks about everything from animation and front-end code architecture to inclusive design and digital policies. I’ve summarized what they talked about here, and written more over on Medium.

Let’s Build a Design System: Brad Frost, author of the book Atomic Design and co-host of the Style Guides podcast, kicked things off by talking about how to build a design system. He shared some great ideas about code architecture, modularity and reuse of components; demonstrating key concepts with a pair of front-end development tools called io and Story UI. In my recent experience re-designing Solace’s documentation site, it was critical to design and code through the lens of the software we use, which also included third-party software we wanted to integrate.
Let’s Build a Vue App from Scratch: We then heard from Sarah Drasner, who’s the head of developer experience at Netlify and a member of the team behind Vue.js, an open source javascript library for building user interfaces and single-page applications. She showed us how to use Vue to build a functional application with routing, server-side rendering, and animations using Nuxt.js and her Vue snippet extensions. I was intrigued by how she used her custom Vue snippets and other tools such as CSS Grid generator, that she had developed herself, to speed up her workflow. Very cool!
JAMStack: Silly Name, Serious Stuff: Then Phil Hawksworth, head of developer relations for Netlify, cleared up what JAMStack means (Javascript + APIs + pre-rendered Markup), and demonstrated how WebHooks and APIs can be used to trigger events, generate notifications and create and automate the development environment. His key message was that you should simplify the technology stack, decouple sites from deployment environments and automate as much as you can.
Building Bridges, Not Walls: Seasoned UX consultant Jenny Shen gave a fascinating talk about how cultural differences do – or should, at least – influence product and interface design. She made it clear that it’s no longer enough to simply translate text on the page – to increase trust and engagement, designers must understand and factor for the wide range of cultural, habitual and other social differences across countries.
Let’s Create a Web Animation from Scratch: Illustrator and animator Chris Gannon walked us through the process of creating an animation with SVG code. It was fascinating to see the decisions he made as he coded and how even the smallest detail in code can have a significant impact on the output.
Digital Policy and Standards Rehab Hour: Kristina Podnar, author of The Power of Digital Policy, explained how the often overlooked matter of digital policy and standards actually plays a vital role in creating a good website. She talked about some common challenges and how to use policies and standards to enhance website health.
Authentic Digital Design by the Numbers: Last but not least, Steven Hoober (who literally wrote the book on mobile design, i.e. O’Reilly’s Designing Mobile Interfaces) detailed the unique usability challenges faced when designing for mobile devices, such as the fact that people don’t start at the top of mobile screens, but in the middle.

It was an informative day, and if you find these topics as fascinating as I did, I think you’ll get a lot out of my detailed description of their presentations over on Medium.

Quick update…here’s my quick take on day two!

The post Recapping Day 1 of SmashingConf Toronto appeared first on Solace.

Integrating the Algolia DocSearch into MadCap Flare-based Customer Documentation

Arshabhi Rai — Thu, 18 Apr 2019 18:53:47 +0000

Solace recently redesigned its brand. As part of this initiative, all the web properties had to be updated, including our MadCap Flare-based customer documentation website. A significant piece in this project was integrating Algolia DocSearch with MadCap Flare.

Why DocSearch?

In docs.solace.com, we have several externally hosted web pages. Since those web pages are not part of the Flare project, their content could not be searched using Flare’s internal search engine, which, unfortunately, was a weakness in our docs. Along with resolving this issue, we were also intrigued by the idea of having a context-aware search engine that could quickly predict and find what users search.

After doing some research, I found a few third-party search engine services that could potentially solve our problem. We narrowed down our decision to try DocSearch. We were required to apply for DocSearch. Once our application was approved, the DocSearch team created a custom JSON configuration for our website. The configuration file defined which URLs to crawl or ignore, as well as the CSS selectors to be used for selecting headers, subheaders, and the results summary. All the DocSearch configuration files are publicly available in GitHub, and users can customize it as per their documentation needs. They also provided us with a JavaScript (JS) library and snippet that we had to add to our website. The scripts are used to track the keystrokes typed in the search input field, and the results that match the text are displayed as a dropdown list.

So, all we had to do was add some custom updates to the configuration file, paste the JS library and snippet to the master pages in Flare, and then design the search UI. Sounds simple, no? Not really.

Integrating DocSearch

When I added the DocSearch scripts into the Flare project, it immediately threw a bunch of errors. Flare has several built-in scripts including require.js, which is bundled with Flare. Many third-party scripts conflict with Flare’s foundational scripts if not consumed by require.js. So, for the DocSearch scripts to work, it had to be consumed by require.js. Tricky stuff for a simple technical writer 😊. I reached out to two of my developer colleagues and worked with them to resolve the integration errors. Thanks, Ian Wong and Ye Deng. You guys are amazing!

Solution

The DocSearch team provided the following JavaScript library and snippet:

\<!-- at the end of the HEAD --\>
\<script type=”text/javascript” src=”https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"\>\</script\>

\<!-- at the end of the BODY --\>
\<script type=”text/javascript”\>
 docsearch({
 apiKey: ‘###########’,
 indexName: ‘YourIndexName’,
 inputSelector: ‘#youInputselector’,
 algoliaOptions: { ‘facetFilters’: [‘tags:docs’] },
 debug: false, // Set debug to true if you want to inspect the dropdown
});
\</script\>

After we added the script in Flare and published a build, following JS errors were highlighted on Chrome’s developer console:

The error occurred as the script was running outside Flare’s foundational JS. To resolve this issue, we figured out a way to load those scripts as a require.js module.

We used the require.config method to load the DocSearch JS library:

require.config({
 paths: {
 “docsearchLib” : “https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min"
 }
});

After that, we nested the docsearch snippet and docsearchLib inside the require() call for the configuration:

require(["docsearchLib"], function(docsearch){
 docsearch({
 apiKey: '###########',
 indexName: 'YourIndexName',
 inputSelector: '#youInputselector',
 algoliaOptions: { 'facetFilters': ['tags:docs'] },
 debug: false,
 });
});

Once we added the updated scripts and published a build, our new search engine was up and running.

\<body\>
....

\<script\>

require.config({
 paths: {
 “docsearchLib” : “https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min"
 }
});

require(["docsearchLib"], function(docsearch){
 docsearch({
 apiKey: '###########',
 indexName: 'YourIndexName',
 inputSelector: '#youInputselector',
 algoliaOptions: { 'facetFilters': ['tags:docs'] },
 debug: false,
 });
});

\</script\>

\</body\>

You can see the result in docs.solace.com.

In the next post, I will be covering other aspects of our documentation website redesign — planning, content migration, and development.