The World Wide Web is 30 years old

#382 — March 13, 2019 Read on the Web Frontend Focus The Web is 30 Years Old! Developers Revive First Web Browser at Week-Long Hackathon — A team of developers has visited CERN to recreate the initial ‘WorldWideWeb’ browser. We're celebrating 30 years of the Web with a special 'The Web at 30' section (below). CERN What's New in Chrome 73 for Developers — Adds support for Mac PWAs, signed HTTP exchanges, constructable style sheets, and more. Pete LePage (Google Developers) New Courses: 📡 API Design in Node & 👨‍🍳 GraphQL — Design and build APIs in Node.js from the ground up. Use Express to build an API and handle REST verb methods to create, read, update and delete resources from MongoDB. Then, in the next course, you'll learn how GraphQL empowers more flexibility into your APIs. Frontend Masters sponsor Designing An Aspect Ratio Unit For CSS — What problems will the new aspect ratio unit solve? A look at the design of a new CSS feature. Rachel Andrew Microsoft Proves The Critics Right: We’re Heading Toward a Chrome-Only Web — “if there’s not much point in taking the time and effort to support browsers that have a small audience .. this creates a negative feedback loop for those browsers, discouraging their use and pushing developers toward a world in which Chrome is the only browser that developers think about.” Peter Bright Navigate Chrome DevTools With Assistive Technology — A guide on navigating Chrome DevTools using assistive technology like screen readers. Google Developers The Third Party Web of Excessive JavaScript Execution — Research shows that across the top 1 million Web sites, just 800 origins account for 65% of all script execution time. Which 3rd party scripts are slowing the Web? Patrick Hulce    🌐 The Web at 30 30 Years Ago The World Changed Forever — In March 1989, while at CERN, Sir Tim Berners-Lee wrote “Information Management: A Proposal” outlining the World Wide Web. Coralie Mercier (W3C) ▶  30th Anniversary of the World Wide Web — A series of talks and discussions at CERN in celebration of the web’s 30th anniversary. CERN Tim Berners-Lee On 30 Years of The Web: 'If We Dream A Little, We Can Get The Web We Want' — What started out as an idea for a way scientists could share information went on to change the world. Three decades later, its founder reflects on his creation. Alex Hern (The Guardian) Web in 'Downward Plunge', Says Its Creator — Thirty years after he invented it, Sir Tim Berners-Lee says the web is not what it should be. Rory Cellan-Jones (BBC) 💻 Jobs Front End Developer✌️ in Beautiful Norway 🎉 — Passion for React and GraphQL? Join our fast growing GraphQL e-commerce service Crystallize. Crystallize Find A Job Through Vettery — Vettery specializes in dev roles and is completely free for job seekers. Vettery 📘 Articles, Tutorials & Opinion Jumps: The New Steps() in Web Animation — A look at using step timing functions (part of the easing spec) in CSS animation. You’ll need to view the demos in Firefox 65+. Dan Wilson Why Can't I Set The Font Size of A Visited Link? — You can change the font color on visited links, but not the font size — here’s why (it’s a security consideration). James Fisher 🤘 Search, Seek, and Destroy Vue.js Errors with Honeybadger — Vue apps on fire? Receive alerts of exceptions in real-time, helping to identify the root cause so you can fix them—fast. Honeybadger sponsor Building a Plasma Canvas Effect with Rust and WebAssembly — Yes, the actual effect is coded in Rust, but JavaScript is used to bring everything together and may be of interest to you if you want to bring other languages into your frontend development via WebAssembly. Jeremy Likness ▶  Eight Little Videos About The Firefox Shape Path Editor — A collection of brief videos demonstrating Firefox Shape Path editor features. Mikael Ainalem Tools and Modern Workflow for Frontend Developers — What build tools (like npm scripts, Grunt, gulp and webpack) do and how to use them. Ogundipe Samuel IMAGECON: The Ultimate Event For Devs on Rich Media. Learn More Cloudinary sponsor How I Added Dark Mode to My Website Flavio Copes 🔧 Code and Tools AV1: AVIF (AV1 Still Image Format) Polyfill for the Browser — AVIF is a image format whose spec has just reached version 1.0. Kagami Hiiragi VectorLogoZone: Well Formatted SVG Logos, Perfect for Your README or Sites — Almost 3000 logos covering all the major brands and technologies you can think of. Even allows hotlinking, if you choose. Andrew and Noah Dare to Stream: Try Bitmovin’s Encoding, Player, & Analytics Solutions for Free Bitmovin sponsor REAVIZ: A D3.js-based React Data Visualization Library — There’s a Storybook-based demo showing off the various types of visualization including bar charts, hives, pie charts, scatter plots, sparklines and more. JASK Open Source    🗓 Upcoming Events FrontCon, April 3–5 — Riga, Latvia — A two-day conference focused on frontend concepts and technologies. SmashingConf, April 16–17 — San Francisco, CA — A friendly, inclusive event which is focused on real-world problems and solutions. IMAGECON, May 1–2 – San Francisco, CA — A two-day conference with a dozen workshops and seven speakers focused on all things images on the web. CityJS Conference, May 3 — London, UK — Meet local and international speakers and share your experiences with modern Javascript development. Frontend United, May 16-18 — Utrecht, Netherlands — A yearly, non-profit, developer-first, community-focused conference. CSSCamp 2019, July 17 — Barcelona, Catalunya — A one-day, one-track conference for web designers and developers.

