![\"Dropmark](\"/uploads/dropmark-c2a-2.png\")
Congratulations to our app Dropmark for receiving a 2022 Creative Communication Award in the User Interface design / UI & UX Design category. Only 80 pieces were recognized this year, and our team is thrilled to see Dropmark included.
Dropmark brand colors
![\"Dropmark](\"/uploads/dropmark-c2a-3.png\")
Dropmark iOS app design
See more at C2A and visit dropmark.com.
", "url": "https://oak.is/thinking/dropmark-c2a-award/", "image": "https://oak.is/uploads/dropmark-c2a-1.png", "tags": ["Announcement","Buzz","Products"], "date_published": "2023-02-07T14:03:00-05:00", "date_modified": "2023-02-07T14:03:00-05:00" }, { "id": "https://oak.is/thinking/mastodon/", "title": "Launching Mastodon", "content_text": "In light of recent bird news, today seems like an appropriate time to share we’ve been working with the team at Mastodon on an exciting new brand refresh and new website.First launched in 2016, Mastodon is a free and open-source social network designed for the people. It is decentralized and free from corporate ownership, advertising, and time sucking algorithms.Described by Fast Company earlier this year: “The Twitter-like social network, which launched in 2016, aims to cure Twitter’s ills through the magic of decentralization. Instead of operating as one social network, Mastodon relies on a web of interconnected, open-source servers, called “instances,” with the owners of each instance setting their own moderation policies. Some instances even have specific focuses, such as gaming, technology, or art.”As a non-profit organization, Mastodon’s radically different approach to social networking is something the world hasn’t seen at scale — but it’s pretty clear it’s something we need now more than ever. Our goal for this project was to help introduce Mastodon to the masses, and present it as a friendly, viable alternative to its corporate-owned counterparts.The new joinmastodon.org website.A collaboration with the Mastodon team and illustrator Dopatwo, we’re happy to present to you the new joinmastodon.org — “Social networking that’s not for sale.”Summarized by Mastodon founder Eugen Rochko: “Besides explaining Mastodon in a much better way, the new website also provides more information about the project than before. You will find a summary of the project’s origins, our up-to-date numbers, who’s on the team, links to our annual reports and podcast interviews we’ve done on the About Us page, as well as much clearer contact instructions. I’m equally proud of the Branding page, which should ensure much more professional representation of our project in the press.”If you haven’t tried Mastodon for yourself, now is a great time to check it out. Make sure to follow us at @oakstudios@mastodon.social and say hi 👋", "content_html": "In light of recent bird news, today seems like an appropriate time to share we’ve been working with the team at Mastodon on an exciting new brand refresh and new website.
First launched in 2016, Mastodon is a free and open-source social network designed for the people. It is decentralized and free from corporate ownership, advertising, and time sucking algorithms.
Described by Fast Company earlier this year:
“The Twitter-like social network, which launched in 2016, aims to cure Twitter’s ills through the magic of decentralization. Instead of operating as one social network, Mastodon relies on a web of interconnected, open-source servers, called “instances,” with the owners of each instance setting their own moderation policies. Some instances even have specific focuses, such as gaming, technology, or art.”
As a non-profit organization, Mastodon’s radically different approach to social networking is something the world hasn’t seen at scale — but it’s pretty clear it’s something we need now more than ever. Our goal for this project was to help introduce Mastodon to the masses, and present it as a friendly, viable alternative to its corporate-owned counterparts.
![\"joinmastodon.org](\"/uploads/mastodon-website.png\")
The new joinmastodon.org website.
A collaboration with the Mastodon team and illustrator Dopatwo, we’re happy to present to you the new joinmastodon.org — “Social networking that’s not for sale.”
Summarized by Mastodon founder Eugen Rochko:
“Besides explaining Mastodon in a much better way, the new website also provides more information about the project than before. You will find a summary of the project’s origins, our up-to-date numbers, who’s on the team, links to our annual reports and podcast interviews we’ve done on the About Us page, as well as much clearer contact instructions. I’m equally proud of the Branding page, which should ensure much more professional representation of our project in the press.”
If you haven’t tried Mastodon for yourself, now is a great time to check it out. Make sure to follow us at @oakstudios@mastodon.social and say hi 👋
", "url": "https://oak.is/thinking/mastodon/", "image": "https://oak.is/uploads/mastodon-logo.png", "tags": ["Work","Design","Announcement"], "date_published": "2022-10-28T14:45:00-04:00", "date_modified": "2022-10-28T14:45:00-04:00" }, { "id": "https://oak.is/thinking/mechanical-ragger/", "title": "Mechanical Ragger: Print typesetting for the web", "content_text": "The web has never been a place for perfectionism. Typesetting in particular has been a long-neglected facet of web design because we’ve lacked the tools to give long texts the editorial care they need.In print media, text ragging is an established practice to help this, but up to now there have been no tools on the web to do this.We built Mechanical Ragger to give designers some peace of mind; it tidies line endings so that long paragraphs will feel natural to read, and users won’t have to strain to read them.Historically, text ragging is a practice to adjust the uneven line ends of paragraphs. (In a left-aligned paragraph, this is the right side.) We can illustrate how this would enhance readability in a long flow of text:Text without ragging (left) compared to with ragging (right)Without ragging, lines are left to break naturally with the content, where long words at the end of a line can cause irregularities in the shape of paragraphs. This often has the effect of drawing a reader’s attention away from the content. A well-ragged paragraph removes these and brings a sense of rhythm and harmony to the often irregular shapes of latin text, ensuring readers can get through the copy without distraction.Mechanical Ragger brings this print concept to the web, improving the appearance of text blocks by removing these significant gaps and alternating line lengths to enhance the rhythm of the paragraph. To do this, it adds shapes to every other line in a paragraph, causing text to wrap around it:How Mechanical Ragger works behind the scenesDemoView a live demo at: oakstudios.github.io/mechanical-raggerUsageWe built this tool as an extensible JavaScript library; it’s ready-to-use on the web, in React, and easily portable to any framework. Using the web component, the setup can be as simple as:<mechanical-ragger> Lorem ipsum dolor sit amet consectetur adipisicing elit.</mechanical-ragger><script src=\"https://unpkg.com/@oakstudios/mechanical-ragger@latest/web-component-auto-register.js\"></script>ConsiderationsTypesetting is about more than just the shape of the text, though. There are a few related considerations to keep in mind when ragging: Avoid repeating words or shapes at the end of each line in a paragraph. Avoid breaking too many words, which can make readability worse.Advanced typesetting is complex and contextual, requiring a human touch. While the mechanical ragger is a useful aid, we call it mechanical for a reason, and content must be written accordingly.Mechanical Ragger is open-source, on GitHub and as an NPM module. Contributions to add new features and more platform support for the Mechanical Ragger are always welcome.", "content_html": "The web has never been a place for perfectionism. Typesetting in particular has been a long-neglected facet of web design because we’ve lacked the tools to give long texts the editorial care they need.
In print media, text ragging is an established practice to help this, but up to now there have been no tools on the web to do this.
We built Mechanical Ragger to give designers some peace of mind; it tidies line endings so that long paragraphs will feel natural to read, and users won’t have to strain to read them.
Historically, text ragging is a practice to adjust the uneven line ends of paragraphs. (In a left-aligned paragraph, this is the right side.) We can illustrate how this would enhance readability in a long flow of text:
![\"Comparison](\"/uploads/Ragging%20Animation.svg\")
Text without ragging (left) compared to with ragging (right)
Without ragging, lines are left to break naturally with the content, where long words at the end of a line can cause irregularities in the shape of paragraphs. This often has the effect of drawing a reader’s attention away from the content. A well-ragged paragraph removes these and brings a sense of rhythm and harmony to the often irregular shapes of latin text, ensuring readers can get through the copy without distraction.
Mechanical Ragger brings this print concept to the web, improving the appearance of text blocks by removing these significant gaps and alternating line lengths to enhance the rhythm of the paragraph. To do this, it adds shapes to every other line in a paragraph, causing text to wrap around it:
![\"Visual](\"/uploads/Exclusion%20Example.svg\")
How Mechanical Ragger works behind the scenes
![\"Mechanical](\"/uploads/mechanical-ragger-demo.png\")
View a live demo at: oakstudios.github.io/mechanical-ragger
We built this tool as an extensible JavaScript library; it’s ready-to-use on the web, in React, and easily portable to any framework. Using the web component, the setup can be as simple as:
<mechanical-ragger> Lorem ipsum dolor sit amet consectetur adipisicing elit.</mechanical-ragger><script src=\"https://unpkg.com/@oakstudios/mechanical-ragger@latest/web-component-auto-register.js\"></script>Typesetting is about more than just the shape of the text, though. There are a few related considerations to keep in mind when ragging:
Advanced typesetting is complex and contextual, requiring a human touch. While the mechanical ragger is a useful aid, we call it mechanical for a reason, and content must be written accordingly.
Mechanical Ragger is open-source, on GitHub and as an NPM module. Contributions to add new features and more platform support for the Mechanical Ragger are always welcome.
", "url": "https://oak.is/thinking/mechanical-ragger/", "image": "https://oak.is/uploads/Frame%202%20(3).png", "tags": ["Development","Design","Hacks"], "date_published": "2022-02-28T13:33:00-05:00", "date_modified": "2022-02-28T13:33:00-05:00" }, { "id": "https://oak.is/thinking/working-remotely-covid-19-principles/", "title": "Working remotely — COVID‑19 principles", "content_text": "We recently came across this Tweet from a Canadian federal government worker and really connected with its principles.Working Remotely — COVID-19 Principles You are not “working from home”, you are “at your home, during a crisis, trying to work”. Your personal physical, mental, and emotional health is far more important than anything else right now. You should not try to compensate for lost productivity by working longer hours. You will be kind to yourself and not judge how you are coping based on how you see others coping. You will be kind to others and not judge how they are coping based on how you are coping. Your team’s success will not be measured the same way it was when things were normal. According to the author of the Tweet, these principles originated with Parks Canada and were shared within the Canadian Wildlife Service. Thanks Canada 🇨🇦", "content_html": "We recently came across this Tweet from a Canadian federal government worker and really connected with its principles.
You are not “working from home”, you are “at your home, during a crisis, trying to work”.
Your personal physical, mental, and emotional health is far more important than anything else right now.
You should not try to compensate for lost productivity by working longer hours.
You will be kind to yourself and not judge how you are coping based on how you see others coping.
You will be kind to others and not judge how they are coping based on how you are coping.
Your team’s success will not be measured the same way it was when things were normal.
According to the author of the Tweet, these principles originated with Parks Canada and were shared within the Canadian Wildlife Service. Thanks Canada 🇨🇦
", "url": "https://oak.is/thinking/working-remotely-covid-19-principles/", "tags": ["Work"], "date_published": "2020-05-19T14:18:00-04:00", "date_modified": "2020-05-19T14:18:00-04:00" }, { "id": "https://oak.is/thinking/this-app-is-a-light-meter/", "title": "This App Is A Light Meter", "content_text": "We recently got to work with Kelli Anderson, lo-fi paper design extraordinaire, to build a new partner app for her book: This Book Is A Camera.The app is designed to take the guesswork out of pinhole photography, measuring the amount of light and interpreting that data into a timeframe of how long it would take for a balanced photo to be captured.There are already a few apps to test light, but they’re either not designed with pinholes in mind, used to measure the amount of light needed for different plants, or used for gauging how far away lightning is.Kelli wanted the app to perform three functions: Calculate the exposure time for a pinhole camera with an aperture of f/228 using film paper with an ISO of 10 (exactly the specs of Kelli’s pop up camera) A built-in timer so you wouldn’t have to switch to other apps to countdown the seconds to the ideal exposure An inverter to capture the negative created by the pinhole and turn it into a photo you could save and shareSo we hit the books - specifically, the five copies of This Book is a Camera that Kelli provided us. Where other books might shy away from the more technical aspects of science, Kelli’s books showcase every detail (and use only paper to do so)!The app follows Kelli’s ethos by offering a technically precise set of tools in a clear, straightforward way. Each utility in the app directly complements a step of the pinhole process, and the UI takes colors and visuals from the book to unite the digital experience with the analog tool.We also studied the iOS Camera app, because many people are already familiar with the visual vocabulary established by Apple. Full-screen gestures and haptic feedback give the photographer a clear understanding of the app’s workflow.Our task was to design an algorithm that accurately approximated exposure times, to do that we needed to do some math.Since photo paper has a certain sensitivity to photon interactions (it’s albedo), the higher the luminosity, the lower the exposure time. This luminosity value comes from the device’s camera, and we knew it was between 0 and 1. We required that our model fit the following conditions: for the exposure time function TT(l) = 0When l = 1, andT(l) = ∞when l = 1, for somel ∈ L ∈ [0, 1]This infinity represents the fact that in complete darkness no exposure can take place – the limit of T as l goes to zero is infinity, also suggesting a higher-order denominator. More importantly, this suggests that there is a vertical asymptote that bounds the function to the left – which means that our model will be highly non-linear.Initially, we tried different power expansions e, tan, and Taylor polynomials, and found that some coefficient multiplication of e was an (initially) acceptable metric for our model. The eccentricities (how curvy the curve is) of powers of e were hard to tame, and the resulting model varied widely across different devices. What we had yet to account for were variations in device hardware that lead to different luminosity calculations, which was problematic.So we had to go back to the drawing board.Instead, our final model approximates the exposure time given the luminosity of the entire frame and computes this at smaller f-stop numbers, which traditionally have less asymptotic variance. We then scale this value to the camera’s f-stop and device’s iso, which share a squared-inverse relationship. This performs consistently across all devices – and shows the best models are simple and not overengineered or overthought.Hat tip to Eric Hagan, Awoisoak, and those at Stanford for their open source equations which helped us along the way.The app was written in Swift for iPhone and iPad and relies heavily on the AVCaptureDevice framework to access the camera feed, as well as the Core Image framework for the real-time filters. We also used Photoshop and Pixelmator to create the bitmaps used in the app, and Paintcode for the various vector graphics.QA for the light meter was very involved, but it was so much fun! We wanted to make sure our app was precise in varied lighting conditions and worked accurately according to the book’s specifications. So we tested it — a lot.We also had to spend time exposing the pictures that we took. Unsurprisingly, our office doesn’t have a dark room, but we do have a utility room on our floor that we could shut Alex in. Kelli’s book suggests developing with instant coffee and washing soda if you don’t have the proper developer, so that’s what we used. It works brilliantly - the only problem was the smell. Imagine the smell of a cheap plastic Halloween mask being burnt and you’ve got it. It still haunts our nostrils.This App Is Lit ™ It’s got a cute website, simple UI, and even a countdown timer to the perfect balanced exposure. Use it and let us know what you think.", "content_html": "The app is designed to take the guesswork out of pinhole photography, measuring the amount of light and interpreting that data into a timeframe of how long it would take for a balanced photo to be captured.
There are already a few apps to test light, but they’re either not designed with pinholes in mind, used to measure the amount of light needed for different plants, or used for gauging how far away lightning is.
Kelli wanted the app to perform three functions:
So we hit the books - specifically, the five copies of This Book is a Camera that Kelli provided us. Where other books might shy away from the more technical aspects of science, Kelli’s books showcase every detail (and use only paper to do so)!
![\"TAIALM-5.gif\"](\"/uploads/TAIALM-5.gif\")
The app follows Kelli’s ethos by offering a technically precise set of tools in a clear, straightforward way. Each utility in the app directly complements a step of the pinhole process, and the UI takes colors and visuals from the book to unite the digital experience with the analog tool.
We also studied the iOS Camera app, because many people are already familiar with the visual vocabulary established by Apple. Full-screen gestures and haptic feedback give the photographer a clear understanding of the app’s workflow.
Our task was to design an algorithm that accurately approximated exposure times, to do that we needed to do some math.
Since photo paper has a certain sensitivity to photon interactions (it’s albedo), the higher the luminosity, the lower the exposure time. This luminosity value comes from the device’s camera, and we knew it was between 0 and 1. We required that our model fit the following conditions: for the exposure time function T
T(l) = 0
When l = 1, and
T(l) = ∞
when l = 1, for some
l ∈ L ∈ [0, 1]
This infinity represents the fact that in complete darkness no exposure can take place – the limit of T as l goes to zero is infinity, also suggesting a higher-order denominator. More importantly, this suggests that there is a vertical asymptote that bounds the function to the left – which means that our model will be highly non-linear.
Initially, we tried different power expansions e, tan, and Taylor polynomials, and found that some coefficient multiplication of e was an (initially) acceptable metric for our model. The eccentricities (how curvy the curve is) of powers of e were hard to tame, and the resulting model varied widely across different devices. What we had yet to account for were variations in device hardware that lead to different luminosity calculations, which was problematic.
![\"TAIALM-2.jpg\"](\"/uploads/TAIALM-2.jpg\")
So we had to go back to the drawing board.
Instead, our final model approximates the exposure time given the luminosity of the entire frame and computes this at smaller f-stop numbers, which traditionally have less asymptotic variance. We then scale this value to the camera’s f-stop and device’s iso, which share a squared-inverse relationship. This performs consistently across all devices – and shows the best models are simple and not overengineered or overthought.
Hat tip to Eric Hagan, Awoisoak, and those at Stanford for their open source equations which helped us along the way.
The app was written in Swift for iPhone and iPad and relies heavily on the AVCaptureDevice framework to access the camera feed, as well as the Core Image framework for the real-time filters. We also used Photoshop and Pixelmator to create the bitmaps used in the app, and Paintcode for the various vector graphics.
![\"TAIALM-3.jpg\"](\"/uploads/TAIALM-3.jpg\")
QA for the light meter was very involved, but it was so much fun! We wanted to make sure our app was precise in varied lighting conditions and worked accurately according to the book’s specifications. So we tested it — a lot.
We also had to spend time exposing the pictures that we took. Unsurprisingly, our office doesn’t have a dark room, but we do have a utility room on our floor that we could shut Alex in. Kelli’s book suggests developing with instant coffee and washing soda if you don’t have the proper developer, so that’s what we used. It works brilliantly - the only problem was the smell. Imagine the smell of a cheap plastic Halloween mask being burnt and you’ve got it. It still haunts our nostrils.
It’s got a cute website, simple UI, and even a countdown timer to the perfect balanced exposure. Use it and let us know what you think.
![\"TAIALM-4.jpg\"](\"/uploads/TAIALM-4.jpg\")
After all, it is the birthplace of everyone’s favorite cruciferous vegetable: the brussel sprout. Belgium is known for its beer, fries, and waffles - all we could need for seven days in Europe.
The only spanner in the works was that Tylee had to get a passport in a government shut down. We were hugely impressed by the speed in which she had that in her hands - just ten days from application to delivery.
Thankful that Tylee would indeed be joining us we set off from snowy New York stopping over in Frankfurt before arriving in Brussels. The redeye flight goddess smiled down upon us after canceling our initial flight (who knows what we did to incur that wrath), and we each ended up with our own row of seats. Jojo made herself a rather impressive blanket fort, while Alex was too busy playing his Nintendo Switch to sleep at all.
![\"Overlooking](\"/uploads/oakweek-8.jpg\")
We arrived in Brussels bleary-eyed and went to our Airbnb HQ to meet Daniel and Joseph who traveled separately. Half the team stayed in the HQ apartment and the other half around the corner in a satellite apartment.
To combat the jetlag, we knew we had to stay up for as long as possible. So, after hunting down some lunch at a cute cafe, we went en masse to the supermarket. We somehow ended up with a plethora of snacking options and a fair amount of booze to trudge back to HQ.
After unpacking and unwrapping some of our purchases, we sat down to talk about what we wanted to achieve this week. Once we had laid out our plan of attack we ordered a Mediterranian feast, had a few more rounds of beer, and headed to bed.
![\"Alex](\"/uploads/oakweek-2.jpg\")
Friday was the day of Git Merge, and we were pumped. We loved the opening address by Deb Nicholson, Director of Community Operations at the Software Freedom Conservancy, who set the tone of the day masterfully and spoke about the importance of diverse voices.
We also enjoyed hearing from Belén Barros Pena, Interaction Designer at Open Source Design, who talked about how to teach designers Git. Belén also spoke brilliantly about patience and meeting someone where they’re at, which resonated across our team and provoked interesting conversations afterward.
While we were in the area, we decided to take the last tour of the day at Brasserie Cantillon to sample their lambic beer which has been brewed in the same way for over 120 years. We then stumbled to Moeder Lambic for some more libations before eating a marvelous dinner at Fin de Siecle - including vegan moussaka for our plant-based oak buds. We then went for some very fancy cocktails (and some less fancy ones at the Hard Rock Cafe for the lolz).
![\"The](\"/uploads/oakweek-3.jpg\")
The next day we reconvened at HQ to get down to work. You’ll be able to see what we’ve been up to sooner rather than later over on Dropmark, but until then you’ll have to wait. Jojo cooked lunch of corn soup with avocado, accompanied by freshly baked baguettes with French salted butter. The bread in Europe is unbelievable, and we ate at least three baguettes every day that we were there (we even brought a baguette each on the plane back to Brooklyn).
That evening we put Alex’s Nebula to good use to watch Drag Race All-Stars and were gagged to find out who Naomi decided to eliminate.
We found out Jojo’s hidden talent of being able to get an oreo from her forehead to her mouth without her hands - she has a 100% success rate. Later that evening we went dancing at Fuse, an institution of Brussels night scene which is older than some of our teammates.
![\"Tylee](\"/uploads/oakweek-5.jpg\")
Unsurprisingly, we felt somewhat tender the next day, even after our late night excursion to shove fried food into our mouths, so we didn’t rouse until late afternoon. We managed a little bit of work while Tylee cooked two lots of chili for the herbivore and carnivore teammates. It. Was. So. Good. Mad props to Tylee, who managed to make them without chili powder, which we couldn’t find across the whole city.
The next morning we were up early to talk about our hopes and dreams, yes, really. We’re cooking up some pretty épicé (that’s French for spicy) updates for Dropmark this year and some big plans for the future. After we chatted through our ideas, we all took a moment for #selfcare with charcoal sheet masks.
![\"Canal](\"/uploads/oakweek-7.jpg\")
That afternoon we took to the streets of Brussels to see what we could see. Tylee ended up finding the chore coat of her dreams in a vintage store, and Nikhil bought an array of records to fulfill all his vinyl fantasies. We all spent a considerable amount of time trying on all the spectacles in Polette before finding out we had to buy the frames online.
After chowing down on more Belgian specialties (in this case beer and fries), we went to try and escape a Mayan Temple at Enygma. Thankfully we did manage to get out - but it was close with only 4 minutes to spare!
![\"Daniel](\"/uploads/oakweek-4.jpg\")
On our penultimate day, we took a trip on the train to see the picturesque town of Bruges. Bruges was gorgeous. We took a walking tour around the city seeing all the chocolatiers, cobbled alleyways, and old structures - one of the gates we walked under was over 1200 years old!
We also found the best Belgian waffles in a cobbled square that made the freezing fingers entirely worth it. After perusing the town, we settled in for pizzas before taking the train back to Brussels for more wine.
![\"Nikhil](\"/uploads/oakweek-6.jpg\")
The next morning we were up early to pack and eat a breakfast of all the leftover food including vegan chili, fried eggs, and a cucumber salad prepared by Alex. It was a weird array, but somehow it worked. We hustled to the airport, fought with security and eventually made it onto the plane back to a blustery Brooklyn tired, but satisfied with another successful Oakweek.
Highlights: Polaroids, waffles, team facemasks, sampling all the Belgian beer and far too many baguettes, talking about our hopes and dreams, vegan mousaka, escaping the Mayan Temple, Alex’s Nebula, Ru Paul’s Drag Race All-Stars, losing Tylee down every cute alleyway, the Oreo challenge, disco balls, wearing our Oak shirts, wandering around a medieval city, and an excessive amount of chocolate.
![\"Team](\"/uploads/oakweek-9.gif\")
Moved into a bigger office at Industry City with more desks, more plants, and more room for activities (kicking off our Nintendo Switch addiction).
Launched CreativeGuild with our friends CreativeMornings. In just nine months they already have over 650 companies on the CreativeGuild.
Released a bunch of new updates for Dropmark iOS.
Created an open-source Swift library to standardize the drag & drop experience on iOS — read all about how you can utilize it for your projects.
Managed to convince Alex, our iOS Developer, that New York is where it’s at after two years working remotely in LA. Having him in the office is ship-tastic.
Continued to roll out Enterprise offerings for Dropmark and Siteleaf users (get in touch if you’re interested!).
Got to interview super cool people that use Dropmark for our blog, including the Wimpy Kid team, Art Director Tim Lampe, and New Zealand flower farmer Sarah Hawkness.
Went through a significant amount of photo paper to create a pinhole camera timer for the wonderful Kelli Anderson which will hit the app store in January.
Escaped a bunker in less than 40 minutes at Brooklyn Escape Rooms.
Added some new faces to our team including Tylee Marsh (best socks in the office), Daniel Gamage (who may well be a magician), and Hannah Carnes (a certified bug buster). We also hosted some super talented interns: Aiden Symes, Sean Catangui, and Nikhil Misra.
Visited Portland, Oregon for a Dropmark client meeting and eat Voodoo Donuts.
Office dog Cooper had a photo shoot at the Petco in Industry City because he is (mostly) a good boy.
SSL’d all the things! All of our products and websites are now secured behind HTTPS.
Went to see the Book of Mormon on Broadway, and then spent the next week singing Spooky Mormon Hell Dream.
Cried our hearts out at Keith Yamashita’s Creative Mornings lecture in November. Hands down one of the best things we’ve seen all year.
Danced our way through the Dance Dance Revolution machine and scored all the baskets at Industry City’s arcade.
Added HEIF image support to Dropmark — to go along with our fancy new iPhones that are too big for our hands.
Blogged about the importance of offline hobbies, what learning means to us, and what happens when you spend $200 on social media advertising.
We created this gift guide so you can focus on merrymaking this holiday season.
![\"giftguide-2.jpg\"](\"/uploads/giftguide-2.jpg\")
![\"giftguide-3.jpg\"](\"/uploads/giftguide-3.jpg\")
Happy Holidays from the Oak team!![\"tinsel-dog.gif\"](\"/uploads/tinsel-dog.gif\")
Learning isn’t something that stops the moment someone hands you a diploma. It’ll come to no surprise that some of our team studied math and computer science, but we’ve got a fair few art school kids too.
Unsurprisingly, I’m one of the art school kids (this is Jojo by the way). I graduated from Central St Martins in 2013 from a BA in Theatre Design — undoubtedly super useful in Tech. As you can imagine there was a fair amount of self-directed learning along the way thanks to books like Inspired: How To Create Products Customers Love (which I’d highly recommend) and courses on Treehouse. I wanted to explore education with Oak’s three newest team members because they all have different backgrounds at the intersection of art and code.
![\"Education-1.jpg\"](\"/uploads/Education-1.jpg\")
My first experience with designing was making signatures for online gaming forums, but I didn’t think it was design back then. Design has always been a part of me because of being immersed in skateboarding, music, and collecting t-shirts. It was probably meant to be, and the rest is history.
Development started over the last year. I had tinkered with code before, but it didn’t stick until I understood the power and satisfaction that comes with building things yourself.
I was drawn to digital product/interactive design, but it wasn’t really covered in my undergrad. I spent over three years doing visual design, mostly on the marketing side. It was draining because I’m the sort of person that wants to dive into everything, and that’s not possible in that side as much. I started looking at UX programs when I found out that Parsons was creating a new Communication Design program. I was particularly excited because it was only one year and explored the future of graphic design for screen based mediums. A lot of programs generally focus on either graphic design or interaction design on a high level, but the blend of both was much more appealing. My experience at Parsons made me fall in love with learning again. I’m not ruling out the possibly revisiting getting another graduate degree, but that will be WAY in the future.
The Parsons Communication Design Staff were a massive influence on me, even though my time there was relatively short. In particular, Yujune Park was the first person to teach me how to think conceptually about design. Not just make something look pretty, but what it means, and what you’re trying to evoke through design.
![\"Education-2.jpg\"](\"/uploads/Education-2.jpg\")
I realized right before I graduated with my first degree that I should get a job that I will be happy going into day in and day out, and for me, that meant being creative. I have always been a visually oriented person, I just never realized that I could make it a career until I was in school for Psychology.
I had one design professor that was hot and cold with students because of how tough she could be. I loved her critical nature though. She taught me a lot about grit, how to design without having my hand held, and how to work hard to find interesting solutions.
At school, my favorite subjects were Art and Biology (but let’s be honest, biology is the art of the hard sciences). As a kid, I would study the packaging of my favorite products. I would read all of the copy and scrutinize the images. Now I’d say my tastes are a little more discerning; I’m particularly inspired by Natasha Jen and Donald Norman.
![\"ezgif-2-b091d25fc506.gif\"](\"/uploads/ezgif-2-b091d25fc506.gif\")
I got my start developing when a college roommate introduced me to the fantastic bento.io, a curated list of free online coding education resources. That led me down the traditional web development track. After building some websites for friends and family, I noticed that I cared a lot about the look and feel of what I was creating. Applying a sort of engineering/mathematical logic to the aesthetics of my projects was, and still is, one of my favorite things to do.
My favorite subject was math, not because of the topics necessarily, but because of the group problem solving our teacher, Mr. Lindemann, had us do. I always walked out of that classroom feeling accomplished.
Not understanding things, in any context, is terrifying. To this day I still have nightmares of math homework. I was privileged enough to have teachers to guide me through those unfamiliar situations; they walked me through something that seemed impossible over and over again until it became evident and fun. I think spreading that feeling of transforming fear to fun is one of the most satisfying and important things I can do.
I had a lot of teachers and professors make a significant impact on me, in particular, my poetry professor Gabby Calvocoressi gave me a journaling technique of writing down five things that I was the only person in the world to see each day. It’s helped me think about and process my day to day life.
Nikhil: Too many things — I want to get even better at development, I’m into typography and really want to learn more about type design. Outside of the design sphere, I’ve been learning to DJ and make music. All in all, this might take me more than a year!
Sean: On the theoretical side of things, I’d love to strengthen my grip on animation so that I can become a better storyteller with my designs. As for pragmatic skills, I want to master the art of sharing my work on social media. I’d love to have more discussion about the work I make, and I need to conquer my fear of publicizing my work to do that.
Tylee: I have SO many things to learn on my list. But, I want to have a better handle on HTML, CSS, and Javascript in the next year. I think those are essential tools for the type of design I want to make.
![\"Education-3.jpg\"](\"/uploads/Education-3.jpg\")
Cooper (Oak Studio’s resident doggo) is hoping to learn where we keep the snacks.
![\"Gif](\"/uploads/giphy-5-1ea2a0.gif\")
During development of Dropmark for iOS, we saw the opportunity for a more natural way to interact with your items: drag and drop.
Back in June 2017, Apple unveiled the drag and drop API for iOS 11, and we instantly fell in love with the inter-app drag and drop gestures on the iPad Pro. It’s so easy. You can pick up text, a link, or even an entire file, and place it exactly where you want it in your Dropmark collection.
Currently, Apple’s official API is the sole option for systemwide drag & drop. This bit of magic is limited to people with the newest iPad Pros running the latest iOS. We challenged ourselves to broaden this experience for all iOS users.
We are proud to announce: StackedCollectionView. An open-source Swift library to standardize the drag & drop experience.
![\"Gif](\"/uploads/Demo.gif\")
StackedCollectionView is a UICollectionViewFlowLayout subclass, providing an easy way to integrate drag & drop into your existing collection view. This structure peacefully coexists with iOS 11’s drag & drop, enabling you to support drag & drop on older operating systems, while still making use of Apple’s API on iOS 11.
Apple introduced a rearrangeable home screen way back in iOS 1.1.3, and iOS 4.0 saw the addition of folders. Organizing and classifying apps quickly became a centerpiece of the iOS experience.
![\"Gif](\"/uploads/Home%20Screen.gif\")
By emulating gestures from the iOS home screen, our app users could intuitively use familiar gestures to organize their content.
![\"Gif](\"/uploads/technical.gif\")
StackedCollectionView takes action as soon as an item is long pressed. The thumbnail snaps to the user’s finger, and our drag session begins.
As the user traces the screen, we analyze the underlying cell for trigger points (quickly to maintain a smooth frame rate on older devices). Like the iOS home screen, we focused on a nuanced “pressure zone” around each item. When the finger pauses briefly above the outer 30% of an item’s bounds, a “reorder” gesture is triggered and the underlying item shifts of the way.
When the user pauses within the inner 70%, we trigger a “stack” gesture, and the cluster below animates to receive our drag item.
When the finger lifts off the screen, animations are committed, and the item settles into place. A set of delegate methods provide hooks to update your local model, send a network request, or add extra animation awesomeness.
![\"Gif](\"/uploads/Magic.gif\")
We love open source at Oak, and we’re excited to share one of our favorite parts of Dropmark for iOS. Grab the library and sample app on GitHub, and let us know if you make anything radical 🎉
", "url": "https://oak.is/thinking/accessible-drag-and-drop/", "image": "https://oak.is/uploads/giphy-5-1ea2a0.gif", "tags": ["Experiments","Work","Development"], "date_published": "2018-06-20T12:46:00-04:00", "date_modified": "2018-06-20T12:46:00-04:00" } ] }