DEV Community: james south

Generating Knockout Text with the CSS Paint (Houdini) API

james south — Wed, 25 Sep 2019 19:17:52 +0000

In my first article on the new CSS Paint (Houdini) API, I covered three use cases for Houdini along with polyfilling it in non-supporting browsers and building with webpack. Today I want to discuss combining Houdini with a knockout text technique to easily create attractive, generative text effects. Since I have already covered the polyfill, I have chosen not to use it for this article's demos, so they only work in Chrome; other browsers will just show a black fallback. The repo for this article is here:

jamessouth / knockout-demo

repo for my article on css paint and knockout text

Knockout text is a visual effect where the text content of an element is cut out, revealing the background behind it, thereby giving color to the letters so that they contrast with the foreground and can be read. In web development, there are several ways to achieve knockout text; for these demos I went with using the background-clip: text CSS property as it is widely supported (prefixed), simple, and accessible. Check out my 15 Puzzle Generator to see another knockout text technique using images, pseudo content and the mix-blend-mode CSS property, and the accessibility hack (a tiny, invisible <h1> tag) that was subsequently required. The demos for this article are live here.

The Markup

  <!-- index.html -->
  <body>
    <h2>Claude Monet</h2>
    <h2>102 Colored Stripes</h2>
    <h2>85 Colored Spheres</h2>
  </body>
  <style>
    h2{
      background-image: linear-gradient(black, black);
    }
    h2:first-of-type{
      background-image: paint(demo1);
    }
    h2:nth-of-type(2){
      background-image: paint(demo2);
    }
    h2:last-of-type{
      background-image: paint(demo3);
    }
  </style>

index.html

Here we just have three <h2> tags with our text, as you might see in a real document. Throw on an <h1> for a page title and this is accessible to screen readers as a set of level 2 headings. The <style> tag for calling our paint worklets is needed to work around an apparent caching issue as discussed in my previous article.

The Styling

//demo.scss
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body{
  display: flex;
  background: #fbfbfb;
  justify-content: space-around;
  flex-direction: column;
  align-items: center;
}
h2{
  color: transparent;// can be anything but background only visible to extent transparent
  font-size: 68px;
  background-clip: text;
  -webkit-background-clip: text;// must be prefixed
  text-align: center;
  line-height: 76px;
  font-weight: 500;
  margin: .3em .25em;
}
h2:first-of-type{
  --brushstrokes: 3825;
  font-family: 'Dr Sugiyama', cursive;
  width: 60%;// reduces paint area when text takes 2 lines to maintain desired visual effect
  //of just a few dark gaps in the 'hay'
}
h2:nth-of-type(2){
  --stripes: 102;
  font-family: 'Amarante', cursive;
  line-height: 78px;// without this the descender of the 'p' gets cut off
}
h2:last-of-type{
  --spheres: 85;
  font-family: 'Limelight', cursive;
}
@media screen and (min-width: 450px){
  h2{
    font-size: 88px;
    line-height: 96px;
    max-width: 501px;// otherwise paint area would extend across viewport, requiring more
//objects to be drawn in our worklet to get the desired effect
    margin: .4em 0;
  }
  h2:first-of-type{
    width: 450px;// otherwise the cross-stroke of the 't' gets cut off
  }
  h2:nth-of-type(2){
    line-height: 102px;// also used to preserve the descender of the 'p'
  }
}
@media screen and (min-width: 775px){
  h2:nth-of-type(2){
    max-width: initial;// allows to expand as one line
  }
}
@media screen and (min-width: 942px){
  h2{
    margin: .5em 0;
  }
  h2:last-of-type{
    max-width: initial;// allows to expand as one line
  }
}

demo.scss

Pretty simple styles, just some basic flexboxing on the body then some typical text styling for the <h2> tags, each of which has a CSS custom property that we will use in their respective worklets. The knockout text effect is created by the transparent text color (the background will only be visible to the extent the text color is transparent) coupled with the background-clip: text property (limits the appearance of the background image to the area of the text), which must be prefixed in most browsers.

We want the background to be just big enough to completely cover the text. Any uncovered text will just be the text color. However, if our background size far exceeds the area of the text, our worklet will be doing a lot of unutilized work, which is sub-optimal and could be a problem if you animate the background. Making a few simple tweaks to properties such as line-height, width, and font-size (and also padding and border) minimizes the background size and our paint function's complexity while still containing the text. Now, let's check out the worklets!

