I was wondering if there is a good practice on how to write your HTML code in order to get better Sentry.io breadcrumbs inside of the issues.
It's not possible to identify the elements that the user has interacted and I think using CSS class or IDs for it is not the ideal - although we can customize the breadcrumbs, looks like it's not a good practice to get the text inside the tag as per some issues found on Sentry Github repository.
I was thinking about aria-label, does anyone has any advices on it?
Right now is very hard to understand the user steps when reading the breadcrumbs.
This can be solved using the beforeBreadcrumb hook / filtering events.
Simply add
beforeBreadcrumb(breadcrumb, hint) {
if (breadcrumb.category === 'ui.click') {
const { target } = hint.event;
if (target.ariaLabel) {
breadcrumb.message = target.ariaLabel;
}
}
return breadcrumb;
}
... to your Sentry.init() configuration.
Sentry.init({
dsn:...
Resulting in something like this:
Sentry.init({
dsn: '....',
beforeBreadcrumb(breadcrumb, hint) {
if (breadcrumb.category === 'ui.click') {
const { target } = hint.event;
if (target.ariaLabel) {
breadcrumb.message = target.ariaLabel;
}
}
return breadcrumb;
}
});
More about this here: sentry.io filtering events documentation
Related
I'm looking to hook-up sort events performed on ng2-smart-table. Followed https://akveo.github.io/ng2-smart-table/#/documentation, I see bunch of events that are exposed like rowSelect, mouseover etc but I don't see sort events published/emitted by the library. I'm thinking of changing Ng2SmartTableComponent and emit an event when (sort) is called internally. May I know if anyone did it already or is there a hack I can rely upon.
The source of the sort in ng2-smart-table is shown on GitHub (link to code).
If you want to change the compare-Function (as used by default) you can add your own custom function in your ng2-smart-table-configuration:
columns: {
group_name: {
title: 'Groupname',
compareFunction(direction: any, a: any, b: any) => {
//your code
}
}
}
I was searching for an event to sort my data remotely and I have found a solution. Also I have some logic for page change event (remote paging). Here is what works for me.
ts
source: LocalDataSource = new LocalDataSource();
ngOnInit() {
this.source.onChanged().subscribe((change) => {
if (change.action === 'sort') {
this.sortingChange(change.sort);
}
else if (change.action === 'page') {
this.pageChange(change.paging.page);
}
});
}
html
<ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table>
This solution won't replace custom logic but it might help you solve your problem.
I am trying to find a way to use alternative headers in Razor Web Pages without using two _SiteLayout pages, with each _SiteLayout rendering a different _header page.
I’m trying to achieve this - If the default.cshtml page is called use header-1, if any other page is called use header-2.
I have tried all sorts of different logic with no joy, including: IsCurrentPage, Request.QueryString, Request.Url; and CurrentPage.Name.
E.G.
#if ((Request.QueryString["Default"] == null))
{
#RenderPage("/shared/_header-1.cshtml")
}
else
{
#RenderPage("/shared/_header-2.chtml")
}
And
#{
var pageUrl = this.Request.Url;
}
#if (pageUrl = "http://mycompany/Default.cshtml/") {
#RenderPage("/shared/_header-1.cshtml");
}
else
{
#RenderPage("/shared/_header-2.cshtml");
}
Does anyone have a simple method to achieve this please?
Although, I spent a long time on this, not long after posting I found an answer thanks to: Erik Philips
Add to _SiteLayout:
#if (IsSectionDefined("customHeader"))
{
#RenderSection("customHeader")
}
else
{
#RenderPage("/shared/_header.cshtml")
}
Add to default page
#section customHeader{
This is custom header
}
The common header doesn't get called in the Default page, because customHeader is specified instead; whereas, all other pages use the normal header
I am upgrading some older react component I inherited (v0.10.0) to work with the latest version of react (v0.14.8).
The following scenario stopped working:
// within a react component
onClick: function() {
// DO SOMETHING
}
getDefaultProps: function () {
return {
someProp: 'prop',
onClick: this.onClick
}
}
This is easily resolved moving the code into an anonymous function, like the following:
getDefaultProps: function () {
return {
someProp: 'prop',
onClick: function() {
//DO SOMETHING
}
}
}
My question is: why has the visibility of 'this' changed at that level and what's the best way to refactor this code? And what if I had-to/wanted-to use 'this' at that level?
Any help appreciated, as a disclaimer I am a react super-beginner!
The result of getDefaultProps() is shared across all instances of a component. That means that the result can't rely on any particular instance of the component. The reason it changed is likely because of the performance benefit from caching, although I can't say for sure.
As for refactoring the code, I'm not sure there's a silver-bullet here. From my perspective what you currently have seems like an anti-pattern. Props are meant to be passed in by consumers that have no knowledge of the inner workings of the component, so it seems odd that a default value for a prop would depend on the inner workings. Without knowing exactly what you're doing, I would say your best bet is to just use null as the default value for the prop, then check the value at runtime when you do have access to the this context.
handleSomeAction() {
if (!this.props.onClick) {
// DO SOMETHING
}
}
I want to make the "red links" (links for uncreated pages) on a MediaWiki site to become plain text, save for people logged. Perhaps also make that them don't appear at all or only appear on different situations. You can "hide" them a bit with CSS, but I prefer to actually don't feature them.
You could use the LinkBegin hook to abort the link creation for page that do not exist. Something like this:
$wgHooks['LinkBegin'][] = 'ExampleExtension::exampleExtensionLinkBegin';
class ExampleExtension {
public static function exampleExtensionLinkBegin( $dummy, $target, &$html, &$customAttribs, $query, &$options, &$ret ) {
if ( $target->exists() ) {
return true;
} else {
$ret = $html;
return false;
}
} //exampleExtensionLinkBegin
}
edit: If you are not familiar with MW extension development, I recommend that you start by reading http://www.mediawiki.org/wiki/Manual:Developing_extensions and http://www.mediawiki.org/wiki/Manual:Hooks
If you know just a little bit of PHP, you should be able to follow that without any problems.
I'm trying to use the placeholder="xxx" attribute in my web application, and I don't want to have a special visual for IE9. Can people throw out some good suggestions for achieving this functionality in IE9?
I've found a couple links on here but none of the suggested scripts were sufficient... and the answers were from mid-2011, so I figured maybe there is a better solution out there. Perhaps with a widely-adopted jQuery plugin? I do not want to use anything that requires intrusive code such as requiring a certain css class or something.
Thanks.
EDIT - I also need this to work for password input fields.
// the below snippet should work, but isn't.
$(document).ready(function() {
initPlaceholders()();
}
function initPlaceholders() {
$.support.placeholder = false;
var test = document.createElement('input');
if ('placeholder' in test) {
$.support.placeholder = true;
return function() { }
} else {
return function() {
$(function() {
var active = document.activeElement;
$('form').delegate(':text, :password', 'focus', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && _val == _placeholder) {
$(this).val('').removeClass('hasPlaceholder');
}
}).delegate(':text, :password', 'blur', function() {
var _placeholder = $(this).attr('placeholder'),
_val = $(this).val();
if (_placeholder != '' && (_val == '' || _val == _placeholder)) {
$(this).val(_placeholder).addClass('hasPlaceholder');
}
}).submit(function() {
$(this).find('.hasPlaceholder').each(function() { $(this).val(''); });
});
$(':text, :password').blur();
$(active).focus();
});
}
}
}
We just researched the same thing. We decided on reusing this gist, by Aaron McCall, after making some minor changes. The main advantage is that it's simple, easy to understand code:
Remove the kernel and setup_placeholders parts. Just call it immediately in an anonymous function.
Add var before test.
For browsers that support placeholder, it simply falls back to that. It also handles new input elements (note the use of delegate) in existing forms. But does not handle dynamic new form elements. It could probably be modified to do so with jQuery.on.
If you don't like this one, you can use one of the ones here. However, some of them are overcomplicated, or have questionable design decisions like setTimeout for detecting new elements.
Note that it needs to use two pairs of parens, since you're calling an anonymous function, then calling the returned function (this could be factored out differently):
(function () {
// ...
})()();
I wrote a jquery plugin a while back that adds the placeholder support to any browser that does not support it and does nothing in those that do.
Placeholder Plugin
Here's a jQuery plugin that works with password fields as well. It's not as tiny as the code suggested by Matthew but it has a few more fixes in it. I've used this successfully together with H5Validate as well.
http://webcloud.se/code/jQuery-Placeholder/