DEV Community: Rob Kleiman

Exploring the Wonders of the Animal Kingdom with JavaScript

Rob Kleiman — Sat, 15 Jun 2024 14:22:57 +0000

As part of my coding journey, I’ve been diving into the key concept of loops in JavaScript. Recently, I had the opportunity to build a small web app that reminds me of a digital encyclopedia or Pokédex, but instead of featuring fictional creatures, it showcases real animals from around the world. It’s been an great experience learning how to manipulate data and create interactive user interfaces.

At the heart of this project is an array of objects called animalsArr, which contains information about various animals, including their names, classes (mammal, bird, reptile), diet (herbivore or not), continent of origin, YouTube video embed codes, and descriptions. It’s like having a mini-encyclopedia right at your fingertips!

To bring this data to life, I used JavaScript to dynamically generate a grid of clickable animal images. Here’s a snippet of the code that makes it happen:

for (let i = 0; i < animalsArr.length; i++) {
    const animal = animalsArr[i];
    const filename = animal.name.toLowerCase().replace(' ', '-');
    const img = `<img onclick="swapImage(${i})" src="images/${filename}.jpg" />`;
    animalPicDiv.innerHTML += img; 
}

In this loop, we iterate through each object in the animalsArr array. For each animal, we create an <img> tag with the appropriate file name (derived from the animal’s name) and add an onclick event that calls the swapImage function with the current index i. This allows us to keep track of which animal was clicked.

The real magic happens in the swapImage function:

function swapImage(i) {
    const animal = animalsArr[i];
    animalNameHeading.textContent = animal.name;
    animalDescriptionParagraph.textContent = animal.desc;
    videoPlayerDiv.innerHTML = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${animal.youTube}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
}

When an animal image is clicked, this function is called with the corresponding index i. It retrieves the animal object from the animalsArr array and updates the heading and description elements with the animal’s name and description. Additionally, it dynamically generates an <iframe> tag to embed the animal’s YouTube video, using the youTube property from the object.

It’s cool to see how a simple array of objects can be transformed into an engaging and informative web app. The power of loops and JavaScript’s ability to manipulate the DOM make it possible to create interactive experiences like this.

Building this animal encyclopedia has been a great exercise, and it’s just the beginning. The possibilities are endless when it comes to creating dynamic web applications using JavaScript. I’m stoked to explore more advanced concepts and build even more exciting projects in the future.

If you’re curious about the code behind this project or want to learn more about loops and working with arrays of objects in JavaScript, feel free to check out the complete source code on the repo! Happy coding, and keep let’s keep exploring the wonders of the animal kingdom!

Shuffling the Deck: Learning Loops and Nested Loops in JavaScript

Rob Kleiman — Fri, 14 Jun 2024 15:54:55 +0000

I’ve been diving into the world of JavaScript and having a blast revisitinvg different programming concepts. One particularly interesting and important topic has been loops and nested loops, which allow you to automate repetitive tasks and work with complex data structures.

To put these concepts into practice, our class decided to create a fun project that simulates shuffling a deck of cards and dealing a poker hand. It’s a great way to see how loops and nested loops can be used to generate and manipulate data in a practical scenario.

Let’s take a closer look at the code and break down what’s happening:

const kinds = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
const suits = ["Diamonds", "Hearts", "Spades", "Clubs"];
const deck = [];

First, we define two arrays: kinds represents the different card values (2–10, Jack, Queen, King, Ace), and suits contains the four suits (Diamonds, Hearts, Spades, Clubs). We also initialize an empty deck array to store our generated cards.

for (let i = 0; i < kinds.length; i++) {
for (let j = 0; j < suits.length; j++) {
const card = {
suit: suits[j],
kind: kinds[i],
name: kinds[i] + " of " + suits[j],
fileName: kinds[i] + "-of-" + suits[j] + '.png',
value: kinds[i] === "Jack" || kinds[i] === "Queen" || kinds[i] === "King" ? '10' :
kinds[i] === "Ace" ? '11' : kinds[i]
};
deck.push(card);
}
}

Here’s where the magic happens! We use a nested loop to generate all possible combinations of card kinds and suits. The outer loop iterates over the kinds array, while the inner loop iterates over the suits array. For each combination, we create a card object with properties like suit, kind, name, fileName, and value. The value property is determined based on the card kind, assigning a value of ‘10’ to face cards (Jack, Queen, King) and ‘11’ to an Ace. Finally, we push each card object into the deck array.

function dealCards() {
const hand = [];
const dealtCards = [];
while (hand.length < 5) {
const i = Math.floor(Math.random() * 52);
if (!dealtCards.includes(i)) {
hand.push(deck[i]);
dealtCards.push(i);
}
}
const imgs = document.querySelectorAll("img");
for (let i = 0; i < 5; i++) {
imgs[i].src = "images/" + hand[i].fileName;
}
}

The dealCards function is responsible for randomly selecting five cards from the deck array to form a poker hand. We use a while loop to keep selecting random cards until we have a hand of five unique cards. The Math.floor(Math.random() * 52) expression generates a random index between 0 and 51 (inclusive) to select a card from the deck. We keep track of the dealt card indices in the dealtCards array to ensure we don’t deal the same card twice.

Finally, we use querySelectorAll to select all the <img> elements on the page and update their src attributes with the corresponding card image file names.

document.querySelector('button').addEventListener('click', dealCards);

To trigger the card dealing process, we add a click event listener to a button element. Whenever the button is clicked, the dealCards function is called, and a new poker hand is dealt and displayed on the page.

This project has been a fun and engaging way to explore loops, nested loops, and manipulating data with JavaScript. It’s amazing to see how a few lines of code can simulate the complex process of shuffling a deck of cards and dealing a random hand.

As I continue on my coding journey, I’m excited to tackle more challenging projects and deepen my understanding of programming concepts. The power and versatility of JavaScript never cease to amaze me, and I can’t wait to see what other exciting things I’ll be able to build!

