A Linux virtual machine (VM) can be created using the Azure portal. This guide will show you how to use the Azure portal to deploy a Linux virtual machine using Ubuntu Server 22.04 LTS as the operating system (OS) image. A connection will be established to the VM using Secure Shell (SSH) with a public key and the NGINX webserver will also be installed.

Sign in to the Azure portal
Sign in to the Azure portal

Creating a Virtual machine

• Select “+ Create a resource” from the Azure homepage.

• Click on the Virtual machine option

• In the Basics tab, under the Project details, select your Azure subscription and create a Resource Group

• 

• Under the Instance details, enter the virtual machine name, the region and select the availability options and security type as well as the image (Ubuntu server 22.04 LTS- x64 Gen2).
  Next select the VM size to support the workload that you want run.
  Note that the size chosen then determines such factors as processing power, memory and storage capacity.

• Under the Administrator account, select SSH public key

• Enter a username in the Username field. Leave the SSH public key source ** to its default and enter a name for the **Key pair name.

• Next is the Inbound port rules.” Select **Allow selected ports and choose the selected inbound ports which are ** _ TTP (80) and SSH (22)_** from the drop-down.

• Leave the remaining default values and select Review + create botton at the bottom of the page.

On the Create a virtual machine page, a summary of all the details of the VM to be created is displayed. Go ahead and click Create when you are ready to provision the VM.

• A Generate new key pair window will open, select Download private key and create resource _.
  A key will be downloaded as _(the name of the key with a .pem extension) . myKey.pem

• Ensure that you know where the key file is downloaded as you will need the path of the file.

• Wait for the deployment to complete then select Go to resource.

Connecting to the Virtual Machine

• To create an SSH connection with the VM, from a Windows machine, open a PowerShell prompt.

• Copy the path to where you have the .pem file downloaded and use the public IP address generated by the VM.

ssh -i ~/Downloads/myKey.pem azureuser@52.233.89.56

 Tip

The SSH key you created can be used the next time you
create a VM in Azure. Just select the Use a key 
stored in Azure for SSH public key source the next 
time you create a VM. You already have the private 
key on your computer, so you won't need to download 
anything.

Installing a Web server

To see what the VM is doing, install the NGINX webserver from the SSH session and then update the package sources alongside the latest NGINX package.

• Use the Linux commands below:

sudo apt-get -y update
sudo apt-get -y install nginx

• To view the default NGINX welcome page, type the public address of the VM as the web address in a browser of your choice.

Cleaning up resources

Delete resources
When no longer needed, you can delete the resource group, virtual machine, and all related resources.

• On the Overview page for the VM, select the Resource group link.

• At the top of the page for the resource group, select Delete resource group.

• A page will open warning you that you are about to delete resources. Type the name of the resource group and select Delete to finish deleting the resources and the resource group.

The post How to create and connect to a Linux VM using a Public Key. appeared first on ProdSens.live.

Image by freepik

This year I started a new series on LinkedIn – “Advanced Links for Frontend”. Each issue has 10 links to outstanding posts / articles. This bundle contains the links from the last 5 issues (issue 26 to issue 30).

Unbelievable – there are now 300 links (!) collected already in this year. Just superb!

I hope you enjoy this collection. Let me know in the comments which of these articles is your favorite (and why).

Issue 26

