#DNAMutations

[physicsalertofficial]

Radiation Revealed: A Groundbreaking Study Unlocks the Effects on DNA" In a world where the echoes of nuclear events still resonate, the recent release of wastewater from Japan’s Fukushima disaster has reignited concerns over radiation exposure. While ionizing radiation—a known carcinogen—has been a subject of scientific study for decades, its precise impact on human cells has remained somewhat of a mystery. A recent breakthrough study by Professor Young Seok Ju and his team at KAIST brings new insights into how radiation affects our DNA, promising to revolutionize our understanding and treatment of radiation-related health issues. The Nature of Radiation and Its Everyday Impact Understanding Ionizing Radiation Ionizing radiation, a formidable […]

[naturalwellnessjourney]

Did you know that almost 50% of people have a MTHFR gene mutation that can effect the way the body detoxes... MTHFR and Glutathione (Glutathione acts as an antioxidant, a free radical scavenger and a detoxifying agent) MTHFR and Glutathione With A MTHFR mutation, homocysteine is poorly converted to glutathione, which is your body’s master antioxidant and detoxifier. Lowered levels of glutathione are linked to all of this and.. This makes you susceptible to a wide range of problems like depression, post-partum depression, anxiety, difficulty conceiving, miscarriage, migraines, a variety of cancers, inability to detoxify properly, anemia, and much more. Heres a great article if you are interested in more info: https://nicolejardim.com/mthfr-what-is-it-and-why-you-should-know-for-the-sake-of-your-fertility/ #dna #dnaday #dnamutation #discoverdna #genetics #genetic #genetictesting #geneticdisorder #geneticlab #dnagenetics #healthyliving https://www.instagram.com/p/BwshzdVnFe1/?utm_source=ig_tumblr_share&igshid=15awmv2480077

[gvcnt]

Paper annotations #1

tmVar 2.0: integrating genomic variant information from literature with dbSNP and ClinVar for precision medicine

Intro

Each SNP record in dbSNP (Database for Short Genetic Variations) is assigned a stable and unique variant accession identifier (RSID), which is linked to aggregated information (associated gene, functional consequences and allele frequency).

NHGRI-EBI GWAS Catalog is a collection of genome-wide set of genetic variants in different individuals associated with a trait [1].

For genomic variant information in cancer, COSMIC contains expert-curated data of somatic mutations [2].

CIViC is an open-acess, open-source knowledgebase for expert-crowdsourced of clinical interpretation of variants in cancer [3].

DisGeNET is a recent platform integrating information on gene-variation-disease associations from several public data sources and the literature [4].

"The first version of tmVar is a high-performance software for external evaluations comparing formats in the PubMed article and re-writing them in HGVS formats (e.g. p.Pro12Ala). However, HGVS names can still be ambiguous: one can often be linked to multiple RSIDs (e.g. rs767209585 and rs773973301 are both associated with p.Pro12Ala). Indeed, on average, one protein mutation in HGVS name maps to more than ten RSIDs".

Why not use HGVS genomic nomeclature? HGVS isn't just the protein nomeclature, it considers the gene, genomic location and protein location.

"in this work we first extended tmVar to automatically normalize the variant mentions and map them to standard dbSNP RS numbers."

It includes variants not present in dbSNP that could be considered rares?

Using the human gold standard they compare tmVar 2.0 against SETH, another automated tool to text-mining mutations [5] and had nearly 90% in F-measures.

about F1

"Our analysis includes: (i) comparing the text-mined PMID-RSID pairs with annotated dbSNP data, (ii) analyzing variants curated in ClinVar and (iii) discovering novel connections between variants, gene and diseases"

"Our investigation revealed 161 178 missing RSID-PMID links in dbSNP and 41 889 RSIDs not found in ClinVar. Moreover, our results also include over 120 000 rare variants (MAF 0.01) in nearly 4000 genes across the genome which are presumed to be deleterious and are not frequently found in the general population."

MAF isn't enough to considered a variant patogenic, maybe more information had been considered

Materials and methods

"tmVar applies ML approach to tag mutation mentions in free txt, detecting terms that represent variants of multiple types (SNV, insertion, deletion, etc) and sequence context (genomic, transcript and protein) and returns its results in HGVS form".

