For the more technical definition: "env is a shell command for Unix and Unix-like operating systems. It is used to either print a list of environment variables or run another utility in an altered environment without having to modify the currently existing environment"^[1].

And as for the file, "dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology"^[2].

GitGuardian has detected the following token exposed within your GitHub account

GitHub has an open-sourced product named GitGuardian shield repository to help find exposed secrets in your commits. It detects for API keys, database credentials, certificates, and more. And yours truly received an email notification from them of a detected exposure. In this case, the public display of API keys. So let's solve this problem by using environment variables.

Follow the steps below on how to add .env to a Webpack project

1. Install dot env package via npm or a dependency manager of your choice. With this, you can now use environment variables.
   npm install dotenv
2. At the root of your project folder, create a .env file. Open a new file in a text editor then do file -> save. Name the file ".env"
3. Inside the .env file, place your API keys. It's similar to writing a variable.
   APISITE_ID=123456
APISITE_KEY=1234567890
4. In the file managing your server information within your Webpack project such as server/server.js, server/index.js, or whatever you've named it, add this code below at the top.
   const dotenv = require('dotenv');
dotenv.config();
5. To use environmental variables in your files and place your API keys, add the prefix "process.env" before the variable name you create. So for example: Filename.js
   const siteApiId = process.env.APISITE_ID;
const siteApiKey = process.env.APISITE_KEY;
6. Last but not least, make sure to add .env to your .gitignore file else this would have been for not. This way, when we push to GitHub, our .env file isn't pushed, and your API key isn't accessible.

Additional tip: In your README file, write a brief explanation to potential repo users about using a .env file to add their own API keys to view your project or the key directly in the js file. This sort of information can go under a section like "Prerequisites."

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency.

Resources

[1] env. Wikipedia. Retrieved 10 July 2020. Last edited on 11 May 2020, at 17:43 (UTC).

[2] dotenv - npm. npm js. Retrieved 10 July 2020. Published 16 October 2019 01:50:46.096Z.

The post Environment Variables (.env), Webpack, and GitHub appeared first on Let's Talk Design.

CSS has seen a lot of evolving with CSS3, SASS/SCSS, Flexbox, and now CSS Grid. I was slow to jump on the grid bandwagon, mostly because Flexbox was meeting my needs. After finally learning CSS Grid, I built this template for a blog with CSS Grid and a bit of Flexbox. This project allowed me to execute what I learned about CSS Grid.

The idea behind the blog was imagining someone blogging during quarantine due to the COVID-19 (Coronavirus) epidemic.

On the home page, I added a featured post with a brief description and a call to action button to read the post. Instead of having the featured post take the entire screen width, I included popular posts on a sidebar to the right. Below this section is a brief summary box for the author's bio or welcome message. Followed by an Instagram grid for images populated.

The structure of the website used semantic HTML and was styled with CSS and responsive layouts. The main sections used CSS Grid and individual areas Flexbox, and the layout was structured using grid columns and rows. The site is responsive on desktop, tablet, and mobile. All of which were outlined in a wireframe on paper before styling.

View the GitHub repo

“Not only has CSS Grid reshaped the way we think and build layouts for the web, but it has also contributed to writing more resilient code.” -CSS Tricks.

The post CSS Grid Blog appeared first on Let's Talk Design.

The changes I made to the aesthetics of the blog were superficial but led to more appeal overall. I did have to take time out converting it from a Jekyll blog. The next important edit was to the copy. I went through each post, rereading my old writing. Looking back at anything you've done in the past can be painful. What was I thinking then? It took a lot of effort to reread my post and edit not just the grammar but also the core of the content. I checked if the tone and views matched with how I currently present myself. Was the writing still "on-brand"? I reviewed the meta tags, imagery, and social media link previews. I did an audit of whether external links were broken or needed to be updated. By the end, I needed a break from editing.

I was motivated to edit my blog after considering how I come across online. If something has your name on it, please be mindful of how you're portrayed. Though this blog isn't what stands out on top when you search my name, I still knew it existed. My more prominent portfolios appear in search results alongside my social media account. One of which is Medium and has my more refined public-facing writing.

Before editing, I also thought about the chance of anyone being able to come across the blog. I often find a graphic designer, web developer or even creative director I'm intrigued about and search for any information I can find about them. Social media and portfolios are usually at the top of the results. Followed by mentions in interviews, events, and speaking functions. I'm the type to go beyond the first page of Google results. I'd noticed some of them occasionally wrote posts about their design process, current projects, showcases or other topics of interest. Most often the blogs were no longer being updated but their writing remained on the internet. That, of course, isn't a bad thing. I'm able to learn about their early career, pick up cool information, and see what they once wrote.

