Flexbox

Lately I’ve been reading flexbox docs. There are a lot of really good articles already out there (linked below). I’ll share what I’ve learned using a few practical examples with links to the source and a few observations about the process.

Sample 1 (simulated simple bootstrap grid)

This is not my first time working with flexbox but when I initially compared it to the bootstrap grid, I preferred bootstrap because I felt like I had a little more layout control.

One area where flexbox is much better than bootstrap is in footprint size. There is a lot of code in bootstrap that goes unused and defining a responsive grid using flexbox does not require very much code.

*Please click the upper left corner to get to the pen content and then the Edit on CODEPEN link (upper right) will also be available.

Note: this grid collapses in mobile device view also there are some observations in the content header.

Sample 2 (example of vertical layout)

This example specifically refers to when would you prefer to use

flex-direction: column 

One scenario could be if you have a bunch of dynamic content with similar widths but varying heights (photos or maybe work portfolio samples). Typically a grid system with this kind of content would force an alignment with a bunch of irregular white space between elements.

Tip: When you want the content to lay out with an even bottom edge (desktop/tablet views) you need to mind that the total height for elements in each column would equal the flex container height. Otherwise a jagged bottom edge could result (which I guess could be an option).

Note: This grid collapses in mobile device view.

 

Sample 3 (simulation of a marketing homepage)

To test the ease of use of flexbox, this is a simulation of a consumer hardware company’s homepage. They do great marketing design. This simulation does not go into the nitty gritty details (like navbar responsive design) but emulates their body/footer responsive design. It did not feel too labor intensive and the code footprint is still very light.

Note: the breakpoints are between mobile:tablet, and between tablet:desktop

https://codepen.io/cch5ng/full/gRwYPe/

Final tip: My initial observation when googling flexbox is that it is potentially a very complex topic to learn. Rather than starting with a site that contains a ton of reference info about each property, I like the link below by webdesignerwall because of their visual style of teaching and simplicity.

Afterward, please search further for more advanced tutorials on flexbox because this is only the tip of the iceberg (but hopefully helpful).

Resources

 

Advertisements

Women’s Tech Panel Talk

(Follow up: Get a list of speakers/titles)

This afternoon women reps from various parts of Mozilla (including HR/Recruitment, Engineering management, Culture) held a Q&A session. There was tons of info and advice but I will try to give brief highlights:

Don’t take things too personally.

Reflect on successes and failures. Decide what you learned from both.

Get a lot of buy in when making really big decisions with large impact.

Go with your guts about people.

Make decisions that give yourself more options.

One manager remarked that her style was to have great personal relationships with people and really tried to get to know people on their level.

After the internship, when job hunting and you get an offer:

     * Negotiate your salary

     * Listen to their offer, tell them thank you and that you’d like to take 2 days to discuss it with your people. Afterward, make your counter offer. Do not take the initially offered salary.

Seek mentors.

Have confidence in your own abilities. Don’t be scared to ask questions.

Tech Resources

This is an ongoing post where I’ll share resources I find for learning or productivity. When updates are made to a section, the section heading will be marked in a color and marker (new or updated). Also links will be ordered from newest to oldest

Web Dev

JavaScript

 

Web Design

This is a really nice codepen by Angela V for custom radio buttons (css)

 

Productivity

Creating command line shortcuts for git commands

 

Communication

Tips for embedding codepen samples on wordpress sites

  • I’m using oEmbed so I just copy the url of the codepen into an empty line in my wordpress.com site editor

 

Internships Advice (new)

https://www.pwc.com/us/en/careers/campus/internships/make-the-most-of-your-internship.html

http://www.businessinsider.com/common-mistakes-interns-make-2014-6

https://hbr.org/2016/07/6-ways-to-make-the-most-of-your-internship

https://www.forbes.com/sites/susanadams/2014/06/18/how-to-make-the-most-of-your-internship-3/#27ac174e6f5c

https://www.forbes.com/sites/karimabouelnaga/2016/07/07/5-tips-to-make-the-most-of-your-summer-internship/2/#11bb7c5d6d3b

Intern Talk by Selena Deckelmann

Mozilla has organized a series of talks for summer interns. The first was by Selena Deckelmann, Director of Firefox Runtime.