"Before we performed normalization, we first built a comprehensive lexicon containing all possible mappings between variant mentions and RSIDs, harvested from three difference sources: dbSNP, Clinvar and PubMed".

Two main strategies were used to find corresponding RSID: pattern matching '[Gene/Protein] ([DNAMutation] with [RSID])' and a list of candidate RSIDs for search using lexicon. For disambiguation, they use global information in the entire article and/or variant-associated gene information, also using GNormPlus an end-to-end and open source system that handles both gene mention and identifier detection.

The frequency data used as population frequency come from 1000 Genomes Phase 3, Exac, NHLBI GO ESP and gnomAD.

Results

"The tmVar RS results (62452 RS numbers in 9782 genes) were categorized using dbSNP and ClinVar annontations along multiple facets, including functional consequences (syn, non-syn, etc) based on RefSeq mRNA annotations, minor allele frequency (MAF), and clinical significance in order to prioritize their biological significance and assess their clinical impact".

Discussion

According to the table 4, OSIRIS had better results than tmVar2. So, OSIRIS could be used with tmVar2.

"our results could be used by other computational methods in bioinformatics research such as connecting genotypes with phenotypes and/or modeling gene-disease-variant relations [DisGeNeT][6]"

[dorothydelgadillo]

Splicing HTML’s DNA With CSS Attribute Selectors

Splicing HTML’s DNA With CSS Attribute Selectors

John Rhea

2018-10-23T14:00:11+02:002018-10-23T12:09:02+00:00

For most of my career, attribute selectors have been more magic than science. I’d stare, gobsmacked, at the CSS for outputting a link in a print style sheet, understanding nothing. I’d dutifully copy, and paste it into my print stylesheet then run off to put out whatever project was the largest burning trash heap.

But you don’t have to stare slack-jawed at CSS attribute selectors anymore. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic. You may think I’m promising too much and you’re right, but once you understand the power of attribute selectors, you might feel like exaggerating yourself.

On the most basic level, you put an HTML attribute in square brackets and call it an attribute selector like so:

[href] { color: chartreuse; }

The text of any element that has an href and doesn’t have a more specific selector will now magically turn chartreuse. Attribute selector specificity is the same as classes.

Note: For more on the cage match that is CSS specificity, you can read “CSS Specificity: Things You Should Know” or if you like Star Wars: “CSS Specificity Wars”.

But you can do far more with attribute selectors. Just like your DNA, they have built-in logic to help you choose all kinds of attribute combinations and values. Instead of only exact matching the way a tag, class, or id selector would, they can match any attribute and even string values within attributes.

Front-end is messy and complicated these days. That's why we publish articles, printed books and webinars with useful techniques to improve your work. Even better: Smashing Membership with a growing selection of front-end & UX goodies. So you get your work done, better and faster.

Explore Smashing Membership ↬

Attribute Selection

Attribute selectors can live on their own or be more specific, i.e. if you need to select all div tags that had a title attribute.

div[title]

But you could also select the children of divs that have a title by doing the following:

div [title]

To be clear, no space between them means the attribute is on the same element (just like an element and class without a space), and a space between them means a descendant selector, i.e. selecting the element’s children who have the attribute.

You can get far more granular in how you select attributes including the values of attributes.

div[title="dna"]

The above selects all divs with an exact title of “dna”. A title of “dna is awesome” or “dnamutation” wouldn’t be selected, though there are selector algorithms that handle each of those cases (and more). We’ll get to those soon.

Note: Quotation marks are not required in attribute selectors in most cases, but I will use them because I believe it increases clarity and ensures edge cases work appropriately.

If you wanted to select “dna” out of a space separated list like “my beautiful dna” or “mutating dna is fun!” you can add a tilde or “squiggly,” as I like to call it, in front of the equal sign.

div[title~="dna"]

You can select titles such as “dontblamemeblamemydna” or “his-stupidity-is-from-upbringing-not-dna” then you can use the dollar sign $ to match the end of a title.

[title$="dna"]

To match the front of an attribute value such as titles of “dnamutants” or “dna-splicing-for-all” use a caret.