I was also motivated to write again. Currently, I'm going through a bit of a career shift and have been doing a lot of self-reflection. I learned new development languages and was improving as a designer. I got deeper into user experience and interface and was curious about how to share my findings beyond a short tweet. When motivation did strike to write a post, I'd look at my blog and soon advise myself against it. I argued I should at least tweak the design, and at most edit what I had written.

So there you have it. My reasons for updating and editing my blog. With a sprinkle of life lessons on being aware of what exists with your name on it. It's okay, if like myself, you have a blog or project that has landed into the neglected pile. Just make sure you'd be proud of it if a curious Googler stumbled across it online. If you do get time, feel free to look it over and make edits as I did.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency.

The post Blog Redesign: Writing Code & Editing Text appeared first on Let's Talk Design.

Borders on linked images

I stumbled on this gem when I added a link to an image. It'd make sense if an underline appeared, anchor tags by default display underlined anchor part, but for the image to incorporate a border is strange. Linking an image caused it to be surrounded by a thick and on other email clients thin, blue (or black) border.

Common offenders of this issue are Outlook 2000, 2002, and 2003.
Solutions: In the HTML document set the image border to 0. With inline CSS add border: none to the image style. It's more acceptable to be specific by using border-style: none.

As a good rule of thumb set border to zero espically if you're creating a template, just in case an image is linked at any time.

Outlook 2003 in general

Trying to develop for Outlook 2003 and still making emails responsive is quite difficult. Outlook 2003 has existed for 15 years! Only 7% of the email client market share use Outlook^[1]. The portion for Outlook 2003 is even smaller. In 2016 the user count for Outlook 2000-2003 was at 11.06% on Outlook, 4.09% on desktop and 0.67% for entire email client users^[2].

A lot has happened in 15 years.

• If you were using Outlook 2003 when it released, you're now 15 years older.
• The United States has gone through at least three presidential elections and inducted two presidents.
• An individual on average would've changed their car three times in fifteen years, yet there exists an entity that still hasn't updated their email client!?
• Toy Story made four movies.
• The Incredibles received a sequel.
• The World Wide Web Consortium has recognized HTML5.
• Flexbox is life and CSS grid is awesome.
• Cars drive themselves.

Compare the lack of update to how even:

• Public schools have updated from Outlook 2003. Just kidding, I'm sure there's at least one school still using Outlook 2003.
• Half of the movies and shows made in the '80s and '90s have already been rebooted.

So who’s still using Outlook 2003? Take a guess in the comments. In the meantime, I’m suspicious of public schools, a few banks, lower-end government offices, and that one grandma.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

Resources

[1] Email Client Market Share. Litmus. Retrieved 6 March 2018.

[2] Breakdown by version for the month of November. Litmus. Retrieved 6 March 2018.

🕘 Updated: February 24, 2020

The post Common HTML Email Issues appeared first on Let's Talk Design.

At first glance, Foundation looked like many other frameworks. It utilizes CSS classes like grids, columns, and has built-in styles. If you're familiar with frameworks like Bootstrap, then the learning curve is almost non-existent. Foundation's documentation is very well written and easy to navigate. Development options include using CSS or Sass. Between the two, Sass is more advantageous for using variables, making development easier.

Foundation has custom HTML tags for writing email components called Inky. The project I worked on had a short turnover time and needed to be completed the same day. I didn’t have an opportunity to utilize Inky but it's quite an interesting feature. The HTML-based templating language Inky "converts simple HTML into complex, responsive email-ready HTML.^[1]" Inky takes in simple HTML and spits out made for email HTML in tables with the classes intact.

For example this through Inky:

<container>
  </container>

Becomes this:

<table align="center" class="container">
      <tbody>
          <tr>
              <td>
              </td>
          </tr>
      </tbody>
  </table>

It's clear Zurb understands the struggles of email marketing since their website includes information on how different email clients treat email and CSS. They also list what email clients Foundation is compatible with. After building, sites like Litmus are useful for testing and displaying how the email will render on different email clients.

Building with Zurb Foundation

Getting started

