Design in Browser

There have been a number of discussions at various WebProfessionals.org meetings about the concept of “design in browser.” As the spring semester starts to draw to a close, I thought it might be an appropriate time to review this concept as it helps bring a number of aspects of web design into focus. It is also a good way to confirm you really understand working with HTML, CSS and related technologies.

The two main tools I recommend using when designing using a browser are the Chrome browser and Brackets as an editor. In the most simple form, one modifies the CSS on a given page directly in the browser and then copies the modified code and pastes it into the associated document. This is enabled because of two capabilities in Chrome:

  1. the inspection tool (this will also open the Developer tools) (Ctrl[or CMD]+Shift+i)
  2. device mode (Ctrl[or CMD]+Shift+M)

I suspect many students reading this article have not worked extensively in this manner. Let’s get started. Read more »

Web Design MOOC 2016

I recently completed teaching another MOOC (Massive Open Online Course). This one was on web design using the Adobe MUSE application and was done as part of the Adobe Education Exchange. This course ran from January 25 to March 11, 2016. If you have been reading this blog for a while, you may recall some of my earlier observations:

I thought it might be helpful to focus on additional insights rather than rehash the technologies and results. For those who are curious, the technologies remained similar to what I used in 2014 and the results were also similar. Read more »

Critical Error – Start Menu Not Working

For the past month (March 8 to April 6, 2016), my sole Windows 10 laptop has been experiencing a strange problem. Every time I clicked on the Windows logo “new start menu,” I received the following error message.

Critical error - start menu not working

Of course, you can’t close this message. Clicking “Sign out now” is pointless as the problem remains when you sign back in. So, I just moved the message out of the way and continued using the computer.

One of the reasons to upgrade to Windows 10 from the disaster known as Windows 8.1 was the return of the start menu; so I found this a bit frustrating. I do know enough about computers that I can function just fine without the start menu. That being said, I thought I would share my experiences as I debugged the problem. Read more »

Natchez Trace

During spring break this year, my wife and I spent a fair amount of time in the state of Mississippi. Last week, I reviewed the Mississippi petrified forest. After leaving the petrified forest, we decided to drive on the Natchez Trace Parkway (from Jackson, MS to Tupelo, MS). Yes, Tupelo is the birthplace of Elvis (in case you didn’t know). We only drove a part of the Parkway – it is a total of 444 miles in length (and passes through 3 states). If you are interested in history, President Thomas Jefferson (in 1801) designated the Natchez Trace a national post road for mail delivery between Nashville and Natchez. Meriwether Lewis (of Lewis and Clark fame) died on the Trace in 1809. Let’s learn a little more about the Trace. Read more »

Mississippi Petrified Forest

During the week of spring break (March 21 – 25, 2016), my wife and I visited various areas in Mississippi and Missouri. I thought it might be interesting to review some of the places we visited instead of focusing on technology for the next couple of entries. Since the main purpose of our trip was to visit the petrified forest in Mississippi, I wanted to focus on that first. Until last year, I always thought of Arizona when someone mentioned a petrified forest. It turns out there is also one located near the town of Flora, MS. Although this was formed in a similar manner to the one in Arizona (petrified log jam in a large river), the petrified forest in Mississippi is much younger (only 36 million years old). Read more »

Chrome Browser Extensions

Those who know me realize that I am always interested in web technologies and how they relate to business. I thought it might be helpful to identify some of the Chrome browser extensions I use on a regular basis (and my rationale for using them). Although I use a fair number, I thought I would cover the following ones today:

I like to know a little about the web sites I visit and these specific extensions provide me with a wealth of knowledge. Let’s examine each in a bit more detail (including why I use these). Read more »

Adobe XD

A new preview product was released by Adobe on Monday, March 14. It was first demonstrated at AdobeMAX and looks to be very useful from a UX/ UI design workflow. Previously, one could develop simple mock-ups of web pages or mobile apps using tools like Photoshop or Illustrator. However, it was difficult to actually show the proposed screen flow to a client. This is where the new Experience Design product can prove useful. This is a preview (which means there may be additional enhancements coming in the future). Let’s take a brief look at the product. Spoiler alert – it presently only works on Macs.

Read more »

Adobe Portfolio

Adobe recently released an interesting tool – Portfolio. If you have a Creative Cloud account and a Behance portfolio, you can easily use this tool to create a portfolio of your work. For those who are interested in quickly promoting examples of their work (with customization options), this is a quick way to create a web page. If you are curious how quickly one can create something – this example was done in under 15 minutes. Ok, I know, but my point is that you can quickly have something available and can modify as you desire.I thought I would provide a quick overview of some of the options and capabilities for those who are not aware of this tool. Read more »

Productivity tips – AHK

How often do we start our computer, open a handful of applications, visit various websites, and then begin our work. Same routine almost every day. This is where a tool which has been around for a long time comes in very handy. Instead of manually starting all these applications and then navigating to various web pages, just use a keyboard shortcut to launch all at once.

  • Auto Hot Key (AHK) [Windows] and somewhat similar Keyboard Maestro [Mac] allow us to automate many mundane tasks (and save a fair amount of time in the process).