[title^="dna"]

While having an exact match is helpful it might be too tight of a selection, and the caret front match might be too wide for your needs. For instance, you might not want to select a title of “genealogy”, but still select both “gene” and “gene-data”. The exclamation point or “bang,” as I like to call it, is just that, it does an exact match, but includes when the exact match is followed by a dash.

[title!="gene"]

To be clear, though this construction often means “not equal” in many programming languages, in CSS attribute selectors it is an exact match plus an exact match at the beginning of the value followed by a dash.

Lastly, there’s a full search attribute operator that will match any substring.

[title*="dna"]

But use it wisely as the above will match “I-like-my-dna-like-my-meat-rare” as well as “edna”, “kidnapping”, and “echidnas” (something Edna really shouldn’t do.)

What makes these attribute selectors even more powerful is that they’re stackable — allowing you to select elements with multiple matching factors.

But you need to find the a tag that has a title and has a class ending in “genes”? Here’s how:

a[title][class$="genes"]

Not only can you select the attributes of an HTML element you can also print their mutated genes using pseudo-“science” (meaning pseudo-elements and the content declaration).

<span class="joke" title="Gene Editing!">What’s the first thing a biotech journalist does after finishing the first draft of an article?</span>

.joke:hover:after { content: "Answer:" attr(title); display: block; }

The code above will show the answer to one of the worst jokes ever written on hover (yes, I wrote it myself, and, yes, calling it a “joke” is being generous).

The last thing to know is that you can add a flag to make the attribute searches case insensitive. You add an i before the closing square bracket.

[title*="DNA" i]

And thus it would match “dna”, “DNA”, “dnA”, and any other variation.

The only downside to this is that the i only works in Firefox, Chrome, Safari, Opera and a smattering of mobile browsers.

Now that we’ve seen how to select with attribute selectors, let’s look at some use cases. I’ve divided them into two categories: General Uses and Diagnostics.

General Uses

Style By Input Type

You can style input types differently, e.g. email vs. phone.

input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }

Display Telephone Links

You can hide a phone number at certain sizes and display a phone link instead to make calling easier on a phone.

span.phone { display: none; } a[href^="tel"] { display: block; }

Internal vs. External Links, Secure vs. Insecure

You can treat internal and external links differently and style secure links differently from insecure links.

a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="http://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }

Download Icons

One attribute HTML5 gave us was “download” which tells the browser to, you guessed it, download that file rather than trying to open it. This is useful for PDFs and DOCs you want people to access but don’t want them to open right now. It also makes the workflow for downloading lots of files in a row easier. The downside to the download attribute is that there’s no default visual that distinguishes it from a more traditional link. Often this is what you want, but when it’s not, you can do something like the below.

a[download]:after { content: url(download-arrow.svg); }

You could also communicate file types with different icons like PDF vs. DOCX vs. ODF, and so on.

a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }

You could also make sure that those icons were only on downloadable links by stacking the attribute selector.

a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }

Override Or Reapply Obsolete/Deprecated Code

We’ve all come across old sites that have outdated code, but sometimes updating the code isn’t worth the time it’d take to do it on six thousand pages. You might need to override or even reapply a style implemented as an attribute before HTML5.

<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }

Override Specific Inline Styles

Sometimes you’ll come across inline styles that are gumming up the works, but they’re coming from code outside your control. It should be said if you can change them that would be ideal, but if you can’t, here’s a workaround.

Note: This works best if you know the exact property and value you want to override, and if you want it overridden wherever it appears.

For this example, the element’s margin is set in pixels, but it needs to be expanded and set in ems so that the element can re-adjust properly if the user changes the default font size.

<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"Teenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; }

Note: This approach should be used with extreme caution as if you ever need to override this style you’ll fall into an !important war and kittens will die.

Showing File Types

The list of acceptable files for a file input is invisible by default. Typically, we’d use a pseudo element for exposing them and, though you can’t do pseudo elements on most input tags (or at all in Firefox or Edge), you can use them on file inputs.

<input type="file" accept="pdf,doc,docx"> [accept] { content: "Acceptable file types: " attr(accept); }

HTML Accordion Menu