by via Frontend Focus

YouTube Trends That Digital Marketers Should Pay Attention To

The key to marketing on the internet is understanding the various trends that are taking place on any platform that you might be interested in utilizing for the purpose of gaining access to as many potential consumers as possible. The important thing to note here is that a lot of things that happen...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Zia Zaidi via Digital Information World

Create an Automated Scoreboard that Senses Your Score with a Raspberry Pi

On an impulse just before Christmas, I bought myself an NBA "over-the-door" mini basketball hoop. I wasn't sure what I'd do with it, but having a basketball hoop for my office seemed like a good move. In the end I decided to experiment and bring some connectivity to it by hooking it up to a Raspberry Pi to give it a scoreboard display. Here's how that went, with step-by-step instructions if you'd like to try to adapt and improve upon it!

This tutorial isn't intended to be used as a step-by-step "do exactly as I did" style guide — my hope is that you'll take this concept and use it for all sorts of other ideas. Add a virtual scoreboard that counts how often people come into your office. Or go with a different sport (maybe a mini soccer goal tracker?). Or use an entirely different sensor but track hits on it visually with a Raspberry Pi! There are so many potential applications of this technique. Try stuff and let me know how you go!

What You'll Need

In order to be able to follow along and make something similar, here's a list of the parts I used (or their equivalent for the things I had around my lab already):

• Raspberry Pi 3 B+ — I used an older version of this from 2015, if you're going to buy one, get a newer version like this!
• A MicroSD card with NOOBS — if you are looking to install this yourself and have an SD card ready to go Raspberry Pi foundation have a guide on how to do so here.
• Spalding NBA Slam Jam Over-The-Door Mini Basketball Hoop — This is the mini basketball hoop I used. You could use a different one — especially if its net works better!
• Raspberry Pi 3.3190G 7" Touchscreen Display — This is my favourite display for the Raspberry Pi, it is a touchscreen, so you can interact with the UI without needing to connect up a mouse.
• RS Raspberry Pi 7-Inch LCD Touch Screen Case, Black — To make the display look a bit nicer when all together with the Pi, I have my Pi in this black case.
• HC-SR04 Ultrasonic Distance Measuring Sensor Module — I had a spare cheap clone HC-SR04 sensor around, but I'd recommend buying a good quality one. My one has occasional odd readings and is a bit temperamental.

One thing to note — if you don't have a 7 inch display for your Pi, you could display the score on a nearby computer monitor too. Any device on your local network with a web browser and a screen would work!

The Code

Want to skip to downloading the code? It's available on GitHub here.

What I put together

I hung my new basketball hoop up on a door with an ultrasonic sensor attached to the hoop to track when a ball goes into the hoop. Underneath is a Raspberry Pi powered scoreboard — I'd actually recommend finding longer cables so you can connect it outside of basketball falling range.

[caption id="attachment_171361" align="aligncenter" width="1024"] Me testing out my connected scoreboard — with a customised Suns themed interface![/caption]

I'll go over why everything is as it is below — along with some suggestions for those who might want to improve upon this base!

Languages we'll be using

• JavaScript - In order to follow along, you'll need a knowledge of the basics, but we won't have lines upon lines of code, things are actually pretty simple in the JS side of things.
• Node.js - A basic knowledge of how to run npm and Node is needed to run our scoreboard server.

Setting up our Raspberry Pi

