Solving a small problem for teachers

Jon Lehman — Tue, 29 Sep 2020 22:03:50 +0000

I've been working on several side projects over the past couple weeks but took a quick break to try to solve a pain-point that I have heard several teacher friends and family members mention. COVID-19 has continued to bring uncertainty to all of our lives but teachers particularly have had to deal with quite a bit of change. Schools have been reopening this school year with all new protocols and policies for handling education during a pandemic. Many teachers find themselves teaching in-person one day and remote the next. One small challenge I have heard from teachers is turning a physical worksheet into a digital worksheet that students can complete remotely. This is a particular challenge for those teachers that may be a little less tech-savvy.

Scan 2 Slides is a Google Script web app I put together to help minimize the time it takes to go from physical worksheet to Google Slides worksheet. After interviewing several teachers I found that most of the schools in my area were utilizing Google Classrooms for remote learning and Google Slides tended to be the tool of choice for actual assignment creation and handout. Currently, teachers are a bit on their own when it comes to converting an existing physical worksheet into a Google Slides doc. Some of them email scans from a school scanner to their email, go to a computer and upload the scans to their Google Drive, insert the worksheet pages into a Slides doc, and then finally create each text box individually so students can insert their text.

With Scan 2 Slides all teachers have to do is mark where they would like students to be able to input text (known as a "text box" in Google Slides) using a highlighter, snap a scan on their phone, and upload to Scan 2 Slides. Scan 2 Slides then automatically creates a Google Slides doc for them with a slide for each worksheet, inserts the images (while correctly sizing and centering), scans the worksheets to locate where Google Slide text boxes should be inserted, and then inserts the text boxes! Scan 2 Slides removes 80% of the workload from this task and they can do the whole process just using a phone! If the teacher is a bit more tech-savvy they don't even have to use a physical highlighter, they could instead use a default app like "Markup" to highlight where the text boxes should go.

If you're interested in giving Scan 2 Slides a test run, check it out here: scan2slides.jonlehman.me. Just note that you will be asked to sign into a Google account and grant the tool necessary permissions.

If you'd rather not grant the tool Google account permissions, check out the demos below:

If Scan 2 Slides proves to be useful for teachers I will continue adding features and customizations to the tool. I would love to add some additional settings to allow teachers to further customize how slide pages, text boxes, and presentations are styled and formatted. It would also be interesting to experiment with different types of text box scanning, instead of just looking for color perhaps the tool could also look for certain shapes or symbols.

This post was originally published on my personal blog/portfolio site

Drive Webpage Changes with Figma

Jon Lehman — Mon, 14 Sep 2020 13:30:36 +0000

A couple weeks back I finally had a chance to mess around with the newest version of the Figma API. I put together this little demo for internal-Theorem knowledge-sharing.

Basically, I designed a quick landing page in Figma, coded out that design to a live page but synced up the styles, images, text, etc to the Figma document. This way, as a user makes changes to the landing page they will see their changes reflect on the live web page, responsiveness and all!

Obviously, it would be a pretty bad idea to use this as-is in production (because of slow loading, SEO, security, etc). However, this experiment has given me a taste of some of what could be possible by harnessing the power of Figma and their API so I wanted to share! Enjoy!

Floating Label Experiment

Jon Lehman — Sat, 25 Jul 2020 19:40:42 +0000

I put together this quick floating label experiment to see if there was an opportunity to improve upon many of the floating label patterns out there.

In the experiment I wanted to see if there was a way to emphasize the input label a bit more, especially when focused. Below is what I came up with. feel free to fork/remix the codepen and improve upon it as needed.

Or, if you'd like check it out on dribbble!

I figure this likely isn't an incredibly original direction but just wanted to share the experiment!

This experiment was originally posted on my personal site/block here.

DEV Community: Jon Lehman

Solving a small problem for teachers

Drive Webpage Changes with Figma

Floating Label Experiment