Jump to content

Videos

A collection of the best videos related to our professional sections: Management, Design, Requirements, Development, Testing, Operations. We also have categories for our focus interests: Atlassian, Security, Invision Community and E-Commerce. You are more than welcome to add your videos here if you think they will fit. Enjoy!

CSS Popover + Anchor Positioning is Magical

If you’ve ever needed the positioning of an element to be connected (or anchored) to the position of another element, then you’ll be very excited about anchor positioning in CSS! It is new (as of the time of recording), but thankfully, we have a really good Polyfill, so we don’t have to worry about browser support!
🔗 Links
✅ Code from this video: https://codepen.io/kevinpowell/pen/po... (slightly different, and no polyfill being used here)
✅ Chrome for Developers blog article on anchor positioning: https://developer.chrome.com/blog/anc...
✅ MDN on Anchor Positioning: https://developer.mozilla.org/en-US/d...
✅ Popover Polyfill: https://github.com/oddbird/popover-po...
✅ Anchor positioning polyfill: https://github.com/oddbird/css-anchor...
✅ Browser support for popover: https://caniuse.com/mdn-api_htmleleme...
✅ Browser support for anchor positioning: https://caniuse.com/css-anchor-positi...
✅ I’ve got courses! https://kevinpowell.co/courses

⌚ Timestamps
00:00 - Introduction
00:33 - Turning our element into a popover
02:05 - Only change the display value when the popover is opened
03:25 - A few user agent styles you’ll probably want to overwrite
04:40 - Creating an anchor, and connecting an element to it
06:20 - Using the new anchor() function to position the element where you want
08:20 - Polyfills
10:15 - Change the positioning of the element when it runs out of room with @position-try
13:50 - Semantics
14:50 - Fading the out with allow-discrete
18:20 - Fading the menu in with @starting-style
--
Come hang out with other dev's in my Discord Community 💬   / discord  
Keep up to date with everything I'm up to ✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch! 📺   / kevinpowellcss  
---
Help support my channel
👨‍🎓 Get a course: https://www.kevinpowell.co/courses
👕 Buy a shirt: https://teespring.com/stores/making-t...
📽️ Join as a channel member:    / @kevinpowell  
💖 Support me on Patreon:   / kevinpowell   or through YT memberships: Join this channel to get access to perks:    / @kevinpowell   ---
My editor: VS Code - https://code.visualstudio.com/
---
I'm on some other places on the internet too! If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.
Bluesky: https://bsky.app/profile/kevinpowell.co
Codepen: https://codepen.io/kevinpowell/
Github: https://github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

Jimi Wikman
By 💫 Jimi Wikman in Frontend ·

How To Handle Permissions Like A Senior Dev

Try Clerk: https://go.clerk.com/b2b-orgs
Permission systems are in every single app, but most developers don’t spend any time planning out their system which results in buggy, hard to maintain code. In this video I will cover how to create multiple levels of permission systems from very basic all the way up to advanced systems that many companies charge thousands of dollars for.
📚 Materials/References:
GitHub Code: https://github.com/WebDevSimplified/p...
Clerk Organization Docs: https://go.clerk.com/docs-orgs

🌎 Find Me Here:
My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon:   / webdevsimplified  
Twitter:   / devsimplified  
Discord:   / discord  
GitHub: https://github.com/WebDevSimplified
CodePen: https://codepen.io/WebDevSimplified

⏱️ Timestamps:
00:00 - Introduction
01:17 - Problems With Roles
03:00 - RBAC (Role Based Access Control)
06:20 - RBAC Limitations
08:48 - Clerk Implementation
14:40 - Database Diagrams
19:23 - ABAC (Attribute Based Access Control) Explained
21:08 - Clerk Organization Implementation/Adding Multiple Roles
24:18 - ABAC Implementation
33:22 - Clerk ABAC Implementation
Jimi Wikman
By 💫 Jimi Wikman in Security ·

JSM DevOps Demo: Mastering Deployment and Operations