Happy coding, everyone! Remember, every line of code is a step towards mastering the craft of programming. Keep learning, keep practicing, and most importantly, keep having fun!

Using FFmpeg & the Command Line To Repurpose Video Content into a Podcast — Rob Kleiman

Rob Kleiman — Fri, 14 Jun 2024 00:00:58 +0000

The Adventure Begins

Embark on a thrilling journey with me as we delve deep into the heart of podcast hacks, armed with a tool known as FFmpeg. In this post, I’ll guide you through a quick way I pulled multiple MP3 files from a YT playlist and merged them to seamlessly string together cohesive episodes for my audio podcast, Megashift.

So here’s a scenario: you recorded video interviews, published them into a playlist on YouTube, but now you want to turn those video snippets into a series of longer audio files so you can upload them publish it as an audio-only podcast. Well, here’s the solution of the day-using FFmpeg and the command line to do exactly that.

The Journey Starts with Your First Step

Step 1: Grab Your Audio

Did you know PullTube is a macOS application that allows users to download videos and audio from various websites? It provides a way to paste the URL of the video or audio they want to download and then choose the desired format and quality. PullTube supports various video and audio formats, including MP4, FLV, WebM, MP3, and M4A.

You can potentially use a tool like PullTube or another to grab your media-granted you have the usage and copyright rights to do so. Grab your files and save them in the order in which you want them to be compiled. I recommend adding incremental numbers to the filenames (me-1, me-2, me-3, etc.).

Unveiling FFmpeg

Our adventure with FFmpeg now begins — it’s a versatile and powerful multimedia processing tool revered by developers and audio enthusiasts alike. But before we can wield its awesome power, we must first summon it into our realm.

Utilize the FFmpeg tool to merge multiple audio files into a single MP3 file for easier uploading. Here’s a breakdown of how to do it in the terminal.

Installation of FFmpeg

Install FFmpeg using package managers like apt-get and brew. This is necessary to have the required tools for audio processing.

bash sudo apt-get install ffmpeg brew install ffmpeg

With a few keystrokes, we install FFmpeg using the trusty apt-get and brew package managers, ensuring that we have the necessary arsenal at our disposal.

Charting Our Course: Navigating the Audio Seas

Navigating to directories :

We navigate to various directories using the cd command where each of ther audio files were stored.

Armed with FFmpeg, we set sail down the river of audio files on our comptuter. With deft navigation skills, we can traverse directories in search of the audio treasures that await us.

bash cd /Users/myMachine/Downloads/enas

With each cd command, we draw closer to our destination, ready to unearth the raw materials that will soon be transformed into podcasting gold.

Uniting the Fragments: Merging MP3 Files with FFmpeg

Merging audio files :

They used the ffmpeg command with the -f concat option to specify the format as concatenated.

The -safe 0 flag is used to disable safe mode, which allows the use of absolute paths in the concat demuxer.
The -i [filename] specifies the input file, and they provided a text file (e.g., enas.txt) that contains the list of audio files to be merged.
The -c copy flag specifies that the codec should be copied from the input to the output without re-encoding, which helps to retain the original quality.
They provided an output file name (e.g., enasaudio.mp3) to store the merged audio.

At long last, we stand at the precipice of greatness, armed with FFmpeg’s legendary concatenation prowess. With a flick of the wrist and a command on the lips, we merge individual MP3 files into cohesive episodes that will captivate audiences far and wide.

bash ffmpeg -f concat -safe 0 -i enas.txt -c copy enasaudio.mp3

Repeating the process :

We then repeate the merging process for multiple sets of audio files located in different directories.

bash ffmpeg -f concat -safe 0 -i enas.txt -c copy enasaudio2.mp3 With a symphony of commands, we orchestrate the merging of audio files, seamlessly weaving together fragments of sound into a tapestry of auditory delight.

Ascension to the Podcasting Pantheon

Armed with our newly compiled episodes, we’re ready to share them with the world. With a few final commands, we upload our files to the platform of choice. Who’s ready to inspire some listeners?

Conclusion: FFmpeg, the Hero of Our Story

In conclusion, FFmpeg emerged as the unsung hero of our podcasting jounrey and solving this specific technical issue. We were empowered to transcend the boundaries of audio production with its cool capabilities. With FFmpeg by our side, we addressed the weird challenge of merging MP3 files into one. The adventure awaits-are you ready to seize it?

Listen here!

Acast Embed Player (377a84a64c1c2ad341d434d7b5fd740d87cc6381)

Originally published at https://robkleiman.net on June 14, 2024.

Extensibility in Action: How a Bespoke XD Plugin Transformed the Premiere Rush Design Process

Rob Kleiman — Wed, 29 Jul 2020 21:07:47 +0000

How an Adobe designer transformed a product team’s design workflow using the power of custom plugins.

We spent an afternoon with Adobe’s Johannes Eckert, Senior User Experience Designer, and other members of the Adobe Premiere Rush team to see how Adobe XD saves them time while working on products like Adobe Rush. We discovered using Adobe XD to design Premiere Rush transformed the team’s entire design process, delivered surprising results, and offered a glimpse into the power of extensibility.

When timelines get tedious for designers

The concept of a “timeline” is central to video editing tools like Adobe Premiere Rush that professionals and hobbyists use to tell stories by placing tracks and clips on a timeline. However, the number of separate timelines a user may require in a project can either be simple or complex. This scenario can present a unique challenge for the product team working on Rush.

Different users have different needs that influence how deeply they will use the application. Some users include a few clips in two parallel tracks, while other users opt to add media to all seven tracks, prompting the application to scale down all the items on the screen to accommodate everything. When designing against this fluid in-app experience, it can be difficult to represent all this inherent complexity in one design mockup. It was hard to account for the wide range of user behavior and the degree to which timelines renderings vary from case to case. But then Johannes Eckert, Senior User Experience Designer, had an idea.

