Upgrade to Pro — share decks privately, control downloads, hide ads and more …

BrumPHP, 25 April 2019, Birmingham UK

BrumPHP, 25 April 2019, Birmingham UK

6f3ec7315ad0715ae2a5f89a52877218?s=128

bruce lawson

April 25, 2019
Tweet

More Decks by bruce lawson

Other Decks in Technology

Transcript

  1. @brucel §

  2. @brucel PHP: Hypertext Preprocessor

  3. @brucel Benoit B. Mandelbrot Image Steve Jurvetson https://www.flickr.com/photos/jurvetson/4770047266/

  4. @brucel <!DOCTYPE html> <charset=utf-8> title>PHP Test</title> <body> <?php // Get

    username from database and store it in variable $txt echo ‘<p>Hello’ .$txt. ‘</p>'; ?> </body> </html> <p>Hello Hannah</p>
  5. @brucel

  6. @brucel

  7. @brucel

  8. @brucel Since its first publication in 1970 The Technique of

    Furniture Making has established itself as the bible for all woodworkers.
  9. @brucel Introduction Any textbook concerned with the techniques of furniture-

    making must deal primarily with the basic handcrafts for it is upon this groundwork that machine production is built, and in fact all the machine can ever do is to translate the essential hand operations into rotary movements of the cutting tool.
  10. @brucel To those pundits, therefore, who may claim that the

    teaching of hand skills is no longer relevant in this day and age it can be pointed out that anyone who has only been shown how to force a piece of wood against a mechanised saw will have learnt very little, but if he has had to saw that piece of wood by hand he will be more likely to know that much more about it, he will have greater respect for it and will understand in greater depth the problems that will have to be faced in its manipulation.
  11. None
  12. None
  13. None
  14. @brucel Additional to this need for all machine operators to

    know their material and how best it can be shaped are questions of quality, not only in the artefact, but also of the artificer himself.
  15. @brucel

  16. @brucel 職⼈人気質 The Japanese word shokunin is defined by both

    Japanese and Japanese-English dictionaries as ‘craftsman’ or ‘artisan,’ but such a literal description does not fully express the deeper meaning. Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”
  17. @brucel 職⼈人気質 Shokunin means not only having technical skill, but

    also implies an attitude and social consciousness... a social obligation to work his best for the general welfare of the people, [an] obligation both material and spiritual. Tashio Odate - “Japanese Woodworking Tools: Their Tradition, Spirit and Use”
  18. @brucel • Picture of TBL “web developer”

  19. Seren

  20. @brucel http://info.cern.ch/hypertext/WWW/TheProject.html

  21. @brucel

  22. @brucel

  23. @brucel

  24. @brucel We broke it • fixed width • bad contrast,

    fonts, colours • pixel-perfect layout • lack of captions for videos • lack of keyboard accessibility • removing focus indicator
  25. @brucel

  26. @brucel The Raw Materials

  27. @brucel b • web comping

  28. @brucel

  29. @brucel Top four 1. Have a fundamental understanding of JavaScript

    “Of course you can’t do full-stack JavaScript development (or full-stack any web development for that matter), without learning JavaScript itself.” 2. Front-End framework 3. Bootstrap 4 4. HTML/CSS
  30. @brucel As for HTML, there’s not much to learn right

    away and you can kind of learn as you go, but before making your first templates, know the difference between in-line elements like <span> and how they differ from block ones like <div>. This will save you a huge amount of headache when fiddling with your CSS code.
  31. @brucel www.thecagecage.com

  32. @brucel

  33. @brucel

  34. @brucel HTML is declarative <button type="button">Click Me!</button>

  35. @brucel HTML is fault-tolerant <blink>OMG you’re having a seizure</blink>

  36. @brucel so is backwards compatible <video src=“video.mp4”> <p>Can’t play it.

    <a href=“video.mp4”>Download it</a>.</p> </video>
  37. @brucel

  38. @brucel Silly HTML3 <FIG SRC=“nicodamus.jpeg"> 
 <CAPTION>Ground dweller: <I>Nicodamus bicolor</I>

    builds silk snares</CAPTION> 
 <P>A small hairy spider light fleshy red in color with a brown abdomen.
 <CREDIT>J. A. L. Cooke/OSF</CREDIT> </FIG>
  39. @brucel Clever HTML3 <FIGURE> <IMG SRC=“nicodamus.jpeg"> 
 <FIGCAPTION>Ground dweller: <I>Nicodamus

    bicolor</I> builds silk snares</FIGCAPTION> 
 <P>A small hairy spider light fleshy red in color with a brown abdomen.
 <SMALL>J. A. L. Cooke/OSF</SMALL> </FIG>
  40. @brucel Clever me <picture> <source srcset=“stuart.webp” type=“image/webp”> <img src=“nicodamus.jpeg” alt=“...”>

    </picture>
  41. @brucel HTML is interoperable. <b><i>I’m badly nested</b></i>

  42. @brucel Ninja by Efe Palavan from the Noun Project

  43. @brucel CSS is fault tolerant button {color: black; background: white;

    background-image: linear-gradient (...); background-image: paint ( ... ); }
  44. @brucel JavaScript is NOT declarative In much the same way

    that the imperative mood in natural languages expresses commands, an imperative program consists of commands for the computer to perform. Imperative programming focuses on describing how a program operates. The term is often used in contrast to declarative programming, which focuses on what the program should accomplish without specifying how the program should achieve the result.
  45. @brucel JavaScript is NOT fault-tolerant

  46. @brucel Principle of Least Power The choice of language is

    a common design choice. The low power end of the scale is typically simpler to design, implement and use, but the high power end of the scale has all the attraction of being an open-ended hook into which anything can be placed: a door to uses bounded only by the imagination of the programmer. Sir Uncle Timbo https://www.w3.org/DesignIssues/Principles.html#PLP “
  47. @brucel

  48. None
  49. None
  50. https://kryogenix.org/code/browser/everyonehasjs.html

  51. None
  52. @brucel Oooh demo

  53. @brucel Wooooh code <input type=“checkbox”><span>blah blah blah</span> <label><input type=“checkbox”> blah

    blah blah</label>
  54. @brucel <button> <div class=“Btn”>Click me (if you can!)</div> • Remember

    to set ARIA role (in HTML or JS) • Remember to manage focusability • Remember to listen for the correct keypresses
  55. @brucel

  56. @brucel

  57. @brucel Screen reader users http://webaim.org/projects/screenreadersurvey5/ - used by kind permission

  58. @brucel • Leonie vid clip https://www.smashingmagazine.com/2019/02/accessibility-webinar/

  59. @brucel “Structured data” For many years we have been recommending

    the use of structured data on websites to enable a richer search experience. When you add markup to your content, you help search engines understand the different components of a page. When Google's systems understand your page more clearly, Google Search can surface content through the cool features discussed in this post, which can enhance the user experience and get you more traffic. https://webmasters.googleblog.com/2019/04/enriching-search-results-structured-data.html
  60. @brucel <article itemscope itemtype="http://schema.org/BlogPosting"> <header> <h2 itemprop="title" id="post-11210"><a href="/2019/reading- list-221/"

    rel="bookmark" title="Permanent Link to Reading List"> Reading List</a></h2> <time itemprop="dateCreated pubdate datePublished" datetime="2019-01-18">Friday 18 January 2019</time> </header> <p>SOME STUFF</p> <footer>Posted in <a href="/category/accessibility-web- standards/">accessibility web standards</a>, <a href="/category/ accessibility-web-standards/reading-list/">reading list</a> . <a class="post-edit-link" href="/wp-admin/post.php? post=11210&#038;action=edit">Edit</a>. <a href="/2019/reading- list-221/#respond">Leave a comment</a> </footer> </article>
  61. @brucel

  62. @brucel

  63. @brucel

  64. @brucel

  65. @brucel Accessibility is part of Usability “high conformance with web

    accessibility guidelines may provide benefits to users without disabilities.”

  66. @brucel Schmutza, Sondereggera and Sauera
 • Sixty-one participants without disabilities

    used one of three websites differing in levels of accessibility • A high level of web accessibility led to better performance (i.e., task completion time and task completion rate) than low or very low accessibility. • Likewise, high web accessibility improved user ratings (i.e., perceived usability, aesthetics, workload and trustworthiness) compared to low or very low web accessibility. Department of Psychology, University of Fribourg, Fribourg, Switzerland www.unifr.ch/psycho/assets/files/KogErg/SchmutzSondereggerSauer2016.pdf
  67. @brucel Sir Uncle Timbo: The web is for everyone and

    collectively we hold the power to change it. It won’t be easy. But if we dream a little and work a lot, we can get the web we want. https://webfoundation.org/2019/03/web-birthday-30/
  68. @brucel What can you do? • Learn the semantics of

    HTML. There are 125(ish) elements, that’s all! • Think about (but don’t stress about) accessibility • Use HTML (and CSS) wherever possible. • Make sites that work without JavaScript, then enhance with JS.
  69. @brucel https://twitter.com/goodwitch/status/1106231135443410944

  70. @brucel

  71. @brucel

  72. @brucel “Developer Experience” Bait-and-Switch We cannot continue to use as

    much JavaScript as is now “normal” and expect the web to flourish. To get this fixed, we need to confront the “developer experience” bait-and-switch. Tools that cost the poorest users to pay wealthy developers are bunk. Alex Russell https://infrequently.org/2018/09/the-developer-experience-bait-and-switch/ “
  73. Rise of The Smartphones

  74. None
  75. Smartphones ▪ overwhelmingly Android ▪ low cost, low spec ▪

    very little RAM, very limited storage ▪ dual SIM
  76. @brucel 500MB data: hours worked https://360.here.com/2015/06/03/offline-navigation-really-matters-500mb-data-costs-week-wages/

  77. @brucel How To Make Internet Affordable Even with more phones

    than ever before, the cost of Internet is a major obstacle. In Nigeria, the data needed to watch just 2 minutes of online video a day can cost more than sending a child to school for a month. https://webwewant.org/news/how-to-make-internet-affordable/ “
  78. @brucel The Baseline Costs of JavaScript Frameworks Your React application

    will never load faster than about 1.1 seconds on an average phone in India, no matter how much you optimize it. Your Angular app will always take at least 2.7 seconds to boot up. Ankur Sethi, Nov 2018 https://blog.uncommon.is/the-baseline-costs-of-javascript-frameworks-f768e2865d4a “
  79. ICT access by population Total 
 global population ~7.4 billion

    High-speed
 internet 1.1 billion Total 
 internet users 3.2 billion Mobile phones 5.2 billion Within mobile coverage 7 billion World Bank: Digital Dividends 2016
  80. The world’s offline population Total 
 internet users 3.2 billion

    High-speed
 internet 1.1 billion India 1.063 billion Countries outside of the top 20 China 755 million Indonesia 213 million Pakistan 165 million Bangladesh 148 million Nigeria 111 million Brazil 98 million Ethiopia 95 million Mexico 70 million Congo, Dem. Rep. 68 million Philippines 63 million Russian Federation 55 million Iran, Islamic Rep. 54 million Myanmar 53 million Vietnam 52 million United States 51 million Tanzania 49 million Thailand 48 million Egypt, Arab Rep. 42 million Turkey 41 million
  81. None
  82. None
  83. None
  84. Making the internet universally accessible and affordable should be a

    global priority. “ World Bank
  85. Developing countries are home to 94% of the global offline

    population. “ - State of Connectivity 2014, internet.org
  86. Courtesy of Hesperian

  87. None
  88. None
  89. If you want to liberate a country, give them the

    internet. “ - Wael Ghonim, Egyptian internet activist
  90. None
  91. an increase in Internet maturity similar to the one experienced

    in mature countries over the past 5 years creates an increase in real GDP per capita of $500 on average during this period. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
  92. It took the Industrial Revolution of the 19th century 50

    years to produce the same result. “ Internet matters - The Net’s sweeping impact on growth, jobs, and prosperity (McKinsey Global Institute)
  93. None
  94. None
  95. None
  96. None
  97. @brucel • [image of a crowd of people - terrible

    stock photo?]
  98. @brucel

  99. @brucel

  100. @brucel

  101. @brucel

  102. @brucel

  103. @brucel

  104. @brucel

  105. None
  106. SNOGZ! brucelawson.co.uk @brucel * Other Bruce Lawsons are available. **

    known to cause nausea in some jurisdictions.