The not-well-publicized details and summary tag duo are a way to do expandable/accordion menus with just HTML. Details wrap both the summary tag and the content you want to display when the accordion is open. Clicking on the summary expands the detail tag and adds an open attribute. The open attribute makes it easy to style an open details tag differently from a closed details tag.

<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details>

details[open] { background-color: hotpink; }

Printing Links

Showing URLs in print styles led me down this road to understanding attribute selectors. You should know how to construct it yourself now. You simply select all a tags with an href, add a pseudo-element, and print them using attr() and content.

a[href]:after { content: " (" attr(href) ") "; }

Custom Tooltips

Creating custom tooltips is fun and easy with attribute selectors (okay, fun if you’re a nerd like me, but easy either way).

Note: This code should get you in the general vicinity, but may need some tweaks to the spacing, padding, and color scheme depending on your site’s environment and whether you have better taste than me or not.

[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }

AccessKeys

One of the great things about the web is that it provides many different options for accessing information. One rarely used attribute is the ability to set an accesskey so that that item can be accessed directly through a key combination and the letter set by accesskey (the exact key combination depends on the browser). But there’s no easy way to know what keys have been set on a website.

The following code will show those keys on :focus. I don’t use on hover because most of the time people who need the accesskey are those who have trouble using a mouse. You can add that as a second option, but be sure it isn’t the only option.

a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

Diagnostics

These options are for helping you identify issues either during the build process or locally while trying to fix issues. Putting these on your production site will make errors stick out to your users.

Audio Without Controls

I don’t use the audio tag too often, but when I do use it, I often forget to include the controls attribute. The result: nothing is shown. If you’re working in Firefox, this code can help you suss out if you’ve got an audio element hiding or if syntax or some other issue is preventing it from appearing (it only works in Firefox).

audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }

No Alt Text

Images without alt text are a logistics and accessibility nightmare. They’re hard to find by just looking at the page, but if you add this they’ll pop right out.

Note: I use outline instead of border because borders could add to the element’s width and mess up the layout. outline does not add width.

img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }

Asynchronous Javascript Files

Web pages can be a conglomerate of content management systems and plugins and frameworks and code that Ted (sitting three cubicles over) wrote on vacation because the site was down and he fears your boss. Figuring out what JavaScript loads asynchronously and what doesn’t can help you focus on where to enhance page performance.

script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }

Javascript Event Elements

You can also highlight elements that have a JavaScript event attribute to refactor them into your JavaScript file. I’ve focused on the OnMouseOver attribute here, but it works for any of the JavaScript event attributes.

[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }

Hidden Items

If you need to see where your hidden elements or hidden inputs live you can show them with:

[hidden], [type="hidden"] { display: block; }

But with all these amazing capabilities you think there must be a catch. Surely attribute selectors must only work while flagged in Chrome or in the nightly builds of Fiery Foxes on the Edge of a Safari. This is just too good to be true. And, unfortunately, there is a catch.

If you want to work with attribute selectors in that most beloved of browsers — that is, IE6 — you won’t be able to. (It’s okay; let the tears fall. No judgments.) Pretty much everywhere else you’re good to go. Attribute selectors are part of the CSS 2.1 spec and thus have been in browsers for the better part of a decade.

And so these selectors should no longer be magical to you but revealed as a sufficiently advanced technology. They are more science than magic, and now that you know their deepest secrets, it’s up to you. Go forth and work mystifying wonders of science upon the web.

(dm, ra, yk, il)

[nancydsmithus]

Splicing HTML’s DNA With CSS Attribute Selectors

Splicing HTML’s DNA With CSS Attribute Selectors

John Rhea

2018-10-23T13:15:11+02:002018-10-23T11:22:43+00:00

For most of my career, attribute selectors have been more magic than science. I’d stare, gobsmacked, at the CSS for outputting a link in a print style sheet, understanding nothing. I’d dutifully copy, and paste it into my print stylesheet then run off to put out whatever project was the largest burning trash heap.

But you don’t have to stare slack-jawed at CSS attribute selectors anymore. By the end of this article, you’ll use them to run diagnostics on your site, fix otherwise unsolvable problems, and generate technologic experiences so advanced they feel like magic. You may think I’m promising too much and you���re right, but once you understand the power of attribute selectors, you might feel like exaggerating yourself.