Demo 1

Here I'm trying to recreate Claude Monet's famous haystacks as seen, for example, in this painting. By limiting the width of the background, I can keep the number of brushstrokes down to a reasonable 3,825 😃. If the background were wider, the brushstrokes would be diluted and more black areas would be visible, so more strokes would be required for the same look, increasing the complexity of the paint function. I chose the Dr Sugiyama Google font to vaguely mimic Monet's signature. To see the underlying background drawing, open up dev tools and uncheck -webkit-background-clip: text.

//(partial) demo1.js - static methods omitted, see link to file below 
  paint(ctx, { width, height }, props) {
    const brushstrokes = props.get('--brushstrokes');

    ctx.fillStyle = 'rgb(30, 10, 0)';
    ctx.fillRect(0, 0, width, height);

    for (let i = 0; i < brushstrokes; i += 1) {
      const [x, y] = Demo1.getRandomPoint(width, height);
      ctx.beginPath();
      ctx.moveTo(x, y);
      ctx.lineTo(x + Demo1.getXAdjustment(8), y + Demo1.getYAdjustment(28));
      ctx.lineWidth = Demo1.getWidth();
      ctx.strokeStyle = `rgba(
        ${Demo1.getNumber(201, 40)},
        ${Demo1.getNumber(148, 45)},
        ${Demo1.getNumber(102, 45)},
        ${Demo1.getNumber(70, 31) / 100}
      )`;
      ctx.stroke();
    }
  }

demo1.js

Pretty simple, just looping through the number of brushstrokes from CSS and drawing a short line of 'hay' in a random straw color.

Demo 2

This one is also just a bunch of colored lines, very simple to do yet attractive visually.

//(partial) demo2.js - static methods omitted, see link to file below 
  paint(ctx, { width, height }, props) {
    const stripes = props.get('--stripes');

    ctx.fillStyle = 'rgba(30, 30, 30, .6)';
    ctx.fillRect(0, 0, width, height);

    for (let i = 0; i < stripes; i += 1) {
      const start = Demo2.getRandomPoint(width, height);
      const end = Demo2.getRandomPoint(width, height);
      ctx.beginPath();
      ctx.moveTo(...start);
      ctx.lineTo(...end);
      ctx.lineWidth = Demo2.getWidth();
      ctx.lineCap = 'square';
      ctx.strokeStyle = `rgba(
        ${Demo2.getColor(16, 150)},
        ${Demo2.getColor(18, 150)},
        ${Demo2.getColor(12, 200)},
        ${Demo2.getTransparency()}
      )`;
      ctx.stroke();
    }
  }

demo2.js

The font here is the Amarante Google font, about the most Art Nouveau-style font they have.

Tip: On Google fonts you can only search font names, but if you want to search for a certain style of font (or anything that appears in the font descriptions but not the names), search the GitHub repo!

Demo 3

For Demo 3, I experimented with drawing spheres (adapted from the MDN) and I think they turned out great. Just a little more complex than stripes but nothing too heavy. The font is Limelight, one of many Art Deco-style Google fonts.

//(partial) demo3.js - static methods omitted, see link to file below 
  paint(ctx, { width, height }, props) {
    const spheres = props.get('--spheres');

    ctx.fillStyle = 'rgb(10, 10, 10)';
    ctx.fillRect(0, 0, width, height);

    for (let i = 0; i < spheres; i += 1) {
      const radius = Demo3.getColor(4, 60);
      const [x, y] = Demo3.getRandomPoint(width + 1, height + 1);
      const [r, g, b] = Demo3.makeColor();
      const radgrad = ctx.createRadialGradient(
                        x,
                        y,
                        0,
                        x + (radius / 4),
                        y + (radius / 4),
                        radius
      );
      radgrad.addColorStop(0, '#ffffff');
      radgrad.addColorStop(0.99, `rgba(${r}, ${g}, ${b}, 1)`);
      radgrad.addColorStop(1, `rgba(${r}, ${g}, ${b}, 0)`);
      ctx.fillStyle = radgrad;
      ctx.fillRect(0, 0, width, height);
    }
  }

demo3.js

Radial gradients in canvas drawing take two circles as arguments and then color stops can be added. You can then apply the gradient as either a fill style or a stroke style.

Conclusion