Finding a workable solution

To address this problem, Eckert built a custom Adobe XD plugin to recreate the look and feel of Adobe Rush’s user interface and place those elements on an artboard inside Adobe XD. The tool generates a pattern of objects, groups, and layers that represent the clips and tracks found in Rush. It then arranges them in a neatly named layer hierarchy.

This tool allows the team to iterate on designs much faster by forecasting what the end-user might see in the product. The ability to quickly recreate complex timelines in an Adobe XD design environment that match what real Rush users see allows the design team to create richer, more realistic experiences. These enable experiences that are true to form for the end-user, with mockups that better reflect real use cases.

“Before the plugin existed, our team would create mockups using a handful of the same simple timelines that resulted in designs that did not represent the reality of how the product behaved for users. This old workflow resulted in designs that did not fully represent the product features or design specs that were made on inaccurate assumptions. Nor was it scalable. When it came time to adjust one specific timeline being used across multiple mockups to a new size, just forget about it!

At times designers want our designs to be nice canonical representations of something rather than messy examples of extremes. We needed to make a tool that accommodated flexible timeline elements for real-life situations. Extensibility enabled our team to innovate in a big way.”

Creating the plugin

Eckert built his prototype from scratch by collaborating closely with developers on his team.

“If you can write JavaScript for the web, you can write an XD plugin. When I was building this, one of the most exciting things for me, as the plugin developer, was being able to transfer code that an iOS engineer wrote for the real Rush application directly into our plugin. By incorporating the real code into the plugin, we were able to have the timelines generated inside XD appear the same as they would appear in the real application used by thousands every day.”

“One of the important considerations was the usability of the plugin itself and thinking about designer-friendly customizations. It felt important for us that everybody on our team was able to create their own timelines for the individual features they work on. A lot of calculations were necessary to determine the height of each track on the timeline. There are five different clip types that each have their own appearance within the timeline.

For simplicity, we decided to define Timelines in a simple JSON format that can be edited with a text editor. We then place the timelines and the thumbnails for clips in a shared folder, so each member of the team can all access them. Finally, when it was time to share it with the team, it’s nice that the plugins are simply zipped up and distributed as .xdx files, which we can share via slack or email. There’s no need to compile or sign them. It’s super easy in that way to share it internally.”

“For me, writing documentation and collaborating with coworkers on Github is a lot of fun. The steepest learning curve to plugin development was learning about async file system access and handling the editContext correctly (unlike the web, the plugin does not have access to any object anywhere on the canvas). You just need to get the scoping right, and then you’re good to go.”

“It only took the team a few weeks to write the code and refine it into a usable plugin, but now saves us time every single day we are designing Rush.”

From idea to indispensable

Ben Smith, Senior User Experience Designer shares:

“ Our team relies on this plugin to do nearly all of our work. We modified our team’s workflows to adapt to the way this tool works. This project is a great example of how a simple idea can affect multiple processes. The reason this tool is valuable to us is that it saves us time that would otherwise be spent attempting to obey complex resizing logic. (This logic guides Rush in a way other design tools simply don’t do since they are so unique to the application and features we’re designing on our team).”

One example of such logic is the way the plugin creates objects on the artboard. XD’s Auto Animate transition can animate complex changes to the timeline with ease, which dovetails with the behavior found in Adobe Rush.

Jakub Burkot Senior Designer for Premiere Rush emphasizes:

“The timeline plugin has been instrumental for our work as a design team. I use it almost every time I work on new features or come up with quick exploratory concepts. Working without this plugin would make perfect rendering of Rush timelines extremely difficult. We would constantly be designing in a non-ideal manner, but this allows us to have pixel-perfect comps even as the complexity of the design increases

We’re able to catch design problems earlier. One of the biggest benefits of designing with real-world timelines is that we can quickly test a new feature with both simple and complex timelines.”

Everyone on the team agrees that one major advantage of using the plug-in is the ability to test different layouts and various zoom levels under extreme cases quickly.

Burkot notes:

“Before our team had this plugin, questions would come up in design reviews, but the team had no convenient way to check. What used to be considered a tedious “edge-case” can be validated very quickly now. It allows the flexibility to design using messy timelines you’d find in the real world. Real user data is never perfect, and we shouldn’t assume a convenient case that looks good in a vision deck. For example, testing to see if the timeline still works as expected when all seven tracks are populated.”

Representing real scenarios

When asked what informed the design, Eckert notes:

“This project came down to our team wanting to be better designers. I strongly believe we are better designers when our tools use real data. Our designs need to reflect the messy reality that surrounds us; how can we think about the reality for people using the software we build? Bringing realistic scenarios into our design tools is the pathway to more humane experiences: building products that still work when you use them in the real world.”

Routine maintenance

The team continues to make incremental changes to the plugin and update the contents of the JSON file templates.

Ben Smith Senior User Experience Designer says:

“As we make small design changes to the Rush UI, we have to modify the plugin to reflect those decisions, so there is a little bit of upkeep required to keep it relevant. The time saved is well worth it, so we hope it will live on in perpetuity.”

Another compelling reason the team embraces this plugin is the consistency it offers, “without a drawing machine like this, over time designs deteriorate through copy, paste, and other quick changes and suddenly you don’t know what the source of truth is anymore. The worst case is if the quality in the shipping build also deteriorates.” The plugin allows the team to maintain a certain degree of consistency among versions.

Looking toward the future

All this illustrates an example of extensibility in action. Smith notes: “I’m always on the hunt for the next ‘let’s make a plugin do this work for us’ opportunity. Automating design tasks that feel like manual labor allows us to get closer to designing at the speed of thought, which is part of XD’s promise.”

Eckert laughs_:_

“Looking back at this now, this is solid work. I’m so happy this plugin still works a year later (which is testament to XD, not my code).” He celebrates, “despite the fact this tool is purpose-built for one specific product team. We designers made it for designers. XD plugins aren’t black magic.”