Begin by downloading the files provided by Foundation. There are two ways to get started, selecting to build with their CSS version or Sass version. I selected CSS since it is "the fastest way to get started." Sass is useful in streamlining your workflow. Inside the "foundation-email" folder are two folders "css" and "templates" in addition to an index.html file.

Inside of templates is ready to use email layouts. They are pretty nice samples of common layouts for newsletters, marketing, adding a sidebar or featuring a hero image. The CSS folder has two files "foundation.css" and "foundation-emails.css" for the email's CSS. The index.html file is used for coding a layout from scratch. It's pretty much a boilerplate for HTML with the !DOCTYPE declaration, head element, body element and an outline for creating a table.

HTML emails are built on tables. There's no way around it if you want your email to work on multiple email clients. Foundation includes the use of grids, typography styles, buttons, callouts, and a few more features. Foundation states its components have been tested "in every major email client, including the problematic ones like Outlook". That's wonderful especially the Outlook part. Outlook is the troubled child of email clients always causing problems and failing to fall in line even with inline, lol. Even I get frustrated with the troubles Outlook brings to email development.

Foundation's grid includes a container, row, and columns. The container wraps the body of the email, the rows group the columns together, and the columns divide the layout into sections. If you ever run into any problems, look to the documentation for help. The team behind is Foundation are very helpful and provide a master class on Foundation for Emails in the form of an on-demand video series.

Additional styles

Foundation is great for providing styles you may need, such as typography, buttons, and callouts. There were a few additional styles I created, so I placed them in the head tag. And the few changes I made I added to the inside of tags with inline styles. I tested how the page would appear with Mozilla Firefox, Google Chrome, and Safari.

Web inliner

Foundation has a web inliner I absolutely adore. This is the last step in development and will become the production version of the email. Quick background information, email clients tend to strip CSS away from the HTML head and body. Behavior like this is why inline styles are a common practice in building HTML emails. Copying and paste the entire index.html into the HTML textarea field and foundation-emails.css in the CSS textarea field. Press the "Inline!" button and out comes the inlined email. With the web inliner, the styles I wrote in the head, were automated into the body’s inline style.

Testing

I tested the production version of the email with Litmus. It's a site that displays images of how different email clients would render email. This allowed me to see the errors that may occur. It also brought to my attention the flaws each email client contains. While testing, most of the issues came from Outlook. No surprise. The problem area was my footer, so I had some fixes to make. With the help of Litmus, I made the necessary corrections and the email eventually rendered close to exact on every email client

Result

I can't publish the client's work so instead, I created a one-column email campaign with Foundation. I placed it in CodePen for viewing. The results are below.

See the Pen Email Marketing One Column Foundation Email by Katherine Delorme (@Katdelorme) on CodePen.

My overall review of Foundation is that it defiantly did what I needed and was a breeze to build on. Though it comes with example templates, I didn’t have much use for them. Their documentation is well written. I absolutely adore their web inliner. That's because it’s a pain typing inline CSS since email clients like Outlook and Gmail strip them away at the head and body. Thanks to Foundation’s web inliner this process is automated. I enjoyed using Foundation for this project and recommend it for those looking for an email framework.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

Resources

[1] GitHub - foundation/inky: Convert a simple HTML syntax into tables compatible with Foundation for Emails. Github. Latest commit on Apr 19, 2017.

🕘 Updated: February 24, 2020

The post Using Zurb Foundation for Email Marketing appeared first on Let's Talk Design.

Three simple words that can lead to a lot of fun or cause trouble. But hey, what’s life without a little risk? I posed the question of “truth or dare” and a few members of the design community joined in the fun. And the results were hilarious!

Dare

— Rico Robinson (@RicusMaximus) August 29, 2017

My aren't we #brave: I #dare you to take two mismatched font types and pair them together. Post a picture of the combination. pic.twitter.com/MLk5nVKNrq

— Katherine Delorme (@Katdelorme) August 29, 2017

Ha! Easy
Your turn, #truth or #dare? pic.twitter.com/7bko1s0Wuk

— Rico Robinson (@RicusMaximus) August 29, 2017

Wow good job. Or bad job. Those #fonts, that combination.
You want to give me a #truth or #dare? Or others? pic.twitter.com/UPmInztfTi

— Katherine Delorme (@Katdelorme) August 29, 2017

You asked for it. #ChallengeAccepted pic.twitter.com/nQIF5HUYPQ

— Katherine Delorme (@Katdelorme) August 29, 2017

I sure there could be worse #color combinations. But this is bad. I had to actual take off my glasses while making this to protect my eyes. pic.twitter.com/2RkdFPIGjq