Knockout text is a cool effect that is easy to implement accessibly, and when we use Houdini to make the backgrounds, we can randomly generate attractive patterns to show through our knocked-out text as an alternative to having to load images. This technique works with the Houdini polyfill and can be used anywhere; the only limit is your imagination! I hope that you found this article useful and that you will please like and share with the world!

Generating Shapes and Images with the CSS Paint (Houdini) API

james south — Fri, 30 Aug 2019 00:04:30 +0000

With the new CSS Paint API (aka Houdini, presumably named after the Melvins album 🤘😁), we can use most of the HTML Canvas drawing methods to draw an image or shape and use it in any CSS property that takes an image. Today I want to show how I used Houdini in my newly-rebuilt portfolio site* to generate border images and speech-bubble-shaped divs. I will also cover using the polyfill, using Houdini with webpack and Babel, and the snags I hit while making the following demos.
*Not currently polyfilled - you will see a fallback unless you view it with Chrome

The basics of using Houdini are as follows: for any CSS property that takes an image, such as background-image, enter paint(workletName) as the value. In a JS file, create an ES6 class for your worklet. In the same file, call the registerPaint method with the workletName and the class name as the arguments. Then, in your main JS file or webpack entry point, feature detect for CSS.paintWorklet. If it's there, which right now is only in Chrome, call CSS.paintWorklet.addModule('./myWorkletClassFile.js'); otherwise, after npm i -S css-paint-polyfill, we can dynamically import the polyfill so it will be a separate webpack chunk, then call addModule. Now we are ready to develop our class and generate some art! The repo for this article:

jamessouth / paint-demo

repo for my first article on the css paint api

paint-demo

Demos from my article on the new CSS Paint (Houdini) API.

Demo 3 (Chrome only)

//(simplified) index.js, webpack entry point
import '../css/demo.scss';

if (CSS.paintWorklet) {
  //not imported so won't be picked up by webpack, which is ok
  CSS.paintWorklet.addModule('./demo.min.js');
} else {
  import(/* webpackChunkName: "css-paint-polyfill" */ 'css-paint-polyfill').then(() => {
    CSS.paintWorklet.addModule('./demo.min.js');
  });
}

index.js

Generating a page's background

Demo 1

So let's start with generating a page's background. Demo 1 is live here.

  <!--index1.html -->
  <body>
    <div class="bg">
      <div>a</div>
      <div>b</div>
      ...
      <div>n</div>
    </div>
  </body>
<!--a fallback for no support or polyfill, then calling paint with demo1 worklet-->
  <style>
    .bg{
      background-image: linear-gradient(black, black);
      background-image: paint(demo1);
    }
  </style>

index1.html

Normally I wouldn't have a <style> tag in the HTML, but there is some kind of caching issue when paint declarations are made in SCSS, at least for worklets that run on page load. To see what I mean, check out Demo 4 in Chrome - the page fails to load every other time you hit reload 😢.

What I believe to be the same caching issue also causes problems for me on Firefox - without dev tools open and Disable Cache checked, the polyfill almost never runs 😭. This could be due to the way I have my demo repo set up, or the hosting on GitHub. The polyfill is pretty reliable on Edge and Safari in my testing.

You will see the background-color on the body when the polyfill doesn't run, not the gradient fallback. The polyfill works by creating an image, so if you resize or re-orient, you will get repeats or cut-offs of the original image formed when the page loaded. Repeats can be prevented with background-repeat set to no-repeat; you will also just see the background-color on the body. Since Chrome has some native support for Houdini, when you resize or re-orient, the worklet runs again and redraws to fit the new dimensions, so watch out for that if you write a complex paint function.

The fake placeholder content in Demo 1 is in a div which will hold the painted background and cover the page. This is a workaround for this bug in Chrome which breaks CSS custom properties set on the body (also apparently html and :root), at least with regard to accessing them in a paint worklet. The remaining CSS is :