This is how one Adobe designer transformed a product team’s design workflow using the power of custom plugins. All it takes is one dedicated member of a team to write a plugin to unlock untold productivity gains such as these. Your organization can also create something just as powerful too.

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.

Building XD Plugins for Precision and Polish at Adobe With Growth Designer Kenny Krosky

Rob Kleiman — Wed, 04 Mar 2020 21:32:23 +0000

Editor’s Note: Our featured community member this week is Kenny Krosky, a growth designer at Adobe based in Temecula, California. As a member of the Adobe growth team, he’s constantly embedded in the creative process and conducting research to improve user experience across our products.

Designing for designers and creatives requires accuracy and precision — with regular feedback, reviews, and iterations, it’s a demanding workflow with many rounds of revisions. Over time, he found ways to build his own XD plugins to accelerate his workflow and get into a rhythm that matched the cadence the work demands, and with XD Plugins you can too!

We had a chance to learn about his experience developing multiple plugins for Adobe XD. We also hear his take on where things might be heading for folks developing on Creative Cloud like himself.

— Rob Kleiman, Platform Marketing Associate, Developer Experience

Kenny Krosky, Growth Designer at Adobe

Kenny, what do you do at Adobe?

As a Growth Designer for Creative Cloud products, I design and execute experiments to challenge or rethink the current experience with our tools including XD, Photoshop, Premiere Pro, and Illustrator.

My team focuses on making sure users have a smooth start when getting familiar with Creative Cloud products. We’re looking at these applications at the product level and also the user experience as it relates to communication channels like email, banners, and web surfaces.

What kind of projects do you work on at Adobe?

We wear many hats on my team. Not only do we design experiments but we code them too. One of the coolest development projects I recently worked on was building out the deep-linking pages for XD. It’s the page users are linking to when they share a cloud document or a plugin from inside the XD Plugin Manager.

I recently developed an in-app modal inside of Photoshop mobile, which was pretty neat for me because I’ve been using Photoshop since my early teenage years. I also get to work on other interesting projects like coding landing pages, email templates, and some fun internal tools.

What was the first time art and code collided for you?

This might be a similar story for most: I wanted a snazzy looking MySpace page and started messing around with the code. This was my first dive into coding and messing around with hex codes and the other elements within MySpace. Fast forward and now I’m usually in an environment where I rely on JavaScript a lot.

What was your first thought when you learned that users could extend the features of Adobe products?

I thought it was incredible! Not only is listening to your users important but when you give the users the tools and ability to make features and add to the product, that’s a game-changer.

You can take matters into your own hands and build on top of an already intuitive tool to improve your workflow (and help so many others as a result).

What do folks need to know to get started with building plugins for Adobe XD?

Before diving into building a plugin for Adobe XD, I highly recommend you learn the basics of HTML, CSS, and JavaScript. These three languages are the foundation of what you need to know before diving into plugin development.

Not only will these languages help you build awesome plugins, but you can apply this knowledge to the web browser too. When I found out that plugins are a mixture of HTML, CSS, and JavaScript I was so happy, because I’m familiar with these languages.

I use each of them in this video where I walk through the steps to build out the artboard generator plugin, which is not in the XD Plugin Manager, but can be found on GitHub.

Beyond that, there are a bunch of similarities between plugin development and most of the web projects out there.

Where did the ideas come from for your XD plugins?

The ideas for my plugins are pretty straightforward. I saw a problem (or something I thought was a problem) to solve within XD and I built around that idea.

Keyboard shortcuts: I thought showing the shortcuts in the application was an important addition to the application so I built something that allows you to quickly search and find any keyboard shortcut within XD to improve your productivity.
Placeholder Image plugin: On certain projects, I’d send over wireframes of designs and would hear the same question: “What size image do I need here?” This plugin quickly and easily solves this problem. It adds a placeholder image into objects like rectangles, ellipses and polygons. It automatically includes the dimensions for the height and width of that object so the sizing question is answered without having to manually write them down for every wireframe.

Example of the Image Placeholder Plugin

Triangle: This is a silly plugin idea that I’ve made public to everyone. Before the Polygon tool became available, I made this because it was a tedious process to create perfectly shaped triangles.

All of these are good examples of my thought process around plugin development. They’re simple and they aren’t over-complicated or over-designed, but they each solve a common problem.

What do you like most about the XD Plugin API?

I honestly love so many things about it but if I had to pick it would be the styling of UI components. Having XD’s native Spectrum styles apply to your plugin’s UI elements by adding HTML attributes or class names is awesome. This helps your plugins maintain the consistent look and feel of the XD product.

The documentation that the plugin team has built is great and very easy to digest too. If you’re familiar with modern JavaScript, you can essentially build a plugin to help you with nearly all aspects of XD. The documentation page also has resources for a community of developers that post Q&A so you can get help with the API if needed!

What does the future of XD extensibility look like?

The future of extensibility within XD is huge. I think we have seen a big community form around this aspect of the product in just the one year that the APIs have been available and that has helped so many users.

I would like to see more open-source projects and collaborations between designers and developers to build tools they would love to see in the product.

Even Adobe’s collaboration tools themselves are pushing ahead in creativity and collaboration. Seeing the XD team roll out Live Collaboration, otherwise known as co-editing, has been a pivotal change for me and my team. It makes it simple for teams like mine to fail faster, communicate easier, and work seamlessly.

Is there a philosophy that informs how you approach your work?

If I had to boil down the way I work into a motto, it would be: Don’t complicate things.

When you do something over and over again and you’re able to trim even the slightest amount of time over a long period of time, it adds up. I actually still refer to my shortcut plugin from time to time. It definitely has provided a benefit and increased my ability to work faster.

I often build tools that take the tedious and manual labor out of my workflow which saves me a bunch of time! Which is also why plugins are great.