— Katherine Delorme (@Katdelorme) August 29, 2017

I dare you to creepily whisper in the person next to you ears "I hate widows and orphans" take a pause and then say "in typography"

— Katherine Delorme (@Katdelorme) October 30, 2017

Omg you actually did it! I started laughing so hard reading your tweet. U R a #dare master. pic.twitter.com/rsPsjYmBGb

— Katherine Delorme (@Katdelorme) October 30, 2017

Okay a #truth: What #design trend do you hate the most? (Open to past & present) pic.twitter.com/WbN8JMzON8

— Katherine Delorme (@Katdelorme) October 31, 2017

A really tough love / hate relationship being the Hero banner pic.twitter.com/FNs3LW3841

— Rico Robinson (@RicusMaximus) October 31, 2017

Omg hero banner. Yesssss. On the one hand they look good. On the other is it even unique? #designerproblems pic.twitter.com/6e492g5u4Y

— Katherine Delorme (@Katdelorme) October 31, 2017

Take part in the next truth or dare challenge. Follow Katdelorme on Twitter or like the Katdelorme Facebook page. When the post goes up choose truth or dare, if you’re brave enough that is.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

🕘 Updated: February 23, 2020

The post Designers: Truth or Dare appeared first on Let's Talk Design.

Working

When it comes to being in work mode we become a bit more conservative with our wallets. After all, bills still have to be paid. Yes, trying out local dining is still a must. It's likely you'll cave when it comes to your favorite dishes and treats. But you'll also start to think about expenses. Now, where did you put that packed lunch?

Tourist

The world is your dinner table. Eat everything and regret nothing. Binge eat on the local must-haves.

Buying Drinks

Working

It’s nice to have a drink and take time away from work.

Tourist

Shots. Shots. Shots. Shots. SHOTS. Drinks are on you.

Timeframe to Play

Working

Let see, if you finish sending that last email you’ll have a good hour after work to go out just before everything fun in town closes. Sigh, majority of cultural and touristy events take place in the day time.

Tourist

Let’s go here, here, here, and here.

Living Arrangements

Working

This looks like an affordable apartment.

Tourist

Yes! Hotel pillows are the best. This Airbnb rocks.

Living Amongst the Locals

Working

Coworkers, clients, neighbors, roommates, housemates, shopkeepers and restaurant servers. You know just hanging with the locals.

Tourist

Tour guides, hotel front desk, restaurant servers, and that person you asked to take a picture of you.

The Day Is Not Just Yours

Working

Okay, so you're working Monday through Friday. Once this project is complete and you clock out that'll leave you with how much time to explore local hotspots?

Tourist

The day is young and so are you.

Work-Life Balance

Working

Get some work done, get some play in.

Tourist

Work who? You earned this break.

Do you agree or disagree with these comparisons? How have your trips gone? Do you work or play? Share your vacation stories in the comments. Or introduce us to your tales of working abroad.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

🕘 Updated: February 23, 2020

The post Working In A New Country vs Visiting Like A Tourist appeared first on Let's Talk Design.

As you grow, whether as a designer or developer, it's good to have someone in the industry whose work inspires you. I'll share a few that do just that for me.

Let's Break It Down

• Ian Paget. Better known as Logo Geek. https://logogeek.uk
• Chris Coyier. Founder of CSS Tricks. https://css-tricks.com
• Mizko. Michael Wong. Sydney award-winning designer. Created TheDesignership, which I'm a proud Slack member of. http://www.mizko.net
• Beasty. France based freelance UI/UX designer. http://www.beasty.me
• Jeffrey Zeldman. Do you know "A List Apart"? Well, that's him. My fav article "Kiss My Classname". http://www.zeldman.com
• Khoi Vinh. Principal designer at Adobe working + Subtraction blogger. https://www.subtraction.com
• Thomas Park. Created Flexbox Froggy and other cool things. http://flexboxfroggy.com
• Riley Cran. Typeface designer, does lettering and graphic design. http://www.rileycran.com
• タカハシヒロユキミツメ. Can't read Katakana? No problem, Takahashi Hiroyuki Mitsume. I absolutely loved the Adobe Remix work. Mention it in my newsletter back in June. https://www.instagram.com/3eyestakahashi
• Ibrahim Jabbari. Award-winning web designer with code you could fall for. http://ibrahimjabbari.com/english
• Nicolas Beauvais. Software engineer working with laravel, vuejs + more. https://twitter.com/w3Nicolas
• Ray Villalobos. A Linda instructor and so much more. Enjoyed his in-person talk on Bootstrap, two years in a row at Orlando Code Camp. http://www.raybo.org