//demo1.scss
.bg{
  --stars: 522;
  min-height: 100vh;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.bg div{
  width: 200px;
  height: 200px;
  background-color: coral;
  margin: 1em auto;
  text-align: center;
  font-size: 3em;
}

demo1.scss

A second workaround for the Chrome bug is to use pseudo-content on the body, but then the polyfill doesn't work. A third workaround is to set custom properties on the body anyway, then in the worklet, test for the presence of props. If they're not there (as will be the case with Chrome), set a default value. Anyway, let's get to the worklet!

In our worklet class we can create static helper methods for use in the paint method, where we do our drawing. The paint method takes 1 to 4 arguments:

the canvas context (ctx) on which you call the drawing methods
the dimensions of the element you are drawing on, which we can just destructure as { width, height }
props, which gives you access to CSS custom properties
an args array that holds arguments passed in when you call the paint worklet from CSS, like paint(workletName, arg1, arg2, ...)

As of right now there is no support anywhere for args 😭. Watch Is Houdini ready yet? for updates.

//demo1.js
class Demo1 {
  static get inputProperties() { return ['--stars']; }//access CSS custom property

  static getWidth() {
    return Math.floor(Math.random() * 10) + 1;
  }

  //other static methods omitted but they all just return random numbers

  paint(ctx, { width, height }, props) {
    const stars = props.get('--stars');//use CSS custom property

    ctx.fillStyle = 'rgb(0, 0, 0)';
    ctx.fillRect(0, 0, width, height);//cover all of element

    for (let i = 0; i < stars; i += 1) {//populate stars on black background
      ctx.fillStyle = `rgba(255, 255, 255, ${Demo.getTransparency()})`;//hsla not working in Edge
      ctx.fillRect(Demo.getDistAlongSide(width), Demo.getDistAlongSide(height), 1, 1);
    }

    const ctr = [//all lines start halfway across, just below bottom
      width / 2,
      height + 2,
    ];

    for (let i = 0; i < 700; i += 1) {
      const startSide = i % 4;
      const endSide = (startSide + Demo.getEndSide()) % 4;
      ctx.beginPath();
      ctx.moveTo(...ctr);//spread coordinates as two args
      ctx.lineTo(...Demo.getPoint(endSide, width, height));
      ctx.lineWidth = Demo.getWidth();
      ctx.lineCap = 'square';
      ctx.strokeStyle = `rgba(${Demo.getColor(240, 15)},
        ${Demo.getColor(240, 15)},
        ${Demo.getColor(50, 20)},
        .05)`;//use high opacity for a Roy Lichtenstein/pop-art look
      ctx.stroke();
    }
  }
}
registerPaint('demo1', Demo1);//called with worklet name and class name

demo1.js

Now we are ready to build! As far as I can tell, the Worklet interface only accepts ES6 classes, so a transpiled-to-ES5-function worklet doesn't work, and neither does a class wrapped in a function by webpack (if there's a way to just minify in webpack please answer my question on Stack Overflow). So, I have been processing them outside of webpack. This works fine but makes iterating in development a little slower. Install the babel-minify package as a dev dependency, then in package.json minify your worklet files and place them in your /dist folder:

  //package.json
  "scripts": {
    "lint": "eslint ./src/js",
    "dev": "webpack-dev-server",
    "build": "webpack",
    "prebuild": "rm -f dist/demo1.min.js && npx minify src/js/demo1.js --out-file dist/demo1.min.js..."
// && minify the other worklets etc...
  }

package.json