Remember the goal is to make sure users have a smooth start when getting off the ground.

Thanks for your time, Kenny!

— —

Kenny has three plugins that are currently available for Adobe XD. You can keep up with him by following him on Twitter or checking out his website.

Getting started with plugin development is quick. Head over to theXD Plugin API documentation to start building your plugin for Adobe XD.

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.

Building XD Plugins: A Designer’s Journey in JavaScript

Rob Kleiman — Fri, 28 Feb 2020 20:26:52 +0000

I wanted to share this story about Creative Cloud community member Valentin de Bruyn. He works as Lead designer at Etamin Studio in Clermont-Ferrand, France.

He recently taught himself JavaScript to publish his first plugin for Adobe XD.

We’d like to highlight his experience building out the “Fit to Artboard” plugin to illustrate something amazing about the Creative Cloud community. APIs used for finding solutions to problems through code aren’t just for Computer Science majors or experienced developers.

Creative professionals can also learn how to create plugins that solve their needs, even sometimes leading to publishing a plugin on the Plugin Manager for others to use in their work.

Seeing others learn how to create a plugin and then launch it is something we are happy to highlight for others getting familiar with Adobe XD and the Adobe APIs!

https://medium.com/adobetech/building-xd-plugins-a-designers-story-108f1dd4dc76?source=friends_link&sk=0b8367ed84f1aaa7e1af1b0fb78b5f0b

Building XD Plugins: A Designer’s Story

Rob Kleiman — Wed, 26 Feb 2020 15:32:52 +0000

Editor’s Note: Our featured community member this week is Valentin de Bruyn. He works as Lead designer at Etamin Studio in Clermont-Ferrand, France. He recently taught himself JavaScript to publish his first plugin for Adobe XD.

We’d like to highlight his experience building out the “Fit to Artboard” plugin to illustrate something amazing about the Creative Cloud community. APIs used for finding solutions to problems through code aren’t just for Computer Science majors or experienced developers. Creative professionals can also learn how to create plugins that solve their needs, even sometimes leading to publishing a plugin on the Plugin Manager for others to use in their work.

Seeing others learn how to create a plugin and then launch it is something we are happy to highlight for others getting familiar with the platform!

— Rob Kleiman, Platform Marketing Associate, Developer Experience

The XD plugin developer forums are a lively place. We have a great section for folks to introduce themselves so they can connect and get support through the journey of creating their own plugins.

Valentin de Bruyn, Lead designer at Etamin Studio in Clermont-Ferrand, France.

In this post, we speak with Valentin, who recently shared his plugin with the forum.

Like many others in the community, his journey from designer to developer illustrates how creative users can use APIs in interesting ways to streamline and enhance their work.

How did you get into design?

When I was eight, my dad bought a copy of Adobe Photoshop. Then two years later, he got Macromedia Flash. From there, I started tweaking video game assets for fun. Back then I had a lot of fun creating tiny flash games for my friends which I brought to school on floppy disks!

Then I went to design school at both ESAAT and Gobelins in France. Here I worked hard to learn how to design apps and websites. I met some cool developers while in school. We loved working together and ended up creating our own studio. We’ve been working together now for eight years.

How do you currently use Adobe XD in your workflow?

I currently use Adobe XD as my go-to tool for ideation. I love its simplicity and speed of use. I use it for tasks that span from wireframing to building design systems. In terms of my overall design workflow, after I create something in XD, I’ll either hand off to developers or build the front-end myself, using Webflow.

But time and again, I found myself manually manipulating objects on the artboard, over and over. It was this repetition that motivated me to start developing my Fit to Artboard plugin.

It came down to this: I wanted to save time when designing. Building this plugin has saved me a lot of time per week that would be lost due to the direct manipulation of these objects from within the application.

What does your plugin do?

Fit to Artboard helps users achieve two really simple things:

Expanding the width of a rectangle to fit the width of the artboard.
Expanding the height of a rectangle to fit the height of the artboard.

This functionality is useful for creating topbar shapes, or sidebars. Instead of doing it manually, the plugin brings two keyboard shortcuts to achieve these actions really fast. When hitting Cmd+Shift+H or Cmd+Shift+N to resize things in a blink, I just feel like a badass (because I built them).

A quick overview of how the plugin works:

// Detect dark theme var iframe = document.getElementById('tweet-1136982618065559553-93'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1136982618065559553&theme=dark" }

Why did you want to build this? Who is it for?

I’ve been thinking of ways to add some features to XD that match the actual workflow of a professional designer like me. While freedom and direct manipulation on the screen are great when we explore design directions, playing with shapes, colors and styles, we find specific shortcuts and constraints-based tools can greatly improve the speed of work at my studio.

We use direct manipulation to find a design direction, to define the look & feel of the app or website we are designing.

We use constraints-based tools as well, which are of great help when building design systems and creating the actual layouts and templates for the work.

These tools help us achieve consistency in things like spacings, colors, and sizes. While CSS can provide an easy way to make documents have the same properties, it’s hard to do with direct manipulation tools.

So I created this plugin for anyone that finds themselves repeatedly resizing shapes to an artboard (these could include topbars, sidebars, section backgrounds).

What challenges did you face bringing “Fit to Artboard” to XD?

Firstly, I was a beginner in JavaScript when starting this project, so basic things might have taken me longer than they would have for a seasoned developer.

From there, the next challenge: it took me a while to understand the scenegraph / scenenode paradigm.

I followed a bunch of basic JS tutorials on Youtube and read the Plugin API documentation a dozen times (back then it did not have a search feature).

I got around these challenges by posting a question on the XD Plugin Developer Forums.

During the plugin review process, my plugin got initially rejected because I did not handle errors while trying to execute the shortcuts on focused elements that were not supported (i.e. groups, symbols, text…). Through some more clarification and visiting other resources available, I was able to get that sorted out and get Fit to Artboard published!