1. Creating a Planning Poker Demo app (https://dev.to/mattlewandowski93/creating-a-planning-poker-demo-app-394h) by @mattlewandowski93
   I love Kollabe, really great app that does its job.

2. How to write a code formatter (https://yorickpeterse.com/articles/how-to-write-a-code-formatter/) by Yorick Peterse
   Oh, that reminds me that there are still languages that lack a proper formatter.

3. Learn JavaScript Fetch API: Retrieving Data from Servers (https://blog.teamtreehouse.com/javascript-fetch-api-retrieving-data-from-servers) by Rohald van Merode
   Now that we learned how to use it, let’s learn why we should not use it.

4. Biome v1.7 (https://biomejs.dev/blog/biome-v1-7/) by Victorien Elvinger
   Finally an easy path out of eslint (and prettier, but I like prettier – so meh).

5. How to Write Accessible Technical Documentation – Best Practices with Examples (https://www.freecodecamp.org/news/best-practices-for-writing-accessible-technical-documentation/) by Ezinne Anne Emilia
   If I had more time, I would have written a shorter letter.

6. Vue Router Enhancements (https://blog.openreplay.com/vue-router-enhancements/) by Samuel Nwabude
   Sweet! The navigation guards are really handy.

7. A primer on the cascade and specificity (https://piccalil.li/blog/a-primer-on-the-cascade-and-specificity/) by Andy Bell
   The cascade is one of the things in CSS that are most crucial but least understood.

8. JS Naked Day (https://js-naked-day.org/) by everyone
   Are you ready to “un-JS” your page? I am not.

9. Building an interactive 3D event badge with React Three Fiber (https://vercel.com/blog/building-an-interactive-3d-event-badge-with-react-three-fiber) by Paul Henschel
   Could this be something that we can use for the upcoming Micro Frontends Conference? Yes.

10. An intro to TSConfig for JavaScript Developers (https://deno.com/blog/intro-to-tsconfig) by Jo Franchetti
    The title is misleading – it should be: Converting a JS Dev to a TS Dev.

Issue 27

1. Modern CSS patterns in Campfire (https://dev.37signals.com/modern-css-patterns-and-techniques-in-campfire/) by Jason Zimdars
   Nice, modern setup despite my doubts that “no compiler” is going in the right direction; I’d still regard some checker / optimizer as useful.

2. Adding Speech Navigation to a Website (https://blog.openreplay.com/adding-speech-navigation-to-a-website/) by Sarah Okolo
   I love the speech API and the whole concept outlined in the article is quite nifty – well done!

3. Converting Plain Text To Encoded HTML With Vanilla JavaScript (https://www.smashingmagazine.com/2024/04/converting-text-encoded-html-vanilla-javascript/) by Alexis Kypridemos
   So – Markdown?! Really liked the way how the project and the ideas are presented.

4. Best Icon Libraries for a Dev in 2024 (https://dev.to/masumparvej/best-icon-libraries-for-a-dev-412d) by @masumparvej
   Icon fonts are out – time to find your new buddy!

5. How to Build AI Products That Don’t Flop (https://www.builder.io/blog/ai-flop) by Steve Sewell
   In short: Don’t use AI to build an AI product; use your brain.

6. New Wasm Project Brings Web Components to Backend Languages (https://thenewstack.io/reversing-web-assembly-project-extends-web-components/) by Loraine Lawson
   It seems like we finally found a use case for WASM!

7. Get your codebase ready for React 19 (https://thoughtbot.com/blog/get-your-codebase-ready-for-react-19) by Adrienne Ross
   I got mine already ready for React 20 – why care about 19?

8. 5 Tailwind CSS Anti-Patterns to Avoid (https://spin.atomicobject.com/tailwind-css-anti-patterns/) by Jonathan Chaffer
   I think this is a great list – especially since it aligns very well with my own experience using Tailwind.

9. Freelancing for Front End Developers: Tips for Success (https://blog.openreplay.com/freelancing-for-front-end-developers–tips-for-success/) by Joseph Umunna
   Well, you have to try (and sometimes therefore: fail) before you know it works.

10. HTMX vs. Vue and React — Pros and Cons (https://blog.openreplay.com/htmx-vs-vue-and-react–pros-and-cons/) by Nweke Emmanuel Manuchimso
    In my book it’s not so often “versus” but rather “when” and “in combination with”. Why choose one if you can have both?

Issue 28

1. Building a CLI from scratch with TypeScript and oclif (https://www.joshcanhelp.com/oclif/) by Josh Cunningham
   Let’s also add yargs to have CLI flags superpowers.

2. Introducing the Edge 2024 web platform top developer needs dashboard (https://blogs.windows.com/msedgedev/2024/04/18/2024-web-platform-top-developer-needs-dashboard/) by Alex Russell
   Result being: If its in Chrome, it’s most likely also in Edge. Same engine, same coverage.

3. Keeping up with the Node-ish ecosystem (https://www.mux.com/blog/keeping-up-with-the-node-ish-ecosystem) by Dylan Jhaveri
   Yesterday there was just Node – now its a lot more.

4. We Need To Rewild The Internet (https://www.noemamag.com/we-need-to-rewild-the-internet) by Maria Farrell and Robin Berjon
   I think this might be an uphill battle – but at least it’s one for the right cause.

5. Electron 30.0.0 (https://www.electronjs.org/blog/electron-30-0) by Keeley Hammond
   With BrowserView gone it’s time to embrace WebContentsView; but even better is the support for the file system API.

6. Powerful React Form Builders to Consider in 2024 (https://www.sitepoint.com/react-form-builders/) by Femi Akinyemi
   These form engines are super powerful and actually valuable in a lot of scenarios.

7. The Making of a TypeScript Feature: Inferring Type Predicates (https://effectivetypescript.com/2024/04/16/inferring-a-type-predicate/) by Dan Vanderkam
   Great writeup on a very nice PR that will be the backbone of the upcoming 5.5 release.

8. Help us invent CSS Grid Level 3, aka “Masonry” layout (https://webkit.org/blog/15269/help-us-invent-masonry-layouts-for-css-grid-level-3/) by Jen Simmons
   We are talking since years about Masonry layouts – now we are hopefully one step closer.

9. ECMAScript 2024 takes shape (https://www.infoworld.com/article/3715341/ecmascript-2024-takes-shape.html) by Paul Krill
   I hope the Promise for unicode resolves before the WebAssembly heap grows.

10. Why PHP Usage Has Declined by 40% in Just Over 2 Years (https://thenewstack.io/why-php-usage-has-declined-by-40-in-just-over-2-years/) by Richard MacManus
    One word: JavaScript.

Issue 29

1. What’s New in the Reliable Web App Pattern for .NET (https://techcommunity.microsoft.com/t5/apps-on-azure-blog/what-s-new-in-the-reliable-web-app-pattern-for-net/ba-p/4116085) by Matthew Soucoup
   Is it reliable yet?

2. JSR Is Not Another Package Manager (https://deno.com/blog/jsr-is-not-another-package-manager) by Ryan Dahl
   It’s also a registry!

3. Meet Ritmo, Musixmatch’s cross-platform design system (https://medium.com/musixmatch-blog/meet-ritmo-musixmatch-cross-platform-design-system-9f6296c5ed81) by Andrea Zillibotti
   Love the concept, design, and flow. Well done!

4. The slow death of CSS vendor prefixes (https://fullystacked.net/prefix/) by Ollie Williams
   For me personally it was a fast death that already happened like 5 years ago.

5. React 19 Beta (https://react.dev/blog/2024/04/25/react-19) by React Team
   This is a big one!

6. Create CSS Shapes with a single element (https://css-tip.com/css-shapes/) by Temani Afif
   A link that definitely belongs in the “might be useful one day” kind of category.

7. What is Vite (and why is it so popular)? (https://blog.stackblitz.com/posts/what-is-vite-introduction/) by Eric Simons
   The real question is: Who dominates the bundler space now?

8. JavaScript vs TypeScript. Why We Should Learn TypeScript? (https://dev.to/hiro9108/javascript-vs-typescript-why-we-should-learn-typescript-4d5o) by @hiro9108
   I guess the should question is answered – now let’s discuss the “could” question: Who could learn TypeScript?

9. React’s evolution from Hooks to Concurrent React (https://tigerabrodi.blog/reacts-evolution-from-hooks-to-concurrent-react) by Tiger Abrodi
   This is quite a comprehensive list – very enjoyable and interesting!

10. First post: A history of online public messaging (https://arstechnica.com/gadgets/2024/04/first-post-a-history-of-online-public-messaging/) by Jeremy Reimer
    The article was definitely not what I was expecting, but in fact – that is good. Great read!

Issue 30

1. A brief history of web development. And why your framework doesn’t matter. (https://gebna.gg/blog/brief-history-of-web-development) by Bahaa Zidan
   A wonderful read with great insights. Long story short: React is here to stay.

2. Svelte 5 Release Candidate (https://svelte.dev/blog/svelte-5-release-candidate) by Svelte Team
   Talking about React – how about a bit of Svelte? Svelte 5 is around the corner!

3. The Difference Between b and strong in HTML – Explained with Examples (https://www.freecodecamp.org/news/difference-between-b-and-strong-in-html/) by Joan Ayebola
   It’s all about semantics.

4. Uno Platform 5.2 Released – One Project To Rule Them All (https://nicksnettravels.builttoroam.com/uno-platform-5-2-released-one-project-to-rule-them-all/) by Nick
   Uno is an underrated project that lives in the shadows of Blazor, but comes with a lot of power.

5. Model Texture Transition and Procedural Radial Noise using WebGL (https://tympanus.net/codrops/2024/05/02/model-texture-transition-and-procedural-radial-noise-using-webgl/) by Mohammed Amine Bourouis
   Really awesome demos – I need to use this somewhere.

6. The Front End Developer/Engineer Handbook 2024 (https://frontendmasters.com/guides/front-end-handbook/2024/) by Cody Lindley
   A quite comprehensive guide – even micro frontends are covered!

7. Using Vite To Rebuild Local Dependencies in an NPM Workspace (https://prosopo.io/articles/using-vite-to-rebuild-local-dependencies-in-an-npm-workspace/) by Prospo
   For some reason it does not do this out of the box!

8. Measuring Performance with the JavaScript Performance API (https://www.telerik.com/blogs/measuring-performance-javascript-performance-api) by Hassan Djirdeh
   It’s one of the essential APIs for actually tracking performance reliably.

9. Node.js 22 arrives, backs ECMAScript modules (https://www.infoworld.com/article/3715283/nodejs-22-arrives-backs-ecmascript-modules.html) by Paul Krill
   Switch now!

10. Native Support for CJS/ESM Interoperability Begins in Node.js 22 (https://zacharylee.substack.com/p/native-support-for-cjsesm-interoperability) by Zachary Lee
    More details on why only synchronous ESM graphs are supported and what that implies for your code.

Conclusion

These are all outstanding articles by masterful authors. I enjoyed reading them all – I hope you did, too.

Follow me on LinkedIn, Twitter, or here for more to come.

Thanks to all the authors and contributors for their hard work!

The post 🧠 50 Articles for May the Fourth appeared first on ProdSens.live.

Gain insights into how to lead a product platform team. Learn about the learning from the challenges faced. Read more »

The post How to lead product platform teams? appeared first on Mind the Product.

The post How to lead product platform teams? appeared first on ProdSens.live.

Connect with diverse audiences across the globe by embracing a multi-local strategy. Explore how brands can merge cognitive science with local expertise.

The post Cognitive Science Meets SEO: Why True Localization Matters appeared first on ProdSens.live.