In my webpack config, I use the CleanWebpackPlugin and delete everything except the minified worklet files:

  //webpack.config.js
  plugins: [
    new CleanWebpackPlugin({ cleanOnceBeforeBuildPatterns: [
      '**/*',
      '!demo1.min.js',
      //other worklet files...
    ] }),

webpack.config.js

To develop the worklet I then move it to the /dist folder and name it demo1.min.js since that is the name I'm using elsewhere. Now when I start webpack-dev-server, /dist is wiped except for the worklet and the development workflow is normal except for having to manually refresh the browser to reflect a change to the worklet. When I'm done, I move the worklet back to source (renaming to demo1.js) and build for production. The prebuild script will minify the worklet and webpack will take care of the rest!

Generating border images

Demo 2

Demo 2 (live site) has a similar structure to Demo 1, just some dummy content:

  <!--index2.html-->
  <body class="border">
    <div>a</div>
    <div>b</div>
    <div>c</div>
    <div>d</div>
  </body>
  <style>
    .border div{
      border-image-source: linear-gradient(blue, blue);
      border-image-source: paint(demo2);
    }
  </style>

index2.html

It is styled similarly to Demo 1 except we are using Houdini to generate border images:

//demo2.scss
.border{
  min-height: 100vh;
  width: 100%;
  background-color: #efefef;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(284px, 1fr));
}
.border div{
  width: 200px;
  height: 200px;
  background-color: coral;
  margin: 1em auto;
  text-align: center;
  font-size: 3em;
  --lines: 343;
  border-image: 82 / 42px / 14;//short for border-image-slice, -width, -outset
  border-style: solid;
}

demo2.scss

Just drawing a bunch of lines that form the image we set as the border image source:

//demo2.js
class Demo2 {
  static get inputProperties() { return ['--lines']; }//CSS custom prop

  //static methods omitted but they all just return random numbers

  paint(ctx, { width, height }, props) {
    const lines = props.get('--lines');

    for (let i = 0; i < lines; i += 1) {
      const start = Demo2.getRandomPoint(width, height);
      const end = Demo2.getRandomPoint(width, height);
      ctx.beginPath();
      ctx.moveTo(...start);
      ctx.lineTo(...end);
      ctx.lineWidth = Demo2.getWidth();
      ctx.lineCap = 'square';
      ctx.strokeStyle = `rgba(${Demo2.getColor(36, 150)},
        ${Demo2.getColor(108, 150)},
        ${Demo2.getColor(12, 200)},
        ${Demo2.getTransparency()})`;
      ctx.stroke();
    }
  }
}
registerPaint('demo2', Demo2);

demo2.js

In my portfolio site, I only used this technique for focus styles and only for a bottom border; here are the SCSS and worklet.

Generating arbitrarily-shaped elements

Demo 3. The blue cloud, its outline, and the exclamation point are masked, the red/yellow/white explosion is drawn, and the background is a CSS conic gradient.

We can use Houdini to carve any shape out of a div with the mask-image property (here is my portfolio's speech bubble worklet). Any element we do this to will still occupy a rectangle in the CSS box model of course, but within its box we can achieve any look we want. For this third demo, I went a little crazy: I re-created the POP! explosion lithograph that American artist Roy Lichtenstein made for the cover of the April 25, 1966, issue of Newsweek. This one only works in Chrome because the polyfill does not seem to like multiple paint values in a single style sheet, but you can use multiple style sheets with one paint invocation each to work around this issue. Demo 3 is live here.

  <!--index3.html -->
  <body class="shape">
    <div id="pop">
      <p><span>P</span><span>O</span>P</p>
    </div>
    <div id="expt"></div>
    <div id="blue"></div>
    <div id="outline"></div>
  </body>
  <style>
    #expt{
      -webkit-mask-image: paint(demo3b);
      mask-image: paint(demo3b);
    }
    #pop{
      background-image: paint(demo3a);
    }
    #blue{
      -webkit-mask-image: paint(demo3c);
      mask-image: paint(demo3c);
    }
    #outline{
      -webkit-mask-image: paint(demo3d);
      mask-image: paint(demo3d);
    }
  </style>

index3.html

Remaining CSS for the cloud and outline:

//(partial) demo3.scss
#blue{
  background-color: #f5f9fc;
  background-image: radial-gradient(#1b4282 30%, #122182 32%, #1a237e12 33%),
                    radial-gradient(#1b4282 30%, #14248e 32%, #1a237e08 33%);
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
}
#outline{
  background-color: #282a2c;
}

demo3.scss

As far as the worklet code goes, there is little difference between masking and drawing. For the exclamation point and cloud outline, either way works since they are solid colors. The red/yellow/white explosion is solid too but I drew it so that I could apply the dark outlines; it does not seem possible to both mask a shape and have an outline around it, which is why the cloud's outline is a separate worklet.

I tried to pattern the blue cloud in the worklet but it wasn't looking good. A nested loop can be used to draw across the width and height of the subject element, but I didn't find a way to keep what is drawn confined within the cloud's boundaries. I also tried the ctx.createPattern() method but I couldn't find a way to get an image into the worklet (no DOM access) to be the pattern source. So, I made the cloud's pattern in CSS then masked the shape in a worklet, thus requiring another worklet to make the outline.

To help draw these shapes I used this tool which generates the draw instructions and adds x- and y-offsets, which I then used to position the shape within the div.

More on the polyfill and conclusion

One last thing I wanted to show with the polyfill was that calling paint in your CSS before other declarations seems to work better than putting it just anywhere. I made Demo 4 to show the aforementioned caching issue when paint is called in SCSS, but also to say that if other declarations come before it the polyfill doesn't seem to run as often, so you just get the body's background color. The cover image of this article is a shot of Demo 4.

