Build tons of multi-device JavaScript applications
Part 1 : Boilerplate, design patterns & MVC(C), high performance UI
by Jean-Baptiste Guerraz & Igor Uzlov & UA Web Forum Kiyv 2014
Build tons of multi-device JavaScript applications - Part 2 : (black) Magic S...Skilld
Build tons of multi-device JavaScript applications
Part 2 : (black) Magic Sizing, Positioning, Illustrating
by Nicolas Guerrier & Ivan Berdinsky @ UA Web Forum Kiyv 2014
We have just rolled out the Blunt umbrella site for the US in conjunction with the Tile launch. https://www.thetileapp.com
This US build was also part of a larger infrastructure setup to cater for the other markets.
We first deployed the US site. Shortly there after the NZ and Global site.
USA: bluntumbrellas.com/us
NZ: bluntumbrellas.com/nz
Global: bluntumbrellas.com
The site had some interesting challenges with the type of content that was to be displayed within a single page. For example every content page is a Basic Page.
Site Features:
Mega Menu
Background Video
jQuery UI
Several Sliders
Drupal Commerce
Picture and Breakpoints
In this talk I'll cover:
Business needs
Site and platform architecture
Theming
Picture and Breakpoints module
Hover state menu
Drupal Commerce
Memcache Gotha
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyJames Steinbach
Instead of relying on heavy, pre-formatted, markup-intensive CSS frameworks for grids, we can use a Sass grid framework to write clean, maintainable, performant CSS grid layouts.
twitter.com/jdsteinbach
jamessteinbach.com
Build tons of multi-device JavaScript applications - Part 2 : (black) Magic S...Skilld
Build tons of multi-device JavaScript applications
Part 2 : (black) Magic Sizing, Positioning, Illustrating
by Nicolas Guerrier & Ivan Berdinsky @ UA Web Forum Kiyv 2014
We have just rolled out the Blunt umbrella site for the US in conjunction with the Tile launch. https://www.thetileapp.com
This US build was also part of a larger infrastructure setup to cater for the other markets.
We first deployed the US site. Shortly there after the NZ and Global site.
USA: bluntumbrellas.com/us
NZ: bluntumbrellas.com/nz
Global: bluntumbrellas.com
The site had some interesting challenges with the type of content that was to be displayed within a single page. For example every content page is a Basic Page.
Site Features:
Mega Menu
Background Video
jQuery UI
Several Sliders
Drupal Commerce
Picture and Breakpoints
In this talk I'll cover:
Business needs
Site and platform architecture
Theming
Picture and Breakpoints module
Hover state menu
Drupal Commerce
Memcache Gotha
Breaking Free from Bootstrap: Custom Responsive Grids with Sass SusyJames Steinbach
Instead of relying on heavy, pre-formatted, markup-intensive CSS frameworks for grids, we can use a Sass grid framework to write clean, maintainable, performant CSS grid layouts.
twitter.com/jdsteinbach
jamessteinbach.com
Workshop Overview General del ecosistema de Javascript y de los Frameworks actuales.
¿Hacia dónde vamos?
ReactJS - Flux Pattern - ReactNative.
RactiveJS, VueJS.
Presentado por Ing. Marc Torrent
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
React & Radium: Computed Styles, the Death of CSS, and the Future of Interactive Data Visualization
As presented at DrupalCamp Michigan, January 2015
Presented by Brad Czerniak
The benefits of a simply-coded, well-structured theme are obvious: maintainability, performance, self-esteem, and more. This session is an opinionated overview of theming best practices.
Templates and helper modules
Using blockify, field formatters, entity view modes, and other available tools allows your templates directory to be manageable and your template.php to focus on getting important things done.
Speaking of template.php, I'll demonstrate some reusable functions for adding utility classes that can come in handy in your stylesheets.
CSS
Whether you use a preprocessor or plain-old CSS, you can probably get away with fewer files and a smaller payload. I will spend a decent amount of time talking about why everything that everybody else does in their CSS is completely wrong, leaving you with a general idea of how to quikcly write CSS that accomplishes your business goals.
Resource payload
There are tons of ways to deliver fonts, images, icons, and other front-end bits to your pages. I'll explain the best way to do it in specific instances -- including a slick way to do social icons.
Squishy Pixels with Varun Vachhar
Presented at FITC's Web Unleashed Toronto 2014 Conference
on September 17
More info at www.FITC.ca
Adaptive Web Design and Responsive Web Design are often presented as competing design strategies. However, Adaptive Web Design is a superset of techniques aimed at crafting sites which provide an optimal user experience across multiple screen sizes. Responsive Web Design is just one such technique.
In this session, Varun will cover the major techniques that make up the Adaptive Web Design strategy, how and when to choose these techniques for creating contextually-aware web experiences, and will give an introduction to building responsive layouts using CSS Flexbox.
OBJECTIVE
To demystify the world of multi-device and cross-platform web design.
TARGET AUDIENCE
Web designers and developers
ASSUMED AUDIENCE KNOWLEDGE
Intermediate HTML and CSS. Basic design knowledge.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is Adaptive/Responsive Web Design
Where responsive design fits in an adaptive web design strategy
Other techniques that are a part of an adaptive web design strategy
How/when to pick from the various available strategies
Introduction to layouts with CSS Flexbox
As presented at DrupalCamp Michigan, January 2015
Presented By: Andy Blanchard and Chris Keller of Commercial Progression
As the sites we build get increasingly complicated simplifying or overlapping processes can be a great way to speed up delivery. In this talk, we'll share the techniques and tools we use at Commercial Progression to quickly produce high-quality design and frontend deliverables.
WE'LL ALSO DISCUSS:
How wireframing can be a vacation from designing
Using wireframes to test the usability of your website
Why prototyping makes life easier and more complicated all at the same time.
Explore front end development tools and their place in Drupal, CSS frameworks, CSS preprocessors, and JS task runners.
Video at http://www.youtube.com/watch?v=HaJnhYPLvx0
Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.
The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
http://2013.drupalcamplondon.co.uk/session/death-themer
Why and when you need end-to-end tests, a spooky story with a 15 years software beast, and how to develop concise, maintainable functional tests using Groovy, Spock and Geb.
Workshop Overview General del ecosistema de Javascript y de los Frameworks actuales.
¿Hacia dónde vamos?
ReactJS - Flux Pattern - ReactNative.
RactiveJS, VueJS.
Presentado por Ing. Marc Torrent
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
React & Radium: Computed Styles, the Death of CSS, and the Future of Interactive Data Visualization
As presented at DrupalCamp Michigan, January 2015
Presented by Brad Czerniak
The benefits of a simply-coded, well-structured theme are obvious: maintainability, performance, self-esteem, and more. This session is an opinionated overview of theming best practices.
Templates and helper modules
Using blockify, field formatters, entity view modes, and other available tools allows your templates directory to be manageable and your template.php to focus on getting important things done.
Speaking of template.php, I'll demonstrate some reusable functions for adding utility classes that can come in handy in your stylesheets.
CSS
Whether you use a preprocessor or plain-old CSS, you can probably get away with fewer files and a smaller payload. I will spend a decent amount of time talking about why everything that everybody else does in their CSS is completely wrong, leaving you with a general idea of how to quikcly write CSS that accomplishes your business goals.
Resource payload
There are tons of ways to deliver fonts, images, icons, and other front-end bits to your pages. I'll explain the best way to do it in specific instances -- including a slick way to do social icons.
Squishy Pixels with Varun Vachhar
Presented at FITC's Web Unleashed Toronto 2014 Conference
on September 17
More info at www.FITC.ca
Adaptive Web Design and Responsive Web Design are often presented as competing design strategies. However, Adaptive Web Design is a superset of techniques aimed at crafting sites which provide an optimal user experience across multiple screen sizes. Responsive Web Design is just one such technique.
In this session, Varun will cover the major techniques that make up the Adaptive Web Design strategy, how and when to choose these techniques for creating contextually-aware web experiences, and will give an introduction to building responsive layouts using CSS Flexbox.
OBJECTIVE
To demystify the world of multi-device and cross-platform web design.
TARGET AUDIENCE
Web designers and developers
ASSUMED AUDIENCE KNOWLEDGE
Intermediate HTML and CSS. Basic design knowledge.
FIVE THINGS AUDIENCE MEMBERS WILL LEARN
What is Adaptive/Responsive Web Design
Where responsive design fits in an adaptive web design strategy
Other techniques that are a part of an adaptive web design strategy
How/when to pick from the various available strategies
Introduction to layouts with CSS Flexbox
As presented at DrupalCamp Michigan, January 2015
Presented By: Andy Blanchard and Chris Keller of Commercial Progression
As the sites we build get increasingly complicated simplifying or overlapping processes can be a great way to speed up delivery. In this talk, we'll share the techniques and tools we use at Commercial Progression to quickly produce high-quality design and frontend deliverables.
WE'LL ALSO DISCUSS:
How wireframing can be a vacation from designing
Using wireframes to test the usability of your website
Why prototyping makes life easier and more complicated all at the same time.
Explore front end development tools and their place in Drupal, CSS frameworks, CSS preprocessors, and JS task runners.
Video at http://www.youtube.com/watch?v=HaJnhYPLvx0
Large Drupal projects will generally have a themer or five working alongside the developers, site builders and designers. Themers are the magicians who transform what Drupal wants to do into what the designer wants it to do.
Smaller projects also usually need someone on the team who can make sense of Drupal's output, knows more CSS and JS than anyone else and can configure Views with their eyes closed.
The thing is — and whisper this, if possible redundancy concerns you — we can bypass the themer entirely.
With some simple configuration, a site builder can get Drupal to output exactly the semantic, lightweight markup that any modern front-end designer would be proud of. The designer can be left alone to write the most appropriate HTML, CSS and JS, while the site builder need only choose a couple of options when putting together content types, views and panels to make Drupal behave.
A friendly developer may have to lend a hand every now and then, but that’s it. You can get rid of the themer altogether.
http://2013.drupalcamplondon.co.uk/session/death-themer
Why and when you need end-to-end tests, a spooky story with a 15 years software beast, and how to develop concise, maintainable functional tests using Groovy, Spock and Geb.
Once upon a time, there were css, js and server-side renderingAndrea Giannantonio
22 July 2016 - RomaJS meetup
Video: https://www.youtube.com/watch?v=Xr9TItuNxLg
Once upon a time, there were css, js and server-side rendering by @JellyBellyDev and @MatteoManchi
Drupal Theme Development - DrupalCon Chicago 2011Ryan Price
This class is intended for people who know some HTML and CSS, and covers the fundamental principles of Drupal theming geared toward people who wish to take a static mockup of a site design and turn it into a Drupal theme. You will also learn about using base themes, grid-based layout and helper modules to streamline and customize your Drupal theme.
Trainer Ryan Price has built entertainment sites, social networks, and eCommerce sites for clients including Popular Science, Field and Stream and Outdoor Life magazines. With over 10 years of experience building sites with PHP and other technologies, Ryan began immersing himself in Drupal around 2006. Ryan often teaches and writes articles along with Mike Anello, and the duo is also known for producing the DrupalEasy Podcast with their host Andrew Riley.
Keeping the frontend under control with Symfony and WebpackIgnacio Martín
Webpack tutorial with tips for Symfony users. Topics covered include: current frontend trends, setup, loaders, dev tools, optimization in production, bundle splitting and tips and tricks for using webpack with existing projects.
Symfony Munich Meetup 2016.
Brian and John introduce several concepts, including JavaScript Modules and Inversion of Control, and demonstrate how they alleviate many of the dominant problems encountered when building large JavaScript apps. This talk shows new architectural patterns and tangible examples of how these patterns improve testability, refactorability, composability, division of work, and team scalability.
RSVP Node.js class at www.nycdatascience.com
NYC data science academy's free workshop, given at NYC Open Data Meetup, http://www.meetup.com/NYC-Open-Data/events/163300552/
Similar to Build tons of multi-device JavaScript applications - Part 1 : Boilerplate, design patterns & MVC(C), high performance UI (20)
Session Drupagora 2019 - Agilité dans tous ses étatsSkilld
Table ronde autour de l'agilité et des limites pour l'appliquer dans la réalité des projets de grande envergure / des contextes distribués / organisation à grande échelle / etc.
Case study : 2 applications mobiles réalisées avec DrupalSkilld
Comment lancer un projet d'application mobile avec Drupal dans les meilleures conditions ? (Coûts, Délais, Evolutivité)
A travers 2 exemples concrets récents d'applications, nous illustrerons
- comment Drupal nous simplifie la vie : du Commerce à la gestion de notifications avancées, en passant par les interfaces d'administration et l'architecture
- quelles sont les erreurs à éviter et les contraintes associées à l'utilisation de Drupal pour vos applications mobiles
Nous conclurons par un retour à chaud sur les développements d'applications mobiles en cours avec Drupal 8.
Drupal, les hackers, la sécurité & les (très) grands comptesSkilld
Les projets Drupal d'envergure s'intègrent toujours au sein d'un SI complexe avec de forts enjeux de sécurité. Pas une semaine sans un scandale d'intrusion, de piratage ou de problème de sécurité informatique, qui peuvent coûter des centaines de millions d'euros (cf. Sony).
Comment vendre Drupal vis à vis des attentes et des craintes des grands comptes vis à vis de la sécurité ?
Comment Drupal adresse les principaux risques identifiés OWASP ?
Comment sécuriser une application Drupal au plus haut niveau ?
Retrospective 2013 de la communauté Drupal 8Skilld
Rétrospective 2013 de la communauté Drupal 8 !
Présentée au Drupal Café de Kharkiv du 19 décembre 2013 par l'un de nos Lead Developpers : Andy Postnikov
Understanding User Behavior with Google Analytics.pdfSEO Article Boost
Unlocking the full potential of Google Analytics is crucial for understanding and optimizing your website’s performance. This guide dives deep into the essential aspects of Google Analytics, from analyzing traffic sources to understanding user demographics and tracking user engagement.
Traffic Sources Analysis:
Discover where your website traffic originates. By examining the Acquisition section, you can identify whether visitors come from organic search, paid campaigns, direct visits, social media, or referral links. This knowledge helps in refining marketing strategies and optimizing resource allocation.
User Demographics Insights:
Gain a comprehensive view of your audience by exploring demographic data in the Audience section. Understand age, gender, and interests to tailor your marketing strategies effectively. Leverage this information to create personalized content and improve user engagement and conversion rates.
Tracking User Engagement:
Learn how to measure user interaction with your site through key metrics like bounce rate, average session duration, and pages per session. Enhance user experience by analyzing engagement metrics and implementing strategies to keep visitors engaged.
Conversion Rate Optimization:
Understand the importance of conversion rates and how to track them using Google Analytics. Set up Goals, analyze conversion funnels, segment your audience, and employ A/B testing to optimize your website for higher conversions. Utilize ecommerce tracking and multi-channel funnels for a detailed view of your sales performance and marketing channel contributions.
Custom Reports and Dashboards:
Create custom reports and dashboards to visualize and interpret data relevant to your business goals. Use advanced filters, segments, and visualization options to gain deeper insights. Incorporate custom dimensions and metrics for tailored data analysis. Integrate external data sources to enrich your analytics and make well-informed decisions.
This guide is designed to help you harness the power of Google Analytics for making data-driven decisions that enhance website performance and achieve your digital marketing objectives. Whether you are looking to improve SEO, refine your social media strategy, or boost conversion rates, understanding and utilizing Google Analytics is essential for your success.
Italy Agriculture Equipment Market Outlook to 2027harveenkaur52
Agriculture and Animal Care
Ken Research has an expertise in Agriculture and Animal Care sector and offer vast collection of information related to all major aspects such as Agriculture equipment, Crop Protection, Seed, Agriculture Chemical, Fertilizers, Protected Cultivators, Palm Oil, Hybrid Seed, Animal Feed additives and many more.
Our continuous study and findings in agriculture sector provide better insights to companies dealing with related product and services, government and agriculture associations, researchers and students to well understand the present and expected scenario.
Our Animal care category provides solutions on Animal Healthcare and related products and services, including, animal feed additives, vaccination
1.Wireless Communication System_Wireless communication is a broad term that i...JeyaPerumal1
Wireless communication involves the transmission of information over a distance without the help of wires, cables or any other forms of electrical conductors.
Wireless communication is a broad term that incorporates all procedures and forms of connecting and communicating between two or more devices using a wireless signal through wireless communication technologies and devices.
Features of Wireless Communication
The evolution of wireless technology has brought many advancements with its effective features.
The transmitted distance can be anywhere between a few meters (for example, a television's remote control) and thousands of kilometers (for example, radio communication).
Wireless communication can be used for cellular telephony, wireless access to the internet, wireless home networking, and so on.
Build tons of multi-device JavaScript applications - Part 1 : Boilerplate, design patterns & MVC(C), high performance UI
1. Build tons of multi-device
JavaScript applications
Jean Baptiste Guerraz
Skilld. CTO & Co-founder
Igor Uzlov
Skilld. Lead JS Developer
http://www.skilld.fr
2. What Skilld is ?
- A band of (20+) crazy IT punks :)
- Distributed over 3 time slots
- Ukraine, Russia, Peru = Skilld never stops!
- Driven by French frogs
- Who build any WWW related objects (wherever it’s
displayed)
- Using flexible open-source (only!) techs (Can.JS,
Cordova, Node.js, Drupal, Symfony and few more!)
- Only one limit! 72h!
3. What Skilld were asked to do ?
An application that works on the following platforms:
- Mobile (Android, IOS, Windows Phone)
- From IOS 5 & Android 2.3 ;(
- Tablets (Android, IOS)
- Facebook
- Website (multi-device)
4. What needs
to complete that mission ?
- A light framework
- Yeah… Android 2.3+ / IOS 5
- A performances oriented framework
- A backbone
- But not backbone.js! (We used it too much already!)
- A way to manage layouts
- A wrapper for mobile / tablets applications
5. A light and performant framework ?
http://bit.ly/1dlnWRg
6. A light and performant framework ?
http://bit.ly/1uR0OXc
Controllers initialization
7. A light and performant framework ?
http://bit.ly/1uR0OXc
Live-Binding initialization
8. Model View Constructor Controller
- Model
A backbone ?
- From REST service to (observables) Objects
- A kind of JS ORM :)
- View
- Just a template ;)
- Mustache.js
- Constructor (require init & destroy methods)
- An object that deals only with processing
- Controller (require init & destroy methods)
- An object responsible for a part of, or the whole,
User Interface (an object that deals with DOM)
Give your projects a structure punks!
9. A backbone ?
Asynchronous Module Definitions
RequireJS
● File loader
● Module definitions
● Dependencies management
● Works super fast with nodejs (r.js)
o Run AMD-based projects in Node and Rhino.
o but please, use Node! ;)
o Includes the RequireJS Optimizer that combines
(and minify thanks to Uglifyjs) scripts for optimal
browser delivery.
12. Let’s add a context!
An (observable) key / value storage related to
current state
Car radio example
State : radio
Context : FM frequency value
State : MP3 player
Context : mp3 file URI
13. A backbone?
Mediator pattern
A central object for all others to communicate
(publish / subscribe)
Once again, the state context to the rescue!
http://bit.ly/1AxOFeg
14. A backbone ?
Observers pattern
A simple way to know what’s going on, and so when to react!
Keep it easy, Observe the state context :)
http://bit.ly/1xNsfES
15. A backbone ?
Abstract Factory / Builder pattern
Build my objects punk!
http://bit.ly/1AxOKib
17. A backbone ?
Layouts & Regions
Give your UI a high flexibility!
- Layout
- A set of regions
- A template (mustache)
- Region
- A “place” to print out some HTML
- Or even a layout
- Inception rocks!
(Layout > Region > Layout > Region…)
26. A wrapper for
mobile / tablets applications
Apache Cordova
(or PhoneGap)
27. Apache Cordova (/ Phonegap)
Develop once deploy everywhere!
● Cordova is…
o Just a browser! (chrome webview or android stock browser
webview)
o A JS API to access devices features
o Compass
o Accelerometer
o File System / File Transfer
o Splashscreen
o Camera
o Contacts
o Media
o And plenty of other cool plugins (like FacebookConnect,
SocialSharing, … and custom ones!!)
28. Thank you! Merci! Дякую!
Any question ?
SkilldJS Comming soon on GitHub :)
@jbguerraz
@iuzlov
http://www.skilld.fr/en
Find those slides on Slideshare :
@iuzlov / @jbguerraz