The answers helped me build out the error handling functionality in my plugin so that I could get my plugin listed in the plugin marketplace.

How long did it take you to build?

After getting familiar with some JavaScript basics from online tutorials, it was probably ~ 20 to 30 hours, all in. But what’s surprising and a bit unexpected is how I felt quite empowered by acquiring the ability to tweak my main work tool, Adobe XD. This is a great feeling!

Do you see yourself continuing to build or ship plugins in the future? What are some use cases you’d like to explore?

Definitely. I am exploring different ideas right now that revolve around setting constraints (spacing, scales, stacking…) and toying with ideas of a very different way of creating UIs.

I’ve also built a plugin as a pet project called Stack It to boost my own workflow.

This tool is the first step towards a larger one I might publish one day. I use it to stack elements vertically or horizontally with a custom spacing value, with the press of a couple of keys on my keyboard via the shortcut I made.

Are there any other thoughts on the experience you’d like to share?

I find that current UI Design Tools out there inherit lots of features or design components from their roots originating in Print Design Tools. It seems most of the new and innovative features recently implemented in my favorite tools like XD have been born out of plugin ideas and/or detailed user requests, which is exciting to see.

We spend so much time working & using these software tools. Let’s not forget to regularly cut ourselves some slack and make time to dream of what the truly game-changing XD update could be or how the perfect Design Tool might behave. This field is still quite in its early days so it is exciting to think that there’s still plenty of room for pioneers and new paradigms to emerge!

What advice do you have for designers who want to try creating their own XD plugin?

My advice is: jump into it, watch a few basic JavaScript tutorials on Youtube, read the API documentation, have a look at the plugin examples and tutorialsmentioned there.

You should be up and running your first plugin within a day or two! The whole experience is empowering and will make you more engaged with your design tool.

Fit to Artboard is currently available for Adobe XD. You can keep up with Valentin by following him on Twitter or checking out his website.

If you’re just getting started with building Plugins for Adobe XD we encourage you tohead to the Community forums and introduce yourself.

Let us know what you’re working on or ask questions there and get the support you need to be successful. We want to hear from you.

For more stories like this, subscribe to our Creative Cloud Developer Newsletter.

The Surprisingly Human Way to Network with Other Students @ Hackathons

Rob Kleiman — Thu, 05 Apr 2018 23:24:35 +0000

For some people, learning how to “network” tends to feels like learning a different language. The idea of the whole process might feel mysterious, like some elusive checklist with a hundred resumes to send out, one thousand emails to write and zillions of boxes to check on an online job portal.

On the other hand, maybe when you picture the activity of “networking” in your mind, you envision yourself walking around the hackathon venue handing a spiffy business card to everyone you meet.

Join the MLH Career Lab today to put these tips to good use!

Both of these mental images of networking might make the whole practice feel inauthentic, pushy or scary, but in reality, it’s not like that at all!

Instead, think of networking like you’re just making friends with people who are are excited to meet you.

At hackathons, there’s value in investing time and energy into building relationships with the people you meet making an effort to staying connected with them.

Have no fear! You too can learn to become an expert! As a hacker, you’re already good at figuring things out — becoming an expert at “networking’ is no different.

How can I build rapport with sponsors/mentors/professionals/other students?

At a hackathon the wall is already broken down because everyone who attends the event is working towards similar goals: building awesome things and meeting awesome people.

Mentors

The people who choose to spend their weekend mentoring are there to help you and are excited to do it!

What’s great about meeting people at events like Hackathons is that most of the people that you’ll meet at these events were once in your shoes. They have wisdom and insight you can’t get anywhere else. They also are some of the most excited and passionate people ever — they’re excited to be part of your community. They are taking the time to help you learn, build and share new skills!

One of the most exciting ways to begin a great conversation with other people at events is to be truthful and curious with them.

Here are some conversation starters:

Ask others what they’re building
Ask what they did before working at their current company
See how they got where they are today

Just by simply asking a sponsor, mentor or fellow student how their day is going, you’ve already opened the door to making a real impression on that person across the table or standing next to you in line. It’s as easy as that!

Get Curious == Get Connected

Networking isn’t always about helping someone get ahead, but instead, sharing helpful or interesting resources with them to help them grow. There’s long-tail value of just building connections with people who are similar to you and want to collaborate (whether it’s fellow students or professionals) without an immediate payoff / implication of getting a job.

In fact, a big part of networking is being open to learning about another person, what they’re interested in and who they are beyond their job! Being genuine, being curious and being good at listening are often the best ways to learn new things.

When you have the opportunity to speak with a person at an event, make sure you ask them questions. Ask them what their day-to-day is like. Ask them what they most enjoy doing. Ask them what type of people tend to do well on their team in their department! Showing curiosity goes a long way, and may even lead to learning something totally unexpected / totally awesome about another person.

Listen, Learn, Launch!

When you listen carefully to someone, you’ll have a good idea about what that person cares about. From there you’ll know how to help them, what you could show them, or determine other interesting/useful way you’d be able to contribute to the conversation. The exchange becomes less about getting something from them and more about both of you bringing something to the table as human beings.

Ask what can I help you with?

It is also possible to help another person or company solve a challenge they’re facing. Often, this process starts with listening. If you listen well, you’ll have the opportunity to follow up with creative solutions to their challenges. After having a sense of what motivates others to learn, build and share; you then have an opportunity to follow up with them and share a link, send them email, or a funny cat video (if that’s what they’re into).

The Follow Up

Connecting with others is a great way to get your ideas, art and passions out into the world. Real connections are made offline and it is in your interest to meet people like you. After an event ends — send them a message that it was nice to meet. Share them the link you talked about. See when they are free to get together again.

If they’re local, maybe invite them to your hacker club to speak on a topic. Develop something you care deeply about or love to do and do it one hundred percent. If you are looking for a new opportunity, make sure to go out and meet like-minded people in real life.