On the most basic level, you put an HTML attribute in square brackets and call it an attribute selector like so:

[href] { color: chartreuse; }

The text of any element that has an href and doesn’t have a more specific selector will now magically turn chartreuse. Attribute selector specificity is the same as classes.

Note: For more on the cage match that is CSS specificity, you can read “CSS Specificity: Things You Should Know” or if you like Star Wars: “CSS Specificity Wars”.

But you can do far more with attribute selectors. Just like your DNA, they have built-in logic to help you choose all kinds of attribute combinations and values. Instead of only exact matching the way a tag, class, or id selector would, they can match any attribute and even string values within attributes.

Front-end is messy and complicated these days. That's why we publish articles, printed books and webinars with useful techniques to improve your work. Even better: Smashing Membership with a growing selection of front-end & UX goodies. So you get your work done, better and faster.

Explore Smashing Membership ↬

Attribute Selection

Attribute selectors can live on their own or be more specific, i.e. if you need to select all div tags that had a title attribute.

div[title]

But you could also select the children of divs that have a title by doing the following:

div [title]

To be clear, no space between them means the attribute is on the same element (just like an element and class without a space), and a space between them means a descendant selector, i.e. selecting the element’s children who have the attribute.

You can get far more granular in how you select attributes including the values of attributes.

div[title="dna"]

The above selects all divs with an exact title of “dna”. A title of “dna is awesome” or “dnamutation” wouldn’t be selected, though there are selector algorithms that handle each of those cases (and more). We’ll get to those soon.

Note: Quotation marks are not required in attribute selectors in most cases, but I will use them because I believe it increases clarity and ensures edge cases work appropriately.

If you wanted to select “dna” out of a space separated list like “my beautiful dna” or “mutating dna is fun!” you can add a tilde or “squiggly,” as I like to call it, in front of the equal sign.

div[title~="dna"]

You can select titles such as “dontblamemeblamemydna” or “his-stupidity-is-from-upbringing-not-dna” then you can use the dollar sign $ to match the end of a title.

[title$="dna"]

To match the front of an attribute value such as titles of “dnamutants” or “dna-splicing-for-all” use a caret.

[title^="dna"]

While having an exact match is helpful it might be too tight of a selection, and the caret front match might be too wide for your needs. For instance, you might not want to select a title of “genealogy”, but still select both “gene” and “gene-data”. The exclamation point or “bang,” as I like to call it, is just that, it does an exact match, but includes when the exact match is followed by a dash.

[title!="gene"]

To be clear, though this construction often means “not equal” in many programming languages, in CSS attribute selectors it is an exact match plus an exact match at the beginning of the value followed by a dash.

Lastly, there’s a full search attribute operator that will match any substring.

[title*="dna"]

But use it wisely as the above will match “I-like-my-dna-like-my-meat-rare” as well as “edna”, “kidnapping”, and “echidnas” (something Edna really shouldn’t do.)

What makes these attribute selectors even more powerful is that they’re stackable — allowing you to select elements with multiple matching factors.

But you need to find the a tag that has a title and has a class ending in “genes”? Here’s how:

a[title][class$="genes"]

Not only can you select the attributes of an HTML element you can also print their mutated genes using pseudo-“science” (meaning pseudo-elements and the content declaration).

<span class="joke" title="Gene Editing!">What’s the first thing a biotech journalist does after finishing the first draft of an article?</span>

.joke:hover:after { content: "Answer:" attr(title); display: block; }

The code above will show the answer to one of the worst jokes ever written on hover (yes, I wrote it myself, and, yes, calling it a “joke” is being generous).

The last thing to know is that you can add a flag to make the attribute searches case insensitive. You add an i before the closing square bracket.

[title*="DNA" i]

And thus it would match “dna”, “DNA”, “dnA”, and any other variation.

The only downside to this is that the i only works in Firefox, Chrome, Safari, Opera and a smattering of mobile browsers.

Now that we’ve seen how to select with attribute selectors, let’s look at some use cases. I’ve divided them into two categories: General Uses and Diagnostics.

