background preloader

  Tools for Web Developers  

  Tools for Web Developers  
Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more. You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. You can also use Lighthouse CI to prevent regressions on your sites. Run Lighthouse In Chrome DevTools bug_report File an issue Check out the video below from Google I/O 2019 to learn more about how to use and contribute to Lighthouse. Get started Choose the Lighthouse workflow that suits you best: In Chrome DevTools. Run Lighthouse in Chrome DevTools Lighthouse powers the Audits panel of Chrome DevTools. Install and run the Node command line tool Add ?

https://developers.google.com/web/tools/lighthouse

Related:  OUTILS UTILESPERFORMANCESPWA - Progressive Web App & SW - Service WorkersPerformances

Grid Designer 2 If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory. If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton. For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book. On the Columns tab, you can start your design in two ways:

Service Worker Security FAQ - The Chromium Projects Service Workers seem extremely risky! Why are they OK? Service Workers (SW) are indeed powerful. They support compelling web applications that can run offline or with intermittent connectivity. You can edit documents, browse and buy from catalogs, send social media messages, write email, etc. even in the subway!

What's New In DevTools (Chrome 59)   Welcome to another installment of the DevTools release notes. Watch the video below or read on to see what's new in Chrome DevTools in Chrome 59! CSS and JS code coverage. Find unused CSS and JS with the new Coverage tab.Full-page screenshots. Take a screenshot of the entire page, from the top of the viewport to the bottom.Block requests. The developer tools you need to know right now When it comes to web development, it is pretty easy to assume that JavaScript is top dog. But, obviously it's not that simple. Imagine turning up for an interview and saying 'I'm great at JavaScript'.

Why I Love Pingdom Tools – Writings of a Page Load Speed Geek Pingdom tools is an incredibly handy web site that provides what would normally be an entire suite of website speed testing tools in a simple, elegant, easy-to-use package. Loading speed is an inescapable fact of life for web designers. When a user goes to a web page, they expect to access it quickly, and if they have to wait for even a short amount of time they’re probably going to move on. For this reason, no matter how pleased I might be by the cool new web site I just made, I make sure to take advantage of Pingdom to make sure that my audience will stick around long enough to check it out.

  Google Developers The mobile web is too slow. Over the years the web has evolved from a document-centric platform to a first-class application platform. Thanks to advancements in the platform itself (such as Service Workers) and in the tools and techniques we use to build apps, users can do virtually anything on the web they can do in a native app. At the same time, the bulk of our computing has moved from powerful desktop machines with fast, reliable network connections to relatively underpowered mobile devices with connections that are often slow, flaky or both. This is especially true in parts of the world where the next billion users are coming online. 6 Essential Open Source Tools for Web Designers The web runs on open source software. Most of it is in the back end, with most of the world’s servers running on some form of Unix or Linux. Those servers run hundreds, if not thousands, of open source utilities, script interpreters, and so on. Once in a while, though, the open source stuff gets all the way to the browser, where the user can see it. Okay, that happens a lot.

What is Minification? – Writings of a Page Load Speed Geek What is Minification? Minification, which is also known as minimisation or minimization, removes unnecessary characters from source code in computer programming languages such as JavaScript. This removal does not alter the functionality of the code. Background Sync with Service Workers Service workers have been having a moment. In March 2018, iOS Safari began including service workers -- so all major browsers at this point support offline options. And this is more important than ever -- 20% of adults in the United States are without Internet at home, leaving these individuals relying solely on a cellphone to access most information. This can include something as simple as checking a bank balance or something as tedious as searching for a job, or even researching illnesses. Offline-supported applications are a necessity, and including a service worker is a great start.

The Cost Of JavaScript In 2018 – Addy Osmani Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked like it had loaded only to tap on a link or tried to scroll and nothing happens? Byte-for-byte, JavaScript is still the most expensive resource we send to mobile phones, because it can delay interactivity in large ways. Today we’ll cover some strategies you can use to deliver JavaScript efficiently while still giving users a valuable experience. imageloadfont Confirmation code generation for preventing automated registrations on a website. Function arguments are: $code - the code that you shall random generate $location - relative location of the image that shall be generated $fonts_dir - relative location for the GDF fonts directory This function will create an image with the code given by you and will save it in the directory specified with the name formed by MD5 hash of the code.

Related: