This document contains the transcript of a presentation by Chris Heilmann on web development. Some of the key points discussed include:
- The benefits of progressive enhancement and using HTML, CSS, and JavaScript together to build robust and accessible websites.
- How limitations in early design can foster creativity.
- The importance of error handling and defensive coding practices.
- Embracing new technologies like Service Workers and Manifests to build Progressive Web Apps.
- Rethinking the idea that JavaScript is unreliable and should not be depended on, as modern browsers have made it a capable tool.
“If Tetris has taught me anything, it’s that errors pile up and accomplishments disappear” is a common quote and it seems we’re living this to its full extend as web developers. We fail to celebrate the successes we have and the tools that are at our disposal but we’re never short of finding reasons why things don’t work. We also tend to pile on technology on technology to solve problems that may actually not exist and thus clog up the web. In this talk Chris Heilmann wants to remind us what we achieved and how we should celebrate it and how we should stop trying to solve problems that are simply beyond our control.
“If Tetris has taught me anything, it’s that errors pile up and accomplishments disappear” is a common quote and it seems we’re living this to its full extend as web developers. We fail to celebrate the successes we have and the tools that are at our disposal but we’re never short of finding reasons why things don’t work. We also tend to pile on technology on technology to solve problems that may actually not exist and thus clog up the web. In this talk Chris Heilmann wants to remind us what we achieved and how we should celebrate it and how we should stop trying to solve problems that are simply beyond our control.
2021 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
When Web Performance Optimization was emerging as a new field of engineering we had a handful of rules to follow. Gzip here, minify there, do some caching. This was 15 years ago.
This year’s Smashing Magazine performance checklist has 62 items with hundreds of links for further research.
Have we learned so much or has the Web become so complicated?
In this talk I will try to make sense of today’s most pressing Web Performance issues with easily digestible lessons about metrics, budgets, JavaScript frameworks, functional programming, browsers and plain old HTML.
2021 Chrome Dev Summit: Web Performance 101Tammy Everts
What do we mean when we talk about "web performance"? Why should you care about it? How can measure it? How do you get other people in your organization to care? In this workshop at the 2021 Chrome Dev Summit, I covered these questions – including an overview of the history of performance metrics, up to Core Web Vitals.
When Web Performance Optimization was emerging as a new field of engineering we had a handful of rules to follow. Gzip here, minify there, do some caching. This was 15 years ago.
This year’s Smashing Magazine performance checklist has 62 items with hundreds of links for further research.
Have we learned so much or has the Web become so complicated?
In this talk I will try to make sense of today’s most pressing Web Performance issues with easily digestible lessons about metrics, budgets, JavaScript frameworks, functional programming, browsers and plain old HTML.
Responsive Web Design: the secret sauce - JavaScript Open Day Montreal - 2015...Frédéric Harper
There is no mobile or desktop Web: we view the same Web, but in different ways. So what is the secret sauce to give the best experience to our users? Drown your fixed-width design, destroy your device-specific approaches and ride the web's unicorn while an orchestra is playing we are the champion in the background: you found the holy grail! It's responsive web design. It's not new. It's not magical. Still, we need it as the bytes going thru the wires doesn't always give us the best experience out there. So stop watching cats videos, and learn more about how you can use Responsive Web Design's approach to your current site, today.
A presentation for Dundee University's Hack Day explaining the technologies to use and how to hack your own APIs by using Yahoo! Pipes and scraping RSS feeds.
The final talk of the Frontend2010 conference in Oslo, Norway talking about the need to make technical advancements interesting for people outside our comfort zone and about the benefits of using all the web technologies at our disposal to built bullet-proof solutions rather than flimsy showcases of what technologies could be used for.
There is often a vocabulary gap between designers an developers, who should aim towards a ubiquitous way of conversing about colours, typography, viewport sizes, or the responsive grid system of a digital product… To bridge this gap at the Guardian, we use a CSS pre-processor as a communication enabler through the abstractions it allows us to put in place.
Talk given at the Front-end London meet-up on April 24, 2014. Listen to the talk + slides on YouTube: https://www.youtube.com/watch?v=DAfW1RSWYDA
Releasing a great app is more than having a unique idea. It takes teamwork, collaboration and the will to be the best. At Novoda we make awesomeness happen. This talk is about our process from coding dojos to group design and iterative sprint planning with our customers. We'll describe some of our best practices as well as some of the components that can make a good app great.
This includes:
- Day-to-day processes: pairing tennis, gif code reviews and toggling hidden features.
- Work Environment: hack & tells, continuous communication & kicking ass at Tekken.
- Releasing the app: polishing & quantifying can get you top of the class and not listening to Google can get you expelled.
Finishing with some bonus Android coding tips and tricks and crazy AOSP anti-patterns.
Responsive Web Design, get the best out of your designs - JavaScript Open Day...Frédéric Harper
There is no mobile Web, there is no desktop Web, and there is no tablet Web. We view the same Web just in different ways. So how do we do it? By getting rid of our fixed-width, device-specific approaches and use Responsive Web Design techniques. This session will focus on what is Responsive Web Design and how you can use his 3-pronged approach on your current apps today which will also adapt to new devices in the future.
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.
NO1 Uk Divorce problem uk all amil baba in karachi,lahore,pakistan talaq ka m...Amil Baba Dawood bangali
Contact with Dawood Bhai Just call on +92322-6382012 and we'll help you. We'll solve all your problems within 12 to 24 hours and with 101% guarantee and with astrology systematic. If you want to take any personal or professional advice then also you can call us on +92322-6382012 , ONLINE LOVE PROBLEM & Other all types of Daily Life Problem's.Then CALL or WHATSAPP us on +92322-6382012 and Get all these problems solutions here by Amil Baba DAWOOD BANGALI
#vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore#blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #blackmagicforlove #blackmagicformarriage #aamilbaba #kalajadu #kalailam #taweez #wazifaexpert #jadumantar #vashikaranspecialist #astrologer #palmistry #amliyaat #taweez #manpasandshadi #horoscope #spiritual #lovelife #lovespell #marriagespell#aamilbabainpakistan #amilbabainkarachi #powerfullblackmagicspell #kalajadumantarspecialist #realamilbaba #AmilbabainPakistan #astrologerincanada #astrologerindubai #lovespellsmaster #kalajaduspecialist #lovespellsthatwork #aamilbabainlahore #Amilbabainuk #amilbabainspain #amilbabaindubai #Amilbabainnorway #amilbabainkrachi #amilbabainlahore #amilbabaingujranwalan #amilbabainislamabad
What website can I sell pi coins securely.DOT TECH
Currently there are no website or exchange that allow buying or selling of pi coins..
But you can still easily sell pi coins, by reselling it to exchanges/crypto whales interested in holding thousands of pi coins before the mainnet launch.
Who is a pi merchant?
A pi merchant is someone who buys pi coins from miners and resell to these crypto whales and holders of pi..
This is because pi network is not doing any pre-sale. The only way exchanges can get pi is by buying from miners and pi merchants stands in between the miners and the exchanges.
How can I sell my pi coins?
Selling pi coins is really easy, but first you need to migrate to mainnet wallet before you can do that. I will leave the telegram contact of my personal pi merchant to trade with.
Tele-gram.
@Pi_vendor_247
what is the future of Pi Network currency.DOT TECH
The future of the Pi cryptocurrency is uncertain, and its success will depend on several factors. Pi is a relatively new cryptocurrency that aims to be user-friendly and accessible to a wide audience. Here are a few key considerations for its future:
Message: @Pi_vendor_247 on telegram if u want to sell PI COINS.
1. Mainnet Launch: As of my last knowledge update in January 2022, Pi was still in the testnet phase. Its success will depend on a successful transition to a mainnet, where actual transactions can take place.
2. User Adoption: Pi's success will be closely tied to user adoption. The more users who join the network and actively participate, the stronger the ecosystem can become.
3. Utility and Use Cases: For a cryptocurrency to thrive, it must offer utility and practical use cases. The Pi team has talked about various applications, including peer-to-peer transactions, smart contracts, and more. The development and implementation of these features will be essential.
4. Regulatory Environment: The regulatory environment for cryptocurrencies is evolving globally. How Pi navigates and complies with regulations in various jurisdictions will significantly impact its future.
5. Technology Development: The Pi network must continue to develop and improve its technology, security, and scalability to compete with established cryptocurrencies.
6. Community Engagement: The Pi community plays a critical role in its future. Engaged users can help build trust and grow the network.
7. Monetization and Sustainability: The Pi team's monetization strategy, such as fees, partnerships, or other revenue sources, will affect its long-term sustainability.
It's essential to approach Pi or any new cryptocurrency with caution and conduct due diligence. Cryptocurrency investments involve risks, and potential rewards can be uncertain. The success and future of Pi will depend on the collective efforts of its team, community, and the broader cryptocurrency market dynamics. It's advisable to stay updated on Pi's development and follow any updates from the official Pi Network website or announcements from the team.
Falcon stands out as a top-tier P2P Invoice Discounting platform in India, bridging esteemed blue-chip companies and eager investors. Our goal is to transform the investment landscape in India by establishing a comprehensive destination for borrowers and investors with diverse profiles and needs, all while minimizing risk. What sets Falcon apart is the elimination of intermediaries such as commercial banks and depository institutions, allowing investors to enjoy higher yields.
how to sell pi coins in South Korea profitably.DOT TECH
Yes. You can sell your pi network coins in South Korea or any other country, by finding a verified pi merchant
What is a verified pi merchant?
Since pi network is not launched yet on any exchange, the only way you can sell pi coins is by selling to a verified pi merchant, and this is because pi network is not launched yet on any exchange and no pre-sale or ico offerings Is done on pi.
Since there is no pre-sale, the only way exchanges can get pi is by buying from miners. So a pi merchant facilitates these transactions by acting as a bridge for both transactions.
How can i find a pi vendor/merchant?
Well for those who haven't traded with a pi merchant or who don't already have one. I will leave the telegram id of my personal pi merchant who i trade pi with.
Tele gram: @Pi_vendor_247
#pi #sell #nigeria #pinetwork #picoins #sellpi #Nigerian #tradepi #pinetworkcoins #sellmypi
Currently pi network is not tradable on binance or any other exchange because we are still in the enclosed mainnet.
Right now the only way to sell pi coins is by trading with a verified merchant.
What is a pi merchant?
A pi merchant is someone verified by pi network team and allowed to barter pi coins for goods and services.
Since pi network is not doing any pre-sale The only way exchanges like binance/huobi or crypto whales can get pi is by buying from miners. And a merchant stands in between the exchanges and the miners.
I will leave the telegram contact of my personal pi merchant. I and my friends has traded more than 6000pi coins successfully
Tele-gram
@Pi_vendor_247
Falcon stands out as a top-tier P2P Invoice Discounting platform in India, bridging esteemed blue-chip companies and eager investors. Our goal is to transform the investment landscape in India by establishing a comprehensive destination for borrowers and investors with diverse profiles and needs, all while minimizing risk. What sets Falcon apart is the elimination of intermediaries such as commercial banks and depository institutions, allowing investors to enjoy higher yields.
how to sell pi coins in all Africa Countries.DOT TECH
Yes. You can sell your pi network for other cryptocurrencies like Bitcoin, usdt , Ethereum and other currencies And this is done easily with the help from a pi merchant.
What is a pi merchant ?
Since pi is not launched yet in any exchange. The only way you can sell right now is through merchants.
A verified Pi merchant is someone who buys pi network coins from miners and resell them to investors looking forward to hold massive quantities of pi coins before mainnet launch in 2026.
I will leave the telegram contact of my personal pi merchant to trade with.
@Pi_vendor_247
Poonawalla Fincorp and IndusInd Bank Introduce New Co-Branded Credit Cardnickysharmasucks
The unveiling of the IndusInd Bank Poonawalla Fincorp eLITE RuPay Platinum Credit Card marks a notable milestone in the Indian financial landscape, showcasing a successful partnership between two leading institutions, Poonawalla Fincorp and IndusInd Bank. This co-branded credit card not only offers users a plethora of benefits but also reflects a commitment to innovation and adaptation. With a focus on providing value-driven and customer-centric solutions, this launch represents more than just a new product—it signifies a step towards redefining the banking experience for millions. Promising convenience, rewards, and a touch of luxury in everyday financial transactions, this collaboration aims to cater to the evolving needs of customers and set new standards in the industry.
when will pi network coin be available on crypto exchange.DOT TECH
There is no set date for when Pi coins will enter the market.
However, the developers are working hard to get them released as soon as possible.
Once they are available, users will be able to exchange other cryptocurrencies for Pi coins on designated exchanges.
But for now the only way to sell your pi coins is through verified pi vendor.
Here is the telegram contact of my personal pi vendor
@Pi_vendor_247
how to sell pi coins effectively (from 50 - 100k pi)DOT TECH
Anywhere in the world, including Africa, America, and Europe, you can sell Pi Network Coins online and receive cash through online payment options.
Pi has not yet been launched on any exchange because we are currently using the confined Mainnet. The planned launch date for Pi is June 28, 2026.
Reselling to investors who want to hold until the mainnet launch in 2026 is currently the sole way to sell.
Consequently, right now. All you need to do is select the right pi network provider.
Who is a pi merchant?
An individual who buys coins from miners on the pi network and resells them to investors hoping to hang onto them until the mainnet is launched is known as a pi merchant.
debuts.
I'll provide you the Telegram username
@Pi_vendor_247
4. We all know this
character, right?
https://en.wikipedia.org/wiki/Mario#Concept_and_creation
5. But do you know
why it looks like it
does?
https://en.wikipedia.org/wiki/Mario#Concept_and_creation
6. Red and Blue offered the
best contrast to the skin,
boots and the game
background.
https://en.wikipedia.org/wiki/Mario#Concept_and_creation
7. The cap meant there was
no need to worry about
hair style, eyebrows and
forehead.
(There were also not enough
pixels for waving hair when
falling down a hole)
8. The large nose and
moustache made it
possible to avoid a mouth
and facial expressions.
25. That was fun…
😎 Written on a plane, offline and in
roughly two hours
😎 Works on desktop and mobile,
independent of input and is
responsive
😎 All in all < 8 kb with the biggest
part being icons
https://codepo8.github.io/10kb-CSS-colour-game/
28. The structure was not hard…
😎 Have an array of all the possible colours.
😎 Get a random cut of n elements, display them as a list; store the name of the colour
as a data attribute
😎 Get one item of the list as the colour to match, show its name.
😎 Use event delegation on the list to add one click handler (also allows for keyboard)
😎 Compare the data attribute of the target of the event with the colour to match
😎 If true, display a new random list
😎 If false, decrease the possible moves counter
😎 If no more moves left, show game over
💩 Only issue: there is no array_rand()
29. Computers and smartphones are
powerful.
Browsers can do a lot and are open to
feedback.
JavaScript is flexible and has evolved.
CSS has become amazing.
Developer tools in browsers give us great
debugging and even design capabilities
😍
🦄
🎉
30. The beauty of HTML, CSS and JS…
😍 All is contained in one package
😍 Everything is running on the end users
environments
😍 You use what the OS and the hardware gives
you. It can be a web site or an app,
depending on who runs it where
😍 You wouldn’t even need ServiceWorker to
make this work offline - inlining everything
would be enough
📦
36. New, more sturdy structure…
😎 Write a PHP API with the named colours as the content
😎 Use array_rand() to get a cut of that, pick one as the one to match
😎 Write out a list of buttons with the same name and the colour as the value.
😎 If the colour matches the button that was clicked, get a new list
😎 If the colour doesn’t match, decrease the amount of moves and show the list again.
😠 Oh, crap…
37. As we don’t keep the
state of the game in the
browser, I need to
maintain the random
array in between
reloads…
👜
38. The amount is not much,
but you better make sure
that there is no way to
inject code to the server.
🚨
41. Now it works without JS, let’s add some…
😎 Load the API content with AJAX
🤔 Repeat the rest of the functionality client-side, or do
a lot of unnecessary server roundtrips…
🍕
42. The better, sturdier, more webby version
🤔 Almost same amount of
JavaScript content
🤔 Doesn’t work offline, unless
we also create a different
API
🤔 But it does work with
JavaScript disabled.
😨 It also allows bad people
to inject code unless we
are very vigilant in keeping
our backend secure.
49. This means that new error
cases become much more
important than “JavaScript is
not available”
⚠
50. ✏ Small initial payload
✏ Form factor supporting content
✏ Form factor supporting interfaces
✏ Offline/Flaky connection support
✏ Taking advantage of the power of
the end user device
✏ Avoiding interaction latency
❤📲
51. This is achievable using
HTML, JavaScript and CSS,
but it is much harder - if
not impossible - without
client side scripting.
👷
52. Which is annoying, as the
HTML5 revolution
promised a move from
documents to apps…
53. The problem is that eight
years after the proposal
and five years after
HTML5’s “last call”, there
are still many basic support
issues…
😦
56. And the bad people of the
internet don’t stop abusing
old technology either…💀
57. In UGC, we can’t have nice things…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
58. Keep users on this page…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
🔓💩
59. Fix for newer browsers…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
60. Fix for all browsers…
https://mathiasbynens.github.io/rel-noopener/
https://medium.com/@jitbit/target-blank-the-most-underestimated-vulnerability-ever-96e328301f4c#.mjuw7q3cf
61. Almost…
Listen for the click event and prevent the default
browser behavior of opening a new tab. Inject a
hidden iframe that opens the new tab, then
immediately remove the iframe.“
https://github.com/danielstjules/blankshield
62. Our solutions should have
excellent error handling
instead of automatic
tolerance.
👌
63. And they should be great
solutions and not just
“good enough without
breaking”.
https://twitter.com/dieni/status/767589581046841344
70. http://status.npmjs.org/incidents/dw8cr1lwxkcr
Better be safe and require()…
More detail: the "fs" package is a non-functional
package. It simply logs the word "I am fs" and exits.
There is no reason it should be included in any
modules. However, something like 1000 packages *do*
mistakenly depend on "fs", probably because they were
trying to use a built-in node module called "fs".
80. It is more important for us
to get a grip on the overall
quality of the web and our
code…
🏅
81. Using
instead of a URL or using a
button is not JavaScript’s fault.
It is a bad idea and practice -
probably copy & paste.
💩
<a href="javascript:void(0)">
82. Instead of bashing bad use
of JavaScript, let’s embrace
and scrutinise new ideas like
components and paradigms
like functional programming.
🔎
83. There is a very cool thing
happening right now…
😃
84. Service Worker & PWAs
https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API
🔧 🦄
85. Making the game an App: Manifest
App Manifest (manifest.json)
Using a manifest, the game is
recognised by OS and search engines
as an installable app
86. Service Worker (sw.js)
Using ServiceWorker to cache content
locally so the game can be played
offline.
Making the game an App: Service Worker
87. Making the game an App: Service Worker
Service Worker (sw.js)
Using ServiceWorker to cache content
locally so the game can be played
offline.
88. ✅ Create and publish as much content
independent of JavaScript as you can
✅ JavaScript can make things much more
enjoyable.
✅ Some things are just not worth while to
implement without.
✅ Use JavaScript to benefit from the user’s
hardware
✅ Spend more time building great
interfaces, less time relying on what is
there and can’t break - in many cases it
is disappointing.
It is time to re-
think our best
practice for the
web approach…
89. 🙂 You don’t rely on automatic fixes.
JavaScript breaks and it is painful. It
allows us to analyse what went wrong.
🙂 Tooling is great - we detailed insights
into what happened when
🙂 We take responsibility of the interface. It
is our job to make it happen - not
browser makers to agree and find a
consensus
🙂 We have full control over what gets
loaded when, cached where and
rendered when.
Benefits of an “It’s
OK to rely on JS
for this”
approach…
90. ⚠ We shouldn’t hide functionality in
magical abstractions. A product that
relies on the availability and maintenance
of a framework is not a script
dependency - it is a support issue.
⚠ Just because we can do everything in
JavaScript, doesn’t mean we have to. Use
it when HTML is not good enough or too
broken to rely on.
⚠ While the client is powerful, it is also
unknown. A lot more can be done on
the server - and in JavaScript.
Dangers to be
aware of…
91. Important
considerations
independent of
technology used…
💣 Shit happens! Spend more time in
creating sensible error messaging and
fallbacks, spend less time in trying to
predict every possible error
💣 Slowness kills - our solutions must load
fast what is needed and enhance when
they can. They also need to be snappy.
💣 Offline and flaky is the norm - avoid
network dependency as much as you
can
💣 Security is paramount. A hacked
server sending out malware or spam is
worse than an app that needs a
restart…
92. We have to stop thinking in
binaries, and consider writing
great, secure and failure-
aware solutions using each
technology to its strengths.
🐝