This is a summary of PWA Roadshow video from Google Chrome developers, here is list of each video with summary: All about PWAs. Statistics (2017): 13% Mobile. => 87% Apps native. but 87%??? more predictable. easy to find on home screen. push notification. Native app is a big commitment in: Space Time Cost hints: 78% of time spent is in user’s top three apps. so, Progressive web app come to…
Read MoreWeb Performance – presented in FronteersJo meetup #3
From the beginning of this year (2016) i organizing a meetup called FronteersJo and we talking about front end development techniques, and i will share the slides i already presented, so now its Web performance presented in Aug 23, 2016.
Read MoreGenerate Charts/Widgets in smart way by angularjs – LegoCharts
Live Demo. Dependencies: JQuery. AngularJS. D3JS. NVD3. LegoStyle CSS Framework. You want to generate chart with very dynamic parameters? You care about performance? You want to manage the chart size, colors, order, type, label and others from one place? Do you like angularjs framework? so you’ll love LegoCharts plugin, actually i created this plugin with love in Bayt(.)com and specialy in BCCs(Branded Career Channel) project to show a very…
Read MoreGenerate form – LegoForm
Live Demo. Dependencies: JQuery. You want to generate form with very dynamic parameters? You care about performance? You want to manage the form data, style, labels, values, placeholder and others from one place? Form Inputs types: input select textarea
Read MoreAdvanced topics in HTML5 & CSS3
Lately, I have finished from present a training in advanced topics in HTML5 and CSS3 in collaborate with Prince Sumaya University, here is the main topics covered: HTML4 Review. HTML5 Elements and Attributes. Advanced Topics in HTML5(Canvas, LocalStorage, AppCache, Drag&Drop, Web Worker, History Api, Geolocation, Web Sockets and FileSystem). Web Performance. Web Accessibility & Microdata. Web Design Approches(Resposnive, Adaptive, Fluid). Mobile touch events. The most important resources in front end…
Read MoreCSS Like a Lego
With all my work at bayt.com, I’d been think more about CSS architecture, how to write the qualified, meaningful, reusable classes. So I want to share with you my secret of how to think and write the CSS, actually for me I found the fantastic way is the Lego way. Why Lego? Because it’s like a bricks can be assembled and connected in many ways, to construct such objects/classes as…
Read MoreBootstrap Framework
It’s a CSS framework and it’s developed by Twitter guys (@mdo & @fat), Check out Bootstrap on Github. Although i have a simple CSS framework using it with any new project as freelance or in Bayt.com projects, but after i found twitter bootstrap i am impressed for how can it help me, and its a weapon of choice for me for this reasons: Easy to work with. Streamline workflow and…
Read MoreFonts on the Web – @font-face
@font-face: define a new font and use it on your site even its not implemented as default in web browsers and operating systems. Actually at first glance i guessed this feature is CSS3 but its Not exactly a feature which is new to CSS3, @font-face was first proposed for CSS2 and you can implement it with cross-browser compatibility. This guide will teach you how to implement @font-face with cross-browser compatibility: 1. Select the font you want to use, you can use…
Read More