In this webinar, we will explore how you can leverage Atlassian products to streamline your deployment and operations processes. The focus will be on how Jira Software and Bitbucket can work together to manage your deployment pipeline efficiently. We’ll walk you through the steps involved in deploying code changes, from the development phase to production, using Bitbucket for version control and continuous integration. Jira Software will be the backbone for tracking the progress of these deployments, providing you with visibility and control over each stage of the process.
Once the changes are deployed, we will shift our attention to how you can use Jira Service Management and Statuspage to manage incidents that may arise from the deployment of standard changes. Specifically, we will demonstrate how the integration between Jira Service Management and Statuspage allows you to track incidents in real time and communicate updates to stakeholders effectively. This seamless integration ensures that any issues identified after deployment can be quickly prioritized, resolved, and communicated through an easily accessible status page.
By the end of the session, you'll have a deeper understanding of how the full Atlassian suite works together to not only manage your deployments but also respond to operational challenges as they occur. Whether you're managing code releases, tracking incidents, or providing transparency to your team and customers, Atlassian's tools provide a powerful framework to ensure smooth deployments and effective operational management.
Jimi Wikman
By 💫 Jimi Wikman in Jira Service Management ·

Build and embed an interactive process within SharePoint!

In this video, we will create and embed an interactive process within your SharePoint Intranet using the NEW updated method of hiding the Figma UI within prototypes!🔥
Quite a few people have requested a step-by-step walkthrough on this process build, and since Figma updated their embed code, I thought now was the perfect time to create and record it! 😁
If prototypes are new to you, we will use a tool called Figma, which has design and prototyping capabilities to create some SharePoint magic!
This video explains the method and provides a step-by-step guide for creating engaging and interactive user experiences within your SharePoint sites.
Once you understand the method and follow the guide, you will unlock endless possibilities for making your SharePoint Intranet sites unbelievably engaging.
🎯 Embed Code amendment: &hide-ui=1
✅ Video Chapters
0:00 - Introduction
2:27 - Creating the process diagram
10:17 - Creating the process steps
12:43 - Creating the transition animation
15:34 - Creating the process navigation
17:30 - Duplicating and updating your process steps
19:33 - How to add interactive resource components to your process steps
26:25 - Embedding your prototype within SharePoint
🎓 Intranet Site Builders Master Class here: https://www.academy365.io/course/shar...
🎉🎉🎉 Use coupon code FLASH25 for 25% off (limited availability) 😁 Just enter at the checkout!
Jimi Wikman
By 💫 Jimi Wikman in Design ·

Figma Design System: 01 Structure

Hello everyone and Happy New Year! It’s 2024 and time for a new series where we create a Design System in Figma called FDS. 🎉
In this episode, we’ll look at how to structure the system and the libraries you’ll need. 🤟
// Chapters
0:00 Intro
0:13 Structure overview
0:38 Design Tokens library
1:07 Iconography library
1:29 Web Components library
1:37 App Components library
1:59 Grab the starter libraries
2:13 Scale Design System
2:30 Outro 👋


// FDS Libraries https://drive.google.com/drive/folders/1YXUHhWJ7NL1xSh_7lDI-QRp1GOw7V7Yo
// Scale Design System http://www.scaledesignsystem.com/
// Software used https://www.figma.com/
// For updates and other tutorials, follow me on:
Twitter: https://x.com/deanemachine
Medium: https://christopherdeane.medium.com/
Jimi Wikman
By 💫 Jimi Wikman in Design ·

Confluence Standard vs Premium - 3 GAME-CHANGING Features That Make Premium Worth It! (2024)

🚀 Struggling to decide between Confluence Standard and Premium? In this video, I break down the REAL value of Premium and show you the 3 game-changing features that make it worth the investment in 2024! After helping multiple clients make this decision, I'm sharing my hands-on experience with the features that ACTUALLY matter. No fluff, just practical insights to help you make the right choice for your team!
⭐ KEY FEATURES COVERED:
AI-powered content creation & management
Advanced automation capabilities
Sandbox environment for testing
PLUS bonus features you might not know about! 💡
SPECIAL TIP: Did you know you can try Premium for FREE? Watch till the end to learn how!
🔗 RESOURCES: https://community.atlassian.com/t5/Co...
Need help with Confluence? Check out my services: https://linktr.ee/mjurdyga
⏱️ TIMESTAMPS:
00:00 - Introduction & Why This Matters
01:23 - Premium vs Standard Pricing
01:39 - Feature Overview
02:35 - Analytics & Permission Inspector
03:00 - Automation Deep Dive
04:43 - AI Features Demo
08:28 - Practical Use Cases
09:10 - Automation Templates
11:15 - Final Recommendations
12:20 - Free Trial Info & Wrap-up
Jimi Wikman
By 💫 Jimi Wikman in Confluence ·

