In this episode, Tyler demonstrates how to create and use Safari website shortcuts or "Web apps" on macOS.

This feature allows you to create shortcuts to websites on your dock that when opened, behave as if the website was its own app. This may be useful for VoiceOver users, as web apps are included when pressing Command-Tab to cycle through open apps, making them easy to switch to and from. In addition, these web apps can be mapped to commands in Keyboard Commander so they can be accessed with a single keystroke.

To create a web app, go to a website in Safari and choose File > Add to Dock. Change the name and icon of the web app if you wish, and click Add. It can then be accessed via the Dock, or in the Applications folder in your Home folder, accessed by choosing Go > Home in Finder, or pressing Command-Shift-H. To map the web app to a command in Keyboard Commander, open Voiceover Utility > Commanders > Keyboard, click Add, type the key that you want to open the app when pressed, choose "Custom commands > Open application" from the menu, and navigate to and select the web app in the Open dialog.

When GitHub Copilot launched and started autocompleting lines of code — and, later, entire code snippets — the question many people were asking was: How long until we can just describe an app in natural language and Copilot will build it for us? We’ve seen quite a few experiments in this arena in recent months, […]

© 2024 TechCrunch. All rights reserved. For personal use only.

Naga Lalitha has become visible as someone who is changing the face of technology for industry verticals like supply chain and manufacturing.

How do you point out things in a UI? Are Arc Boosts the end of the web? What do you think of VR and AR / Vision Pro and Meta Quest? And what do you do when the sticky header goes missing?

There are many web apps for designer and developers out there, but getting by free and good ones is not that easy. That is why we are sharing 7 Web Apps For Web Designers To Simplify Their Work Life. Previously, we have already covered 9 Tools To...

The post 7 Web Apps For Web Designers To Simplify Their Work Life appeared first on SmashingApps.com.

In his The Case for Progressive Web Apps presentation at An Event Apart in Chicago, Jason Grigsby walked through the process of building Progressive Web Apps for your Web experiences and how to go about it. Here's my notes from his talk:

• Progressive Web Apps (PWAs) are getting a lot of attention and positive stories about their impact are coming out. PWA Stats tracks many of these case studies. These sorts of examples are getting noticed by CEOs who demand teams build PWAs today.
• A PWA is a set of technologies designed to make faster, more capable Web sites. They load fast, are available online, are secure, can be accessed from your home screen, have push notifications, and more.
• But how can we define Progressive Web Apps? PWAs are Web sites enhanced by three things: https, service worker, and a manifest file.
• HTTPS is increasingly required for browsers and APIs. Eventually Chrome will highlight sites that are not on https as "insecure".
• Service Workers allow Web sites to declare how network requests and the cache are handled. This ability to cache things allows us to build sites that are much faster. With service workers we can deliver near instant and offline experiences.
• A Web manifest is a JSON file that delivers some attributes about a Web site. Browsers use these files to make decisions on what to do with your site (like add to home page).
• Are PWAs any different than well-built Web sites? Not really, but the term helps get people excited and build toward best practices on the Web.
• PWAs are often trojan horses for performance. They help enforce fast experiences.

Feels Like a Native App

• Does your organization have a Web site? Do you make money off your Web site? If so, you probably need a Progressive Web Site.
• Not every customer will have your native app installed. A better Web experience will help you reach people who don't. For many people this will be their first experience with your company, so you should make it as good as possible.
• Getting people to install and keep using native apps is difficult. App stores can also change their policies and interfaces which could negatively impact your native app.
• The Web can do much more than we think, the Web has APIs to access location, do fast payments using fingerprint identification, push notifications, and more.
• What should we use to design PWAs? Native app styles or Web styles? How much does your design match the platform? You can set up PWAs to use different system fonts for iOS and Android, should you? For now, we should define our own design and be consistent across different OSs.
• What impact does going "chrome-less" have on our PWAs? You loose back buttons, menu controls, system controls. Browsers provide us with a lot of useful features and adding them back is difficult. Especially navigation via the back button is complex. So in most cases, you should avoid going full screen.
• While not every person will add your PWA to their home screen, every person will "install" your PWA via the service worker.
• An app shell model allows you put your common UI (header, footer, nav, etc.) into the app cache. This makes the first loading experience feel a lot faster. Should you app shell or not? If you have architected as a single page app, this is possible but otherwise might not be worth the effort.
• Animating transitions can help with way-finding and polish on the Web. This gives Web sites even more personality.