The More the Merrier

I discovered these amazing people in 2019 and 2020, and I am shocked I hadn't sooner.

• Haruki Tominage. An Osaka, Japan-based graphic designer I found on Twitter. He is great with Adobe products, especially Photoshop. He creates short 1 to 5-minute tutorials in simple Japanese even I can understand for Photoshop. I have to admit I was excited to find both a designer to follow and a way to sneak in extra Japanese practice.
• LaTanya Beauregard. Creative Director and Visual Creative Lead. Funny story. My friend, from the Japanese Language Meetup I host, told me about a Creative Director who spoke at a GDSA event at the University of Central Florida, my alma mater. My friend recapped the speaker's career at Disney. She felt the speaker was genuine when asking those attending to reach out to her with any questions. I, at the time, was looking at the profiles and portfolio websites of designers, developers, photographers, and writers. I came across an impressive Creative Director working at Yellow Shoes Creative Group, Disney's internal marketing team. After reading her LinkedIn profile I became curious and found interviews she participated in through Google. She seemed active in partaking in mentorships (AIGA Mentorship Program, The One Club for Creativity's Creative Boot Camp, etc). Her name also kept appearing in the credit portion of other designers and photographer's portfolios. I excitedly told my friend about this person while she excitedly told me about the speaker. Once we made the connection, we realized we were talking about the same person.
• Laura Price. Animation Artist. I discovered Laura on my YouTube homepage and out of curiosity clicked her video. Though I'm not in the same industry, I found her videos provided great advice on professionalism, portfolio, and making connections. Past projects included Tangled the Series on Disney, Steven Universe on Cartoon Network, and Nickelodeon.

Disclaimer: This list isn’t in any order of importance, skill level or popularity.

Thank You For Reading

Feel like this list is lacking some key people? Leave a comment with your choice. Their link would also be helpful.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

🕘 Updated: February 24, 2020

The post Prominent Figures In Web & Graphic Design I Admire appeared first on Let's Talk Design.

Includes:

• Pictures from Japan
• List of essential Japanese words
• Lessons on Japanese work etiquette
• Learning By Design: Lessons Learned
• Experience recap
• Travel destinations to explore
• Cultural experiences
• Culture shock
• Tips for adopting
• A giveaway

Join Here: http://bit.ly/1T9ulES Just select the “Designing in Japan” series.

Thank You For Reading

I hope you’ll continue to follow the journey.
Read the story behind the adventure: I’m Going to Japan/I’m in Japan.

Continue following the journey on Facebook, Twitter, LinkedIn, and Medium.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

🕘 Updated: September 23, 2017

The post Designing In Japan Series appeared first on Let's Talk Design.

Whether you’re moving your office on the road, becoming a digital nomad or taking a business trip, as designers our jobs revolve around our laptop and the internet. Traveling adds additional challenges while opening us up to opportunities.

In my case, I was off to Japan for seven-weeks. In the past, I've experienced working while traveling. I've done so in Miami, Orlando, California and even Mexico. I travel with items I need to get my work done and add comfort to an unconventional workspace. With this upcoming longer and international trip this list of must-haves has been refined and expanded. Here's a list of "Traveling Designer Essentials":

1. Portable battery/Charge Pack

Please and I mean please, carry a device that you can use to charge your phone. I cannot count the number of times I’ve needed one when outlets were unavailable. It's a relief knowing I'll have battery life in case of an emergency. A portable battery can be useful not only on long-distance travel but for shorter distance trips or even daily. It can come in handy during long all-day events such as conferences.

2. Knowledge on What Type of Plugs are Used at Your Destination

In my case, I was aware that two-prong plugs were commonly used in Japan. For electronic devices using three-prong plugs, this would be an issue. I'd be traveling with my Samsung charger and MacBook Pro that have two-prong plugs so I thought I'd be okay. It wasn’t until I landed at my layover destination, Qatar, that things became difficult. I was working in the airport's “quiet area” and needed to plug my laptop and find the outlet type you see below on the left. I worked until my laptop's battery life was at 20% then decided to go hunt for a compatible outlet. Finally, I discovered the universal style you see below on the right.

3. Plug Adapter

All-in-one travel adapters exist and help as a convertor. They can include a USB port and give users the ability to charge multiple devices at once. These are especially useful for those traveling to more than one country with different types of outlets. It seems more reasonable to buy an all-in-one travel adapters than each individual type when the situation calls for it. It’s okay if you choose to buy a single type of plug adapter, whatever you select make sure it works for you.

4. Ideal Laptop Carrying Case

You’ll be lugging around your laptop, might as well do so with comfort.

Example of carrying cases:

• Large purse
• Laptop Bag
• Strapped carrying case
• Tote bag
• Backpack

When selecting a laptop travel bag aim for something with padding and comfort for your arms and shoulder

5. Cash

Despite their popularity, credit cards aren't 100% universally accepted. In my situation, Japan is a cash-based society^[1], so coming with money on hand was NECESSARY. Carrying cash can also have benefits:

• Avoiding credit card and bank card fees.
• -It can help with budgeting.
• It’s useful in case of emergencies

Side note: I suggest converting money in your home country. It may be cheaper. Make airports your last resort, they tend to have higher conversion fees. Be sure to keep your receipt, some businesses waive the fee when converting back leftover money.

6. Electronic Backups

It'd suck for something bad to happen but it'd suck more not to have a backup. Sure we'd love it if life went how'd we want it too but that's not the case. We need to plan for any circumstance. Back up everything. Laptop, files, phone, etc. Options: External hard drive or cloud storage of your choice.

7. Update Software and Programs

Update all your important programs and software. Especially if there’s a chance you won't be able to connect to the internet for a while. Update your laptop, software, programs, and Adobe Creative Cloud membership. Test and make sure everything is functioning afterward..

8. Headphones

Do you work best with background music? Perhaps you want a visual sign to others that politely says “do not disturb”. Don’t forget your headphones. Whether from a dollar store or a specialty store, it doesn’t matter as long as it does its job. Feel free to upgrade to noise-canceling headphones.

9. Designated Work Time and Designated Work Area

I have to admit I didn’t give much thought to this. I figured I’d work whenever I got the chance: on the plane, during layover, in the hotel or in my new temporary room. But organized time can help with productivity.

Need a place to work?

• Look up local coworking spaces in advance.
• Check out the local cafe.
• Step into a library.

10. Work Material

• Laptop, duh obviously
• Phone, like you wouldd really forget it.
• Sketchbook
• Post-it Notes
• Writing utensil
• Wacom board, if you use one.

11. Time Tracking App, Billing App and/or Project Management App

• Slack
• Trello
• Asana
• Jira
• Workamajig
• Freshbooks
• Or whatever it is you use

12. Copies of Important Documents

It's good to have photocopies of important documents like your driver's license, passport, and birth certificate. This is pretty well-known advice but I had to take it a step further. I carried a copy of my glasses and contact prescriptions. I NEED my eyesight to work and in case anything were to happen to my glasses I’d like to be prepared. I even travel with a spare pair of glasses just to be safe.

Additional Suggestions

• Traveling Bag, Carry On
• Printed list of important and emergency contacts.

(Yes phones store this information but just in case something happens it'd be a good idea to carry a printed backup.)

• Long charging cable
• Downloads. Like your streaming services. For example Netflix's
• Reusable Water Bottle
• Hand Sanitizer and/or Sanitizing Wipes
• TheraFlu, Emergen-C and other medicines
• Snacks...Snacks...SNACKS

Thank You For Reading

I hope you’ll continue to follow me during my journey in Japan. I include recap segments in my monthly newsletter “Let’s Talk Design” I also have a weekly segment that goes more in-depth. If you’d prefer a monthly recap feel free to sign up. If you’re okay with a weekly read join here and only select the “Designing in Japan” series. No worries after my trip has completed this newsletter will cease as well.

I’ll also document my time on Facebook, Twitter, LinkedIn and Medium.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

Resources

[1] Money on your trip to Japan. japan-guide.com. Page was last edited on February 18, 2020.

🕘 Updated: February 23, 2020

The post Traveling Designer Essentials appeared first on Let's Talk Design.

For projects outside of Non-Disclosure Agreement (NDA), Non-compete, Confidentiality and Ownership agreement or other agreements/contracts, there could still be a chance of garnering it recognition and purpose. It's common practice to have a portfolio site, but with the popularity of Dribbble, Behance, and other portfolio sites targeted at creatives there are new platforms and avenues to give those almost forgotten projects a chance at being seen.

*Disclaimer* Some jobs do prevent the publication of works. Please review your contracts before proceeding with publishing online. Additional options and ideas will be given below for those with restrictive jobs.

For companies that don't already have a system in place setting up an archive could aid future workers. If the project is ever revisited, footnotes from the previous attempt could help save time. Looking at prior sketches and concept art can lead to inspiration. A notable example, Disney, has an archive that animators can look to and has even made their way to the public as bonus content in promo, DVD extra, books, exclusive tours, decor, other avenues and even creating the Walt Disney Archives and Animation Research Library.

What are your options?

For one, there's your portfolio site. Though that should be obvious. When it comes to working on personal projects like portfolio sites, it's typical to become busy and neglect to update. For this reason, I'm stressing the idea of updating work early. As time pass it'll be more taxing to work on portfolio updates as you scramble through folders trying to find files. Most often, the effort is placed when it’s time for a site redesign or job hunt. Honestly, unless your website is popular or you hold a prominent position at a well-known tech company, publishing to your portfolio isn’t enough. Though it’s a start, traffic might not be high.

I've mentioned some of these at the start, but once more here are some additional places to post your works:

• Dribbble - Publish “shots” of your work giving viewers a taste of your design.
  “Dribbble is a place to show and tell, promote, discover, and explore design."^[1]
• Behance - Ideal for case studies. You could simply upload your work, but there are additional options to take it further. Upload photos that do it justice: mockups, layouts, color scheme, font pairing, etc.
  Behance’s missions is “to empower the creative world to make ideas happen”. They’ve created a platform “to remove the barriers between talent & opportunity”.^[2]
• GitHub - An excellent place to host and review code, manage projects, and build software.
  “GitHub is a development platform inspired by the way you work”^[3]. GitHub “is how people build software”.
• CodePen - If your work is a snippet of code you’re proud of why not publish it here. It can be a menu idea, SVG image, CSS animation or even a hover effect you were proud of.
  “CodePen is a playground for the front end side of the web. It's all about inspiration, education, and sharing.”^[4]

This is just a shortlist of the most popular platforms. There are more options that service niche design communities.

Reworking projects

Another viable option would be to rework the project. It may take additional effort and it's up to you if worth it. Something along the lines of creating a new brand image, changing the color scheme or redoing the layout.

Let's get to work

Writing pretty words isn’t enough, let’s practice what we preach. I’m currently on my last days working at my present company. I finished redesigning and deploying the new corporate website but was unable to do the same for their careers website. In retrospect, I should have stuck to my guns and completed the careers website first. It contained the least amount of content and would be faster to work through. Working on the careers website would require I work with the human resource team, the marketing team I resided in and a review from the executive team. While the corporate website had more cooks in the kitchen from the sales team to the product development team. It probably would have been easier with fewer people to go through to obtain information and with fewer changes made WHILE currently working on the project. 😧

Well, I already worked on one UI design for the home page. As I stared at the design I questioned what to do. I could continue building upon it and making the other pages. But honestly, it may go nowhere. I also had my next projects to worry about and upcoming client work. Not to mention a trip across the world to do web design, I'll go into greater detail about that adventure in the future. So instead I decided to add it to my portfolio and social media profiles.

So let’s get started.

I decided to make use of the layout idea I drafted for a careers page redesign. Initially created for the company, it was never seen so why let a design go to waste.

First, I cropped a portion of the design to place on Dribbble. For this project, I chose the header and footer.

Then, I used the Dribbble image as the cover art on my portfolio site.

Next will be Behance. Here I'll go into a full detailed explanation about the design. Update: uploaded to Behance 8/21/2017

If I wanted to, this could also go up on Pinterest. I haven’t posted a UI design to Pinterest before, it's not a platform I would use to display my projects. I’ll think about it and create a new board just for website UI designs.

Now for sharing.

Uploading works is a good start, but they can also be shared on other platforms. In my case Facebook and Twitter. LinkedIn is also an option. I could also share it on Facebook groups for designer and Slack channels I’m apart of to gain feedback. Receiving feedback would be useful in case I decide to return to improve the project. I could push the design further and even create the remaining pages when I have downtime. One last place option I have is in an issue of my monthly newsletter Let’s Talk Design. I created this newsletter to help other designers kick start their design mojo. I would post the design as inspiration for readers and members of the design community.

Can’t share but don’t want your efforts to go wasted.

Now I’ve stated before it’s best to check with your work contracts whether you can share your works online. Most jobs see no problem with this, it’s great for promotion. But there are a few cases where this could become an issue such as government jobs. After reviewing your contract, there are some ideas you could do.

Before posting be sure to change out any sensitive materials or information. Maybe change the color scheme and show people what you can build.

If modification isn’t an option, I would suggest creating original works for your portfolio. Whenever you have time, whether after work or over the weekend, go for it! I’ve met many designers who worked at restrictive companies prohibiting public posts, leave after years of working at the company with no work to show for it. Their resume detail the amount of time they’ve spent at the company, but their portfolio remained empty. I wouldn’t want others to fall into this scenario. Occasionally there are exceptions and further detail on projects can be answered upon request. Even notable figures have a password-protected section on their portfolio with disclaimers to recruiters for job prospects.

The same applies to jobs where the work you created was lackluster. Maybe unrelated to the type of designer you want to be. This was the pit I fell into learning the outcome the hard way when it came time to redesign my portfolio site.

Additional options to share works

Instagram
JSFiddle
Webflow

Hope this post was a useful guide on how not to let your work go to waste. If you found this to be useful share the link and pass on the knowledge on. If you have ideas you’d like to add to this post, send me a message on any platform of your choosing.

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

Resources

[1] Audddience: A Comprehensive Guide to Building your Dribbble following. Icon Utopia.

[2] The Behance Team. Adobe Blog.

[3] The world's leading software development platform. GitHub.

[4] The best place to build, test, and discover front-end code. CodePen.

🕘 Updated: February 15, 2020

The post Don’t Let Work Go To Waste appeared first on Let's Talk Design.

So on this auspicious Monday, Frontend Orlando hosted a meetup called “Static Site Generators with Brian Rinaldi”. At this event, Brian demoed the capabilities of Jekyll in addition to steps on how to get started. He began with the commands needed to start a build.

(For more information about the installs needed for Jekyll and documentations visit Jekyll's offical site.)

Later, Brian showed examples of sites made with Jekyll. He displayed both his own and those from other developers. They looked quite impressive and I'm not just being bias because his stock images include characters from Adventure Time.

But there was still a question looming in my mind "why static?" Brian explained it was fast, secure, and flexible. Jekyll doesn't deal with server-side nor databases, thus there are no holes, making Jekyll a secure option. Plus, I’m sure there are a lot of people who dislike dealing with databases. Since Jekyll can do whatever it is you want, any limitation is up to your imagination. What was most helpful for me when I tried Jekyll out was my skill set and background in web design. Though mastering Google search and reading documentation is helpful enough.

Project Time

I decided a good project for using Jekyll would be a blog site. It ended up making for an interesting endeavor and proud creation. I have to admit getting the project started was frustrating. After clearing my first hurdle, the building process became simple and customization a fun exploration.

I’ve thought about creating a blog for my portfolio before. At first, my choice was WordPress, but it seemed too heavy of option for such a small desire. Jekyll focuses more on content and would make for a good solution. No databases, comment moderation, or annoying updates. Not to mention debugging when an issue arises from an update.

Is it tedious? Frustrating? Well, that’s a question you’ll have to answer for yourself. To each there own and for some this may work and others not so much.

What Jekyll does is take templating languages (.md, .yml, .scss, .coffee, etc.) runs it through an engine and spits out html, css, and js. This makes it a bit easier to build and maintain a site. But you don’t need an in-depth knowledge of Ruby in order to get started.

So I went for it and built my blog, this blog, on Jekyll. What do you think of my first Jekyll build? Checkout the images below. Reach out and let me know.

I hope you enjoyed the story of my introduction to Jekyll and my opinions. I hope to write a post detailing my experience of starting my first Jekyll build and go through step by step details on how to get started on your own. Interested in more stories like this, join my monthly newsletter below or follow me on Medium.

Previous Design:

*Since this is my word vomit dumping ground you can find my more refined written words on Medium. I love using this space to explore my journey as a designer and developer while not getting pressed to write in the most splendid manner. Proofreading, revising and consistently editing take up so much time personally. In the past, this has caused me to write less often something I to avoid. My aim is consistency. Added: March 5, 2018. Revised: February 15, 2020.

Resources

[1] Jekyll (software). Wikipedia. Page was last edited on December 21, 2019.

🕘 Updated: February 12, 2020

On February 2020 this site shifted away from being built on Jekyll.

The post First Jekyll Build! What Do You Think? appeared first on Let's Talk Design.