JavaScript can be used to add, remove, or modify content on web pages, set CSS styles and classes, show/hide/animate parts of pages, react to user events like clicks and typing, and more. It uses variables to store values, functions to organize code for reuse, and selectors like jQuery to find and work with HTML elements. Code is added to pages within script tags and often wrapped in document ready functions to run when the page loads.
Front End Development - Beyond Javascript (Robin Cannon)Future Insights
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.
CASL - це бібліотека, що допомогає інтегрувати прості права доступу в зрозумілій формі та розширяти їх з часом.
Оскільки CASL написаний на чистому ES6, то його можна використовувати з довільною ORM, HTTP або UI framework-ом. А допоміжні пакети дозволять інтегруватись без додаткових зусиль.
Що ж особливого в CASL?
1. Декларативна конфігурація
2. Підтримка MongoDB подібних умов
3. Можливість перевіряти права доступу в пам'яті та перетворювати їх в запити до бази
4. Можливість серіалізувати та розшарити права доступу між фронтендом і бекендом або мікросервісами
jQuery Mobile uses HTML 5 and CSS 3 features to enhance basic HTML markup to
create a consistent mobile experience across supported platforms. jQuery Mobile
makes heavy use of the HTML 5 specification for custom data- attributes (available for
review at http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible
-data-with-the-data-attributes). Using this method, it is possible to embed data into
valid HTML 5 markup. jQuery Mobile has a large vocabulary of data- attributes.
Upon initialization, jQuery Mobile selects elements based on their data- attributes and
enhances them by inserting extra markup, adding new CSS classes, and applying event
handlers. This enables you to quickly write basic semantic markup and leave it to
jQuery Mobile to transform your simple markup into complex user interface elements.
It’s actually an interesting exercise to see what jQuery Mobile adds to
your basic markup. To do this, you will need the ability to view source
both before and after JavaScript has been applied to a page—in most
browsers, the “view source” menu option will only show you the
unenhanced source. However, most browsers have “view generated
source” plug-ins available, and the ability to view generated source is
built into some browser-based web development toolbars
Prezentacja z warsztatów http://gamejump.pl/games/workshop1-catchMole/ - dość ostry i szybki wstęp do frontendu. Czyli jakie nazwy powinniście kojarzyć ;-)
Wersja na google docs: https://docs.google.com/presentation/d/1ZKAkxlQfu0qEg5MctcqaYMyoe3SSLqljq1p3VeGPJGw/edit?usp=sharing
This workshop conducted by the team member of Inspire Chittagong (Mizanur Rahaman Mizan and Saad Amin). Workshop was in East Delta Univeristy. There was a session relating to the infos and also another one fully focusing on the practical theme development
In this session you’ll see how we embedded the cutting edge Ace code editor into Perforce Chronicle. Ace (formerly Skywriter, Bespin) is a powerful JavaScript-based editor that matches the performance and functionality of native applications such as TextMate and Vim. Using Ace, we’ll show how you can tweak existing themes and modules — or write completely new ones — from anywhere. You can deploy to the cloud and start hacking without having to configure or install anything locally.
But wait, there’s more! If you attend now, we’ll also demonstrate how we used this system to integrate with Pinterest. If you haven’t heard, Pinterest is the hot new site that lets you create ‘pinboards’ to organize and share the things you love.
Front End Development - Beyond Javascript (Robin Cannon)Future Insights
Session slides from Future Insights Live, Vegas 2015:
https://futureinsightslive.com/las-vegas-2015/
Front-End Development is more than just a Javascript layer. Just because everything is single page apps and you’ve got Bootstrap to back up your Backbone, Ember or Angular, doesn’t mean you’re truly developing a presentation layer. Something that’s a truly great interface between the user and the back end requires the three pillars of front end web; javascript sure, but HTML and CSS are vital too. In this talk Robin redefines what it means to be a front-end developer, and explores frameworks that will help us to build things that users love. He'll cover the de-emphasis of HTML and CSS versus Javascript skills in front end web development, and the benefits of a broader approach that's only going to increase in importance as the Javascript MVC model matures.
CASL - це бібліотека, що допомогає інтегрувати прості права доступу в зрозумілій формі та розширяти їх з часом.
Оскільки CASL написаний на чистому ES6, то його можна використовувати з довільною ORM, HTTP або UI framework-ом. А допоміжні пакети дозволять інтегруватись без додаткових зусиль.
Що ж особливого в CASL?
1. Декларативна конфігурація
2. Підтримка MongoDB подібних умов
3. Можливість перевіряти права доступу в пам'яті та перетворювати їх в запити до бази
4. Можливість серіалізувати та розшарити права доступу між фронтендом і бекендом або мікросервісами
jQuery Mobile uses HTML 5 and CSS 3 features to enhance basic HTML markup to
create a consistent mobile experience across supported platforms. jQuery Mobile
makes heavy use of the HTML 5 specification for custom data- attributes (available for
review at http://dev.w3.org/html5/spec/elements.html#embedding-custom-non-visible
-data-with-the-data-attributes). Using this method, it is possible to embed data into
valid HTML 5 markup. jQuery Mobile has a large vocabulary of data- attributes.
Upon initialization, jQuery Mobile selects elements based on their data- attributes and
enhances them by inserting extra markup, adding new CSS classes, and applying event
handlers. This enables you to quickly write basic semantic markup and leave it to
jQuery Mobile to transform your simple markup into complex user interface elements.
It’s actually an interesting exercise to see what jQuery Mobile adds to
your basic markup. To do this, you will need the ability to view source
both before and after JavaScript has been applied to a page—in most
browsers, the “view source” menu option will only show you the
unenhanced source. However, most browsers have “view generated
source” plug-ins available, and the ability to view generated source is
built into some browser-based web development toolbars
Prezentacja z warsztatów http://gamejump.pl/games/workshop1-catchMole/ - dość ostry i szybki wstęp do frontendu. Czyli jakie nazwy powinniście kojarzyć ;-)
Wersja na google docs: https://docs.google.com/presentation/d/1ZKAkxlQfu0qEg5MctcqaYMyoe3SSLqljq1p3VeGPJGw/edit?usp=sharing
This workshop conducted by the team member of Inspire Chittagong (Mizanur Rahaman Mizan and Saad Amin). Workshop was in East Delta Univeristy. There was a session relating to the infos and also another one fully focusing on the practical theme development
In this session you’ll see how we embedded the cutting edge Ace code editor into Perforce Chronicle. Ace (formerly Skywriter, Bespin) is a powerful JavaScript-based editor that matches the performance and functionality of native applications such as TextMate and Vim. Using Ace, we’ll show how you can tweak existing themes and modules — or write completely new ones — from anywhere. You can deploy to the cloud and start hacking without having to configure or install anything locally.
But wait, there’s more! If you attend now, we’ll also demonstrate how we used this system to integrate with Pinterest. If you haven’t heard, Pinterest is the hot new site that lets you create ‘pinboards’ to organize and share the things you love.
Socialarc - Is Your Facebook Content Getting Lost In The Wild?Socialarc
Only some of your fans see your content...so how do you maximize reach and impressions? To get the most impact from your Facebook content, you need to understand more about the Facebook News Feed and how to drive higher organic reach.
This presentation is a step-by-step guide, along with some handy tips including:
- Measuring content performance
- Driving audience engagement
- Optimizing media spend
Introducing Assetic: Asset Management for PHP 5.3Kris Wallsmith
The performance of your application depends heavily on the number and size of assets on each page. Even your blazingly fastest Symfony2 application can be bogged down by bloated Javascript and CSS files. This session will give you a basic introduction to PHP's new asset management framework, Assetic, and explore how it integrates with Symfony2 for a pleasant, common sense developer experience.
Everyone wants to jump into HTML5 but how do you use the cool features of this new specification while ensuring older browsers render your web pages as expected? This is where Modernizr, polyfills and shims come in. In the session, you’ll learn the best practices and strategy to deal with new HTML5 and CSS3 features in old legacy browsers. You’ll learn step by step how to use specially crafted JavaScript and CSS code that emulate HTML5 features. With a couple of simple changes to your sites, you can take advantage of HTML5 today without breaking your sites in older browsers. Expect a lot of demos and code in the session.
Get this Course
https://www.udemy.com/javascript-course-dom/?couponCode=SLIDESHARE
Document Object Model Power your websites make things happen online - JavaScript to create interactive web pages
Source code making it easy for you to try the code and experiment learning the code.
Challenges and tips to get you coding quickly.
Make you web pages come to life
DOM what it is
Element selection
Multiple element selection
Element manipulation - update content and select attributes
Elements and classes add remove and toggle
Traversing children and parents
Element style attribute
Challenge #1 image popup window
Create elements
Click events
Challenge #2 click event create elements
Challenge #3 click change background
Event Object
Key press event
Mouse move events
Challenge #4 - List items advanced remove,create element, click
Event bubbling and capturing
No libraries, no shortcuts just learning JavaScript making it DYNAMIC and INTERACTIVE web application.
2. What can I use it for?
• Add/remove/modify content
• Set CSS styles, add/remove classes
• Show/hide/animate parts of the page
• React to events (clicks, typing, etc.)
• And much, much more!
3. Basic Concept -
Comments
// this line doesn't do anything!
/* These series of lines
is a bit longer but it
also doesn't do anything! */
$('a').hide(); // hide 'a'
$('a').hide(); // hide all links
$('a').hide(); // hide links while we validate them
4. Basic Concept -
Variables
var classes = 'products rocks monkeys';
var num = 2;
classes = classes + ' another';
// now: products rocks monkeys another
num = num * 2;
// now: 4
5. Basic Concept -
Functions
// assigning a function to a variable
// so we can call it several times
var test = function(message, count) {
count = count * 2;
console.log(message, count);
};
test('hello!', 1);
test('hello again!', 2);
// using a function to delay work
$(document).ready(
function() {
alert('document is ready!');
}
);
6. Basic Concept - Scope
var test = function(message, count) {
poorForm = 'probably a mistake';
var test = 1;
console.log(message, count, test, poorForm);
};
test('hello!', 1);
7. Basic Concept - jQuery
// locate zero or more things on the page:
$('css selector');
// do something with them
$('css selector').method();
e.g.
$('a') // gets all links
$('a.prods') // gets all links with prods class
$('a').hide(); // hide all links
$('a.prods').hide(); // hide links with prods class
$('a.misses').hide(); // no matches? no worries!
8. Getting setup to run JS
• Include jQuery on the page
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.9.0/jquery.min.js" type="text/javascript"></
script>
9. Getting setup to run JS
• Add a script block to your page
<script type="text/javascript">
$(document).ready(function() {
/* my fancy JS code goes here! */
});
</script>
10. Simple JS Example
• Lets turn all links on the page green
<script type="text/javascript">
$(document).ready(function() {
$('a').css('color', 'green');
});
</script>
11. Interactive JS Example
• Lets hide links when they are clicked
<script type="text/javascript">
$(document).ready(function() {
$('a').css('color', 'green');
$('a').click(function() {
$(this).fadeOut();
return false;
});
});
</script>
12. Do I need to use
jQuery?
• No! But a JavaScript framework sure helps.
• Cross-Browser Issues
• More compact code
13. Example Fade Out
• Plain JS
<script type="text/javascript">
document.addEventListener(
'DOMContentLoaded',
function(){
var s = document.getElementById('thing').style;
s.opacity = 1;
var fade = function(){
s.opacity = s.opacity - 0.1;
if (s.opacity < 0) {
s.display = "none";
} else {
setTimeout(fade, 40);
}
};
fade();
}
);
</script>
14. Example Fade Out
• jQuery
<script src="http://ajax.googleapis.com/ajax/libs/
jquery/1.9.0/jquery.min.js" type="text/javascript"></
script>
<script type="text/javascript">
$(document).ready(function() {
$('#thing').fadeOut();
});
</script>