Here are some great resources for getting images to use without copyright issues. NOTE: I firmly believe that if you can’t take the picture or make the graphics, then why the f are you calling yourself a designer, but in a pinch, these are available. If I were to use them in a project, I would make sure to edit them so they are not recognizable as the original free image.
Category: 3DW DevTools
Job History Of Chef At The Olive Garden
Culinary Team Certified.
For my first step in becoming an award winning chef at The Olive Garden, I undergo intensive hands-on training for 2 weeks prior to the grand opening of the new restaurant in Burlington Washington. After successfully completing this training, I am awarded with the “Culinary Team Certified” pin and a full time position as head chef.
Employee Of The Month.
This was my first award, I was chosen as first culinary team member employee of the month, soon after the restaurant opened. This award is given by the management for stellar performance under fast paced conditions.
Certified Trainer.
I was nominated to enter the certified trainer program by my supervisor, who told me that “I had skill and reliability that was unparalleled in her time at Olive Garden.” I took classes on training procedures, food safety and sanitation standards, and general knowledge of the dishes and recipes. I easily passed all the tests with high scores, and became Certified Trainer for the kitchen, responsible for training new hires to the high standards of quality and service expected by my supervisors.
Pace Setting Award.
This award is gained by obtaining the highest scores in the entire region in every category including food quality, customer satisfaction, corporate “Total Quality” inspections, State Health Department inspections.
P-Pace: Personalizing the dining experience by understanding the guest’s time expectations (are they in a hurry, are they meeting friends and taking time to catch up, etc…)
A- Attentiveness: Building connections with our guests, being attentive to their needs and making them feel comfortable. Smile, be friendly, approachable and laid back.
C-Caring: Have a spirit of warmth and generosity that shows through my actions. BE KIND…. always look for an opportunity to show kindness ESPECIALLY in a situation with a dis-satisfied guest.
E- Excellence. Set High expectations and not just meet them but exceed them. Deliver on those Goals 100%!
Forbes 100 best companies.
Proud to be part of the team that has earned the award to be one of the 100 best places to work.
Primo Chef Award.
I am very proud of this award because I was chosen by my peers. My fellow co workers nominated me for this award due to my stellar performance, outstanding food quality, speed and my great work attitude.
Service Team Certified.
This is awarded for completing front of house training. I didn’t feel complete with only back of the house skills, I decided to round out my training by learning how to provide outstanding service to customers.
Banner and Slider Administration Control Panel
Due to my years of experience designing custom content management systems, I have been tasked with creating a plug in to the CMS at Skagit Valley College that will allow staff to administer their respective home page image sliders via a web based admin control panel. Features include list of slides, ability to upload new slides, delete slides, arrange the sequence of the slides, and control the display of the slides. The slides are live at www.skagit.edu
The users will also have the ability to administer home page banners. Features include list of banners, ability to upload new banners, assign banner to homepage, delete banners.
The purpose of this project is to reduce webmaster workload by allowing staff to admin their respective home page sliders and banners. I will be taking on the role of Senior Developer for this project, and will perform the duties of all roles including : Information Architect, User Experience Designer, User Interface Designer, Web Application Developer, SQL Database Administration.
I begin with the I/A documentation, the key to every successful project. After creating the Creative Brief, and clearly stating the objectives, purpose, target audience and timeline for the project, I then create the Flowcharts, Wireframes and User Stories.
With all the proper documentation in place, I have a clear project scope and will begin the design, develop and deployment by using my project management cloud.
From the screenshot you can see the hand written notes from meeting with the client, and the task lists that I created for the project. Each task list is filled with the tasks that I need to get done, and notes about each topic. It really helps keep me on track and manage the progress for the project.
I am going to develop an object oriented api for this project, with the application programming interface expressed in javascript and vbscript.
The api to handle the upload of slides will be interesting, since there isn’t a build in method for capturing the form upload data. We are using a third party library to handle the upload, and I haven’t even seen it yet.
I have the list of slides layout in a table, since its the perfect use of tablular data. The list is generated dynamically and injected into the dom via a call to the api. This has the effect of negating my events that I place on the image to have a mouseover thumbnail preview. I need to use the doc delegate that I deved into in a previous article.
Im going to delegate the event to my slides layout table, and then apply it to any td element with the class of “previewzone”. So lets slap it on there and see if it works…
$("#slideslist").on("mouseover mouseout", ".previewzone", function(e){
alert(e.type);
});
Sweet! Now I can set up the event handler so that it displays a preview of the image on mouseover, and hides it on mouseout.
Creating and maintaining secure passwords using Password Generators
Creating secure passwords can be pretty lame. Most sites have different requirements such as number of characters, the need to include special characters, capital letters, and numbers. I have found some great resources for creating passwords generated to specifications such as number of characters, special characters and other requirements.
- Norton is a trusted security software suite, and they offer a free password generator on their site.
Beyond Responsive Web Design – Creating Content for Different Devices
There are some things that should not be handled with responsive design. For example I’m creating bonus content for devices with very large screens. Using responsive design, the common technique is to load this bonus content into the dom but not show it for certain size screens. However this still takes its toll on the load time and would impact performance of the device since it would still have the content in its memory.
For the bonus content, I am going to display a large graphic image only on devices that meet a certain height and width requirement. This can be easily accomplished without a third party plug in or framework using standard JavaScript.
The JavaScript behind this is surprisingly simple and cross browser compatible. I have tested successfully on PC’s with new ie and firefox, surface pro, android 2.2 up, ipad, iphone, blackberry playbook, older imac with safari.
var screenheight=screen.height; var screenwidth=screen.width;
if(screenwidth>=1280 && screenheight >= 1000){
// execute my sweet js script to display bonus content.
}
Using Browser console for debugging Test Driven JavaScript
One of the great things about TTD is the ability to track the success of each action in the application, whether it was user initiated or an automatic application function. For me, so far, one of the best ways to do this is using the debug console built into the browser. Each browser is specific, of course, but there is a simple technique to use the code cross browser without generating errors.
if(!window.console){ window.console = {log: function(){} }; }
An example of usage is in my form content wizard plugin.
// look into step for custom button, then add the "begin" button to the first step if not there.
if(!beginbuttonclass){
var beginbuttonclass="";
console.log('Note from content display wizard plugin: beginbuttonclass has not been defined. See documentation for more information.');}
To see if an external script is loaded sucessfully, you need to have a variable that the script would provide, then check for it. For example here we will try see if I have successfully loaded JQuery from the cdn: (code.jquery.com/jquery-1.10.2.min.js)
try {
if($()){console.log("Message from slider admin: Jquery loaded... now executing document load functions...");}
} catch (e) { console.log("Message from slider admin, error loading jquery..."+e.message); }
CSS Color chart
Here is a chart of css colors with common names avaible in most browsers.
| HTML name | Hex code R G B | Decimal code R G B |
|---|---|---|
| Pink colors | ||
| Pink | FF C0 CB | 255 192 203 |
| LightPink | FF B6 C1 | 255 182 193 |
| HotPink | FF 69 B4 | 255 105 180 |
| DeepPink | FF 14 93 | 255 20 147 |
| PaleVioletRed | DB 70 93 | 219 112 147 |
| MediumVioletRed | C7 15 85 | 199 21 133 |
| Red colors | ||
| LightSalmon | FF A0 7A | 255 160 122 |
| Salmon | FA 80 72 | 250 128 114 |
| DarkSalmon | E9 96 7A | 233 150 122 |
| LightCoral | F0 80 80 | 240 128 128 |
| IndianRed | CD 5C 5C | 205 92 92 |
| Crimson | DC 14 3C | 220 20 60 |
| FireBrick | B2 22 22 | 178 34 34 |
| DarkRed | 8B 00 00 | 139 0 0 |
| Red | FF 00 00 | 255 0 0 |
| Orange colors | ||
| OrangeRed | FF 45 00 | 255 69 0 |
| Tomato | FF 63 47 | 255 99 71 |
| Coral | FF 7F 50 | 255 127 80 |
| DarkOrange | FF 8C 00 | 255 140 0 |
| Orange | FF A5 00 | 255 165 0 |
| Gold | FF D7 00 | 255 215 0 |
| Yellow colors | ||
| Yellow | FF FF 00 | 255 255 0 |
| LightYellow | FF FF E0 | 255 255 224 |
| LemonChiffon | FF FA CD | 255 250 205 |
| LightGoldenrodYellow | FA FA D2 | 250 250 210 |
| PapayaWhip | FF EF D5 | 255 239 213 |
| Moccasin | FF E4 B5 | 255 228 181 |
| PeachPuff | FF DA B9 | 255 218 185 |
| PaleGoldenrod | EE E8 AA | 238 232 170 |
| Khaki | F0 E6 8C | 240 230 140 |
| DarkKhaki | BD B7 6B | 189 183 107 |
| Brown colors | ||
| Cornsilk | FF F8 DC | 255 248 220 |
| BlanchedAlmond | FF EB CD | 255 235 205 |
| Bisque | FF E4 C4 | 255 228 196 |
| NavajoWhite | FF DE AD | 255 222 173 |
| Wheat | F5 DE B3 | 245 222 179 |
| BurlyWood | DE B8 87 | 222 184 135 |
| Tan | D2 B4 8C | 210 180 140 |
| RosyBrown | BC 8F 8F | 188 143 143 |
| SandyBrown | F4 A4 60 | 244 164 96 |
| Goldenrod | DA A5 20 | 218 165 32 |
| DarkGoldenrod | B8 86 0B | 184 134 11 |
| Peru | CD 85 3F | 205 133 63 |
| Chocolate | D2 69 1E | 210 105 30 |
| SaddleBrown | 8B 45 13 | 139 69 19 |
| Sienna | A0 52 2D | 160 82 45 |
| Brown | A5 2A 2A | 165 42 42 |
| Maroon | 80 00 00 | 128 0 0 |
| HTML name | Hex code R G B | Decimal code – R G B |
|---|---|---|
| Green colors | ||
| DarkOliveGreen | 55 6B 2F | 85 107 47 |
| Olive | 80 80 00 | 128 128 0 |
| OliveDrab | 6B 8E 23 | 107 142 35 |
| YellowGreen | 9A CD 32 | 154 205 50 |
| LimeGreen | 32 CD 32 | 50 205 50 |
| Lime | 00 FF 00 | 0 255 0 |
| LawnGreen | 7C FC 00 | 124 252 0 |
| Chartreuse | 7F FF 00 | 127 255 0 |
| GreenYellow | AD FF 2F | 173 255 47 |
| SpringGreen | 00 FF 7F | 0 255 127 |
| MediumSpringGreen | 00 FA 9A | 0 250 154 |
| LightGreen | 90 EE 90 | 144 238 144 |
| PaleGreen | 98 FB 98 | 152 251 152 |
| DarkSeaGreen | 8F BC 8F | 143 188 143 |
| MediumSeaGreen | 3C B3 71 | 60 179 113 |
| SeaGreen | 2E 8B 57 | 46 139 87 |
| ForestGreen | 22 8B 22 | 34 139 34 |
| Green | 00 80 00 | 0 128 0 |
| DarkGreen | 00 64 00 | 0 100 0 |
| Cyan colors | ||
| MediumAquamarine | 66 CD AA | 102 205 170 |
| Aqua | 00 FF FF | 0 255 255 |
| Cyan | 00 FF FF | 0 255 255 |
| LightCyan | E0 FF FF | 224 255 255 |
| PaleTurquoise | AF EE EE | 175 238 238 |
| Aquamarine | 7F FF D4 | 127 255 212 |
| Turquoise | 40 E0 D0 | 64 224 208 |
| MediumTurquoise | 48 D1 CC | 72 209 204 |
| DarkTurquoise | 00 CE D1 | 0 206 209 |
| LightSeaGreen | 20 B2 AA | 32 178 170 |
| CadetBlue | 5F 9E A0 | 95 158 160 |
| DarkCyan | 00 8B 8B | 0 139 139 |
| Teal | 00 80 80 | 0 128 128 |
| Blue colors | ||
| LightSteelBlue | B0 C4 DE | 176 196 222 |
| PowderBlue | B0 E0 E6 | 176 224 230 |
| LightBlue | AD D8 E6 | 173 216 230 |
| SkyBlue | 87 CE EB | 135 206 235 |
| LightSkyBlue | 87 CE FA | 135 206 250 |
| DeepSkyBlue | 00 BF FF | 0 191 255 |
| DodgerBlue | 1E 90 FF | 30 144 255 |
| CornflowerBlue | 64 95 ED | 100 149 237 |
| SteelBlue | 46 82 B4 | 70 130 180 |
| RoyalBlue | 41 69 E1 | 65 105 225 |
| Blue | 00 00 FF | 0 0 255 |
| MediumBlue | 00 00 CD | 0 0 205 |
| DarkBlue | 00 00 8B | 0 0 139 |
| Navy | 00 00 80 | 0 0 128 |
| MidnightBlue | 19 19 70 | 25 25 112 |
| HTML name | Hex code R G B | Decimal code R G B |
|---|---|---|
| Purple colors | ||
| Lavender | E6 E6 FA | 230 230 250 |
| Thistle | D8 BF D8 | 216 191 216 |
| Plum | DD A0 DD | 221 160 221 |
| Violet | EE 82 EE | 238 130 238 |
| Orchid | DA 70 D6 | 218 112 214 |
| Fuchsia | FF 00 FF | 255 0 255 |
| Magenta | FF 00 FF | 255 0 255 |
| MediumOrchid | BA 55 D3 | 186 85 211 |
| MediumPurple | 93 70 DB | 147 112 219 |
| BlueViolet | 8A 2B E2 | 138 43 226 |
| DarkViolet | 94 00 D3 | 148 0 211 |
| DarkOrchid | 99 32 CC | 153 50 204 |
| DarkMagenta | 8B 00 8B | 139 0 139 |
| Purple | 80 00 80 | 128 0 128 |
| Indigo | 4B 00 82 | 75 0 130 |
| DarkSlateBlue | 48 3D 8B | 72 61 139 |
| SlateBlue | 6A 5A CD | 106 90 205 |
| MediumSlateBlue | 7B 68 EE | 123 104 238 |
| White colors | ||
| White | FF FF FF | 255 255 255 |
| Snow | FF FA FA | 255 250 250 |
| Honeydew | F0 FF F0 | 240 255 240 |
| MintCream | F5 FF FA | 245 255 250 |
| Azure | F0 FF FF | 240 255 255 |
| AliceBlue | F0 F8 FF | 240 248 255 |
| GhostWhite | F8 F8 FF | 248 248 255 |
| WhiteSmoke | F5 F5 F5 | 245 245 245 |
| Seashell | FF F5 EE | 255 245 238 |
| Beige | F5 F5 DC | 245 245 220 |
| OldLace | FD F5 E6 | 253 245 230 |
| FloralWhite | FF FA F0 | 255 250 240 |
| Ivory | FF FF F0 | 255 255 240 |
| AntiqueWhite | FA EB D7 | 250 235 215 |
| Linen | FA F0 E6 | 250 240 230 |
| LavenderBlush | FF F0 F5 | 255 240 245 |
| MistyRose | FF E4 E1 | 255 228 225 |
| Gray/Grey/Black colors | ||
| Gainsboro | DC DC DC | 220 220 220 |
| LightGray | D3 D3 D3 | 211 211 211 |
| Silver | C0 C0 C0 | 192 192 192 |
| DarkGray | A9 A9 A9 | 169 169 169 |
| Gray | 80 80 80 | 128 128 128 |
| DimGray | 69 69 69 | 105 105 105 |
| LightSlateGray | 77 88 99 | 119 136 153 |
| SlateGray | 70 80 90 | 112 128 144 |
| DarkSlateGray | 2F 4F 4F | 47 79 79 |
| Black | 00 00 00 | 0 0 0 |
3DW Tools CSS Styles Library
After three years of designing proof of concept and rapid prototypes I have decided to compile all of my custom css styles that were spread between multiple projects into one master library of css style design patterns. My 3DW Tools CSS Styles Library is managed via my cms, and when included into a project, grants access to some really great styles that can be called using an easy to remember style language.
In order to produce HTML 5 designs without Flash or Photo Shop, my 3DW Tools CSS Styles Library is the perfect addition to a blank HTML 5 page or a JQuery build, giving me the ability to design some really great mockups, proof of concept, rapid prototype, and user experience designs.
Here is the link to the visual reference.
Here is a css box shadow generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Box-shadow_generator
Here is a css button generator https://developer.cdn.mozilla.net/media/uploads/demos/m/o/mok20123/8aff6ca4f35726d64880dd6fc77739ba/css3-button-generato_1325474481_demo_package/index.html
Here is the css border radius generator https://developer.mozilla.org/en-US/docs/Web/CSS/Tools/Border-radius_generator
Working with dates and times in JavaScript
I need to get the current year and display it in a form. That way the form doesn’t have to be updated every year, just to change the date.
We always start with a date object, then use it to get what we need.
var today = new Date();
var theyear = today.getFullYear();
$("#theyear").html(theyear); // put the variable into a span with id of "theyear"
I would like to have a form that auto fills todays date in the following format: 2/27/2014
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
document.write(month + "/" + day + "/" + year);
Upgrading Legacy Web Forms with my Content Display Wizard plugin.
Here is an example of how my plugin makes it easy for the user to navigate and successfully submit the data. And for us weary developers, the best part is the AUTOMATION. My plugin will provide content navigation, client side validation and handle the submission of the data via ajax to my api.
At Skagit Valley College, I plug my wizard into a legacy form and it’s transformed into a slick responsive paperless web application for data collection. There was an old Hall of Fame nomination form that had been moved into the cms of our new responsive version of the SVC site…
After simply including my Content Display Wizard Plugin, its now a slick paperless web application for data collection. Go check it out, go through the form to view the summary and I’m sure you will love the user experience.