//demo4.scss
.cache{
  //put paint declaration first for best results
  background-image: linear-gradient(black, black);
  background-image: paint(demo4);
  --rays: 582;
  min-height: 100vh;
  width: 100%;
}

demo4.scss

Before I discovered this placement made a difference, it took seemingly random declarations like display: block (even though that is already the default on a div) to get the polyfill to run 😖😕😵🤦‍♂️.

Houdini is nascent technology with growing browser support, but we can already do lots of cool things with our backgrounds, borders, and divs. If you can imagine it, you can draw it! I hope you found this article helpful and are inspired and empowered to use paint to push your front-end creativity forward. Please leave a comment and share widely! Thank you!

My First Conference

james south — Mon, 05 Nov 2018 23:00:51 +0000

I decided to go at the last minute, when Progress Software graciously gave me a free ticket (thank you!). Progress was putting on its first jsMobileConf, a two-day, two-track event in Boston. Great speakers, great topics, perfect! I arrived on the first day right before the break - I'm here to learn and meet people and get some job hunt ideas. I have skills, drive, aptitude and a portfolio, but something is missing. I got my badge and a small plate of cut fruit.

There I am, conferencing! Photo courtesy of Cynthia Maxwell @ Progress

I approached a couple of devs and said "Hi". They were from a company that makes software for autism education, and which sponsored happy hour later that evening. I told them what I had been up to in trying to become a developer. We were then joined by a dev who had done some contract work. He suggested I look into same to get some experience, and that I pick something like React and focus on it to get a job, versus my current cover-the-waterfront approach, wherein I've been moving on to new things as much as possible.

Time for some pre-lunch talks! I went to one on binary data in JavaScript. Now, we all know our 1s and 0s, but here we broke down the code that makes up a GIF! Pretty neat! Binary also has some advantages over JSON (serialization speed/size) that can make it a better choice sometimes. Sweet!

Next was a talk about NativeScript, with which you can build native mobile apps using JavaScript. I thought it was so cool I will learn it (and Angular and TypeScript) for my next project. I already have an idea. So I guess that third or fourth React project will have to wait😢. I skipped lunch to take a walk. Don't skip lunch.

The next talk was on webpack and Hot Module Replacement (HMR). Not Reload, REPLACEMENT. This was emphasized😊. I just refactored my portfolio site with webpack, but I used dev-server and not HMR. I didn't have any state to maintain over dev cycles, but if you do, HMR is the way to go. Unless you're using Angular, apparently they don't get along right now (Vue and plain JS are ok). This is being worked on. Anyway, a good and entertaining presentation.

After that was a talk on imposter syndrome. As the (presumably) only attendee without his first dev job, I felt like the ultimate imposter. So this talk was very helpful. It helped me relax a bit and as it would turn out, everybody I talked to was very nice and I felt like I could hold my own with them on the tech topics we discussed. I do know things!

Break time! I think this was when the popcorn came out, which was a great call. Remember, I had skipped lunch. Anyway, I met a consultant and told him about my situation and he felt, with all I have done in my portfolio, the issue might be more about my inability to sell myself rather than my skills and aptitude and drive. He suggested I get some résumé help which I intend to do. If anybody wants to take a look, please let me know!

The final talks of the day were on offline apps and contributing to open-source software (OSS). I have had half a dozen or so PRs accepted, but they're mostly for small stuff like typos, along with some docs and a minor website update. But big or small, OSS is a great way to get involved!

The next day had some interesting sessions: AI chatbots (via NativeChat) and microapps (small programs lazily-loaded on demand inside a container app) in the morning, and in the afternoon a Node.js review, machine-driven refactoring (with ASTs) and machine learning for mobile, where the speaker trained a model on Azure and then used it in his app. Not bad!

At lunch I spoke at length with a dev who reminded me to stick with job hunting, even when it seems like a waste of time to be applying and getting nowhere. I admit I probably stopped looking too soon after passing the CFA exam; I just could not understand why I wasn't getting anywhere. But he said that's just how it is; you have to persevere until you win. It was a great lesson for me.

So after all these presentations and speaking with so many people, I came away from jsMobileConf with a plan: get some résumé help, don't give up, and of course, CODE!!! Thank you, Progress!!!😁