Reach out, connect and don’t be afraid to ask others for advice. There are companies out there who need you to help them be the best in the game, so be your best, go forth and find your people!

https://medium.com/media/0485845899c5cc6e3ee55675ee779dc5/href

Originally published at news.mlh.io on April 5, 2018.

Joining the Major League Hacking Team

Rob Kleiman — Tue, 19 Dec 2017 18:04:29 +0000

Hello Hackers! My name is Rob Kleiman, and I’m beyond thrilled to be joining the team here at Major League Hacking to support your hackathons starting in the Spring. A big part of what drew me to MLH and serving the Hacker community is the fact that technology is changing faster and faster each day. As we see continual improvements in availability and access to technology, we’re only limited by how far the imagination can go. Technology is just a tool to get there. With this in mind, it’s a personal goal of mine to help make your hackathons as awesome and successful as humanly possible.

As a constant learner, I know there’s no way to fake technical experience. The tech field requires doing your homework and getting real hands-on experience to actually know what you’re talking about. Learning and experimentation is part of the DNA of what it means to be a hacker. I respect this ethos, and it’s why I am committed to serving technologists around the globe.

During each step of my career, technology played a big part in my both my learnings and successes. For as long as I can remember, I’ve tinkered with technology. When I was a kid, I would spend hours noodling on software, replacing a computer hard drive with my dad, customizing a Myspace page like a champ, or even putting a dancing ninja turtle GIF on my old-school Nokia phone. I was driven to learn how these systems worked and enjoyed “hacking” them to match my preferences. That hobby turned into a habit of learning about different subjects with relative speed and ease. But it also made me realize this: everything in life is almost always more complicated than it appears.

I believe coding is like the new word processing (it’s as important as being able to type) and it’s crucial to know how things get built. This realization led me down a road of learning basic Ruby on Rails, Heroku, and Amazon Web services and served as a crash course in the complexities and unique problem-solving skills required in the life of a coder.

I spent months learning basic syntax, deployment methods, and git — this is the bread and butter of software development. But, like anything new — it wasn’t easy. I distinctly remember troubleshooting a line of JavaScript, which was holding up a launch date, and upon resolving the issue, dancing around the room with excitement. I sincerely hope you get to experience this kind of joy at your next hackathon! This invaluable experience in multiple domains pushed me to learn about tons of topics simultaneously, many of which apply directly to my new role with MLH.

I get a weird satisfaction from troubleshooting technical problems. The rush comes from learning on the fly and figuring out how different pieces of a larger system fit together. Maybe you get that rush too — at the end of the day, we’re all looking to learn, build and share. Hackathons focus on project-based learning. You don’t know everything; you just have to get started. When it comes to the work of you organizers, you have to think about a lot of things and it’s important to stay organized.

It’s my belief is that everything that goes into creating a great experience revolves around the people. Everyone has a story and deserves an opportunity to build things with the potential to change the status quo. People are the reason that ideas move forward. There’s nothing quite like seeing a group of people work together to create something amazing — — especially when you played a part of putting that into motion.

As a member of the Major League Hacking team, I get to attend our hackathons and see what they’re all about. My first MLH hackathon was YHack at Yale University; this was a treat because I got to see our community members learn as they go — they read the documentation, they keep going and troubleshoot issues as they go. At YHack, the students blew me away incorporating different technologies in their hacks — from AWS to blockchain to virtual reality, the variety, complexity, and usefulness of projects built in under three days is astounding. That’s the spirit of a hacker.

As I watched students build an Alexa app that could do their statistics homework for them. I witnessed students build a Pokemon style game that brought attention to why animal poaching is bad. It became clear that hackathons demonstrate a groundbreaking way to learn, build and share in record time. You can work on things that align with your passions and the causes you care about — or you can do something silly or entertaining. It was memorable because the students were so eager to build great things. This boundless creative spirit is why I am so delighted to be working at MLH. Here I get to help you solve your problems — whether it’s helping you tackle a budgeting issue, talking through your organization’s team dynamics or helping figure out how to deploy your hackathon’s wifi network. I also know how important it is to act like a leader, how to talk to people, how to listen — skills that are required to succeed as an organizer.

As a member of the league team — I’m a resource for you to bounce ideas off of. We want your event to be as successful as possible. As you walk down the path of organizing your event, I look forward to being able to support and create opportunities for you and the MLH community.

If you’re asking yourself “what makes Rob qualified to help me plan my hackathon?”

Besides the fact that I thrive in environments where I can collaborate, be social and work hard, the answer is two-fold:

1) I work hard to get to know you. I take the time learn what’s necessary to help you figure out / troubleshoot the hard stuff.

2)With experience in multiple areas, I can help you think about content, community building, and event planning and other puzzle pieces of putting on a hackathon.

Through this varied experience, I learned that the feeling of belonging and creating an authentic community never goes out of style. So I jumped headfirst into my local tech community, making it my mission to meet people across sectors and in the developer scene. I wanted to understand their ambitions, work, passions, and challenges. I haven’t looked back since. Now, as a new Deputy Commissioner, I am hoping to learn from you. I am ready to work with you on the many exciting aspects of planning and executing your events. I am here to work with you, so you feel connected to our community and empowered to succeed.

So, promise me something: If you have a challenge — or a breakthrough, I want to hear about it. I want to hear your feedback, I want to know your troubles, I want to celebrate your wins. That’s how we iterate and provide the best service to you and the whole MLH league!

Now let’s have a great season! I can’t wait to meet you!

Happy hacking,

Rob

The Rule of Three: What Wikipedia Won’t Tell You

Rob Kleiman — Tue, 29 Nov 2016 17:18:00 +0000

Today I’d like to share a concept that I call the Rule of Three. It’s something I’ve noticed a lot in my life lately. The observation occurred to me when I was walking along the beach in Charleston, South Carolina.

