Are you over 18 and want to see adult content?
More Annotations
Home - Society for Public Health Education - SOPHE
Are you over 18 and want to see adult content?
A Closer Look Mystery Shopping Company | A Closer Look
Are you over 18 and want to see adult content?
The Apostrophe Guide | A quick guide to the apostrophe
Are you over 18 and want to see adult content?
POWERGRID | A Government of India Enterprise | A Navratna Company
Are you over 18 and want to see adult content?
A complete backup of mangodeckcabo.com
Are you over 18 and want to see adult content?
Favourite Annotations
A complete backup of www.amarujala.com/photo-gallery/entertainment/bollywood/swara-bhaskar-gets-trolled-after-telling-wrong-age-
Are you over 18 and want to see adult content?
A complete backup of www.pravda.com.ua/rus/news/2020/02/24/7241499/
Are you over 18 and want to see adult content?
Text
COOL KIDS USE RSS
Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.. In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
IMAGE MASKING WITH HTML5 CANVAS Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! CURL – YOUR “VIEW SOURCE” OF THE WEBTINDERESQUE
QUICK TIP: USING SCROLLINTOVIEW() TO SHOW ADDED ELEMENTS Now, if you try this out, you see that the new characters are in fact added, but not visible until you scroll down to them. That’s bad. To remedy this, you all you need to to is to add the scrollIntoView call after adding the new list item: CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.. In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
IMAGE MASKING WITH HTML5 CANVAS Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! CURL – YOUR “VIEW SOURCE” OF THE WEBTINDERESQUE
QUICK TIP: USING SCROLLINTOVIEW() TO SHOW ADDED ELEMENTS Now, if you try this out, you see that the new characters are in fact added, but not visible until you scroll down to them. That’s bad. To remedy this, you all you need to to is to add the scrollIntoView call after adding the new list item:CHRISTIAN HEILMANN
Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.. In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more PLURALSIGHT CELEBRATES 25 YEARS OF JAVASCRIPT Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. QUICK TIP: HOW TO CAPTURE AND REPLACE NEWLINES IN LIQUID This is where it didn’t get fun. The replace filter doesn’t allow you to concatenate strings and doesn’t know the concept of n. So, I tried to use the newline_to_br together with strip_newlines filters and then replace the br but it was messy. LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS The correct answer is none.This is not what anchors a > are for.An anchor element should have a href attribute that points to a valid URL resource. In other words: You use an anchor if you want to create an interactive element in the your site or app that takes you to anotherweb resource.
LOADING EXTERNAL CONTENT WITH AJAX USING JQUERY AND YQL You can then use load some content to load the content and you make the whole thing re-usable.. Check out this more reusable Ajax demo to see what it does.. The issue I wanted to find a nice solution for is the one that happens when you click on the second link in the demo: loading external files fails as Ajax doesn’t allow for cross-domainloading of content.
A QUICK REMINDER ON HOW AND WHY TO USE LABELS IN FORMS TO In addition to the benefits for screenreaders, labels also make it easier for mouse or touch users to interact with your content. The following GIF shows that the options having labels enable the user to either click the tiny checkbox or the much larger text to FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITH This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
The (new) Developer Advocacy Handbook is live! May 31st, 2021. I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote the original almost 15 years ago, and this edition is a heavy re-write. A lot has changed in the world of Developer Advocacy and I tried to add my findings over the last few years to the NEW CLASS ON SKILLSHARE: PRODUCT MANAGEMENT 13 hours ago · I have a new class on Skillshare where I am teaching how to be a developer that is easy to work with in a world of home office, geographical and temporal distribution and how to communicate across departments. You can check the introduction video here:Here’s what I
ACCESSIBILITY ISSUES YOU CAN DISCOVER AND FIX USING THE 1 day ago · I’ve been busy lately writing and recording a lot of things concerning accessibility and tooling. One of the practical upshots of my Skillshare Class Product Management: Tools for Improving Product Accessibility was that I had to go through the documentation of the developer tools of Microsoft Edge and bring it up-to-date with new information about tools that lately have been added. ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
QUICK TIP: HOW TO CAPTURE AND REPLACE NEWLINES IN LIQUID This is where it didn’t get fun. The replace filter doesn’t allow you to concatenate strings and doesn’t know the concept of n. So, I tried to use the newline_to_br together with strip_newlines filters and then replace the br but it was messy. QUICK TIP: HOW TO MAKE MAILTO: LINKS OPEN IN GMAIL IN Step 1: Go to gmail.com in the browser. Step 2: Click the handler icon in the URL bar: That’s it. From now on each mailto: link on the web you click on will open in Gmail and not leave the browser. Of course this works for any other webmail client that exposes an handler (Yahoo, Office 365’s Outlook). The context menu on any mailto: link QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in: Format Paragraph Line Breaks and Alignment uncheck: “Allow Latin text to wrap in the middle of a word”. Here’s a recording to show the difference: Why this would be CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
The (new) Developer Advocacy Handbook is live! May 31st, 2021. I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote the original almost 15 years ago, and this edition is a heavy re-write. A lot has changed in the world of Developer Advocacy and I tried to add my findings over the last few years to the NEW CLASS ON SKILLSHARE: PRODUCT MANAGEMENT 13 hours ago · I have a new class on Skillshare where I am teaching how to be a developer that is easy to work with in a world of home office, geographical and temporal distribution and how to communicate across departments. You can check the introduction video here:Here’s what I
ACCESSIBILITY ISSUES YOU CAN DISCOVER AND FIX USING THE 1 day ago · I’ve been busy lately writing and recording a lot of things concerning accessibility and tooling. One of the practical upshots of my Skillshare Class Product Management: Tools for Improving Product Accessibility was that I had to go through the documentation of the developer tools of Microsoft Edge and bring it up-to-date with new information about tools that lately have been added. ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
QUICK TIP: HOW TO CAPTURE AND REPLACE NEWLINES IN LIQUID This is where it didn’t get fun. The replace filter doesn’t allow you to concatenate strings and doesn’t know the concept of n. So, I tried to use the newline_to_br together with strip_newlines filters and then replace the br but it was messy. QUICK TIP: HOW TO MAKE MAILTO: LINKS OPEN IN GMAIL IN Step 1: Go to gmail.com in the browser. Step 2: Click the handler icon in the URL bar: That’s it. From now on each mailto: link on the web you click on will open in Gmail and not leave the browser. Of course this works for any other webmail client that exposes an handler (Yahoo, Office 365’s Outlook). The context menu on any mailto: link QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in: Format Paragraph Line Breaks and Alignment uncheck: “Allow Latin text to wrap in the middle of a word”. Here’s a recording to show the difference: Why this would be ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! 2021 JUNE | CHRISTIAN HEILMANN I’ve been busy lately writing and recording a lot of things concerning accessibility and tooling. One of the practical upshots of my Skillshare Class Product Management: Tools for Improving Product Accessibility was that I had to go through the documentation of the developer tools of Microsoft Edge and bring it up-to-date with new information about tools that lately have been added. THE (NEW) DEVELOPER ADVOCACY HANDBOOK IS LIVE! The (new) Developer Advocacy Handbook is live! Monday, May 31st, 2021 at 3:47 pm. I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote the original almost 15 years ago, and this edition is a heavy re-write. A lot has changed in the world of Developer Advocacy and I tried to add my findings over the QUICK VS CODE TIP: AUTOMATICALLY ADD IMAGE WIDTH AND Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! CONDITIONAL ANIMATIONS WITH CSS PROPERTIES This defines the CSS custom property nomotion as “none” when the user doesn’t want to see any animations. If the user wants to see animations, it isn’t defined and thus the CSS engine applies the fallback, which is your animation settings.. You can see this in action in this CodePen:. See the Pen Conditional animations with CSS properties by Christian Heilmann () A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. QUICK TIP: HOW TO MAKE MAILTO: LINKS OPEN IN GMAIL IN Step 1: Go to gmail.com in the browser. Step 2: Click the handler icon in the URL bar: That’s it. From now on each mailto: link on the web you click on will open in Gmail and not leave the browser. Of course this works for any other webmail client that exposes an handler (Yahoo, Office 365’s Outlook). The context menu on any mailto: link QUICK TIP: SAVE TWITTER GIFS AS MP4 WITHOUT ANY ADD-ON OR Under the hood Twitter also converts any GIF to MP4 because it is a much more effective file format. Knowing this, the easiest way to save the GIF is to open DevTools, go to the Console and type/copy: window. open( document. querySelector('video'). src) window.open (document.querySelector ('video').src) This opens the GIF as a videoin a new
CURL – YOUR “VIEW SOURCE” OF THE WEB OK, here goes. cURL is your “view source” tool for the web. In essence it is a program that allows you to make HTTP requests from the command line or different language implementations. The cURL homepage has all the information about it but here is where it gets interesting. If you are on a Mac or on Linux, you are in luck – foryou
IMAGE MASKING WITH HTML5 CANVAS Image masking with HTML5 Canvas. I just added a small demo to my GitHub showing how you can do image masking by using the canvas element. All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
I have a new course on Skillshare: Product Management: Tools for Improving Product Accessibility. May 11th, 2021. I’m super happy to announce that a new class of mine is now live at Skillshare. The title is Product Management: Tools for Improving Product Accessibility and in it I am covering a lot of tools to automatically check for ACCESSIBILITY ISSUES YOU CAN DISCOVER AND FIX USING THE 16 hours ago · I’ve been busy lately writing and recording a lot of things concerning accessibility and tooling. One of the practical upshots of my Skillshare Class Product Management: Tools for Improving Product Accessibility was that I had to go through the documentation of the developer tools of Microsoft Edge and bring it up-to-date with new information about tools that lately have been added. AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
FOUR YEARS AT MICROSOFT Four years at Microsoft. Wednesday, January 9th, 2019 at 5:55 pm. LinkedIn this week reminded me that I am now four years at Microsoft. Technically, my first day in a meeting on a company machine was the 5th of February (as Rey Bango reminded me). It’s been quite a ride and I am still happy to work here. When I started, I was curious ifthat
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in: Format Paragraph Line Breaks and Alignment uncheck: “Allow Latin text to wrap in the middle of a word”. Here’s a recording to show the difference: Why this would beTINDERESQUE
CURL – YOUR “VIEW SOURCE” OF THE WEB IMAGE MASKING WITH HTML5 CANVAS Image masking with HTML5 Canvas. I just added a small demo to my GitHub showing how you can do image masking by using the canvas element. All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
I have a new course on Skillshare: Product Management: Tools for Improving Product Accessibility. May 11th, 2021. I’m super happy to announce that a new class of mine is now live at Skillshare. The title is Product Management: Tools for Improving Product Accessibility and in it I am covering a lot of tools to automatically check for ACCESSIBILITY ISSUES YOU CAN DISCOVER AND FIX USING THE 16 hours ago · I’ve been busy lately writing and recording a lot of things concerning accessibility and tooling. One of the practical upshots of my Skillshare Class Product Management: Tools for Improving Product Accessibility was that I had to go through the documentation of the developer tools of Microsoft Edge and bring it up-to-date with new information about tools that lately have been added. AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
FOUR YEARS AT MICROSOFT Four years at Microsoft. Wednesday, January 9th, 2019 at 5:55 pm. LinkedIn this week reminded me that I am now four years at Microsoft. Technically, my first day in a meeting on a company machine was the 5th of February (as Rey Bango reminded me). It’s been quite a ride and I am still happy to work here. When I started, I was curious ifthat
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in: Format Paragraph Line Breaks and Alignment uncheck: “Allow Latin text to wrap in the middle of a word”. Here’s a recording to show the difference: Why this would beTINDERESQUE
CURL – YOUR “VIEW SOURCE” OF THE WEB IMAGE MASKING WITH HTML5 CANVAS Image masking with HTML5 Canvas. I just added a small demo to my GitHub showing how you can do image masking by using the canvas element. All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. ACCESSIBILITY ISSUES YOU CAN DISCOVER AND FIX USING THE 16 hours ago · I’ve been busy lately writing and recording a lot of things concerning accessibility and tooling. One of the practical upshots of my Skillshare Class Product Management: Tools for Improving Product Accessibility was that I had to go through the documentation of the developer tools of Microsoft Edge and bring it up-to-date with new information about tools that lately have been added. THE (NEW) DEVELOPER ADVOCACY HANDBOOK IS LIVE! The (new) Developer Advocacy Handbook is live! Monday, May 31st, 2021 at 3:47 pm. I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote the original almost 15 years ago, and this edition is a heavy re-write. A lot has changed in the world of Developer Advocacy and I tried to add my findings over the 2021 APRIL | CHRISTIAN HEILMANN Tabs vs. Spaces show on Developer tools. Friday, April 16th, 2021. If you got 25 minutes to spare, here’s a great episode of Matt Wojciakowski ’s “Tabs vs. Spaces” show where I talk together with my colleagues Erica Draud and Rachel Simone Weil about Edge Developer tools, accessibility, PWAs and what we’re doing to make iteasier for
QUICK VS CODE TIP: AUTOMATICALLY ADD IMAGE WIDTH AND Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! CONDITIONAL ANIMATIONS WITH CSS PROPERTIES This defines the CSS custom property nomotion as “none” when the user doesn’t want to see any animations. If the user wants to see animations, it isn’t defined and thus the CSS engine applies the fallback, which is your animation settings.. You can see this in action in this CodePen:. See the Pen Conditional animations with CSS properties by Christian Heilmann () A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH In the video, I cover the following steps: Dragging a project folder into Visual Studio Code to have all files to edit. Opening the integrated terminal in VS Code to start a local server using “php -s localhost:8000”. Changing the project styles using the Colour picker and the Font editor. Copy whole changed CSS files using the Sourcespanel.
QUICK TIP: HOW TO CAPTURE AND REPLACE NEWLINES IN LIQUID This is where it didn’t get fun. The replace filter doesn’t allow you to concatenate strings and doesn’t know the concept of n. So, I tried to use the newline_to_br together with strip_newlines filters and then replace the br but it was messy. LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS Styling is probably still the main reason why people wrongly use a link where a button should be used. Buttons are much more complex interaction elements than links and they have more styles attached to them. Links are part of the text renderer, buttons are traditionally part of forms and much more complex. So if someone who doesn’t likeCSS
FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITH This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
I have a new course on Skillshare: Product Management: Tools for Improving Product Accessibility. May 11th, 2021. I’m super happy to announce that a new class of mine is now live at Skillshare. The title is Product Management: Tools for Improving Product Accessibility and in it I am covering a lot of tools to automatically check for ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH In the video, I cover the following steps: Dragging a project folder into Visual Studio Code to have all files to edit. Opening the integrated terminal in VS Code to start a local server using “php -s localhost:8000”. Changing the project styles using the Colour picker and the Font editor. Copy whole changed CSS files using the Sourcespanel.
A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in: Format Paragraph Line Breaks and Alignment uncheck: “Allow Latin text to wrap in the middle of a word”. Here’s a recording to show the difference: Why this would beTINDERESQUE
IMAGE MASKING WITH HTML5 CANVAS Image masking with HTML5 Canvas. I just added a small demo to my GitHub showing how you can do image masking by using the canvas element. All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS Styling is probably still the main reason why people wrongly use a link where a button should be used. Buttons are much more complex interaction elements than links and they have more styles attached to them. Links are part of the text renderer, buttons are traditionally part of forms and much more complex. So if someone who doesn’t likeCSS
FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITHFLIP MY LAPTOP CAMERACHANGE CAMERA TO REAR FACINGHOW TO CHANGE CAMERA VIEWHOW TO FLIP CAMERA ON SURFACE PROHOW TO REVERSE CAMERA VIEW WINDOWS 10REVERSECAMERA ON HP LAPTOP
This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
I have a new course on Skillshare: Product Management: Tools for Improving Product Accessibility. May 11th, 2021. I’m super happy to announce that a new class of mine is now live at Skillshare. The title is Product Management: Tools for Improving Product Accessibility and in it I am covering a lot of tools to automatically check for ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH In the video, I cover the following steps: Dragging a project folder into Visual Studio Code to have all files to edit. Opening the integrated terminal in VS Code to start a local server using “php -s localhost:8000”. Changing the project styles using the Colour picker and the Font editor. Copy whole changed CSS files using the Sourcespanel.
A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW To get rid of it, you don’t need to summon the dark lord, but all you need to do is to unset the default. You can find this in: Format Paragraph Line Breaks and Alignment uncheck: “Allow Latin text to wrap in the middle of a word”. Here’s a recording to show the difference: Why this would beTINDERESQUE
IMAGE MASKING WITH HTML5 CANVAS Image masking with HTML5 Canvas. I just added a small demo to my GitHub showing how you can do image masking by using the canvas element. All you need to do is add the canvasmask.js script and add a class of mask to each image you want to mask. You also need to provide a PNG file as the mask using the data-mask attribute. LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS Styling is probably still the main reason why people wrongly use a link where a button should be used. Buttons are much more complex interaction elements than links and they have more styles attached to them. Links are part of the text renderer, buttons are traditionally part of forms and much more complex. So if someone who doesn’t likeCSS
FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITHFLIP MY LAPTOP CAMERACHANGE CAMERA TO REAR FACINGHOW TO CHANGE CAMERA VIEWHOW TO FLIP CAMERA ON SURFACE PROHOW TO REVERSE CAMERA VIEW WINDOWS 10REVERSECAMERA ON HP LAPTOP
This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. THE (NEW) DEVELOPER ADVOCACY HANDBOOK IS LIVE! The (new) Developer Advocacy Handbook is live! Monday, May 31st, 2021 at 3:47 pm. I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote the original almost 15 years ago, and this edition is a heavy re-write. A lot has changed in the world of Developer Advocacy and I tried to add my findings over the AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK VS CODE TIP: AUTOMATICALLY ADD IMAGE WIDTH AND Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! CONDITIONAL ANIMATIONS WITH CSS PROPERTIES This defines the CSS custom property nomotion as “none” when the user doesn’t want to see any animations. If the user wants to see animations, it isn’t defined and thus the CSS engine applies the fallback, which is your animation settings.. You can see this in action in this CodePen:. See the Pen Conditional animations with CSS properties by Christian Heilmann () BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS Styling is probably still the main reason why people wrongly use a link where a button should be used. Buttons are much more complex interaction elements than links and they have more styles attached to them. Links are part of the text renderer, buttons are traditionally part of forms and much more complex. So if someone who doesn’t likeCSS
CURL – YOUR “VIEW SOURCE” OF THE WEB OK, here goes. cURL is your “view source” tool for the web. In essence it is a program that allows you to make HTTP requests from the command line or different language implementations. The cURL homepage has all the information about it but here is where it gets interesting. If you are on a Mac or on Linux, you are in luck – foryou
A QUICK REMINDER ON HOW AND WHY TO USE LABELS IN FORMS TO In addition to the benefits for screenreaders, labels also make it easier for mouse or touch users to interact with your content. The following GIF shows that the options having labels enable the user to either click the tiny checkbox or the much larger text to FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITH This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.. In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! IMAGE MASKING WITH HTML5 CANVAS Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS!TINDERESQUE
LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS The correct answer is none.This is not what anchors a > are for.An anchor element should have a href attribute that points to a valid URL resource. In other words: You use an anchor if you want to create an interactive element in the your site or app that takes you to anotherweb resource.
FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITHFLIP MY LAPTOP CAMERACHANGE CAMERA TO REAR FACINGHOW TO CHANGE CAMERA VIEWHOW TO FLIP CAMERA ON SURFACE PROHOW TO REVERSE CAMERA VIEW WINDOWS 10REVERSECAMERA ON HP LAPTOP
This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.. In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! IMAGE MASKING WITH HTML5 CANVAS Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS!TINDERESQUE
LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS The correct answer is none.This is not what anchors a > are for.An anchor element should have a href attribute that points to a valid URL resource. In other words: You use an anchor if you want to create an interactive element in the your site or app that takes you to anotherweb resource.
FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITHFLIP MY LAPTOP CAMERACHANGE CAMERA TO REAR FACINGHOW TO CHANGE CAMERA VIEWHOW TO FLIP CAMERA ON SURFACE PROHOW TO REVERSE CAMERA VIEW WINDOWS 10REVERSECAMERA ON HP LAPTOP
This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to THE (NEW) DEVELOPER ADVOCACY HANDBOOK IS LIVE! I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote the original almost 15 years ago, and this edition is a heavy re-write. A lot has changed in the world of Developer Advocacy and I tried to add my findings over the last few years to the book. It gives SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK VS CODE TIP: AUTOMATICALLY ADD IMAGE WIDTH AND Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! CONDITIONAL ANIMATIONS WITH CSS PROPERTIES This defines the CSS custom property nomotion as “none” when the user doesn’t want to see any animations. If the user wants to see animations, it isn’t defined and thus the CSS engine applies the fallback, which is your animation settings.. You can see this in action in this CodePen:. See the Pen Conditional animations with CSS properties by Christian Heilmann () BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS The correct answer is none.This is not what anchors a > are for.An anchor element should have a href attribute that points to a valid URL resource. In other words: You use an anchor if you want to create an interactive element in the your site or app that takes you to anotherweb resource.
CURL – YOUR “VIEW SOURCE” OF THE WEB What follows here is a quick introduction to the magic of cURL. This was inspired by the comment of Bruce Lawson on my 24 ways article:. Seems very cool and will help me with a A QUICK REMINDER ON HOW AND WHY TO USE LABELS IN FORMS TO In addition to the benefits for screenreaders, labels also make it easier for mouse or touch users to interact with your content. The following GIF shows that the options having labels enable the user to either click the tiny checkbox or the much larger text to FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITH This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.. In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! IMAGE MASKING WITH HTML5 CANVAS Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS!TINDERESQUE
LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS The correct answer is none.This is not what anchors a > are for.An anchor element should have a href attribute that points to a valid URL resource. In other words: You use an anchor if you want to create an interactive element in the your site or app that takes you to anotherweb resource.
FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITHFLIP MY LAPTOP CAMERACHANGE CAMERA TO REAR FACINGHOW TO CHANGE CAMERA VIEWHOW TO FLIP CAMERA ON SURFACE PROHOW TO REVERSE CAMERA VIEW WINDOWS 10REVERSECAMERA ON HP LAPTOP
This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. CHRISTIAN HEILMANNABOUT THISARCHIVESOLDER ENTRIESGET THE FEED, ALL THECOOL KIDS USE RSS
Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. ABOUT THIS | CHRISTIAN HEILMANN Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! SYNCING CSS CHANGES IN BROWSER DEVELOPER TOOLS WITH Lately I’ve been looking into improving the ways I use browser developer tools by using features I’ve never looked and/or forgotten. One amazing feature of those are Workspaces which have been around for a long time but don’t get as much use as I think they should.. In essence, this feature allows you to use the visual tools in the developer tools to tweak and change styles in a more A CODE SNIPPET TO SCRAPE ALL HEADINGS AND THEIR TARGET To go directly there you can then use https://example.com#gerbils-and-other-rodents if you published at example.com. The other day I was asked to create a list of all the links in the What’s new in Devtools 89 document, which is generated from Markdown. The list should be the text of the headline followed by the full URL to get to that part of the document. SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK TIP: STOP POWERPOINT FROM BREAKING WORDS INTO A NEW Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! IMAGE MASKING WITH HTML5 CANVAS Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS!TINDERESQUE
LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS The correct answer is none.This is not what anchors a > are for.An anchor element should have a href attribute that points to a valid URL resource. In other words: You use an anchor if you want to create an interactive element in the your site or app that takes you to anotherweb resource.
FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITHFLIP MY LAPTOP CAMERACHANGE CAMERA TO REAR FACINGHOW TO CHANGE CAMERA VIEWHOW TO FLIP CAMERA ON SURFACE PROHOW TO REVERSE CAMERA VIEW WINDOWS 10REVERSECAMERA ON HP LAPTOP
This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left. AUTOMATED ACCESSIBILITY TESTING GETS YOU ON THE WAY, BUT Testing your products for accessibility issues is a tricky thing. Your users have all kind of different needs and setups. They use computers in ways that appear daunting to you and hard to replicate. Any sighted person that used a screen reader to THE (NEW) DEVELOPER ADVOCACY HANDBOOK IS LIVE! I just finished the writing part of the new edition of the Developer Advocacy Handbook. I wrote the original almost 15 years ago, and this edition is a heavy re-write. A lot has changed in the world of Developer Advocacy and I tried to add my findings over the last few years to the book. It gives SEVEN WAYS TO TEST FOR ACCESSIBILITY OF YOUR WEB SITE WITH There are lots of ways to test your web site for accessibility issues. Services, software packages, even human testing companies. They all have their place and often a test with real people is the best thingto do.
QUICK VS CODE TIP: AUTOMATICALLY ADD IMAGE WIDTH AND Christian Heilmann is the blog of Christian Heilmann chris@christianheilmann.com (Please do not contact me about guest posts, I don't do those!) a Principal Program Manager living and working in Berlin, Germany.. Theme by Chris Heilmann. SVG Icons by Dan Klammer.Hosted by MediaTemple. Powered by Coffee and Spotify Radio. Get the feed, all the cool kids use RSS! CONDITIONAL ANIMATIONS WITH CSS PROPERTIES This defines the CSS custom property nomotion as “none” when the user doesn’t want to see any animations. If the user wants to see animations, it isn’t defined and thus the CSS engine applies the fallback, which is your animation settings.. You can see this in action in this CodePen:. See the Pen Conditional animations with CSS properties by Christian Heilmann () BACK TO BASICS: CREATING A CLICKABLE CARD INTERFACE IN An unordered list is easy to style and will also tell screenreaders that the items are linked. It will even announce “1 of 2”, “2 of2” and so on.
LINKS THAT DON’T GO ANYWHERE SHOULD BE BUTTONS The correct answer is none.This is not what anchors a > are for.An anchor element should have a href attribute that points to a valid URL resource. In other words: You use an anchor if you want to create an interactive element in the your site or app that takes you to anotherweb resource.
CURL – YOUR “VIEW SOURCE” OF THE WEB What follows here is a quick introduction to the magic of cURL. This was inspired by the comment of Bruce Lawson on my 24 ways article:. Seems very cool and will help me with a A QUICK REMINDER ON HOW AND WHY TO USE LABELS IN FORMS TO In addition to the benefits for screenreaders, labels also make it easier for mouse or touch users to interact with your content. The following GIF shows that the options having labels enable the user to either click the tiny checkbox or the much larger text to FLIPPING THE IMAGE WHEN ACCESSING THE LAPTOP CAMERA WITH This is one of my bugbears: when I see demos or tools that access the camera with getUserMedia and the image is “the wrong way around”. Say I sit in front of this computer, and lean slightly to my left.Skip to content
Christian Heilmann Search thearchives:
*
* About this
* Archives
* Slides
* Bookmarks
* codepo8
* @codepo8
Details
Copyright © 2024 ArchiveBay.com. All rights reserved. Terms of Use | Privacy Policy | DMCA | 2021 | Feedback | Advertising | RSS 2.0