Installation and Discovery

• Using a Web manifest file, allows you specify a number of declarations for your app. In addition to name, icon, and even theme colors.
• Once you have a PWA built and a manifest file, browsers will being prompting people to install your Web site. Some Browsers have subtle "add" actions. Other use more explicit banner prompts. "Add to home screen" banners are only displayed when they make sense (certain level of use).
• Developers can request these banners to come up when appropriate. You'll want to trigger these where people are mostly likely to install. (like checkout)
• Microsoft is putting (explicitly and implicitly) PWAs within their app store. Search results may also start highlighting PWAs.
• You can use Trusted Web Activity or PhoneGap to wrap native shells around your PWA to put them into Android and iOS app stores.

Offline Mode

• Your Web site would benefit from offline support. Service Workers enable you to cache assets on your device to load PWAs quickly and to decide what should be available offline.
• You can develop offline pages and/or cache pages people viewed before.
• If you do cache pages, make it clear what data hasn't been updated because it is not available offline.
• You can give people control over what gets cached and what doesn't. So they can decide what they want available for offline viewing.
• If you enable offline interactions, be explicit what interactivity is available and what isn't.

Push Notifications

• Push notifications can help you increase engagement. You can send notifications via a Web browser using PWAs.
• Personal push notifications work best but are difficult to do right. Generic notifications won't be as effective.
• Don't immediately ask people for push notification permissions. Find the right time and place to ask people to turn them on. Make sure you give people control, if you'd don't they can kill them using browser controls.
• In the next version of Chrome, Google will make push notification dialogs blocking (can't be dismissed) so people have to decide if they want notifications on or off. This also requires you to ask for permissions at the right time.

Beyond Progressive Web Apps

• Auto-login with credential management APIs allows you to sign into a site using stored credentials. This streamlines the login process.
• Apple Pay on the Web converged with the Web Payment API so there's one way to use stored payment info on the Web.
• These next gen capabilities are not part of PWAs but make sense within PWAs.

How to Implement PWAs

• Building PWAs is a progressive process, it can be a series of incremental updates that all make sense on their own. As a result, you can have an iterative roadmap.
• Benchmark and measure your improvements so you can use that data to get buy-in for further projects.
• Assess your current Web site's technology. If things aren't reasonably fast to begin with, you need to address that first. If your site is not usable on mobile, start there first.
• Begin by building a baseline PWA (manifest, https, etc.) and then add front-end additions and larger initiatives like payment request and credential api later.
• Every step on the path toward a PWAS make sense on their own. You should encrypt your Web sites. You should make your Web site fast. These are all just steps along the way.

Tweet this episode

JSJ BONUS: Web Apps on Linux with Jeremy Likness and Michael Crump

In this episode Aimee Knight and Charles Max Wood discuss Microsoft's Web Apps on Linux offering with Jeremy Likness and Michael Crump.

[00:37] Michael Crump Introduction

Michael is on the developer experience team for Azure.

[00:52] Jeremy Likness Introduction

Jeremy is on the cloud developer advocacy team. Their mission is to remove friction and support developers and work with teams to build a positive experience.

The NodeJS team is headed up by John Papa. They have teams around the world and involved in many open source communities.

They're focused on building documentation and creating great experiences

[02:54] What is it about Azure that people should be getting excited about?

Azure is a huge platform. It can be overwhelming. They're trying to help you start with your problem and then see the solution as it exists on Azure.

Azure is growing to embrace the needs of developers as they solve these problems.

The experience is intended to be open and easy to use for any developer in any language on any platform. It allows you to work in whatever environment you want.

Standing up applications in production is tough. Azure provides services and facilities (and interfaces) that make it easy to manage infrastructure.

You don't have to be an operations expert.

Chuck mentions this messaging as he heard it at Microsoft Connect() last year.

It's not about bringing you to .NET. It's about making it easy where you're at.

Aimee adds that as a new-ish person in the community and Azure excites her because the portal and tutorials are easy to follow for many new programmers.

A lot of these features are available across command lines, tools, and much more.

The documentation is great. See our interview with Dan Fernandez on the Microsoft Docs.

[12:04] Web Apps on Linux

Web application as a service offering from Microsoft. I don't need to worry about the platform, just what's different about my application.

Web Apps has traditionally been on Windows. Web Apps on Linux is in preview.

You can choose the size of your infrastructure. You only get billed for what you use and can scale up.

Setting up multiple servers, managing synchronization and load balancing is a pain. Web Apps gives you a clean interface that makes this management easy.

You can also scale across multiple datacenters around the world.

[15:06] Why Linux? What's hard about Windows?

Node was originally created on Linux and many tools run nicely on Linux. It was later ported to Windows.

The toolchains and IDE's and build processes is in an ecosystem that is targeted more toward Linux than Windows.

This allows people to work in an environment that operates how they expect instead of trying to map to an underlying Windows kernel.

Aimee gives the example of trying to set up ImageMagick on Windows.

Web Apps on Linux also allows you to build integrations with your tools that let you build, test, and deploy your application automatically.

[19:12] Supported Runtimes

Web Apps on Linux supports Node, PHP, Ruby, and .NET Core.

You can run a docker container with Node up to 6.x. If you want Node 7.x and 8.x you can create your own Docker container.

Web Apps on Linux is build on Docker.

The containers also have SSH, so developers can log into the docker container and troubleshoot problems on the container.

If you can build a container, you can also run it on this service.

At certain levels, there's automatic scaling.

[22:06] Consistency between containers? Shared ownership of state or assets

It depends on how you build your app. The Docker containers have a shared storage where all the containers have access to the same data and state.

There's a system called kudu that makes this really simple.

You can also pull logs across all systems.

You can also use SSH in the browser

[25:23] What's painful about Linux and containers?

How is the application built and how does it manage state so that you can isolate issues.

If you have 20 containers, can you connect to the right one.

It's up to you to manage correlation between containers so you can find the information you need.

Knowing your traffic and understanding what to do to prepare for it with scaling and automation is sometimes more art than science.

[28:28] How should you manage state?

A lot of these systems lend themselves to running stateless, but you don't want to run mongodb on each container versus running one mongodb instance that everything attaches. You want a common place to store data for the entire app for shared state.

[30:34] CosmosDB (was DocumentDB)

It's an API equivalent to MongoDB. It's a database as a service and you can connect your containers to the CosmosDB in Azure using your portal to make it super easy.

You may need to open up some firewall rules, but it should be pretty straightforward.

[34:14] Third Party Logging Management Apps

Azure has a service that provides metrics (Application Insights) and a logging service. Many other companies use elasticsearch based solutions that solve some of these problems as well.

[36:06] How do people use Web Apps on Linux?

Companies building new applications many times want to run without managing any infrastructure. So, they use Azure Functions, and other services on Azure.

Lift and shift: Take a virtual machine and change it into a web app container that they can run in the cloud. They also move from SQL Server on a server to SQL Server on the cloud. Moving from hosted MongoDB to CosmosDB.

You can also use any images on DockerHub.

[40:06] Continuous Integration and Continuous Deployment

Whether you're using a private registry or cloud registry. When you publish a new image, it'll use a webhook to pull the custom image and deploy it. Or to run it through Continuous Integration and then deploy it without any human interaction.

Chuck mentions the case when you haven't logged into a server for a while, there's a huge backlog of system updates. Updating your container definitions makes upkeep automatic.

[42:02] Process files and workers with PM2 format

You can set up instances to run across cores with the PM2 definitions. You can also make it run various types of workers on different containers.

Why did you use PM2? What other uses are there for this kind of setup?

You can tell it which processes to start up on boot. You can also have it restart processes when a file is changed, for example, with a config file you can have it restart the processes that run off that config file.

[45:38] How to get started

Getting started with Node

docs.microsoft.com

Trial account with a few hundred dollars in Azure credit.

Michael's Links

• michaelcrump.net
• @mbcrump
• github.com/mbcrump

Jeremy's Links

• bit.ly/coderblog
• @jeremylikness
• github/jeremylikness

Picks

Aimee

• Having a little bit of mindfulness while waiting on code and tests to run.

Joe

• Ozark on Netflix
• Star Wars: Rogue One

Chuck

• Travelers on Netflix

Jeremy

• Ozark filming in Woodstock, GA
• Autonomous Smart Desk
• LED light strips

Michael

• Conference Call Bingo
• Life (Movie)
• Get Out (Movie)

Sponsors

• Sentry use the code “devchat” for $100 credit
• Triplebyte
• Clubhouse
• CacheFly

Panel

• Charles Max Wood

Joined by special guest: Aaron Gustafson

Episode Summary 

This episode of JavaScript Jabber comes to you live from Microsoft Ignite. Charles Max Wood talks to Aaron Gustafson who has been a Web Developer for more than 20 years and is also the Editor in Chief at “A List Apart”. Aaron gives a brief background on his work in the web community, explains to listeners how web standardization has evolved over time, where Progressive Web Apps (PWAs) come from, where and how can they be installed, differences between them and regular websites and their advantages. They then delve into more technical details about service workers, factors affecting the boot up time of JavaScript apps, best practices and features that are available with PWAs. 

Aaron mentions some resources people can use to learn about PWAs, talks about how every website can benefit from being a PWA, new features being introduced and the PWA vs Electron comparison. In the end, they also talk about life in general, that understanding what people have gone through and empathizing with them is important, as well as not making judgements based on people’s background, gender, race, health issues and so on.

Links

• Creating & Enhancing Netscape Web Pages
• A List Apart
• A Progressive Roadmap for your Progressive Web App
• Windows Dev Center - Progressive Web Apps
• MDN web docs
• PWA Stats
• PWA Stats Twitter
• Aaron’s website
• Aaron’s Twitter
• https://www.facebook.com/javascriptjabber/
• https://twitter.com/JSJabber

Picks

Aaron Gustafson:

• Homegoing
• Zeitoun

Charles Max Wood:

• Armada 

Maximiliano Firtman is a mobile web developer from Buenos Ares, Argentina. He has been a developer for 24 years and his most recent focus has been on progressive web apps, or PWAs. Steve and Max reflect on the technologies they were using when they first got started in web development and talk about their experience with mobile development. One area that Max emphasized was bringing the web into the mobile space. They discuss the progression of web access on mobile and some of the available tools. Max notes that responsible design has a very high cost in web performance for mobile devices, which requires unique approaches. They discuss some of the issues with latency in mobile, even on 4G. The solution to this latency is PWAs.

Progressive web apps are a set of best practices to create web apps that are installable. They can work offline at high speeds on several operating systems. Once installed, it looks like any other app on the system. Max delves into more details on how it works. He talks about how the resources for your application are managed. He assures listeners that it’s just a website that’s using a new API, they’re not changing the way the web works, and that when that API is there, the app can be installed. It will also generally use your default browser. Steve and Max discuss how local data is stored with PWAs. To write PWAs, you can use Angular, React, JavaScript, or Vue, and it’s a pretty transparent process. Max talks about some common tools used for local storage and some of the PWAs he’s worked on in the past. The benefit of using PWAs is that they generally run faster than regular web apps. To get started, Max advises listeners to install one and start exploring.

Panelists

• Steve Edwards

Guest

• Maximiliano Firtman

Sponsors

• G2i

____________________________

"The MaxCoders Guide to Finding Your Dream Developer Job" by Charles Max Wood is now available on Amazon. Get Your Copy Today!

____________________________________________________________

Links

• Progressive Web Apps

• Appsco.pe

• IndexedDB

• Max's site

Picks

Steve Edwards:

• The Club

Maximiliano Firtman:

• Llama

• Follow Max on Twitter