While strolling along the shoreline I was fascinated by all the separate groups of shells scattered all over the sand. I noticed that something peculiar was happening. Instead of sitting on the beach in one big clump of shells, the shells lay scattered about in groups of three. With a group of three shells here, a group of three shells there.

It got me thinking: there is something interesting about how three appears in nature and how the concept of three applies to the world around us. After this realization I started examining how relevant “three” can become in different domains, and here what I discovered…

The Rule of Three

Consider the concept of three; in most cases, you need three of something to build a stable structure.

Sure, a ladder has two legs. But the reason a tripod works so well is because there’s another leg for it to stand on for stability. But, beyond just thinking about the purpose of a tripod all day, humor me and I will outline how this structural truth is far-reaching and more prevalent than you might think.

The rule of three occurs in the natural world; As a result, it makes up the environment around us. How? There are three kinds of matter: liquids, solids, and gas. There are three molecules in water: H2O, two hydrogen molecules, and one oxygen; in carbon dioxide, too there is simply just one carbon and two oxygen. The rule of three applies in chemistry, on the atomic level and these simple structures comprised of merely three elements inform our world.

We’ll look at navigation and technology next…How do you get around these days? Did you know that GPS works by using triangulation (Of course, you have a triangle, which is a shape with three points) to determine our location?

If you’re using your cell phone, you’re standing on Main Street, and there are three satellites in space that all communicate with each other and then shoot back down that signal to your phone. Boom — the rule of three.

Arts & music also rely on this principle.

In music, when three notes come together in the right fashion they sound great to the human ear as they resound to form one chord; musical chords are also formed using three notes.

In art school you learn about the three primary colors; yellow, blue and red, which establish everything concerning color theory.

Stories need three components (some call them acts) for them to be coherent. You have somewhere where you start (your origin). Then something shifts in the middle, and then you end somewhere else. There’s always a mid-point in a journey. It’s not a coincidence — this is how the human mind processes information and infers meaning. For something to be compelling, it needs a beginning, middle and end.

Then, of course, we have the Three Amigos, because why not?

Three for Me

Still reading? Great. All of this text may be an oversimplifying what is actually happening, but it’s worth exploring how the rule of three manifests itself in surprising ways. Let’s move away from the abstract subject matter and shift toward discussing more practical matters. How do I apply this in my life, and why am I sitting here writing about three?

There’s a Venn diagram below that outlines a formula or general hypothesis for why people seek professional development and what they work toward in life.

It begins with some fundamental questions:

• What do you care about?

• What do you love? What’s your passion?

• What are your talents?

• What in the job market is needed?

Right there in the middle is where success lives. This sweet spot is what most people aim for in work and life.

So, how does this rule of three manifest and actively work for me?

I’ll share three values in my life that I think apply to most people. These principles shape, to a large extent, my outlook on life. They are Attitude, Gratitude, and Raditude.

Attitude

Attitude; your mindset is everything. Your thoughts drive your actions, so it’s in your best interest to be bold. Think boldly and harness positive thinking in your daily life.

There is a classic book called As a Man Thinketh. The thesis offers a simple message: you are what you think.

Whatever goes on through your head, that is what will influence your actions and how you present yourself in the world. A lot of the content and different tips many people like to both read and write about are about the power of presentation. So much of that literature is about self- confidence, believing in your own abilities, being positive, talking to yourself positively, and treating yourself well.

A person is limited only by the thoughts he or she chooses.

Bruce Lee said “You have choice. You are master of your attitude. Choose the positive, the constructive. Optimism is a faith that leads to success.” #attitude.

Gratitude

You must have gratitude, which is thankfulness and an appreciation of the present moment, smiling, appreciation for your friends, family

Coming off of Thanksgiving this is of particular importance, but you can be thankful and have gratitude all year long.

Despite all the tumult, the time we’re living in, the 21st Century is awesome. In a first world country despite the rapidly shifting political, social, technological environments, it’s pretty amazing.

Everybody has their challenges, but sometimes you have to pause and say, “You know what? It’s pretty damn good.”

Of course, having gratitude, thank-you notes, following up, and staying connected to people that are in your circle, and sharing the love, because that’s what it’s all about when it comes to keeping your network active and engaged.

Charles Dickens wrote, in A Christmas Carol, “Reflect upon your present blessings, of which every man has many, not on your past misfortunes of which all men have some.”

Of course, there are struggles, and trials as well as triumphs, but emphasizing the positive and the good will carry you through.

Maya Angelou is a poet, and she wrote “People will forget what you said. People will forget what you did, but people will never forget how you made them feel.”

That is why gratitude is so vital to my life. Spreading love is what I’m recommending you do too.

Raditude

Now we have something I call Raditude: This is your own personal concept of being in the zone. I’m not going to sit here at my keyboard and tell you what you are good at, what you love to do.

Raditude is something we can all strive for and work toward incorporating into our mindset. The basic definition is being in the zone, loving what you’re doing, or enjoying the process of figuring that out because we each are on a different path.

Want to know the truth? Most people are lucky if they are working at a job that resonates with what they really love, or what they want to do. It’s something most people are striving to find.

Something that I do is Goal-setting, just checking in with my personal goals, thinking about what I want to achieve in the year, the month, or the week.

It’s the practice of proactively defining ways to invest and keep building your own momentum. It’s about knowing what you’re focused on, whether it’s finding that mentor, managing your time or doing something new.

The discipline and beauty of raditude demand consciously having all of your choices, activities and intentions strategically aimed at contributing to your best self so that with time and practice you can reach your own personal sense of raditude.

Einstein said, “Everybody’s a genius, but if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid.” What this quote means is that you inherently know what’s best for you. I inherently know what’s best for me. Listening to that inner voice is raditude, and we’re all striving for raditude.

Express yourself, empower yourself, define your value, live out loud and enjoy it.

Because three principles and the Power of Three are in application all around us — — harness them today.

Send me your feedback!