A brownbag presentation at IPC media in London about the need to use libraries to make web development much less random and more professional. Get the audio at: http://www.archive.org/details/ProfessionalWebDevelopmentWithLibraries
See also:
This is demo movie.
- HTML5 for Mobile on Flash Lite
http://www.youtube.com/watch?v=HZURT3VxdRI
- HTML5 for Mobile on i-appli (NTT docomo)
http://www.youtube.com/watch?v=ZsPbMXzbmJE
- HTML5 for Mobile on iPhone
http://www.youtube.com/watch?v=zfjBMVgdozg
Lone StarPHP 2013 - Building Web Apps from a New AnglePablo Godel
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communitate with a REST server built with PHP.
WordPress developers think WordPress is easy, but many site owners--our clients--have a very different idea. Here's why people find WordPress difficult to use and some ways we can make it easier.
How to make your users not want to murder youjoe_mcmahon
Presentation from YAPC:2013 - the psychology of design and implementation of software to build trust. Using "cold pricklies" and "warm fuzzies" to help your users.
In deze presentatie worden enkele voorbeelden aangehaald van goede en slechte url structuren. Wanneer is je url structuur fout en wat moet je er juist aan veranderen? En waarom zou je dit allemaal doen... We halen het allemaal even aan in deze presentatie
See also:
This is demo movie.
- HTML5 for Mobile on Flash Lite
http://www.youtube.com/watch?v=HZURT3VxdRI
- HTML5 for Mobile on i-appli (NTT docomo)
http://www.youtube.com/watch?v=ZsPbMXzbmJE
- HTML5 for Mobile on iPhone
http://www.youtube.com/watch?v=zfjBMVgdozg
Lone StarPHP 2013 - Building Web Apps from a New AnglePablo Godel
AngularJS is a new JavaScript framework, backed by Google, for building powerful, complex and rich client-side web applications. We will go over the features and basics of building a web application with AngularJS and we will demonstrate how to communitate with a REST server built with PHP.
WordPress developers think WordPress is easy, but many site owners--our clients--have a very different idea. Here's why people find WordPress difficult to use and some ways we can make it easier.
How to make your users not want to murder youjoe_mcmahon
Presentation from YAPC:2013 - the psychology of design and implementation of software to build trust. Using "cold pricklies" and "warm fuzzies" to help your users.
In deze presentatie worden enkele voorbeelden aangehaald van goede en slechte url structuren. Wanneer is je url structuur fout en wat moet je er juist aan veranderen? En waarom zou je dit allemaal doen... We halen het allemaal even aan in deze presentatie
Internal training presentation about how I go about advocating Yahoo to the outside world and what gets me pretty excited about our developer offers at the moment.
Learn Bootstrap 4 Step by Step for Beginners
This Bootstrap tutorial pdf and training material will teach you how to quickly prototype and build responsive websites using Bootstrap 4. You will become familiar with common components, setting up a grid, and how to customize the look and feel. Get your copy at https://bootstrapcreative.com/shop/bootstrap-quick-start/
How to Learn Web Designing Step by Step From Basics in 2018Noor Muhammad Khan
How to Learn Web Designing Step by Step From Basics in 2018
How to learn web design is the most commonly asked question around. The web design industry has collapsed from a small niche to a powerful, constantly growing force.
Also, keep in mind, this is, of course, just my list and I deliberately wanted to keep it short because if I specified 20 trends here, I'm not sure if they're really all trends.
UX, Front-end and Back-end: How front-end can help these guys?Diego Eis
How front-end can help UX and Back-end guys? How they interact? I tell a little about it in this slides, showing how the front-end can help the back-end and UX.
Keynote- We're going wrong: Choosing the web's future. Peter Paul KochFuture Insights
From FOWA London 2015
Web developers and browser vendors are trying too hard to emulate native apps; in vain, PPK says, because we can't out-native native. Meanwhile this quest for native emulation has a host of undesirable by-effects: too many new browser features that need too many new (and not always performant) tools to create polyfills, which cause too many people to think they only need to understand the tools in order to be a web developer. We're going wrong. We should take some time to figure out what the web is for, how we can have a successful web ecosystem next to, but not in competition with, native ecosystems, and how we should explain what web development is to Java developers and others who come from a non-web background. We need time to think.
We are obsessed with coding and creating automated workflows and optimisations. And yet our final products aren't making it easy for people to use them. Somewhere, we lost empathy for our end users and other developers. Maybe it is time to change that. Here are some ideas.
PWA are a hot topic and it is important to understand that they are a different approach to apps than the traditional way of packaging something and letting the user install it. In this keynote you'll see some of the differences.
Keynote at halfstackconf 2017 discussing the falsehood of the idea that in order to survive the automation evolution everybody needs to learn how to code. Machines can code, too.
The French Revolution, which began in 1789, was a period of radical social and political upheaval in France. It marked the decline of absolute monarchies, the rise of secular and democratic republics, and the eventual rise of Napoleon Bonaparte. This revolutionary period is crucial in understanding the transition from feudalism to modernity in Europe.
For more information, visit-www.vavaclasses.com
Unit 8 - Information and Communication Technology (Paper I).pdfThiyagu K
This slides describes the basic concepts of ICT, basics of Email, Emerging Technology and Digital Initiatives in Education. This presentations aligns with the UGC Paper I syllabus.
Ethnobotany and Ethnopharmacology:
Ethnobotany in herbal drug evaluation,
Impact of Ethnobotany in traditional medicine,
New development in herbals,
Bio-prospecting tools for drug discovery,
Role of Ethnopharmacology in drug evaluation,
Reverse Pharmacology.
We all have good and bad thoughts from time to time and situation to situation. We are bombarded daily with spiraling thoughts(both negative and positive) creating all-consuming feel , making us difficult to manage with associated suffering. Good thoughts are like our Mob Signal (Positive thought) amidst noise(negative thought) in the atmosphere. Negative thoughts like noise outweigh positive thoughts. These thoughts often create unwanted confusion, trouble, stress and frustration in our mind as well as chaos in our physical world. Negative thoughts are also known as “distorted thinking”.
Palestine last event orientationfvgnh .pptxRaedMohamed3
An EFL lesson about the current events in Palestine. It is intended to be for intermediate students who wish to increase their listening skills through a short lesson in power point.
The Roman Empire A Historical Colossus.pdfkaushalkr1407
The Roman Empire, a vast and enduring power, stands as one of history's most remarkable civilizations, leaving an indelible imprint on the world. It emerged from the Roman Republic, transitioning into an imperial powerhouse under the leadership of Augustus Caesar in 27 BCE. This transformation marked the beginning of an era defined by unprecedented territorial expansion, architectural marvels, and profound cultural influence.
The empire's roots lie in the city of Rome, founded, according to legend, by Romulus in 753 BCE. Over centuries, Rome evolved from a small settlement to a formidable republic, characterized by a complex political system with elected officials and checks on power. However, internal strife, class conflicts, and military ambitions paved the way for the end of the Republic. Julius Caesar’s dictatorship and subsequent assassination in 44 BCE created a power vacuum, leading to a civil war. Octavian, later Augustus, emerged victorious, heralding the Roman Empire’s birth.
Under Augustus, the empire experienced the Pax Romana, a 200-year period of relative peace and stability. Augustus reformed the military, established efficient administrative systems, and initiated grand construction projects. The empire's borders expanded, encompassing territories from Britain to Egypt and from Spain to the Euphrates. Roman legions, renowned for their discipline and engineering prowess, secured and maintained these vast territories, building roads, fortifications, and cities that facilitated control and integration.
The Roman Empire’s society was hierarchical, with a rigid class system. At the top were the patricians, wealthy elites who held significant political power. Below them were the plebeians, free citizens with limited political influence, and the vast numbers of slaves who formed the backbone of the economy. The family unit was central, governed by the paterfamilias, the male head who held absolute authority.
Culturally, the Romans were eclectic, absorbing and adapting elements from the civilizations they encountered, particularly the Greeks. Roman art, literature, and philosophy reflected this synthesis, creating a rich cultural tapestry. Latin, the Roman language, became the lingua franca of the Western world, influencing numerous modern languages.
Roman architecture and engineering achievements were monumental. They perfected the arch, vault, and dome, constructing enduring structures like the Colosseum, Pantheon, and aqueducts. These engineering marvels not only showcased Roman ingenuity but also served practical purposes, from public entertainment to water supply.
Model Attribute Check Company Auto PropertyCeline George
In Odoo, the multi-company feature allows you to manage multiple companies within a single Odoo database instance. Each company can have its own configurations while still sharing common resources such as products, customers, and suppliers.
Students, digital devices and success - Andreas Schleicher - 27 May 2024..pptxEduSkills OECD
Andreas Schleicher presents at the OECD webinar ‘Digital devices in schools: detrimental distraction or secret to success?’ on 27 May 2024. The presentation was based on findings from PISA 2022 results and the webinar helped launch the PISA in Focus ‘Managing screen time: How to protect and equip students against distraction’ https://www.oecd-ilibrary.org/education/managing-screen-time_7c225af4-en and the OECD Education Policy Perspective ‘Students, digital devices and success’ can be found here - https://oe.cd/il/5yV
How to Split Bills in the Odoo 17 POS ModuleCeline George
Bills have a main role in point of sale procedure. It will help to track sales, handling payments and giving receipts to customers. Bill splitting also has an important role in POS. For example, If some friends come together for dinner and if they want to divide the bill then it is possible by POS bill splitting. This slide will show how to split bills in odoo 17 POS.
2024.06.01 Introducing a competency framework for languag learning materials ...Sandy Millin
http://sandymillin.wordpress.com/iateflwebinar2024
Published classroom materials form the basis of syllabuses, drive teacher professional development, and have a potentially huge influence on learners, teachers and education systems. All teachers also create their own materials, whether a few sentences on a blackboard, a highly-structured fully-realised online course, or anything in between. Despite this, the knowledge and skills needed to create effective language learning materials are rarely part of teacher training, and are mostly learnt by trial and error.
Knowledge and skills frameworks, generally called competency frameworks, for ELT teachers, trainers and managers have existed for a few years now. However, until I created one for my MA dissertation, there wasn’t one drawing together what we need to know and do to be able to effectively produce language learning materials.
This webinar will introduce you to my framework, highlighting the key competencies I identified from my research. It will also show how anybody involved in language teaching (any language, not just English!), teacher training, managing schools or developing language learning materials can benefit from using the framework.
2. Almost every web site is
broken.
If you look around the web you will find that almost every site is broken in one way or another. This
starts with small display glitches and ends with the sites being inaccessible or not working for users
out there.
3. This is bad.
This is really bad. It hurts the web as a media. We re-invent the web every year as we just cannot
seem to get it to work for us.
4. Unhappy
visitors.
Broken web sites lead to unhappy visitors. The real problem there is that unhappy visitors do not
complain to the people who could fix the issues. Most visitors either think they've done something
wrong or just try to find another site that offers the same content and works. Both of these visitors
will never come back. Other visitors complain but get stuck in help desks and never get their
problem fixed as it is highly unlikely to ever reach the developers who could fix them.
5. Unhappy
developers.
It doesn't reach the developers as they are too busy with building new functionality and other sites.
If we don't build new things all the time we are neither happy developers nor seen as efficient
employers. Fixing things isn't sexy.
6. Unhappy clients.
This leads to unhappy clients. If a client realizes something doesn't work on the site they paid good
money for they want it fixed, regardless of how fringe the problem is and if it only shows up on their
machine with their (most of the time outdated) setup.
7. Reasons
There are many reasons for the broken web, and nearly all of them are our own fault or based on
misconceptions.
8. Lack of communication
Probably the biggest problem of web development is that the different parties involved do not talk to
each other or know each others tasks. Developers think they know more than designers, designers
think developers are not creative enough in using the arsenal at their hands and product managers
see the brand more than the media and are oblivious to the technical boundaries and freedoms the
internet gives us. Furthermore we all have our deadlines, deliveries and reports to make and write
which takes up too much of our time.
9. Development environment
Web development has the most terrible and undefined environment ever. There are thousands of
browser configurations and versions, each of them failing in different ways. There is a lack of good
error reporting, difference in server configurations, connection issues... you name it. Our
development is hit and miss and we fix more bugs than we write code.
10. Piecemeal development
As web developers we always try to build small solutions that solve a problem we have right now. We
don't really consider that all things on a site and across sites should work smoothly together. We've
been disappointed so many times that we don't really believe in that.
11. Lack of handover and
documentation
The piecemeal development also means we don't really document or hand something over. As the
next developer is most likely as inclined as we are to build something new (as it surely will be much
better than the crud we are asked to maintain) there is no point in that.
12. Interface to functionality
The biggest issue is that we start with the interface and the cool effect and then work our way down
to what the user needs to achieve. We tend to forget very fast that not everybody has the same
experience or could benefit from the great shiny interface we want to build. There is a skeleton
under every web application and if that skeleton is weak it will break no matter how pretty and shiny
we make it.
14. Back to Basics
The first thing to think about is going back to basics when it comes to development. How does the
web work, what is the most basic way of reaching a certain goal.
15. This is a search box with several options. It used JavaScript to change the form’s action when any of
the links were clicked.
17. There was no need for JavaScript - all we needed was a radio button group and doing the forking on
the backend. Notice that the fieldset, the options and the search button form a logical sentence.
This is very important for accessibility.
18. The hardest interface to build as a web developer. Looks like a data table but could have shows that
are one minute long! This would mean the table has to have 180 columns and use colspan on every
table cell.
19. Analyse what data
you display, and find
the easiest way to
show it.
Then make it look the
way you want it to.
The information the data displays is much easier shown as headlines and ordered lists. CSS does
the rest.
21. http://developer.yahoo.com/ypatterns
Here is where Yahoo offers their findings of user testing with real end users. There is nothing that
can replace this knowledge and it is normally very expensive to come by. Before you even think
about building an own interface to solve a problem users have to solve, give this a whirl.
23. Screenshots of uk.video.yahoo.com with and
without JavaScript
http://uk.video.yahoo.com/
Flash video players are to date the best way to show video. However, they have no reliable keyboard
control.
24. By providing buttons that work in HTML and control the video via an API you can make it accessible
to all.
26. http://finance.yahoo.com/currency-converter?
u#from=USD;to=EUR;amt=1
This is the new Yahoo currency converter. It is an amazing piece of web development. It works for
all users (including screen reader users) and makes it easy to convert currencies.
28. Removing browsers
The biggest step to professional development and keeping our sanity is to get the random element
of browsers out of the equation. You cannot support all the browsers in the world and neither
should you.
29. http://developer.yahoo.com/yui/articles/gbs/
The graded browser support is a framework to define which browsers you test for and get the full
experience. Unknown browsers only get what works in them - no JavaScript and even more obscure
browsers get no CSS either.
31. http://developer.yahoo.com/yui/
Libraries have one job: make browsers work. Support is the most random thing in our world as web
developers therefore it makes a lot of sense to put all the dirty hacking and fixing of wrong browser
behaviour into libraries. YUI is what Yahoo built and uses exactly for that purpose.
32. Making browsers behave.
http://developer.yahoo.com/yui/reset/
First issue is that every browser has an internal style sheet that renders HTML. All of them are
different which makes it impossible to develop a reliable look and feel across browsers. YUI Reset
works around that.
43. http://developer.yahoo.com/yui/fonts/
The same applies to typography. By using the YUI fonts CSS you reset the browser typography to
allow you to define pixel sizes as percentages, thus having control and allowing users to resize the
fonts.
45. http://developer.yahoo.com/yui/grids/builder/
If you are lazy, you can also use the grids builder, define your layout, hit the show code button and
get a copy + paste HTML document. The CSS will come from our CDN, which means it gets
delivered to your customers from a computer near them geographically.
46. Doing one job at a time.
YUI does what we as developers would love to be able to do: concentrating on one task at a time.
Other than “catch-all” libraries, YUI is cut up into several components, each doing one thing. You
can mix and match them to your needs.
47. DOM access.
One of these components is YAHOO.util.Dom which gives you access to everything that happens in
the DOM and convenience methods around the more annoying things the W3C DOM API has.
52. Predicting issues and fixing
them.
One thing you should do as a developer is being paranoid about things breaking. You should be
able to see what can go wrong and set traps for it not to happen.
53. position:fixed is sexy!
Positioning elements fixed can be very cool. Say for example you have a long document but you
want to show the navigation next to regardless of how far down the page you scrolled. Another cool
use would be a comments field that allows you to copy and paste quotes from the document.
55. However if the browser window is too small there is no way to reach the elements below.
56. var YD = YAHOO.util.Dom;
YAHOO.util.Event.onDOMReady(toggleMenu);
YAHOO.util.Event.on(window,'resize',function(){
toggleMenu();
});
function toggleMenu(){
var sidebar = YD.getRegion('sb');
var browser = YD.getViewportHeight();
YD.setStyle('sb','position',
browser < sidebar.bottom ? 'static' : 'fixed'
);
}
This small script fixes this problem. Using getRegion I can get the size of any element on the page
and getViewportHeight() gives me the available space. If there is more space than needed, fixed can
be applied.
63. http://developer.yahoo.com/yui/docs/
The YUI comes with extensive documentation, both created from comments in the code (JavaDoc
style) and step-by-step tutorials. The system that generates the docs from the source code is also
available as open source.
65. http://developer.yahoo.com/yui/examples/
YUI comes with over 300 copy and paste examples of how to use the different components and
widgets. As this is how most developers work, we realized that this is a very important part of our
success.
66. Allow for extension.
One very important part of any software is that it should allow for extension of functionality. Users
of the software package should never have to hack the core but instead create add-ons and plugins
to extend the basic functionality to what they want to achieve.
67. YUI uses custom events for all of this. This allows you to completely separate your own code from
the library. Instead of having to call library methods or call your functions from the library all you
need to do is to fire or subscribe to events.
68. //This is the first animation; this one will
//fire when the button is clicked.
var move = new YAHOO.util.Anim(quot;animatorquot;, {
left: {from:0, to:75}
}, 1);
//This is the second animation; it will fire
//when the first animation is complete.
var changeColor = new YAHOO.util.ColorAnim(
quot;animatorquot;, { backgroundColor:
{from:quot;#003366quot;, to:quot;#ff0000quot;}
}, 1);
//Here's the chaining glue: We subscribe to the
//first animation's onComplete event, and in
//our handler we animate the second animation:
move.onComplete.subscribe(function() {
changeColor.animate();
});
69. //Here we set up our YUI Button and subcribe to
//its click event. When clicked, it will
//animate the first animation:
var start = new YAHOO.widget.Button(quot;startAnimquot;);
start.subscribe(quot;clickquot;, function() {
//reset the color value to the start so that
//the animation can be run multiple times:
YAHOO.util.Dom.setStyle(quot;animatorquot;,
quot;backgroundColorquot;,
quot;#003366quot;);
move.animate();
});
70. //You can also make use of the onStart and onTween
//custom events in Animation; here, we'll log all
//of changeColor's custom events and peek at their
//argument signatures:
changeColor.onStart.subscribe(function() {
YAHOO.log(quot;changeColor animation is starting.quot;,
quot;infoquot;, quot;examplequot;);
});
changeColor.onTween.subscribe(function(s, o) {
YAHOO.log(quot;changeColor onTween firing with these
arguments: quot; + YAHOO.lang.dump(o),
quot;infoquot;, quot;examplequot;);
});
changeColor.onComplete.subscribe(function(s, o) {
YAHOO.log(quot;changeColor onComplete firing with
these arguments: quot; + YAHOO.lang.dump(o),
quot;infoquot;, quot;examplequot;);
});
71. Know what is happening.
Not every browser comes with a great debugging suite like FireBug or Opera’s Dragonfly. This is
why Yahoo comes with a logging control.
72. The logger allows you to debug in any browser that the YUI works in. In addition to this all the YUI
widgets and components are shipped as debug versions which report everything they do to the
logger. This gives you full control over what is happening and when.
74. The YUI profiler allows you to monitor JavaScript performance - even of non-YUI scripts.
75. Test before you write.
The same applies to the YUI Test suite. Using this you can apply test-driven development
methodologies to JavaScript development.
76. YUI3 is the new version of YUI, there are many speed and size improvements and we changed the
way YUI works significantly to make it more secure, performant and allows you to write much less
code to achieve your goal.
77. http://developer.yahoo.com/performance/
JavaScript performance is one thing, but in order to deliver really successful web sites there are
many tricks to apply to create happy end users. The exceptional performance section of the Yahoo
Developer Network has them all listed.
78. http://developer.yahoo.com/yslow/
YSlow - a Firefox extension allows you to test any web site against these tips and rules and you get
immediate, relevant information how to improve the performance of your site.