General Uses

Style By Input Type

You can style input types differently, e.g. email vs. phone.

input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }

Display Telephone Links

You can hide a phone number at certain sizes and display a phone link instead to make calling easier on a phone.

span.phone { display: none; } a[href^="tel"] { display: block; }

Internal vs. External Links, Secure vs. Insecure

You can treat internal and external links differently and style secure links differently from insecure links.

a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="http://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }

Download Icons

One attribute HTML5 gave us was “download” which tells the browser to, you guessed it, download that file rather than trying to open it. This is useful for PDFs and DOCs you want people to access but don’t want them to open right now. It also makes the workflow for downloading lots of files in a row easier. The downside to the download attribute is that there’s no default visual that distinguishes it from a more traditional link. Often this is what you want, but when it’s not, you can do something like the below.

a[download]:after { content: url(download-arrow.svg); }

You could also communicate file types with different icons like PDF vs. DOCX vs. ODF, and so on.

a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }

You could also make sure that those icons were only on downloadable links by stacking the attribute selector.

a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }

Override Or Reapply Obsolete/Deprecated Code

We’ve all come across old sites that have outdated code, but sometimes updating the code isn’t worth the time it’d take to do it on six thousand pages. You might need to override or even reapply a style implemented as an attribute before HTML5.

<div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }

Override Specific Inline Styles

Sometimes you’ll come across inline styles that are gumming up the works, but they’re coming from code outside your control. It should be said if you can change them that would be ideal, but if you can’t, here’s a workaround.

Note: This works best if you know the exact property and value you want to override, and if you want it overridden wherever it appears.

For this example, the element’s margin is set in pixels, but it needs to be expanded and set in ems so that the element can re-adjust properly if the user changes the default font size.

<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"Teenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; }

Note: This approach should be used with extreme caution as if you ever need to override this style you’ll fall into an !important war and kittens will die.

Showing File Types

The list of acceptable files for a file input is invisible by default. Typically, we’d use a pseudo element for exposing them and, though you can’t do pseudo elements on most input tags (or at all in Firefox or Edge), you can use them on file inputs.

<input type="file" accept="pdf,doc,docx"> [accept] { content: "Acceptable file types: " attr(accept); }

HTML Accordion Menu

The not-well-publicized details and summary tag duo are a way to do expandable/accordion menus with just HTML. Details wrap both the summary tag and the content you want to display when the accordion is open. Clicking on the summary expands the detail tag and adds an open attribute. The open attribute makes it easy to style an open details tag differently from a closed details tag.

<details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details>

details[open] { background-color: hotpink; }

Printing Links

Showing URLs in print styles led me down this road to understanding attribute selectors. You should know how to construct it yourself now. You simply select all a tags with an href, add a pseudo-element, and print them using attr() and content.

a[href]:after { content: " (" attr(href) ") "; }

Custom Tooltips

Creating custom tooltips is fun and easy with attribute selectors (okay, fun if you’re a nerd like me, but easy either way).

Note: This code should get you in the general vicinity, but may need some tweaks to the spacing, padding, and color scheme depending on your site’s environment and whether you have better taste than me or not.

[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }

AccessKeys

One of the great things about the web is that it provides many different options for accessing information. One rarely used attribute is the ability to set an accesskey so that that item can be accessed directly through a key combination and the letter set by accesskey (the exact key combination depends on the browser). But there’s no easy way to know what keys have been set on a website.

The following code will show those keys on :focus. I don’t use on hover because most of the time people who need the accesskey are those who have trouble using a mouse. You can add that as a second option, but be sure it isn’t the only option.

a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

Diagnostics

These options are for helping you identify issues either during the build process or locally while trying to fix issues. Putting these on your production site will make errors stick out to your users.

Audio Without Controls

I don’t use the audio tag too often, but when I do use it, I often forget to include the controls attribute. The result: nothing is shown. If you’re working in Firefox, this code can help you suss out if you’ve got an audio element hiding or if syntax or some other issue is preventing it from appearing (it only works in Firefox).

audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }

No Alt Text

Images without alt text are a logistics and accessibility nightmare. They’re hard to find by just looking at the page, but if you add this they’ll pop right out.