These are some memorable points to think about:

  • Creating a circle of work advisers
  • Write down your dreams
  • Do the hard thing (find a hard problem to tackle)
  • Listen to criticism, sometimes

On her slide deck, the slide that shows periods leading to realizing dreams also coincides with periods of struggle. I have to wonder whether I am not struggling enough(?).

Webcompat Intro

Webcompat is a volunteer service that allows web developers and designers to report cross browser compatibility issues observed in their websites and applications. The issue will be triaged and a solution or browser fix will be returned.

webcompat.com screenshot

Webcompat.com browser compatibility reporting site

One of my tasks as Front End Dev intern for Mozilla Webcompat (via Outreachy) this summer is to help migrate the webcompat.com application to a new architecture and version.

These are a few tools that web developers/designers can take advantage of today:

  • Firefox and Chrome add-ons: After installing this add-on for your browser, you can conveniently report cross browser issues from your website with just one click. (see the screenshot upper left corner for link)
  • CSS Fix Me: This tool allows you to enter CSS that is not working across browsers and provides updated CSS with vendor prefixes for improved cross browser compatibility.
  • Media Reporting Tool: (available on Firefox Nightly version only) Automatically detects video playback issues related to browser and provides a one-click method to report the issue from your website.

So far, I am learning about code tidying processes that are required for the build process to run (on travis). These are a few resources for the processes we are using:

That is all for now. Look forward to meeting project members and other interns at the All Hands meeting this summer.

Front End Web Interview Application

I have a web application on Github that generates random Front End Web Interview questions for practicing before interviews. This is a description about the process of developing the application. It should be noted that my main purpose in developing this application was to practice my Angular.js application development. Comments on the application are welcome.

Inspiration

  • I’m a Front End Web Developer who is seeking a new job. I was looking for resources online for how to prepare for technical interviews. I found the h5bp project’s interview questions list on github. But I was interested in playing with the data.

Problem 1

  • The main data format of the original list of questions is a README.mdn markdown file. Initially I didn’t even think it was possible to work with data in this format.
  • Resolution 1: I found the project’s gh-pages branch and corresponding index.html page with interview questions. The first iteration of my application’s logic did an HTTP Get on that index.html page and parsed the results.

Problem 2

  • Ruh-Roh (that’s in the voice of Scooby Doo), I compared the current README.mdn to the index.html page in the h5bp project and realized that they contained some different questions. I scanned the project issues and came to the conclusion that one of the contributors would manually generate the HTML list from the README and post to the gh-pages branch. But keeping the HTML version up to date was not a high priority.
  • Resolution 2: I found a website, dillinger.io, that would take a markdown file and parse it into HTML. My current process is to manually run the h5bp README in the dillinger.io parser and update the resulting HTML in my github project. I don’t really like having this manual step but it allows me to ensure that the presented list is relatively current. Also it gives me an assurance that my application will not break unpredictably when the list format changes on the h5bp project side.

Problem 3

  • I considered application features that would be more helpful to users who would administer technical interviews (for ex., Lead developers, Hiring managers). I thought managers might want to save a boilerplate interview or sort saved interviews in a particular order (like easiest to hardest questions).
  • But this would require some form of data storage. As I looked into options like local browser storage and IndexedDB, I had questions about what would happen when and if the h5bp questions list changed (like questions could be added or removed) and how to synchronize two versions of lists. I decided to table further enhancements requiring data storage to a different application maybe warranting use of a database and user authentication.

Cross Browser Testing Resources

Updated 03.04.15

I found a few useful links related to Cross Browser Testing.

Original: A few years ago I swapped my PC for a Mac. Recently I’ve been thinking about how to test websites on older versions of IE browser. Here are a couple of options:

  • Sauce Labs: They offer a paid service for running manual or automated web application tests. You can choose to test on different combinations of OS and web browser (with different browser versions). The test instances are running on VM’s. Pricing is mainly based on monthly subscription but testing on open source projects is free. (When I was volunteering with Mozilla’s Web QA, they were running Selenium tests on some web projects via Sauce Labs)
  • BrowserStack: This sounds like a similar service to Sauce Labs. I have not tried it out to see which is better/worse. They offer a free trial but otherwise require a paid monthly subscription. They got referrals from some big names in web dev. (Trivia: They are based in Mumbai)