!
No Results Found
Share
Tweet
Subscribe
Sign Up
Discuss
Exit Fullscreen
# Get Active Element with JavaScript
Dan Pastori
October 18th, 2022
Build better software and get user feedback directly in GitHub, GitLab, and more.
Recently, I’ve been working on . One of the features of Amplitude is to bind key events to certain methods. A simple feature with one caveat. If you bind the key press events to the page, but the user is in a form field, the event will still fire. This is un-wanted behavior.
Luckily you can solve this issue with JavaScript fairly easily. The solution can be used in multiple scenarios as well. We just have to get the active element.
## Getting the Active Element in JavaScript
To get the active element in JavaScript, run the following code:
```
let activeElement = document.activeElement;
That’s it! Using the `document.activeElement` method, you now have access to the active element object within your code. From there, you can do all sorts of simple checks to make sure your UI is functioning as it should be!
## Detect if the User is Focused on Form Elements
One example that we use this for is within AmplitudeJS. We don’t want to run any of the bound keypress event handlers if the user is focused within a form. To do that, we made a simple function to check if the user is focused in a form:
isFormFocused(){
	let activeElement = document.activeElement.tagName.toLowerCase();
	let formElements = [
	    'input',
	    'textarea',
	    'select',
	];
	return formElements.indexOf( activeElement ) > -1;
}
When a user is focused on an element that is a form element and they press a key they normally want to perform a method (i.e space bar == play/pause), we check to see if they are in a form or not. This way every word doesn’t play or pause the audio.
We find the type of element by grabbing the `document.activeElement.tagName` to get the name of the element. Then we check to see if the element name is in the `formElements` array (which is the list of form elements we want to make sure aren’t active). This way we return `true` if the active element is within a form, and false if it’s not.
## Conclusion
This is a pretty slick little script that can determine what the active element is on the page and help add that fine grain control over any UI you are building. If you have any questions, feel free to reach out on Twitter (). If you want to have these tutorials emailed directly to your inbox, make sure to !
## Support future content
Psst... any earnings that we make off of our book is being reinvested to bringing you more content. If you like what you read, consider getting our book or get sweet perks by becoming a sponsor.
## Written By Dan
Builder, creator, and maker. Dan Pastori is a Laravel certified developer with over 10 years experience in full stack development. When you aren't finding Dan exploring new techniques in programming, catch him at the beach or hiking in the National Parks.
## Like this? Subscribe
We're privacy advocates. We will never spam you and we only want to send you emails that you actually want to receive. One-click unsubscribes are instantly honored.
Email Address \*
First Name
Get Helpful Tips Via Email
footer
! ./footer
You've enjoyed another post by  (hosted by ).
Follow us on:
If you like our articles, 
Build more with less code. We released a book that will show you how to do it.
Learn how to build web & mobile apps from the same codebase with Nuxt 3. 😱
We updated our book.
Learn how to build web & mobile apps from the same codebase with Laravel + Nuxt 3 😱
Get sweet perks.
Exclusive access, discounts & more.
 Become a Sponsor
 Share on Facebook
 Subscribe
 Tweet
 Sign Up
!Discuss

Browse ProductsProductsBooksOpen-Source Projects Search           Search         
## Introduction
## Getting Started
## Guide
## Laravel
## Customizing The Image
## Reference
# Supercharge your PHP experience, in seconds.
Built upon the official PHP images, our production-ready serversideup/php images take your Docker PHP experience to the next level. Enjoy variable-first configurations, nginx-unit variation, native CloudFlare support, and more.
## These images give a lot more than other PHP Docker Images.
!Production-readyBuilt to be performant and secure to exist on the wild web.!Native Health ChecksBe 100% confident your application is actually running.!High PerformanceGet the easiest experience for fine tuning performance.!Customizable & FlexibleEnvironment variables make customizations a breeze.!Native CloudFlare SupportGet real IP addresses from visitors from trusted proxies.!Based on official PHPUpgrade from the official PHP docker images with confidence.!NGINX UnitDitch FPM for a modern way of running PHP. Designed for containers from the ground up.!Unified LoggingAll logs are directed to STDOUT & STDERR for centralized output.!FPM + S6 OverlayOur FPM-Apache & FPM-NGINX images use this intelligent init system.
## Highly optimized for Laravel 💪
Horizon, queues, tasks, storage linking, migrations - these images handle it all.
## Built to run from Dev → Prod
Get the full benefits of containerization. Stop using containers in dev only. Works with Kubernetes, Docker Swarm and more.
Get Started 🚀100% free & open source. Available on GitHub & DockerHub. 
## What others are saying
!Chris FidaoCreator of 
Today I'm appreciating the work @jaydrogers (& others!) put into these base PHP containers.
 The official PHP images are...sort of ridiculous.
!Johan JanssensCo-Founder of 
Used the excellent Docker-PHP images from @jaydrogers. Demo'ed how to handle 10k async HTTP requests in 3secs, all using nothing else then PHP using OpenSwoole and supervised to perfection with S6.
 For a PHP dev, that should not be possible... look on people's face ...priceless!
!Žiga ZajcCEO of 
Based on our performance testing, the PHP-FPM image by Server Side Up has the capability to manage 484 requests per second without any project limitations. In comparison, the official PHP image is only able to handle 68 requests per second.
## 🚀 We're building in public
Follow along and get updates delivered right to your inbox.
## "But PHP is dead."
Get involved and prove modern PHP has a whole new life.
 [Twitter
Follow along @serversideup or our latest updates and projects. [Discord
Chat with the maintainers and meet friendly people who share the same interests as you. [GitHub
Help us squash bugs, request features, and improve the documentation.⚡️ Powered by:
# Cisco IOS Command Cheat Sheet for Routers and Switches
Jay Rogers
November 21st, 2011
So I have been getting a lot of questions in regards to programming Cisco Routers and Cisco Switches. The following document is what I took down as notes when I had to program a Cisco Router running Cisco IOS. Most of it is applicable to cisco routers, but most commands will work with switches as well.
In the document below, you can see that the commands are split into two modes — enable mode and config terminal mode. Type the commands in according to the mode that you are using.
This Cisco IOS Command Cheat Sheet is great for advanced users or beginners. Any questions, please leave a comment!
## Written By Jay
I’m a DevOps engineer who accidentally ended up in application & user-experience design. ?? I'm a husband and proud dog-dad who co-founded 521 Dimensions & Server Side Up. I like to having meaningful conversations with people who love building things. Please reach out and say hello!
# We’re Updating our Book!
We are super excited to announce we are updating our book,  to the newest versions of Vue 3, Nuxt 3, Laravel 9 and CapacitorJS 3. These updates will enable you to create reusable code that deploys to web and mobile using the latest technologies.
In the past two years, we’ve learned a lot about development and listened to the users who bought our book. With these updates your code will be more efficient, relevant for a longer period, and able to be used for even longer. It’s been two years since the book has been released, and there have been lots of updates to the underlying technology. We can’t wait to share, let’s get started!
## What we are updating
A lot. Since we’ve launched the book there have been drastic changes to the underlying technologies that power . In order to keep the book relevant for new projects, we’ve decided to update these technologies.
### Nuxt 3 and Vue 3
We will be updating ROAST from Nuxt 2 to Nuxt 3! This is by far the biggest update we are making to the book. Recently, the Nuxt team released their project roadmap with an  and a stable release around June 2022. This is huge news! Nuxt 3 is a giant step forward in tooling, ecosystem and stability. Your apps will be more efficient, your tooling more productive, and your apps up-to-date.
Along with Nuxt 3, this also means that ROAST will be updating to Vue 3 which is fully stable and ! We are excited to share these updates since Vue 3 will be relevant for many years to come. All new projects are recommended to use Vue 3. We want to support those concepts, structures, etc. so you can apply the information in the book to your newest apps.
### Laravel 9
Laravel 9 just got released as well. There are a variety of updates that make building APIs a much more seamless and easy process. One of these specifically is the . We will be upgrading our API endpoints to use these API resources along with other areas of the app to use the latest Laravel tooling.
### Capacitor 3
Shortly after we launched the initial version of the book, CapacitorJS, the key to making this app work on all platforms, . In order to stay up-to-date, we will build our mobile modules in Capacitor 3. Capacitor is an extremely powerful tool that allows us to write the same codebase, deploy to web and compile for iOS and Android. We want to make sure this process is well documented and easy to implement into your own apps.
### Tailwind 3
Tailwind 3 has also been released. While this is simply the paint that makes the app look gorgeous, we will be updating this as well. Tailwind 3 has a lot of super helpful utility classes that will make ROAST even more fluid. We will touch on some of our custom utility classes that make the same code base work on both web and mobile.
### Bug Fixes
Numerous bugs have been recorded and shared with us regarding the functionality of ROAST. While ROAST is a sample app that guides you through the process, we still want to ensure the app is fully functional and useful. We will be adding Apple Login to ensure we follow Apple’s guidelines and acceptance into the app store, fixing token issues, etc.
In addition to the bug fixes we will be adding some documentation on how to run the API & SPA with . While we use our own  with  (which you can use as well since they are open sourced and on Github), we realized there are a lot of users who stay within the Laravel eco-system and use Sail. Our updated book will include documentation on how to run both the Nuxt frontend and Laravel API backend at the same time.
## How will we update the code
The largest part of this upgrade will be on the frontend. Going from Nuxt 2/Vue 2 to Nuxt 3/Vue 3 is a complete overhaul. Since this is such a large update and Nuxt 3 is not in a stable release, we will be doing this upgrade over time.
We will first start by branching the frontend for Nuxt 3. If you have purchased the Ultimate Package of our book, you will have source code access and can follow in real time. While we work alongside the releases from the Nuxt team, we will be re-adding features and transferring code. We will **NOT** be using the Nuxt 2 Bridge. Our book goes through the process from 0 to production and we want that same experience for Nuxt 3. That being said, we will be documenting differences between Nuxt 2 and Nuxt 3 and sharing them along the way.
Once Nuxt 3 is stable and our app is fully updated, we will switch the Nuxt 3 branch to the production branch. ROAST will then be completely overhauled and running the latest and greatest. If your app is using Nuxt 2/Vue 2, don’t worry. Our Nuxt 2 branch will still be available for viewing, just archived. Capacitor upgrade will live in the respective branches as well (Capacitor 2 in Nuxt 2 and Capacitor 3 in Nuxt 3).
With the Laravel 9 upgrade, it’s not significant enough to warrant it’s own branching. We will be updating the book content to account for this upgrade and changing source code wherever it’s necessary.
## What you are getting
On to the good stuff! What you will be getting. If you’ve already purchased the book, you will have access to the updates as they become available at **NO ADDITIONAL CHARGE!** We appreciate you purchasing our book and have thoroughly enjoyed connecting with everyone. If you’ve purchased the Ultimate Package, you can watch our development process within Gitlab. You will also be able to ask questions in the private section of our .
As for the actual book itself, we will be including an entirely new file that includes the updates! You will be able to download this from Gumroad if you’ve already purchased the book. The new file will step through what we’ve discussed in the book with everything updated for Nuxt 3, Capacitor 3 and Laravel 9. That way if you are still using Nuxt 2, you can reference that copy. If you are using Nuxt 3, you can start from scratch and following along with the updated content!
That means, if you buy the book today, you will receive the new copy of the book as it’s written! Once we have fully released the updated book, the pre-sale discount will be ended. So grab your copy today and join us as we explore the new version of Nuxt 3!
Get the book and more 👇
Choose the package right for you.
The Essentials
$45
$35
USD
BOTH Editions of the 500+ page book (for Nuxt 2 and Nuxt 3)
Sketch & Figma icon templates  optimized for Capacitor
Lifetime access & updates
The Complete Package
$295
$145
Production source code access to an app called 
Private forum access where you can meet & get help from others
In-depth video tutorials
❤️ Github Sponsors get an additional 20% off the book! 
Quality tutorials & resources. No BS.\_
Get Server Side Up delivered to your inbox.
We would never share your email. Quality stuff, guaranteed.
© 2025  