Note: I use outline instead of border because borders could add to the element’s width and mess up the layout. outline does not add width.

img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }

Asynchronous Javascript Files

Web pages can be a conglomerate of content management systems and plugins and frameworks and code that Ted (sitting three cubicles over) wrote on vacation because the site was down and he fears your boss. Figuring out what JavaScript loads asynchronously and what doesn’t can help you focus on where to enhance page performance.

script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }

Javascript Event Elements

You can also highlight elements that have a JavaScript event attribute to refactor them into your JavaScript file. I’ve focused on the OnMouseOver attribute here, but it works for any of the JavaScript event attributes.

[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }

Hidden Items

If you need to see where your hidden elements or hidden inputs live you can show them with:

[hidden], [type="hidden"] { display: block; }

But with all these amazing capabilities you think there must be a catch. Surely attribute selectors must only work while flagged in Chrome or in the nightly builds of Fiery Foxes on the Edge of a Safari. This is just too good to be true. And, unfortunately, there is a catch.

If you want to work with attribute selectors in that most beloved of browsers — that is, IE6 — you won’t be able to. (It’s okay; let the tears fall. No judgments.) Pretty much everywhere else you’re good to go. Attribute selectors are part of the CSS 2.1 spec and thus have been in browsers for the better part of a decade.

And so these selectors should no longer be magical to you but revealed as a sufficiently advanced technology. They are more science than magic, and now that you know their deepest secrets, it’s up to you. Go forth and work mystifying wonders of science upon the web.

(dm, ra, yk, il)

[tppanzstop-blog]

Epigenetics: The Evolution Revolution - Israel Rosenfield and Edward Ziff * The Epigenetics Revolution - Nessa Carey.

Epigenetics: The Evolution Revolution – Israel Rosenfield and Edward Ziff * The Epigenetics Revolution – Nessa Carey.

So something that happened in one pregnant population affected their children’s children. This raised the really puzzling question of how these effects were passed on to subsequent generations.

These effects arise from a newly recognized genetic mechanism called epigenesis, which enables the environment to make long lasting changes in the way genes are expressed.

That’s what happens when cells…

[meganews77-blog]

Weirdest Human Genetic Mutations in The World

No two people are alike, due to the subtly different ways our genomes are expressed. But sometimes these biological differences lead to genetic mutations that are extremely rare, and sometimes debilitating. Historically, many people suffering from these mutations were labeled monsters or freaks — but today, we know they are simply part of the broad spectrum of genetic variations in our species. Here are 10 of the most unusual genetic mutations we've identified in humans.

1. Progeria This genetic disorder is as rare as it is severe. The classic form of the disease, called Hutchinson-Gilford Progeria, causes accelerated aging. Most children who have progeria essentially die of age-related diseases around the age of 13, but some can live into their 20s. Death is typically caused by a heart attack or stroke. It affects as few as one per eight million live births.

2. Uner Tan Syndrome Uner Tan syndrome is a somewhat controversial condition, whose most obvious property is that people who suffer from it walk on all fours. UTS is a syndrome that was proposed by the Turkish evolutionary biologist Üner Tan after studying five members of the Ulas family in rural Turkey. These individuals walk with a quadrupedal locomotion, use primitive speech, and have a congenital brain impairment (including “disturbed conscious experience”). The family was featured in a 2006 BBC2 documentary called, "The Family That Walks On All Fours." Tan describes it like this The genetic nature of this syndrome suggests a backward stage in human evolution, which is most probably caused by a genetic mutation, rendering, in turn, the transition from quadrupedality to bipedality. This would then be consistent with theories of punctuated evolution. The new syndrome, says Tan, “may be used as a live model for human evolution.” Some experts think this is bunk, and that genetics may have very little to do with it.

3. Hypertrichosis Hypertrichosis is also called “werewolf syndrome” or Ambras syndrome, and it affects as few as one in a billion people; and in fact, only 50 cases have been documented since the Middle Ages. People with hypertrichosis have excessive hair on the shoulders, face, and ears. Studies have implicated it to a rearrangement of chromosome 8. It happens due to a disruption of the “crosstalk” between the epidermis and the dermis as hair follicles form in the 3-month fetus at the eyebrows and down to the toes. Normally, signals from the dermis send the messages to form follicles. As a follicle forms, it sends signals to prevent the area around it from also becoming a follicle, which results in the equal spacing of our five million or so follicles. Most of our body parts ignore the messages to form follicles, which explains why most of us are relatively hairless.

