============= ============= ============= ============= ============= SEARCH INDEX ============= ============= ============= ============= ============= Template refinement ============= ============= Script testing and diagnostics ============= ============= Resources ============= ============= Additional ============= ============= Of By Heart ============= ============= Syntax ============= jQuery ============= JavaScript ============= CSS ============= HTML5 ============= PHP ====================== Findings and Answers ============= ============= ============= ============= ============= ============ ============= ============= ============= ============= ============= ============= ============= ============= Before an upload, ============= swap the projects.html url for : http://saulcross.com/projects.htm ============= ============= ============= ============= ============= Top Stack Development, **-** -----> Current development <----- **-** --------------------------------------------- ** css clean : create a standard template for outlining implementation. - include code comments, ** create a quick table of elements and attributes ============= ============= ============= ============= ============= 2hrs research on best practise, css layout. Alphabetical https://www.w3.org/TR/CSS2/propidx.html https://csswizardry.com/2011/09/writing-efficient-css-selectors/ https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/ Look at the zero script, template-essentials.css ** stylisation-guide.css ** reset.css ** font-import.css ** nav.css ** gallery-layers.css ** bespoke-graphs.css ** burger-button.css ** swing.css 1. ID, e.g. #header 2. Class, e.g. .promo 3. Type, e.g. div 4. Adjacent sibling, e.g. h2 + p 5. Child, e.g. li > ul 6. Descendant, e.g. ul a 7. Universal, i.e. * 8. Attribute, e.g. [type="text"] 9. Pseudo-classes/-elements, e.g. a:hover Alphabetize your Properties https://csswizardry.com/2011/09/writing-efficient-css-selectors/ background: #FFCCCC normal text: #FFF46D links: #38FF0E headings: #77F6FF main content bg: #DCAFFF 1. Resets and overrides 2. Links and type 3. Main layout 4. Secondary layout structures 5. Form elements 6. Miscellaneous Root & Document Sections Groupings Text Level Forms Embedded Content & Scripts Tabular Data ============= ============= ============= ============= ============= ** create a plan for a rebuild and a simple RWD menu with a burger button. ** FINISH 35 template, style first. ** Look at the 35 template and see if the e.preventDefault(); //cancel system double-click event really works! and if it can be implemented for portfolio extracts.(Look at other examples of where double-click are used, propagate through out site, ** css in the 35 has the wrong spelling of carousel ** adjust where in - the page the anchor is for the functionality of the li list for the index page, ** refine, the 35's page and include in the main site, ** write up regarding double-clicks and toggle functionality, ** Link the rest of the project menu,- style first. ** Look at percentage and centering for RWD placement, ** Assess all font sizes, 2hrs research best practise, em and vh for RWD, ** Golden section template proportions research, ** Use the single selection toggle script, and adjust css for the 35's. ** * check * corners on the 35 website, ** Quick site update from phone, ** PHP list add style, ** (so - main items list . each will have it's -anchor category- and where it is in that list) ** complete a quick reference guide for the dynamic tables page, (include relevant usage). ** Bootstrap template keep it simple ============= ============= ============= ============= ============= Template refinement **** Template essentials ** Look at font-size for em and vh for RWD, ** 3 decent email templates, ** Swap the template for the restaurant, (update the gallery)--- look at image jamming, on home page after you have gone to another site, ** macular degeneration optical - diagnostics Dad website ** write up diagrams on the queries page, ** for the graph page ensure there is an explanation and relevant guides, ** Real all text six times, check all spellings and grammar, ** look at scroll down on the bar graph data output, and also some instructions. include a percentage guide on the left hand-side, it could be misleading to have the total out of 400. the output button needs to reset on press. ** Colours need more contrast mix in's colour pallet, ** flashy jQuery, - NOOOO flashy css animation, ** mixins, css php for colour and opacity for box shadows ect... **** Code clean ** css clean : create a standard template for outlining implementation. ** minify all scripts, -look at page loading times and speeding up, best pracise, ** *Done - propagation all page* load Javascript at the bottom of the page, (tested on projects page propagate throughout site.) and for jQuery import -why sometimes used: type="text/javascript"> and not? ** *Fixed* why does the menu flash on the projects page? ** Go through the timing variable scripts, for animation and counting, write-up the dangers of jQuery and js animation, especially regarding, navigating between tabs, **** Testing ** Assess RWD to see if the default menu always comes up, also on a pad. ** ensure that view all projects is added to the RWD menu, it's already on the burger button, **** Site Structuring: ** php script for look at all errors and validation - if time, (research first each li should provide tick on page for html css ect.. ** add an icon for the browser, ** Images use appropriate ALT text ** Favicon and devices icon ** 404 page.& 301 pages ** meta data | robots.txt | google analitics. ** pages need titles ** http://saulcross.com/branding-demo.html ** Site Map, ** Link the footer - site map **** Content updates critical: ** use the Code Presentation folder to show off code, (see the code button) ** git hub/lab sign up to, ** all code extracts need a comparison to market competitors, ** linked in page – testimonials ** facebook and research, ** Market and list all code ideas - with comparisons, (well titled + descriptions of previous works,) ** references - dates clash with titles. - Queries page - warwick SU. ** Linked in account contact Senan, **** Online preparation and assessment checks: ** Browser compatibilityassess for screen sizes in regards to the main menu and percentage sizesmac and windows 10, tablets ** check list for assessing development **** Additional template ideas, ** finger diagram and video for home page, marketing, done with cartoon hand, ** add a down arrow for the drop down, ============= ============= ============= ============= ============= preparation for workplace: ** include link to cheat sheet and ** assess to see if you have a standard gallery and carousel -RWD. ** // better completed with css animation timing variable, ** stop pause - diagnostic tool for js - gallery etc.. (default page with external scripts in one folder). + 0 reset css. include link to cheat sheet and ** basic memory cheat sheet. ** hight light | all | find | for spelling software, ** look for a spell checker that allows for syntax, ============= ============= ============= ============= ============= Script testing and diagnostics: ======= 18/08/2017 === OvervieM day,=== ** read over pot hole notes. ** If you over specify do you increase propagation???? ** images that stretch 100%, and also keep the aspect ratio when scrolled for browser resize, ** image jQuery Cache memory :::::::::::::::::::::::overvieM -- Day - look at multiple calls (applications - bindings) of toggles from a function, and clearing. - Queue & Dequeue Explained - Understand event handlers jQuery, - update chrome save password and look for the animation tool, - does the debugger tool only look for integers numbers, ??????? - jQuery Queue, - on assess code a freeze button, - script / variable tracking, -image jQuery Cache memory, Find out what jQuery script is relevant for specific functionality. - how to clear all error - Look at code validation - 100% on reset for timing interval, do a written diagram for the homepage, (after evaluating the jQuery queue, file important: absolute and relative: TESTED the right way around - more research. div.new-carousel ul {position: relative; width: 99%; margin:0px; padding:0px;} div.new-carousel ul li {position: absolute; top:0; left:0; display: inline-block; width: 99%; margin:7px 14px; opacity: .5;} ============= ============= ============= ============= ============= Resources : https://developers.google.com/web/tools/chrome-devtools/network-performance/resource-loading http://learn.shayhowe.com/advanced-html-css/jquery/ https://humaan.com/checklist/ Browsers and Devices. inspire: http://isadoradigitalagency.com/ - Queue & Dequeue Explained ::: https://stackoverflow.com/questions/1058158/what-are-queues-in-jquery http://jsfiddle.net/FhQwb/1/ display:table-row; ============= ============= ============= ============= ============= Additional ** for the template page initially - upload from a txt doc, then go on. ** look at wordpress drupal and creating a bespoke news letter from CMS, ** Tidy spelling software. ** Finish the spinning squares, get the users attention somehow, (responsive design) ** for each instead of a for loop js ** angular js and type script, ** Ionic frame work --> phone gap, ** php output script to export the site as file structure, listing what script are present per page, include list of - page specific widgets, file:///C:/Users/comp4/Desktop/GAP%20ANALYSIS%202017/Library/Back%20To%20Basics/Pie%20Form%20Fill%20ideas/carry-on.html file:///C:/Users/comp4/Desktop/GAP%20ANALYSIS%202017/Library/Image%20Manipulation/Analysis%20Three/foremailpng.png file:///C:/Users/comp4/Desktop/Program%20Tidy/Program%202016/backup%20computing/Responsive-Grid-Familiy-Tree.html file:///C:/Users/comp4/Desktop/Program%20Tidy/Program%202016/backup%20computing/Responsive-HTML-template.html ============= additional ideas TASKdownload all browsers with a download file and folder all software one place. O/S pack. auto search on specific variables for all pages css.16/05/2017 minify script, order script in terms of css importance for attributes. Prep and find spelling software. ============= ============= ============= ============= ============= Of By Heart: ** Spelling software needs to be random in it's selection. ** list of inline and block, ** learning software for shortcuts and special characters ** add to learning software basic geography/ currency and days in a month php update script world leaders. ** media (sp)quieries ** background-image: image() learn ============= ============= ============= ============= ============= Syntax ============= ============= jQuery Cheat and grib sheet for jobs,why does jQuery use "" or '' QQ: Is it okay to have different version of jQuery running on one page. - OKAY. QQ: specifically assess a element for it's JQuery interaction ============= ============= JavaScript QQ: JavascriptExamples of all loops, if else all basic syntax etc.. QQ: Project pot hole + all previous scripts. ============= ============= CSS QQ:images that stretch 100%, and also keep the aspect ratio when scrolled for browser resize, background-size: contain; QQ: research text display. text-align: center; vertical-align: top; line-height: 47px; vertical-align: text-bottom; display: flex; justify-content: flex-end; align-items: flex-end; QQ: ul will not center: margin:auto; QQ: 0 set variables scripts QQ: brush up, create cheat sheets for absolute etc| resize img | QQ: opacity and z-index conflict? QQ: animation brush up text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; ============= HTML5 HTML 5 tags < / s ection > scrub up on