7 Steps to Write Standard Operating Procedures that ACTUALLY Work

Free Delegation Course + SOP Template 🔗https://processdriven.co/task-plunger/ | Wondering how to write standard operating procedures that will support your team and daily operations? Watch the video to learn 7 easy steps for creating SOPs in 15 minutes or less. 
Here's what this video covers:
00:00 What is a standard operating procedure?
00:08 How to make SOP documents
00:26 Free SOP example template
01:04 How should I title an SOP
03:01 How to make SOP for company
06:13 How do I start writing a SOP
07:50 What size is a great SOP
10:39 What does a good SOP look like
11:48 Should an SOP have FAQs
13:19 How to improve SOP overtime
Jimi Wikman
By 💫 Jimi Wikman in Management ·

How to use Starhive as a no-code backend

Are you a frontend specialist who doesn't want to spend ages learning how to configure and manage your backend? Or a full-stack engineer looking for a way to create custom web apps faster?
In this video our software engineer Vlad will show you how you can use Starhive as a backend and admin panel for a web app created in Next.js and Vercel.
By using Starhive, he can focus on the logic and design of his web app, not administering his database or building an admin panel with lots of features, it's all in Starhive already.
Want to try yourself? Sign up to Starhive: https://starhive.com/?utm_source=youtube
You can find the starter project Vlad used here: https://github.com/starhive-labs/star...
Jimi Wikman
By 💫 Jimi Wikman in Starhive ·

Managing Incidents in Jira | The Developer’s Edge | Atlassian

Explore how developers can manage incidents in Jira Software using the new incidents tab. The incidents tab pulls relevant incidents from Jira Service Management and other third-party tools, into Jira Software so developers can focus on incidents impacting software components they’re responsible for in the same tool where their development backlog lives.
Jimi Wikman

Jira Software - New UI Coming!

Atlassian dev community has announced the upcoming changes for the Jira navigation UI. Lots of changes that will make the navigation even easier for the users.
Check it out here: https://community.developer.atlassian.com/t/rfc-45-upcoming-changes-to-jira-navigation/79375
Jimi Wikman
By 💫 Jimi Wikman in Atlassian ·

How Setup Confluence Space Permissions | Atlassian Confluence

In this video, you will learn how to setup Confluence Space Permissions. I will explain what every field is. If you are new to Confluence or just starting out in your Confluence journey, watch this #beginner Confluence video to understand how you can use Confluence to help you deliver your projects.
Link to Atlassian's Confluence product: https://www.atlassian.com/software/confluence
Link to my Fiverr profile: https://www.fiverr.com/alexortiz924?up_rollout=true
Link to my Upwork profile: https://www.upwork.com/freelancers/~01d55ed1a24784cd93
Link to my personal website: (redesign with a focus on Jira coming soon!) https://www.apetech.me/
apetech
By 🖊️apetech in Confluence ·

How to Add an Organization Admin | Atlassian Jira

In this #atlassian #jira video, I am going to show how to add an organization admin. If you like this video, please make sure to give it a thumbs up. If you haven't already, please consider subscribing. If you have any questions about anything discussed so far, please feel free to make sure you leave your question in the comments section. Link to my other Atlassian Jira videos https://www.youtube.com/playlist?list=PLqWD37Mj2te2xeDcFWb4Vw1pvX5gHfWgy Link to my Atlassian Live Streams: https://www.youtube.com/playlist?list=PLqWD37Mj2te1QN1j7v-9jjCrp8Hty6dja Link to Atlassian's Jira products: https://www.atlassian.com/software Link to my Fiverr profile: https://www.fiverr.com/alexortiz924?up_rollout=true Link to my Upwork profile: https://www.upwork.com/freelancers/~01d55ed1a24784cd93 Link to my personal website https://www.apetech.me/
apetech
By 🖊️apetech in Atlassian Administration ·

October 2022 Release - Live Webinar

In Invision Community's October Release Live Webinar, we discuss a few key features included in the next platform update.
Charles showcases our new Events application which now features a visually stunning overview page. He also answers a few questions submitted from clients, including how to use the app for physical versus online events, what to do if your community doesn't offer many events and more.
We also talk about adding support for OpenSearch 2.1, adding application filters for new reports in the Moderator Control Panel's report center, as well as updating Graphql library to 14.11.6.
Please watch the video then leave a comment!
Jimi Wikman
By 💫 Jimi Wikman in Invision Community ·