Good Stuff‎ > ‎Talks‎ > ‎

Frontend Meetup




Apache Cordova
phone gap vs Cordova (open source phone gap)
ionic makes development cordova dep easier
http://www.html5rocks.com/en/tutorials/es6/promises/

cross browser compatibility.

you can have mage cahsing show up faster than having mobile friendly website instead fo hte ios app

jquery waypoint you can make  http://shoot.sh/

http://imakewebthings.com/jquery-waypoints/

https://www.firebase.com/

========================================


varnish and db on separate box(http)    upstart(+git)

Many HTML5 and CSS 3 features are already implemented in at least one major browser. Modernizr tells you whether the current browser has implemented a given feature.

CSS
preprocessors
LESS: decompiles in user makes user sloe
CSS loader animation


Responsive Image
http://mobile.smashingmagazine.com/2013/07/08/choosing-a-responsive-image-solution/

singlepage app
 : be careful on memory leaks
make sure you get indexed by google


Virtual machines
hosting
Virtual Machines
Vagrant     : overlay on top of virtualbox
a script will download the OS and related software packages for all team members



node.js CMS

http://gruntjs.com/   The JavaScript Task Runner
concatenating files, linting and testing your code, and minification


Other Node.js CMS

Mean stack: (Mongo, Express, Angular, Node)
nginx - The High Performance Reverse Proxy, Load Balancer, Edge Cache, Origin Server.
is an open source reverse proxy server for HTTP, HTTPS, SMTP, POP3, and IMAP protocols, as well as a load balancer, HTTP cache, and a web server (origin server)


============================

if you remove !# you get the json not angular.

angular_view <-> angular_controller <-> angular_service <-> node_controller <-> mogodb





Devtools

enable devtools experiments

allowcustom ui themes
   flatlands

   you can look at it all day long

   you can select device type emulation/network speed

   you can click and see view crop points 

   the {} reformats javascript code to a readable format

   click on hte side of a code line number and it will be a break point and in the next reload remembers to stop there.

   in the networking tab you can see the initiator
   combine images together o get them to the client faster

   in the size column the first row is hte ziped size and the below one is unzipped

   varnish, etag is a caching mechanism

   302 means it was cached

   preserve log and see what happens in form processes

 if you couldnt change a specific style and couldnt track inheritance of e.g. its size you can always specify an inline rule for it.

 in the style tab of eleemnts you can click on Toggle Element State and add rules right there.
  click on + add a new style rule
  right click scroll into view, scrolls the tag for you


 What are Pseudo-Elements?

 create a seudo element before every element. it is done in CSS. add a text before every div tag e.g.

dom break points. e.g. when tag gets removed go to break point/?

command shift c

in console $0 whateer elements youwere there gets selected.  $($0).attr("attr", "value")

localstoreage is an html5 thing that s bigger than cookies but not too big, some thing you dont want to download for al page loads

websql and index db are html things that are cencerny ... on the endge

change inline form details like ids and try to impersonate somebody else's id make sure your server is checking for thoes stuff


EventListeners => jquery call stack

in xcode and safari debug mode you can debug code irght there. also debug screen share style of whats supposed to be on teh scren . 
webview



CSS framworks
media object
smacss
BEM (block element modifier

never use ids for css styling. are ok for javascript but not css
css selects backwards.
body  ul li   selects all lis first then uls then body
unordered_list_in_body_reversed

saass and less make it easier


sass extend
primary-rail{
@extend .pull-lreft, .col-md-6  .small;
}

dont use a single bootstrap class in your files. combine them in your naming convention

how to get started
flatten your celectors
organize your code, put differnet css in a couple of modules.
make your classes do one thing well
decode for reusability
try a preprocessor

react last two years key note
angular is interleaved to dom, react makes this decoupled


Checkout react


gulp is better than grunt







saas
library load you don't hae to reload, it will reload by anu change

display:blok-inline for dive
position fixed relative absolute
fi you add padding for scrolling fixed divs will eb shown
poiition relatvive is regardless of text

$ grunt-init

# template builder
# autogenerae sublime project file

$ npm install    # installs all dependecies in the packages json file.


so grunt is installed , have grunt watch

grunt does the scaffolding
you can customize whatevr it generates whereever it generates

http://yeoman.io/    is better than grunt as it has all of it done for you. with angular nodeexpress, wordpress, java spring scala .. generators











Comments