If you are completely new to the Raspberry Pi and haven't set anything up yet, never fear! There are many guides out there for setting things up and it's nice and straightforward. The Raspberry Pi foundation have a step by step guide for installing the Raspbian operating system using the NOOBS operating system manager. You'll want to make sure the operating system is running before you get onto any of the other steps.

Touchscreen setup

I put together my connected scoreboard using a Raspberry Pi 3 with touchscreen. My touchscreen and case were already put together and screwed down tight as I've used this Pi 3 before for other projects, however if you are starting from scratch — it isn't too hard to connect up. Newer shipments (like mine) actually have a bunch of it already assembled, with the adapter board already screwed onto the LCD screen, if that's the case, half the steps are already complete! Instructions on how to assemble the screen are available online:

• Official instructions — these are the instructions which come with the screen in case you lose them!
• The Pi Hut have their own tutorial — they explain the details of the process too.
• ZDNet's look at the touch display with case — they've got a good amount of detail and tips for setting up the screen and case to use in various situations.

Case setup

When it comes to putting the case around the LCD screen and Raspberry Pi, that process is also quite easy with the case I have. I already had mine together, however the general steps for this are:

• Make sure you've already got your microUSB card inside the Raspberry Pi and are happy with how it's running! Annoyingly with a lot of cases, you can't get the card out once the case is in place. My case linked above is one of those... so make sure the card is all good before you lose access to it!
• Place the Pi with screen into place inside the case
• Arrange the ribbon cables and cables coming from the GPIO so they aren't in the way
• Make sure the holes for your USB ports and such are on the correct side of the bulkier part of the case and line up nicely.
• Once everything is lined up nicely, screw in the four screws to put it all together!
• Turn it on! If you find that the screen comes up upside down, don't worry, it's a side effect of the case manufacturers lining up the power to come out of the top. When I mounted my scoreboard though, I mounted it with the power coming out of the bottom, so this wasn't an issue for me. If it is an issue for you:
  • Run sudo nano /boot/config.txt to open the config for the Pi
  • Then add lcd_rotate=2 to the end, this will rotate the screen around.
  • Press Ctrl X and the Ctrl Y to save your changes.
  • Restart your Pi and when it loads back up it should be the right way around!

Running Node.js on our Raspberry Pi

Conveniently, Raspbian has Node installed by default! However, it is a rather old version of Node. You can check which version is installed on your Pi by opening up the Terminal and typing in:

node -v

I've got version 8.15.0 installed on my Pi. You can upgrade by running the following commands:


sudo su -
apt-get remove nodered -y
apt-get remove nodejs nodejs-legacy -y
apt-get remove npm -y
curl -sL https://deb.nodesource.com/setup_5.x | sudo bash -
apt-get install nodejs -y


After running all of those, if you type in that version command again, you should see a better version:

node -v

You can also check npm is installed correctly by running:

npm -v

With node running on our device, we're ready to get a scoreboard Node server running!

The post Create an Automated Scoreboard that Senses Your Score with a Raspberry Pi appeared first on SitePoint.

by Patrick Catanzariti via SitePoint

YouTube Stories Are Getting Augmented-Reality Masks

One of the biggest trends among social media platforms these days involves the coveted Stories feature that Snapchat came up with. Pretty much any platform out there that has a social element to it is adding some kind of stories feature into the mix, but the problem with this is that the market is...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Zia Zaidi via Digital Information World

Understanding Twitter's Timeline Algorithm To Make Your Brand Stand Out In 2019 [infographic]

Most of the marketers struggle to take advantage of Twitter when it comes to promoting their brands in the social media world. The platform has always been considered unique to make voices heard online and with a limit of 280 characters (started with 140), it provides you the unique opportunity to...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Web Desk via Digital Information World

CMR Survey reveals majority of smartphone buyers opt for a device with a good camera

According to the Cyber Media Research (CMR), eighty-nine percent of smartphone buyers prefer a phone with a good camera. Additionally, 87% give priority to battery life, 79% to RAM, and 72% to the internal memory of a new device. The survey also observed that buyers prefer experimentation to...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Saima Salim via Digital Information World

Twitter Launches 'Twttr' – a Prototype App With Various New Features

In January at CES, Twitter announced the launch of its prototype application, called “twttr”, named on the company’s original name. The application has now been finally rolled out to the first group of testers. This would let the social media giant try out new experiments without bringing many...

[ This is a content summary only. Visit our website https://ift.tt/1b4YgHQ for full links, other content, and more! ]

by Aqsa Rasool via Digital Information World