This tool was also mentioned by the webinar from Pariah Burke, but I already knew about this gem (and have used it for quite a while). A colleague, Scott Rhine, introduced me to this tool many years ago. Without going into too much detail, someone mentioned that they had a survey and specifically said we could only vote once. Their challenge was accepted. I think there were 60 people in attendance (and there were over 37,000 votes cast). Yes AHK can be used for fun as well.

Let’s examine the core functionality (and why I use this to improve my productivity).

Read more »

Productivity tips – Hygeia and Hazel

This is the second in a series of productivity tip articles inspired by a recent conducted by Pariah Burke. Last week, I examined PhraseExpress [Win] and TextExpander [Mac] which allow you to insert snippets of text which are then expanded (saving me a bunch of typing). This is one of the tools which allows me to “work smarter, not harder.”

Another tool mentioned by Pariah is one I find very helpful for certain tasks. I take a lot of photos and like to organize them in appropriate folders. I also want to resize the image before posting these to social media.

  • Hygeia [Win] and Hazel [Mac] are very useful for repetitive tasks such as organizing files into folders and modifying the contents of the files (such as re-sizing the image).

Since many readers use Windows as their primary operating system, I plan to focus on Hygeia [Hazel is the Mac equivalent].  Let’s investigate this tool a bit. Read more »

Productivity tips

I had the privilege of participating in a webinar conducted by Pariah Burke recently. He focused on a number of applications he uses to increase his productivity. This inspired me to develop a series of short articles on various tools one can use to be more productive. I plan to focus on these tools individually over the coming weeks.

  • PhraseExpress [Win] and TextExpander [Mac] allow you to insert snippets of text which are then expanded (saving me a bunch of typing). Pariah focused on this one first. I like that it can be used across a number of applications. Yes, I can even create snippets of HTML to include in a file.

Since many students work mostly with Windows computers, this is where I plan to focus. Let’s learn a little more about PhraseExpress.

Read more »

Docker Containers

I recently posted an article on web developer trends for 2016 at WebProfessionals.org. One of the technologies I believe will grow in importance in 2016 is Docker containers. For aspiring web developers (particularly those in our CMWEB program), I thought it might be helpful to further explain the concept. I will start with an overview of the basics of working with this technology. If there is sufficient interest, I will continue to delve further in subsequent posts here.

So, what are Docker containers and why are they important? Readers may be familiar with virtual machines (where one operating system can run virtually within another). Docker containers extend that concept further. Essentially, everything you need to run your application is contained. This includes the operating system kernel, your code, your data (and data stores). Everything. The main difference from a virtual machine is that the latter contains the entire operating system (even if it is GB in size). Each virtual machine may be very large and take time to load. Containers share the operating system kernel with other containers, but run as isolated processes. Essentially, they will run “on any computer, on any infrastructure and in any cloud.” Quote from: https://www.docker.com/what-docker To me, the biggest advantage is that you don’t need to worry as much about infrastructure and can focus on application development. Also, they load very quickly (where virtual machines can take a very long time to load). Let’s learn a bit more about this technology. Read more »

Super Bowl 50 commercials

Yes, I watched Super Bowl 50 last night. No, I didn’t pay that much attention to the football. I think one of the teams won. I confess I really like the commercials. Rather than just watch the commercials, I thought I would do a bit of analysis. As we all know, marketing is about building awareness. Many businesses are getting very good at this. For example, many now release their commercials before the big game to start building buzz. I am sure you have already seen the dachshunds leaping towards the ketchup and the Amazon Echo ad several times already (and many others).

I decided to keep track of all the commercials which aired during the Super Bowl and track certain characteristics. For what it is worth, I only tracked those commercials which aired between kickoff and end of game. I may well do some additional analysis. In the interim, here are some interesting observations. Read more »

A cautionary tale

I recently experienced a situation which has several “lessons learned” and I thought I would share. Since many readers of these articles are students and former students, you may benefit from this experience. The saga began in late December, 2015. My wife got a phone call alleging to be from an ICANN registrar. She did what I always ask when presented with random unsolicited phone calls – she hung up the phone. I recommend this as a first line of defense since it is rare that someone from such an organization would call. A few days later, another call came in. I answered and they piqued my curiosity so I stayed on the line. Read more »

CSS Grid

I recently read the book “Get Ready for CSS Grid Layout” by Rachel Andrew. The more I understand about CSS grid layout, the more I like it and hope it is soon implemented in browsers. Presently it works well in Canary and mostly in Firefox nightly builds. I will include screen captures in my discussion in the event you do not want to download Canary to see them first hand. To me, the quote by Eric Meyer in the forward to the above book sums up this improvement.

“Grid Layout is to Flexbox as PNG is to BMP, and then some.”

Let’s examine some bits of code to better understand the capabilities. Read more »

Next Page »