4. Epidermodysplasia Verruciformis Epidermodysplasia verruciformis is an extremely rare disorder that makes people prone to widespread human papillomavirus (HPV) infection. This infection causes scaly macules and papules (cutaneous squamous cell carcinomas) to grow on the hands, feet, and even face. These skin “eruptions” appear as wart-like lesions — and even wood-like and horn-like growths — with reddish-brown pigmented plaques. Typically, the skin tumors start to emerge in people between the age of 20 and 40, and the growths tend to appear on areas exposed to the sun. Also called Lewandowsky-Lutz dysplasia, there is no known cure, though treatments to scale back the growths are possible.

5. Severe Combined Immunodeficiency Disorder (SCID) Also known as the Boy in the Bubble Disease, it’s a disorder in which individuals are born without an effective immune system. The disease was made famous by virtue of the 1976 film, The Boy in the Plastic Bubble, a story inspired by the lives of David Vetter and Ted deVita. In the movie, a boy is forced to live in plastic isolation for fear of exposure to unfiltered air and the introduction of life-threatening pathogens. In real life, Vetter lived in this condition for 13 years, but he died in 1984 following an unsuccessful bone marrow transplant (a failed attempt to help him fight infections).

6. Lesch–Nyhan Syndrome LNS is a genetic disorder that affects one in every 380,000 births, nearly all of them boys. It results in an overproduction of uric acid — a waste product of normal chemical processes that’s found in blood and urine. But individuals with Lesch-Nyhan release excess uric acid through their blood which builds up under the skin causing gouty arthritis. It can also cause kidney and bladder stones.

7. Ectrodactyly Formerly known as “lobster claw hand, ”individuals with this disorder have a cleft where the middle finger or toe should be. These split-hand/split-foot malformations are rare limb deformities which can manifest in any number of ways, including cases including only the thumb and one finger (typically the little finger or little finger). It’s also associated with hearing loss. Genetically speaking, it’s caused by several factors, including deletions, translocations, and inversions in chromosome 7.

8. Proteus Syndrome

9. Trimethylaminuria

10. Marfan Syndrome

#genes #mutation #geneticdisorders #geneticmutation #mutantgenetic #humanmutation #dnamutations #mutationexamples #mutansgenetic #geneticabnormalities #rarityhuman #typesofmutations #geneticdisorderslist #typesofgenemutation #geneticdiseaseslist #causesofmutation #raregeneticdisorders #commongeneticdisorders #genemutationexamples #humangeneticdisorders #geneticmutationsinhumans #typesofgeneticdisorders #geneticallyinheriteddiseases

https://youtu.be/bfy10NEJ0q0

[dnamutationsinsidethoughts]

Aside from Point mutation and frame-shift mutations, there are also three more mutations known as MISSENSE, NONSENSE and SILENT.

[dnamutationsinsidethoughts]

Some Examples of DNA Mutations out of my WILD Imagination that could be beneficial to the modern society.

“The Flashing Ninja Spidey Turtle”

This turtle has the ability to withstand certain predators. It is mutated by the help of a spider’s DNA to grow 8 legs for acceleration. It produces electric charges coming from the DNA of an electric eel for protection and it also regenerates. The regeneration skill came from the DNA of a starfish which has the ability to regenerate.

It would be a very big help for the turtles to have these mutations because they are usually defenseless from their abusive and illegal predators which contributes to being endangered. If the illegal hunting continues, turtles would be in complete extinction which could lead to the destruction of the balancing forces or cycle in our natural environment.

“Glowing Fishes”

These fishes were mutated to glow in the darkest depths of the sea. The glowing of the fishes were cause by some of the genetic specimen of a jellyfish.

It would be a great help for the fishermen to fish even when it is done in evening. In fact, this kind of mutation could be the cause of rising of the Philippine economy.

By: Sophia Altavas