w Copper–tripeptides (cuzymes) with peroxidase-mimetic activity By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17408-17415DOI: 10.1039/D0RA02472D, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Le Truc Nguyen, Wing Fat Ho, Kun-Lin YangCopper–tripeptide complexs (cuzyme) exhibited peroxidase-like activities that use hydrogen peroxide to oxidize substrates such as 2,2-azino-bis(3-ethylbenzothiazoline-6-sulfonic acid) (ATBS) and trypan blue dye.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w One pot fabrication of fluorescein functionalized manganese dioxide for fluorescence “Turn OFF–ON” sensing of hydrogen peroxide in water and cosmetic samples By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17506-17514DOI: 10.1039/D0RA01980A, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Hassan Refat H. Ali, Ahmed I. Hassan, Yasser F. Hassan, Mohamed M. El-WekilThe fluorometric nanoprobe was fabricated via doping of fluorescein dye in MnO2 nanosheets (FLS/MnO2 NS) via facile co-precipitation method. It was used for analysis of H2O2 in different matrices through liberation of FLS after reduction of MnO2 NS.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Synthesis and gas permeation properties of thermally rearranged poly(ether-benzoxazole)s with low rearrangement temperatures By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17461-17472DOI: 10.1039/D0RA00145G, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Yunhua Lu, Jianhua Zhang, Guoyong Xiao, Lin Li, Mengjie Hou, Junyi Hu, Tonghua WangA series of poly(ether-benzoxazole)(PEBO) for gas separation were prepared from 9,9-bis[4-(4-amino-3-hydroxylphenoxy)phenyl]fluorene based hydroxyl-containing poly(ether-imide)s (HPEIs) with low rearrangement temperatures.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Development of novel N-(6-methanesulfonyl-benzothiazol-2-yl)-3-(4-substituted-piperazin-1-yl)-propionamides with cholinesterase inhibition, anti-β-amyloid aggregation, neuroprotection and cognition enhancing properties for the therapy of Alzheimer's d By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17602-17619DOI: 10.1039/D0RA00663G, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Chandra Bhushan Mishra, Shruti Shalini, Siddharth Gusain, Amresh Prakash, Jyoti Kumari, Shikha Kumari, Anita Kumari Yadav, Andrew M. Lynn, Manisha TiwariA novel series of benzothiazole–piperazine hybrids were rationally designed, synthesized, and evaluated as multifunctional ligands against Alzheimer's disease (AD).The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Enhanced thermal stability, hydrophobicity, UV radiation resistance, and antibacterial properties of wool fabric treated with p-aminobenzenesulphonic acid By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17515-17523DOI: 10.1039/D0RA02267E, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Mohammad Mahbubul HassanThe treatment with para-aminobenzenesulphonic acid produced a multifunctional wool fabric with enhanced hydrophobicity, thermal stability, UV resistance, and antibacterial properties.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Elimination of humic acid in water: comparison of UV/PDS and UV/PMS By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17627-17634DOI: 10.1039/D0RA01787F, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Shoufeng Tang, Jiachen Tang, Deling Yuan, Zetao Wang, Yating Zhang, Yandi RaoIn this work, UV-activated persulphate treatment (UV/PDS and UV/PMS) was found to be an effective method for HA removal.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Ultrathin δ-MnO2 nanoflakes with Na+ intercalation as a high-capacity cathode for aqueous zinc-ion batteries By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17702-17712DOI: 10.1039/D0RA02556A, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Haijun Peng, Huiqing Fan, Chenhui Yang, Yapeng Tian, Chao Wang, Jianan SuiSodium-ion intercalated δ-MnO2 nanoflakes are applied in an aqueous rechargeable zinc battery cathode with high energy density and excellent durable stability.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w A facile method for preparing Yb3+-doped perovskite nanocrystals with ultra-stable near-infrared light emission By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17635-17641DOI: 10.1039/D0RA01897J, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Chunqian Zhang, Aidi Zhang, Taoran Liu, Lin Zhou, Jun Zheng, Yuhua Zuo, Yongqi He, Juhao LiA facile method for fabricating CsPbBr3:Yb3+@SiO2 NCs which guarantees high PLQY and excellent stability at the same time.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Novel lightweight open-cell polypropylene foams for filtering hazardous materials By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17694-17701DOI: 10.1039/D0RA01499K, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Fei Wu, Pengke Huang, Haibin Luo, Jin Wang, Bin Shen, Qian Ren, Pei He, Hao Zheng, Liyang Zhang, Wenge ZhengLightweight polypropylene foams with similar geometries but different porous structures were prepared as filters for potentially hazardous materials via supercritical CO2 extrusion foaming without the use of harmful reagents and the problems of floating micro-nano fibers.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Dip-coating decoration of Ag2O nanoparticles on SnO2 nanowires for high-performance H2S gas sensors By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17713-17723DOI: 10.1039/D0RA02266G, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Tran Thi Ngoc Hoa, Nguyen Van Duy, Chu Manh Hung, Nguyen Van Hieu, Ho Huu Hau, Nguyen Duc HoaAg2O nanoparticles decorated on the surface of on-chip growth SnO2 nanowires by a dip-coating method possessed excellent sensing performance for H2S gas.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Position-locking of volatile reaction products by atmosphere and capping layers slows down photodecomposition of methylammonium lead triiodide perovskite By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17534-17542DOI: 10.1039/D0RA03572F, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Fengshuo Zu, Thorsten Schultz, Christian M. Wolff, Dongguen Shin, Lennart Frohloff, Dieter Neher, Patrick Amsalem, Norbert KochGas pressure and capping layers under ultrahigh vacuum prevent methylammonium lead triiodide photo-degradation due to efficient back-reaction of volatile compounds.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Work function modification of PEDOT:PSS by mixing with barium acetylacetonate By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17673-17680DOI: 10.1039/D0RA02575E, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.K. L. Woon, W. S. Wong, N. Chanlek, H. Nakajima, S. Tunmee, V. S. Lee, A. Ariffin, P. SongsiriritthigulModification of poly(3,4-ethylenedioxythiophene)polystyrene sulfonate as electron injection layer.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Europium oxide nanorod-reduced graphene oxide nanocomposites towards supercapacitors By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17543-17551DOI: 10.1039/C9RA11012G, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Parisa Aryanrad, Hamid Reza Naderi, Elmira Kohan, Mohammad Reza Ganjali, Masoud Baghernejad, Amin Shiralizadeh DezfuliFast charge/discharge cycles are necessary for supercapacitors applied in vehicles including, buses, cars and elevators.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w A novel series of phenolic temozolomide (TMZ) esters with 4 to 5-fold increased potency, compared to TMZ, against glioma cells irrespective of MGMT expression By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17561-17570DOI: 10.1039/D0RA02686G, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Leroy Shervington, Oliver Ingham, Amal ShervingtonThe standard of care treatment for patients diagnosed with glioblastoma multiforme (GBM) is temozolomide (TMZ).The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w A highly sensitive, selective and renewable carbon paste electrode based on a unique acyclic diamide ionophore for the potentiometric determination of lead ions in polluted water samples By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17552-17560DOI: 10.1039/D0RA01435D, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.M. A. Zayed, Walaa H. Mahmoud, Ashraf A. Abbas, Aya E. Ali, Gehad G. MohamedDue to the toxicity of lead(II) to all living organisms destroying the central nervous system and leading to circulatory system and brain disorders, the development of effective and selective lead(II) ionophores for its detection is very important.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w A chitosan-based edible film with clove essential oil and nisin for improving the quality and shelf life of pork patties in cold storage By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17777-17786DOI: 10.1039/D0RA02986F, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Karthikeyan Venkatachalam, Somwang LekjingThis study assessed chitosan (CS)-based edible films with clove essential oil (CO) and nisin (NI) singly or in combination, for improving quality and shelf life of pork patties stored in cold conditions.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Dependence on co-adsorbed water in the reforming reaction of ethanol on a Rh(111) surface By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17787-17794DOI: 10.1039/D0RA02015J, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Yu-Yao Hsia, Po-Cheng Chien, Lu-Hsin Lee, Yu-Ling Lai, Li-Chung Yu, Yao-Jane Hsu, Jeng-Han Wang, Meng-Fan LuoAdsorbed ethanol molecules penetrated readily through pre-adsorbed water to react at the Rh surface; they decomposed at a promoted probability.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Microwave roasting of blast furnace slag for carbon dioxide mineralization and energy analysis By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17836-17844DOI: 10.1039/D0RA02846K, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Zike Han, Jianqiu Gao, Xizhi Yuan, Yanjun Zhong, Xiaodong Ma, Zhiyuan Chen, Dongmei Luo, Ye WangThis paper highlights the potential of microwave roasting in solid-waste treatment and carbon dioxide storage.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Enhanced methane gas storage in the form of hydrates: role of the confined water molecules in silica powders By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17795-17804DOI: 10.1039/D0RA01754J, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Pinnelli S. R. Prasad, Burla Sai Kiran, Kandadai SowjanyaRapid and efficient methane hydrate conversions by utilising the water molecules confined in intra- and inter-granular space of silica powders.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Synthesis, characterization and corrosion inhibition behavior of 2-aminofluorene bis-Schiff bases in circulating cooling water By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17816-17828DOI: 10.1039/D0RA01903H, Paper Open Access This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Wenchang Wei, Zheng Liu, Chuxin Liang, Guo-Cheng Han, Jiaxing Han, Shufen ZhangTwo new bis-Schiff bases, namely 2-bromoisophthalaldehyde-2-aminofluorene (M1) and glutaraldehyde 2-aminofluorene (M2) were synthesized and were characterized, the potentiodynamic polarization curve confirmed that they were anode type inhibitors.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Correction: Narrowing band gap and enhanced visible-light absorption of metal-doped non-toxic CsSnCl3 metal halides for potential optoelectronic applications By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17869-17869DOI: 10.1039/D0RA90054K, Correction Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Jakiul Islam, A. K. M. Akther HossainThe content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Effect of new carbonyl cyanide aromatic hydrazones on biofilm inhibition against methicillin resistant Staphylococcus aureus By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17854-17861DOI: 10.1039/D0RA03124K, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Xueer Lu, Ziwen Zhang, Yingying Xu, Jun Lu, Wenjian Tang, Jing Zhang2e and 2j with strong p-NO2 and p-CF3 at phenyl ring had the lowest MICs against S. aureus and MRSA. 2e displayed unaided or synergistic efficacy against MRSA, especially combined with ofloxacin. EM revealed that 2e destroys biofilms and cell membranes.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Lithium metal deposition/dissolution under uniaxial pressure with high-rigidity layered polyethylene separator By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17805-17815DOI: 10.1039/D0RA02788J, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Shogo Kanamori, Mitsuhiro Matsumoto, Sou Taminato, Daisuke Mori, Yasuo Takeda, Hoe Jin Hah, Takashi Takeuchi, Nobuyuki ImanishiThe use of a high rigidity separator and application of an appropriate amount of pressure are effective approaches to control lithium metal growth and improve its cycle performance.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Synthesis of heteroatom-containing pyrrolidine derivatives based on Ti(O-iPr)4 and EtMgBr-catalyzed carbocyclization of allylpropargyl amines with Et2Zn By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17881-17891DOI: 10.1039/D0RA02677H, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Rita N. Kadikova, Ilfir R. Ramazanov, Azat M. Gabdullin, Oleg S. Mozgovoj, Usein M. DzhemilevThe Ti(O-iPr)4 and EtMgBr-catalyzed regio and stereoselective carbocyclization of N-allyl-substituted 2-alkynylamines with Et2Zn, followed by deuterolysis or hydrolysis, affords the corresponding methylenepyrrolidine derivatives in high yields.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Nanoporous materials with predicted zeolite topologies By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17760-17767DOI: 10.1039/D0RA01888K, Paper Open Access This article is licensed under a Creative Commons Attribution 3.0 Unported Licence.Vladislav A. Blatov, Olga A. Blatova, Frits Daeyaert, Michael W. DeemTopological exploration of crystal structures demonstrates the presence of known zeolites, inorganics, and MOFs in a database of predicted materials.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
w Hoverfly on a pink flower By nicolasgallagher.com Published On :: Fri, 03 Jul 2009 17:00:00 -0700 Full Article
w Anatomy of an HTML5 WordPress theme By nicolasgallagher.com Published On :: Fri, 14 Aug 2009 17:00:00 -0700 This site has been written in HTML5 and used to use WordPress to manage the content. I’ll explain why I used HTML5, describe the structure of the theme templates, and show some of the ways I tried to tame WordPress’s tendency to add mess to the source code. As this is my personal site I wanted to experiment with using HTML5, CSS3, and WAI-ARIA. All these documents are currently working drafts and subject to change. However, the web documents and applications of the future are going to be written in HTML5 and I wanted to see the benefits of using it to markup static documents. Using CSS 2.1, let alone the CSS3 selectors and properties that some browser vendors have implemented, has many advantages for controlling the presentation of semantically coded documents. For this reason I am not going to avoid using basic CSS 2.1 selectors just to faithfully reproducing this site’s design in IE6. However, I have tried to accommodate IE 7 and IE 8 users by using an HTML5 enabling script so that the new HTML5 elements can be styled in those browsers if users have Javascript enabled. HTML5 templates I started with a static prototype of this site developed on my local server. WordPress makes it very easy to create your own templates and, therefore, it is no problem to use HTML5. This theme only has 3 main templates: index, single, and archive. There are of course templates for 404s, attachments, comments, etc., but I won’t discuss them as they are all based on the 3 main templates. All the templates include ARIA roles as an accessibility aide. The single.php template has this rough structure: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="default.css"> </head> <body> <header role="banner"></header> <nav role="navigation"></nav> <article role="main"> <header> <time datetime="YYYY-MM-DD"></time> <h1></h1> </header> <footer></footer> </article> <nav></nav> <aside role="complementary"></aside> <footer role="contentinfo"> <small></small> </footer> </body> </html> The first line of the document is the HTML5 DOCTYPE. The new <article> element contains the content of each post. The same structure is used for the index.php template except that there are several articles displayed on each page and the ARIA role value of main is not used. In contrast, the archive.php template houses all the article excerpts in a <section> element with the ARIA role of main because the list of archived posts is itself the main content of the document. A clean theme WordPress tends to add classes, elements, and other bits of code in certain places. I haven’t used any of the WordPress functions that add class names to the body and to elements wrapping a post and also wanted to avoid cluttering the source code with any other unnecessary markup. This required a bit of fiddling around with the theme’s functions.php file. I’m not a PHP developer so this might not be pretty! Removing actions from wp_head() WordPress has a hook called wp_head that sits in the header.php of most themes. To avoid it inserting unwanted code into the <head> of the document I used the remove_action function to disable the functions that were responsible. The following code was added to the functions.php file of my theme: // Remove links to the extra feeds (e.g. category feeds) remove_action( 'wp_head', 'feed_links_extra', 3 ); // Remove links to the general feeds (e.g. posts and comments) remove_action( 'wp_head', 'feed_links', 2 ); // Remove link to the RSD service endpoint, EditURI link remove_action( 'wp_head', 'rsd_link' ); // Remove link to the Windows Live Writer manifest file remove_action( 'wp_head', 'wlwmanifest_link' ); // Remove index link remove_action( 'wp_head', 'index_rel_link' ); // Remove prev link remove_action( 'wp_head', 'parent_post_rel_link', 10, 0 ); // Remove start link remove_action( 'wp_head', 'start_post_rel_link', 10, 0 ); // Display relational links for adjacent posts remove_action( 'wp_head', 'adjacent_posts_rel_link', 10, 0 ); // Remove XHTML generator showing WP version remove_action( 'wp_head', 'wp_generator' ); Source: WPEngineer.com: Cleanup WordPress Header Removing an empty <span> If you want to create excerpts you can either write them into the excerpt box or use the <--more--> quicktag in the WordPress editor. I just wanted the first paragraph of my posts to be used as the excerpt and so using the in-editor tag was the most practical approach I was aware of. However, when you do this WordPress will insert an empty <span> in the post’s content. This element has an id so that the area following the excerpt can be targeted by “more” or “continue reading” links. I removed both the empty <span> and the jump link by adding the following code to the functions.php file of the theme: // removes empty span function remove_empty_read_more_span($content) { return eregi_replace("(<p><span id="more-[0-9]{1,}"></span></p>)", "", $content); } add_filter('the_content', 'remove_empty_read_more_span'); Source: Ganda Manurung: Remove Empty Span Tag On WordPress // removes url hash to avoid the jump link function remove_more_jump_link($link) { $offset = strpos($link, '#more-'); if ($offset) { $end = strpos($link, '"',$offset); } if ($end) { $link = substr_replace($link, '', $offset, $end-$offset); } return $link; } add_filter('the_content_more_link', 'remove_more_jump_link'); Source: WordPress Codex: Customizing the Read More Displaying images in the excerpt For posts that display nothing but a photograph (yes, they will be shit but I’m hoping it gets me using my camera a bit more often) I wanted the image to show up in the archives. Equally, if the first paragraph of a post contained a link I wanted that to be preserved. The default the_excerpt() template tag doesn’t allow for this so it needed some modifying. I added a new function, which is just a modified version of the core excerpt function, to the functions.php file and then made sure that the template tag executed this function rather than the one contained in the core WordPress files. function improved_trim_excerpt($text) { if ( '' == $text ) { $text = get_the_content(''); $text = strip_shortcodes( $text ); $text = apply_filters('the_content', $text); $text = str_replace(']]>', ']]&gt;', $text); $text = strip_tags($text, '<p><img><a>'); $excerpt_length = apply_filters('excerpt_length', 55); $words = explode(' ', $text, $excerpt_length + 1); if (count($words) > $excerpt_length) { array_pop($words); array_push($words, '[...]'); $text = implode(' ', $words); $text = force_balance_tags($text); } } return $text; } remove_filter('get_the_excerpt', 'wp_trim_excerpt'); add_filter('get_the_excerpt', 'improved_trim_excerpt'); Source: Aaron Russell: Improving WordPress’ the_excerpt() template tag Conditional next/prev links I prefer not to have empty elements in the markup and so I needed a way to conditionally insert the “Older entries”, “Newer Entries”, etc., links into templates. The solution I’m using here, which isn’t perfect, is to add this to functions.php: function show_posts_nav() { global $wp_query; return ($wp_query->max_num_pages > 1); } Source: Eric Martin: Conditional navigation links in WordPress And then to wrap the navigation markup in the templates with the following: <?php if (show_posts_nav()) : ?> <nav> <ul> <li><?php next_posts_link('« Older Entries') ?></li> <li><?php previous_posts_link('Newer Entries »') ?></li> </ul> </nav> <?php endif; ?> Summary It’s fairly easy to create a simple site with HTML5 and to use WordPress to deliver it. At the moment there are issues with Internet Explorer because you cannot style HTML5 elements unless you use Javascript. However, HTML5 redefines the meaning of certain elements (such as <dl>, which has become a more versatile “description list”) and allows block elements to be wrapped in a link. Therefore, there is still benefit in using the HTML5 DOCTYPE even if you do not make use of the new elements. Further reading HTML5 working draft HTML5 differences from HTML4 Accessible Rich Internet Applications (WAI-ARIA) 1.0 Full Article
w Photograph of a curious cow By nicolasgallagher.com Published On :: Sun, 30 Aug 2009 17:00:00 -0700 Full Article
w Thoughts on some new HTML5 elements By nicolasgallagher.com Published On :: Sun, 13 Sep 2009 17:00:00 -0700 In the last few months there has been increased discussion about some of the new elements that have been introduced in the HTML5 draft specification. This entry is primarily a counter argument to some of the comments that I disagree with. The most recent and high-profile comments in regard to parts of the HTML5 specification come from The HTML5 Super Friends in an article entitled Guide to HTML5 Hiccups. It lays out their concerns with the HTML5 draft specification as it stood at the time of its writing and I am largely going to focus on the issues they have discussed. The article and section elements The first argument that I disagree with is that the article and section elements are redundant and, therefore, that the article element should be dropped. article and section are identical except that article allows a pubdate attribute. We would suggest that article be dropped and section be adapted to allow an optional pubdate attribute or, even better, more explicit metadata. The article and section elements are not identical according the to HTML5 draft specification. Here is what it says about the section element as of 13 September 2009: The section element represents a generic document or application section. A section, in this context, is a thematic grouping of content, typically with a heading, possibly with a footer. Now contrast that with what it says about the the article element: The article element represents a section of a page that consists of a composition that forms an independent part of a document, page, application, or site. An article element is “independent” in the sense that its contents could stand alone, for example in syndication, or as a interchangeable component on a user-configurable portal page. That is a clear distinction that resists the reading of article and section being “identical”. The article element has a specific purpose: to mark parts of a document that form an independent composition that may be appropriate for syndication. It is a special kind of sectioning element that performs an essential role that is lacking in the semantics of the generic section element. This generic element serves only to thematically group content. That grouping may occur at the document level, within an independent article, or within a footer. The article element has unique semantics and practical use. There is a fundamental conceptual difference between stand-alone compositions and sections of compositions, documents, or pages and this difference should be recognised and catered for in the specification. Websites regularly employ microformats and you don’t have to look far to see independent compositions currently marked up with class="hentry" or find links to individual blog comments and twitter updates. There is clearly a need for an easy way to define independent compositions and that is met with the introduction of the article element in HTML5. What may be needed is a stronger clarification and definition of the article element to minimise the potential for this distinction to be overlooked and to highlight the differences from a generic document section. The hgroup element The hgroup element is a relatively recent addition to the draft specification. It is defined as serving a fairly specific purpose: The hgroup element represents the heading of a section. The element is used to group a set of h1–h6 elements when the heading has multiple levels, such as subheadings, alternative titles, or taglines. The element works to associate headings together so that the highest ranked heading descendant (if present) of the hgroup element is used as its text in document outlines and summary. Other heading descendants are treated as subheadings and are left out of outlines. The HTML5 Super Friends have this to say about the hgroup element: We don’t see the added value of this element and would instead add a boolean attribute to the heading element which allows content authors to specify if that particular heading should be included in the outline. Bruce Lawson has similar concerns and proposes another alternative – removing the need for a wrapping element and defining a new element specifically for marking up subtitles: I agree that hgroup is clumsy and likely to be misused. Rather than wrap an h1 and its h2 subtitle in hgroup to keep the subtitle out of the outlining algorithm, I would prefer to use <header> <h1>My blog</h1> <subtitle>My wit and wisdom</subtitle> </header> as I think that;s easier to understand than a heading-that’s-not-a-heading, and it removes a wrapping element. I disagree with these criticisms of the hgroup element and consider the proposed alternatives to be more problematic, less intuitive, less flexible, and further removed from the way in which authors currently markup subheadings. The way that many authors are currently marking up subheadings is by using headings of various ranks and in various orders depending on whether the subheading or qualifying heading needs to appear above or below the main page heading. A subheading is still, conceptually, a heading of sorts and it cannot be accurately marked up with a paragraph or any other currently available element. Allowing the addition of a boolean attribute to heading elements has several problems. A boolean attribute may be less intuitive for authors than the hgroup element. The hgroup element relies upon and produces an association between all the headings it contains. Since headings and subheadings occur together and derive their meaning from each other, it is semantic to wrap these headings in an element. We know that the highest ranked heading contains the string to be used in the outline and that the other headings serve as ranked subheadings to this primary heading. A boolean attribute is only associated with the element that it is a part of. We can create no association between the element and adjacent elements. This is related to the next issue. The hgroup itself acts as heading content while a boolean attribute would act only to remove headings from the outline. The hgroup element only removes the descendant headings that are those not of the highest rank. The boolean attribute shifts the burden onto the author to decide which headings should be marked for removal from the outline, rather than providing an element to wrap a collection of headings without authors having to be concerned with (or aware of) issues of outlining. What about Bruce Lawson’s idea for a subtitle element? I believe that, irrespective of the what this element were actually called, it suffers from similar problems to the idea of using a boolean attribute. There is nothing to prevent the use of a subtitle element away from a heading, it creates no association with other elements, and it does not allow for ranking of subheadings. One of my key points in relation to criticism of the hgroup element is that subheadings draw their meaning from context. A subheading (as opposed to a section heading) is only a sub-heading if it is associated with a higher ranking heading. Remove the higher ranking heading and what was once a subheading is likely to be understood as a heading. The strength of the hgroup element over the two alternative suggestions I have referenced is that it is the only proposal that defines a subheading as contextual. I think that it is the most intuitive proposal (although perhaps none of them are particularly inuitive) – the name of the element is self-descriptive and encapsulates the contextual relationship and adjacent positioning of its child elements — and matches most closely with the way that subheadings are currently marked up on many websites. The aside element The HTML5 Super Friends are of the opinion that the aside element is not worth including in the specification: The use cases for aside are too limited to warrant its inclusion in the specification. We were also concerned about potentially duplicating content within an aside. However, the specification itself provides some fairly compelling uses for the element: The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page. Authors might use the aside element for their blogrolls, for marking up adverts ranging from google ads on blogs to large banners on enterprise websites, for expanding on themes within an article or providing an extended definition of a term, for pull quotes, and anything else “tangentially related to the content around the aside element, and which could be considered separate from that content”. Most of these uses would not involve duplication of content. Using the aside element for pull quotes would produce some instances of content duplication. However, this is not really a problem for users who are used to content being duplicated in this way in newspapers and magazines. It would not take much for search engines to adapt to deal with short amounts of duplicate content contained within an aside either. While I appreciate the point about duplicate content I’m not yet convinced that it is actually problematic. The legend element The current specification defines the legend element as providing an explanatory caption for the contents of its parent element. The parent element may be a fieldset, figure or details element. However, Remy Sharp‘s article entitled legend not such a legend anymore shows why it is not practical to use legend for the new elements details and figure – because it is not backwards compatible with current browsers and effectively unusable outside of a fieldset because of the inability to style the element. In this case, forging a new element is most appropriate rather than trying to use an element like label which will only create confusion with little advantage. Summary I have discussed my reasons for disagreeing with certain feedback on the HTML5 draft specification. I have yet to be convinced that the article, hgroup, or aside elements should be dropped from the specification because it seems to me that they have necessary uses and advantages over alternatives. Full Article
w Wasp nest By nicolasgallagher.com Published On :: Thu, 26 Nov 2009 16:00:00 -0800 Most people I know hate and fear wasps. I’ve always been intrigued by them; they are quite beautiful looking insects – social insects – that have an important role in ecosystems. Their nests are incredible and I found and photographed a large nest constructed this year in our roof cavity. This nest is about the diameter of a football (soccer ball) and gives you an idea of the intricate structure of a wasp nest made up of thousands of thin fans of paper-like material. Unlike honey bees, wasps do not have wax-producing glands and those that make these kinds of nests construct them from a substance derived from wood pulp. They usually chew on dead or weathered wood and you can sometimes find wasps stripping thin layers from man-made wooden objects like park benches, panelling on houses, or exposed window frames. Wasps mix this wood with saliva to produce a paper-like material that is used to construct their nest. You can see how each fanned layer of paper is made up of bands of different colour. This is presumably because the layers been progressively built up by wasps returning with wood pulp sourced from different types and colours of wood. The final effect is really beautiful and it’s impressive to think that this kind of large organised structure, which houses the queen’s larvae in combs and regulates temperature, is the result of thousands of individual wasps working together. It is only used for one season before being abandoned as the winter approaches and the majority of the colony dies from cold. Full Article
w New HTML5 elements: summary & figcaption By nicolasgallagher.com Published On :: Sun, 31 Jan 2010 16:00:00 -0800 Over the weekend two new HTML5 elements – summary and figcaption – were added to the draft specification. The introduction of summary and figcaption marks the acceptance that new elements are needed to act as captions or legends for the details and figure elements. The addition of the figcaption element finally begins to clear up the difficulty in marking-up figure element captions and looks to cement the place of the figure element in the HTML5 specification. The summary element does much the same for the details element but the very nature of the details element itself means that its future is not yet clear. The figcaption element This new element acts as the optional caption or legend for any content contained within its parent figure element. If there is no figcaption element within a figure element then there is no caption for the rest of its content. If there is a figcaption element then it must be the first or last child of the figure element and only the first figcaption element (should there be more than one child figcaption of the parent figure element) represents a caption. The figure element is used to mark up any self-contained content that may be referenced from the main flow of a document but could also be removed from the primary content (for example, to an appendix) without affecting its flow. This makes it suitable for various types of content ranging from graphs and data tables to photographs and code blocks. <p><a href="#fig-ftse">Figure 1</a> shows the extent of the collapse in the markets and how recovery has been slow.</p> <figure id="fig-ftse"> <figcaption>Figure 1. The value of the FTSE 100 Index from 1999–2009.</figcaption> <img src="ftse-100-index-graph.jpg" alt="The index hit a record high at the end of 1999 and experienced two significant drops in the following last decade."> </figure> <p>This latest financial crisis hasn't stopped Alex from writing music and his latest track is actually worth listening to.</p> <figure> <audio src="what-am-i-doing.mp3" controls></audio> <figcaption><cite>What am I doing?</cite> by Alex Brown</figcaption> </figure> The creation of the figcaption element is an important step forward for the HTML5 draft specification as it finally provides a reliable means to markup the caption for content that is best marked up as a figure. Previous attempts to use the legend element, the caption element, and the dt and dd elements had failed due to a lack of backwards compatibility when it came to styling these elements with CSS. The summary element This new element represents a summary, caption, or legend for any content contained within its parent details element. The summary element must be the first child of a details element and if there is no summary element present then the user agent should provide its own. The reason for this is because the details element has a specific function – to markup additional information and allow the user to toggle the visibility of the additional information. Although it is not specified in the specification, it is expected that the summary element will act as the control that toggles the open-closed status of the contents of the parent details element. <details> <summary>Technical details.</summary> <dl> <dt>Bit rate:</dt> <dd>190KB/s</dd> <dt>Filename:</dt> <dd>drum-and-bass-mix.mp3</dd> <dt>Duration:</dt> <dd>01:02:34</dd> <dt>File size:</dt> <dd>78.9MB</dd> </dl> </details> The introduction of the summary element seems to secure the future of the details element and the new behaviour that it affords, for now. When user agents begin to add support for the details element you won’t need JavaScript, or even CSS, to have expanding or collapsing sections in an HTML document. The future of the details element There will continue to be some debate over the inclusion of behaviour in an HTML specification especially given the widespread use of JavaScript to provide the expand-collapse functionality that details describes. The details element writes some quite significant behaviour into an HTML document and I can see it being abused to provide generic expand-collapse functionality throughout a document. It is also not entirely clear what purpose the details element actually serves other than being an attempt to bypass the need for JavaScript or CSS to expand or collapse sections of a document. There has been a general softening of the rough distinction between content, presentation, and behaviour. JavaScript libraries are being used to patch holes in browser CSS and HTML5 support, the CSS3 modules introduce plenty of behaviour that was previously only possibly with JavaScript, and the HTML5 specification is also introducing functionality and behaviour that previously required the use of JavaScript. The future survival of the details element, and the behaviour associated with it, may well depend on browser implementations and author applications over the coming months. Full Article
w Using HTML5 elements in WordPress post content By nicolasgallagher.com Published On :: Wed, 24 Feb 2010 16:00:00 -0800 Here are two ways to include HTML5 elements in your WordPress post content without WordPress’ wpautop function wrapping them in p tags or littering your code with line breaks. HTML5 has several new elements that you may want to use in your post content to markup document sections, headers, footers, pullquotes, figures, or groups of headings. One way to safely include these elements in your posts is simple; the other way is a bit more complicated. Both ways rely on hand-coding the HTML5 markup in the WordPress editor’s HTML view. If you are adding HTML5 elements to your post content then you should use an HTML5 doctype. Disable wpautop for your theme This is the simple way. Disable the wpautop function so that WordPress makes no attempt to correct your markup and leaves you to hand-code every line of your posts. If you want total control over every line of your HTML then this is the option for you. To disable wpautop entirely add these lines to your theme’s functions.php: remove_filter('the_excerpt', 'wpautop'); remove_filter('the_content', 'wpautop'); However, wpautop is generally quite useful if most of your posts are simple text content and you only occasionally want to include HTML5 elements. Therefore, modifying wpautop to recognise HTML5 elements might be more practical. Modify wpautop to recognise HTML5 elements WordPress’ wpautop is part of the core functions and can be found in this file within your WordPress installation: wp-includes/formatting.php. It controls how and where paragraphs and line breaks are inserted in excerpts and post content. In order to create a modified version of WordPress’ core wpautop function I started off by duplicating it in my theme’s functions.php file. What I’ve experimented with is disabling wpautop and adding a modified copy of it – which includes HTML5 elements in its arrayss – to my theme’s functions.php file. Add the following to your theme’s functions.php file and you’ll be able to use section, article, aside, header, footer, hgroup, figure, details, figcaption, and summary in your post content. (Probably best to try this in a testing environment first!) /* ----------------------------- MODIFIED WPAUTOP - Allow HTML5 block elements in wordpress posts ----------------------------- */ function html5autop($pee, $br = 1) { if ( trim($pee) === '' ) return ''; $pee = $pee . " "; // just to make things a little easier, pad the end $pee = preg_replace('|<br />s*<br />|', " ", $pee); // Space things out a little // *insertion* of section|article|aside|header|footer|hgroup|figure|details|figcaption|summary $allblocks = '(?:table|thead|tfoot|caption|col|colgroup|tbody|tr|td|th|div|dl|dd|dt|ul|ol|li|pre|select|form|map|area|blockquote|address|math|style|input|p|h[1-6]|hr|fieldset|legend|section|article|aside|header|footer|hgroup|figure|details|figcaption|summary)'; $pee = preg_replace('!(<' . $allblocks . '[^>]*>)!', " $1", $pee); $pee = preg_replace('!(</' . $allblocks . '>)!', "$1 ", $pee); $pee = str_replace(array(" ", " "), " ", $pee); // cross-platform newlines if ( strpos($pee, '<object') !== false ) { $pee = preg_replace('|s*<param([^>]*)>s*|', "<param$1>", $pee); // no pee inside object/embed $pee = preg_replace('|s*</embed>s*|', '</embed>', $pee); } $pee = preg_replace("/ +/", " ", $pee); // take care of duplicates // make paragraphs, including one at the end $pees = preg_split('/ s* /', $pee, -1, PREG_SPLIT_NO_EMPTY); $pee = ''; foreach ( $pees as $tinkle ) $pee .= '<p>' . trim($tinkle, " ") . "</p> "; $pee = preg_replace('|<p>s*</p>|', '', $pee); // under certain strange conditions it could create a P of entirely whitespace // *insertion* of section|article|aside $pee = preg_replace('!<p>([^<]+)</(div|address|form|section|article|aside)>!', "<p>$1</p></$2>", $pee); $pee = preg_replace('!<p>s*(</?' . $allblocks . '[^>]*>)s*</p>!', "$1", $pee); // don't pee all over a tag $pee = preg_replace("|<p>(<li.+?)</p>|", "$1", $pee); // problem with nested lists $pee = preg_replace('|<p><blockquote([^>]*)>|i', "<blockquote$1><p>", $pee); $pee = str_replace('</blockquote></p>', '</p></blockquote>', $pee); $pee = preg_replace('!<p>s*(</?' . $allblocks . '[^>]*>)!', "$1", $pee); $pee = preg_replace('!(</?' . $allblocks . '[^>]*>)s*</p>!', "$1", $pee); if ($br) { $pee = preg_replace_callback('/<(script|style).*?</\1>/s', create_function('$matches', 'return str_replace(" ", "<WPPreserveNewline />", $matches[0]);'), $pee); $pee = preg_replace('|(?<!<br />)s* |', "<br /> ", $pee); // optionally make line breaks $pee = str_replace('<WPPreserveNewline />', " ", $pee); } $pee = preg_replace('!(</?' . $allblocks . '[^>]*>)s*<br />!', "$1", $pee); // *insertion* of img|figcaption|summary $pee = preg_replace('!<br />(s*</?(?:p|li|div|dl|dd|dt|th|pre|td|ul|ol|img|figcaption|summary)[^>]*>)!', '$1', $pee); if (strpos($pee, '<pre') !== false) $pee = preg_replace_callback('!(<pre[^>]*>)(.*?)</pre>!is', 'clean_pre', $pee ); $pee = preg_replace( "| </p>$|", '</p>', $pee ); return $pee; } // remove the original wpautop function remove_filter('the_excerpt', 'wpautop'); remove_filter('the_content', 'wpautop'); // add our new html5autop function add_filter('the_excerpt', 'html5autop'); add_filter('the_content', 'html5autop'); The results are not absolutely perfect but then neither is the original wpautop function. Certain ways of formatting the code will result in unwanted trailing </p> tags or a missing opening <p> tags. For example, to insert a figure with caption into a post you should avoid adding the figcaption on a new line because an image or link appearing before the figcaption will end up with a trailing </p>. <!-- this turns out ok --> <figure> <a href="#"><img src="image.jpg" alt="" /></a><figcaption>A figure caption for your reading pleasure</figcaption> </figure> <!-- this turns out not so ok --> <figure> <a href="#"><img src="image.jpg" alt="" /></a> <figcaption>A figure caption for your reading pleasure</figcaption> </figure> Another example would be when beginning the contents of an aside with a paragraph. You’ll have to leave a blank line between the opening aside tag and the first paragraph. <aside> This content could be a pullquote or information that is tangentially related to the surrounding content. But to get it wrapped in a paragraph you have to leave those blank lines either side of it before the tags. </aside> Room for improvement Obviously there are still a few issues with this because if you format your post content in certain ways then you can end up with invalid HTML, even if it doesn’t actually affect the rendering of the page. But it seems to be pretty close! Leave a comment or email me if you are using this function and find there that are instances where it breaks down. I ran numerous tests and formatting variations to try and iron out as many problems as possible but it’s unlikely that I tried or spotted everything. Hopefully someone with more PHP and WordPress experience will be able to improve upon what I’ve been experimenting with, or find a simpler and more elegant solution that retains the useful wpautop functionality while allowing for the use of HTML5 elements in posts. Please share anything you find! Full Article
w Multiple Backgrounds and Borders with CSS 2.1 By nicolasgallagher.com Published On :: Wed, 09 Jun 2010 17:00:00 -0700 Using CSS 2.1 pseudo-elements to provide up to 3 background canvases, 2 fixed-size presentational images, and multiple complex borders for a single HTML element. This method of progressive enhancement works for all browsers that support CSS 2.1 pseudo-elements and their positioning. No CSS3 support required. Demo: Multiple Backgrounds with CSS 2.1 Demo: Multiple Borders with CSS 2.1 Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+. How does it work? Essentially, you create pseudo-elements using CSS (:before and :after) and treat them similarly to how you would treat HTML elements nested within your target element. But they have distinct benefits – beyond semantics – over the use of nested HTML elements. To provide multiple backgrounds and/or borders, the pseudo-elements are pushed behind the content layer and pinned to the desired points of the HTML element using absolute positioning. The pseudo-elements contain no true content and are absolutely positioned. This means that they can be stretched to sit over any area of the “parent” element without affecting its content. This can be done using any combination of values for the top, right, bottom, left, width, and height properties and is the key to their flexibility. What effects can be achieved? Using just one element you can create parallax effects, multiple background colours, multiple background images, clipped background images, image replacement, expandable boxes using images for borders, fluid faux columns, images existing outside the box, the appearance of multiple borders, and other popular effects that usually require images and/or the use of presentational HTML. It is also possible to include 2 extra presentational images as generated content. The Multiple Backgrounds with CSS 2.1 and Multiple Borders with CSS 2.1 demo pages show how several popular examples of these effects can be achieved with this technique. Most structural elements will contain child elements. Therefore, more often than not, you will be able to gain a further 2 pseudo-elements to use in the presentation by generating them from the first child (and even last-child) element of the parent element. In addition, you can use style changes on :hover to produce complex interaction effects. Example code: multiple background images Using this technique it is possible to reproduce multiple-background parallax effects like those found on the Silverback site using just one HTML element. The element gets its own background image and any desired padding. By relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements. The positive z-index will allow for the correct z-axis positioning of the pseudo-elements. #silverback { position: relative; z-index: 1; min-width: 200px; min-height: 200px; padding: 120px 200px 50px; background: #d3ff99 url(vines-back.png) -10% 0 repeat-x; } Both pseudo-elements are absolutely positioned and pinned to each side of the element. The z-index value of -1 moves the pseudo-elements behind the content layer. This way the pseudo-elements sit on top of the element’s background and border but all the content is still selectable or clickable. #silverback:before, #silverback:after { position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; padding-top: 100px; } Each pseudo-element then has a repeated background-image set. This is all that is needed to reproduce the parallax effect. The content property lets you add an image as generated content. With two pseudo-elements you can add 2 further images to an element. They can be crudely positioned within the pseudo-element box by varying other properties such as text-align and padding. #silverback:before { content: url(gorilla-1.png); padding-left: 3%; text-align: left; background: transparent url(vines-mid.png) 300% 0 repeat-x; } #silverback:after { content: url(gorilla-2.png); padding-right: 3%; text-align: right; background: transparent url(vines-front.png) 70% 0 repeat-x; } The finished product is part of the Multiple Backgrounds with CSS 2.1 demo. Example code: fluid faux columns Another application is creating equal height fluid columns without images or extra nested containers. The HTML base is very simple. I’ve used specific classes on each child div rather than relying on CSS 2.1 selectors that IE6 does not support. If you don’t require IE6 support you don’t actually need the classes. <div id="faux"> <div class="main">[content]</div> <div class="supp1">[content]</div> <div class="supp2">[content]</div> </div> The percentage-width container is once again relatively positioned and a positive z-index is set. Applying overflow:hidden gets the element to wrap its floated children and will hide the overflowing pseudo-elements. The background colour will provide the colour for one of the columns. #faux { position: relative; z-index: 1; width: 80%; margin: 0 auto; overflow: hidden; background: #ffaf00; } By using relative positioning on the child div‘s you can also control the order of the columns independently of their source order. #faux div { position: relative; float: left; width: 30%; } #faux .main { left: 35%; } #faux .supp1 { left: -28.5%; } #faux .supp2 { left: 8.5%; } The other two full-height columns are produced by creating, sizing, and positioning pseudo-elements with backgrounds. These backgrounds can be (repeating) images if the design requires. #faux:before, #faux:after { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 33.333%; background: #f9b6ff; } #faux:after { left: 66.667%; background: #79daff; } The finished product is part of the Multiple Backgrounds with CSS 2.1 demo. Example code: multiple borders Multiple borders are produced in much the same way. Using them can avoid the need for images to produce simple effects. An element must be relatively positioned and have sufficient padding to contain the width of the extra border you will be creating with pseudo-elements. #borders { position: relative; z-index: 1; padding: 30px; border: 5px solid #f00; background: #ff9600; } The pseudo-elements are positioned at specific distances away from the edge of the element’s box, moved behind the content layer with the negative z-index, and given the border and background values you want. #borders:before { content: ""; position: absolute; z-index: -1; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 5px solid #ffea00; background: #4aa929; } #borders:after { content: ""; position: absolute; z-index: -1; top: 15px; left: 15px; right: 15px; bottom: 15px; border: 5px solid #00b4ff; background: #fff; } That’s all there is to it. The finished product is part of the Multiple Borders with CSS 2.1 demo. Progressive enhancement and legacy browsers IE6 and IE7 have no support for CSS 2.1 pseudo-elements and will ignore all :before and :after declarations. They get none of the enhancements but are left with the basic usable experience. A warning about Firefox 3.0 Firefox 3.0 supports CSS 2.1 pseudo-elements but does not support their positioning. Due to this partial support, you should avoid declaring display:block for absolutely positioned pseudo-elements that explicitly declare a width or height values. However, when using borders there is no graceful fallback for Firefox 3.0. Although, sometimes an improved appearance in Firefox 3.0 can be achieved by adding display:block to pseudo-element hacks that use borders. Enhancing with CSS3 All the applications included in this article could be further enhanced to take advantage of present-day CSS3 implementations. Using border-radius, rgba, and transforms, and CSS3 multiple background images in tandem with pseudo-elements can produce even more complex presentations that I hope to include in a future article. Currently there is no browser support for the use of CSS3 transitions or animations on pseudo-elements. In the future: CSS3 pseudo-elements The proposed extensions to pseudo-elements in the CSS3 Generated and Replaced Content Module include the addition of nested pseudo-elements (::before::before), multiple pseudo-elements (::after(2)), wrapping pseudo-elements (::outside), and the ability to insert pseudo-elements into later parts of the document (::alternate). These changes would provide a near limitless number, and arrangement, of pseudo-elements for all sorts of complex effects and presentations using just one element. Let me know what you’ve done I’ve focused on just a few applications and popular effects. If you find other applications, limitations, or want to share how you’ve applied this technique please leave a comment below or let me know on Twitter (@necolas. Translations 使用css2.1实现多重背景、多重边框效果 Full Article
w Custom Tweet Button for WordPress By nicolasgallagher.com Published On :: Thu, 16 Sep 2010 17:00:00 -0700 How to create a custom Tweet Button for WordPress using the bit.ly and Twitter APIs. The HTML and CSS is completely customisable and there is no need for JavaScript. PHP is used to automatically shorten and cache the URL of a post, fetch and cache the number of retweets, and populate the query string parameters in the link to Twitter. The custom Tweet Button at the bottom of this post was created using this method. All the files are available on Github and released under MIT license. The PHP code was heavily influenced by the BackType Tweetcount plugin. How to use You’ll need your own bit.ly account and to be comfortable editing your theme’s functions.php, style.css, and template files. Be sure to make backups before you start making changes. Step 1: Download the Custom Tweet Button for WordPress files from Github. Step 2: Include the custom-tweet-button.php file in your theme’s functions.php file. Step 3: Replace the bit.ly username, bit.ly API key, and Twitter username placeholders in the tweet_button function with your own. Your bit.ly credentials can be found on the “settings” page of your account. Step 4: Add the custom Tweet Button CSS to your theme’s style.css file. Add the tweet.png image in your theme’s image folder. Make sure the image is correctly referenced in the CSS file. Step 5: Call the function tweet_button in your template files (e.g. single.php) at the position(s) in the HTML you’d like the Tweet Button to appear: if (function_exists('tweet_button')) { tweet_button(get_permalink()); } Why make your own Tweet Button? Making your own custom Tweet Button for WordPress has several additional advantages over using Twitter’s own offerings. Full control over the HTML and CSS. Having full control over the HTML and CSS means that you can choose how to present your Tweet Button. I decided to reproduce the horizontal and vertical styles of Twitter’s own button. But any appearance is possible. All click, traffic, and referrer data is stored in your bit.ly account. The URL for any published post is automatically shortened using the bit.ly service. The short URL is then passed to Twitter to ensure you can monitor the click and traffic data in your bit.ly account. The permalink is passed to Twitter in the counturl query string parameter to ensure that it counts the URL that your short URL resolves to. No need for JavaScript or embedded iframes. The Tweet Button works without JavaScript. You have full control over any custom JavaScript enhancements you may wish to include. If you’d prefer Twitter’s share page to open in a pop-up window you can write your own JavaScript handler. Faster page load. No external JavaScript or image files are loaded; both the short URL and retweet counts are cached. Use the short URL and retweet count for other purposes. The short URLs and retweet counts are stored as post meta-data. This makes it easy to display this data anywhere else in a post. The retweet count data could be used for conditional template logic. For example, you could order posts based on the number of retweets, apply custom styles to your most retweeted posts, or display your most tweeted posts in a widget. Easy to add Google Analytics campaign and event tracking. The Tweet Button is simple HTML and you have control over all the information that is sent to Twitter. Therefore, it is possible to use Google Analytics to help answer questions like: are people sharing your posts from the homepage or the post itself? If the Tweet Button is displayed above and below your posts, which gets the most clicks? How long do people take to click the Tweet Button? How many people are visiting my site thanks to links posted on Twitter using the Tweet Button? Approximate the number of retweets for old posts. Before the release of the official Tweet Button, Twitter did not collect data on the number of times a URL was tweeted. This means your older posts may display far fewer retweets than actually occurred. However, there is a workaround. Use a service like Topsy, Backtype, or Tweetmeme to get the number of times your old post was retweeted. The difference between this and the number from Twitter’s APIs is the approximate number of retweets Twitter missed. To correct the retweet count for old posts add the number of missed retweets to a Custom Field called retweet_count_start. How the custom Tweet Button works Once a post is published its permalink URL is shortened using the bit.ly API. The returned URL is permanently cached in the bitly_short_url Custom Field. The short URL is now part of the post’s general meta-data and can be used in contexts other than the Tweet Button. The Twitter API is used to get the number of retweets for the post’s permalink URL. This number, along with the time at which it was requested, is cached in the retweet_cache Custom Field. When the cache interval has passed, an API call is made and the returned number of retweets is checked against the value stored in retweet_cache. If the returned number is greater, the value of retweet_cache is updated. The content of the tweet is automatically created by setting several properties for the http://twitter.com/share URL. The post title makes up the message; the short URL is passed to Twitter as the URL to be displayed in the tweet; the permalink URL is passed to Twitter as the URL to be counted; and your username is declared. $twitter_params = '?text=' . urlencode($title) . '&url=' . urlencode($short_url) . '&counturl=' .urlencode($url). '&via=' . $twitter_via; The default HTML output is very simple and can be fully customised. To display the count number vertically, add the class vcount. <div class="twitter-share vcount> <a class="twitter-button" rel="external nofollow" title="Share this on Twitter" href="http://twitter.com/share?query-string-params" target="_blank">Tweet</a> <a class="twitter-count" href="http://twitter.com/search?q=url>259</a> </div> Further enhancements Please apply any improvements or enhancements for the script against the source repository. Full Article
w Jump links and viewport positioning By nicolasgallagher.com Published On :: Fri, 12 Nov 2010 16:00:00 -0800 Using within-page links presses the jumped-to content right at the very top of the viewport. This can be a problem when using a fixed header. With a bit of hackery, there are some CSS methods to insert space between the top of the viewport and the target element within a page. Demo: Jump links and viewport positioning Known support: varies depending on method used. This experiment is the result of a post Chris Coyier made on Forrst. Chris’ method was to add an empty span element to the target element, shift the id attribute onto the span, and then absolutely position the span somewhere above it’s parent element. That method works but it requires changes to the HTML. The comments on Chris’ post suggested the use of psuedo-elements or padding. This experiment expands on, and combines, some of those suggestions to show the limitations of each method and document their browser support. Simplest method If you need to jump to an element with simple styling then using the :before pseudo-element is a quick and simple approach. #target:before { content: ""; display: block; height: 50px; margin: -30px 0 0; } The drawbacks are that it requires browser support for pseudo-elements and it will fail if the target element has a background colour, a repeated background image, padding-top, or border-top as part of its rule set. More robust method The more robust method uses a transparent border, negative margin, and the background-clip property. If a top border is required then it can be mimicked using a pseudo-element, as described in Multiple Backgrounds and Borders with CSS 2.1. #target { position: relative; border-top: 52px solid transparent; margin: -30px 0 0; -webkit-background-clip: padding-box; -moz-background-clip: padding; background-clip: padding-box; } #target:before { content: ""; position: absolute; top: -2px; left: 0; right: 0; border-top: 2px solid #ccc; } There are still drawbacks: it requires browser support for background-clip if there is a background color, gradient, or repeating image set on the target element; it requires browser support for pseudo-elements and their positioning if a top border is desired; and it interferes with the standard use of margins. To see these methods in action – as well as more details on the code, browser support, and drawbacks – have a look at the demo page. Please let me know if you know of better techniques. Full Article
w CSS drop-shadows without images By nicolasgallagher.com Published On :: Fri, 10 Dec 2010 16:00:00 -0800 Drop-shadows are easy enough to create using pseudo-elements. It’s a nice and robust way to progressively enhance a design. This post is a summary of the technique and some of the possible appearances. Demo: CSS drop-shadows without images Known support: Firefox 3.5+, Chrome 5+, Safari 5+, Opera 10.6+, IE 9+ I’ll be looking mainly at a few details involved in making this effect more robust. Divya Manian covered the basic principle in her article Drop Shadows with CSS3 and Matt Hamm recently shared his Pure CSS3 box-shadow page curl effect. After a bit of back-and-forth on Twitter with Simurai, and proposing a couple of additions to Divya’s and Matt’s demos using jsbin, I felt like documenting and explaining the parts that make up this technique. The basic technique There is no need for extra markup, the effect can be applied to a single element. A couple of pseudo-elements are generated from an element and then pushed behind it. .drop-shadow { position: relative; width: 90%; } .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; } The pseudo-elements need to be positioned and given explicit or implicit dimensions. .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; bottom: 15px; left: 10px; width: 50%; height: 20%; } The next step is to add a CSS3 box-shadow and apply CSS3 transforms. Different types of drop-shadow can be produced by varying these values and the types of transforms applied. .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; bottom: 15px; left: 10px; width: 50%; height: 20%; box-shadow: 0 15px 10px rgba(0, 0, 0, 0.7); transform: rotate(-3deg); } One of the pseudo-elements then needs to be positioned on the other side of the element and rotated in the opposite direction. This is easily done by overriding only the properties that need to differ. .drop-shadow:after{ right: 10px; left: auto; transform: rotate(3deg); } The final core code is as shown below. There is just one more addition – max-width – to prevent the drop-shadow from extending too far below very wide elements. .drop-shadow { position: relative; width: 90%; } .drop-shadow:before, .drop-shadow:after { content: ""; position: absolute; z-index: -1; bottom: 15px; left: 10px; width: 50%; height: 20%; max-width: 300px; box-shadow :0 15px 10px rgba(0, 0, 0, 0.7); transform: rotate(-3deg); } .drop-shadow:after{ right: 10px; left: auto; transform: rotate(3deg); } No Firefox 3.0 problems this time Some pseudo-element hacks require a work-around to avoid looking broken in Firefox 3.0 because that browser does not support the positioning of pseudo-elements. This usually involves implicitly setting their dimensions using offsets. However, as Divya Manian pointed out to me, in this case we’re only using box-shadow – which Firefox 3.0 doesn’t support – and Firefox 3.0 will ignore the position:absolute declaration for the pseudo-elements. This leaves them with the default display:inline style. As a result, there is no problem explicitly setting the pseudo-element width and height because it won’t be applied to the pseudo-elements in Firefox 3.0. Further enhancements From this base there are plenty of ways to tweak the effect by applying skew to the pseudo-elements and modifying the styles of the element itself. A great example of this was shared by Simurai. By adding a border-radius to the element you can give the appearance of page curl. .drop-shadow { border-radius: 0 0 120px 120px / 0 0 6px 6px; } I’ve put together a little demo page with a few of drop-shadow effects, including those that build on the work of Divya Manian and Matt Hamm. If you’ve got your own improvements, please send them to me on Twitter. Full Article
w A new micro clearfix hack By nicolasgallagher.com Published On :: Wed, 20 Apr 2011 17:00:00 -0700 The clearfix hack is a popular way to contain floats without resorting to using presentational markup. This article presents an update to the clearfix method that further reduces the amount of CSS required. Demo: Micro clearfix hack Known support: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+ The “micro clearfix” method is suitable for modern browsers and builds upon Thierry Koblentz’s “clearfix reloaded”, which introduced the use of both the :before and :after pseudo-elements. Here is the updated code (I’ve used a shorter class name too): /** * For modern browsers * 1. The space content is one way to avoid an Opera bug when the * contenteditable attribute is included anywhere else in the document. * Otherwise it causes space to appear at the top and bottom of elements * that are clearfixed. * 2. The use of `table` rather than `block` is only necessary if using * `:before` to contain the top-margins of child elements. */ .cf:before, .cf:after { content: " "; /* 1 */ display: table; /* 2 */ } .cf:after { clear: both; } /** * For IE 6/7 only * Include this rule to trigger hasLayout and contain floats. */ .cf { *zoom: 1; } This “micro clearfix” generates pseudo-elements and sets their display to table. This creates an anonymous table-cell and a new block formatting context that means the :before pseudo-element prevents top-margin collapse. The :after pseudo-element is used to clear the floats. As a result, there is no need to hide any generated content and the total amount of code needed is reduced. Including the :before selector is not necessary to clear the floats, but it prevents top-margins from collapsing in modern browsers. This has two benefits: It ensures visual consistency with other float containment techniques that create a new block formatting context, e.g., overflow:hidden It ensures visual consistency with IE 6/7 when zoom:1 is applied. N.B.: There are circumstances in which IE 6/7 will not contain the bottom margins of floats within a new block formatting context. Further details can be found here: Better float containment in IE using CSS expressions. The use of content:" " (note the space in the content string) avoids an Opera bug that creates space around clearfixed elements if the contenteditable attribute is also present somewhere in the HTML. Thanks to Sergio Cerrutti for spotting this fix. An alternative fix is to use font:0/0 a. Legacy Firefox Firefox < 3.5 will benefit from using Thierry’s method with the addition of visibility:hidden to hide the inserted character. This is because legacy versions of Firefox need content:"." to avoid extra space appearing between the body and its first child element, in certain circumstances (e.g., jsfiddle.net/necolas/K538S/.) Alternative float-containment methods that create a new block formatting context, such as applying overflow:hidden or display:inline-block to the container element, will also avoid this behaviour in legacy versions of Firefox. Full Article
w Mac OS X bootable backup drive with rsync By nicolasgallagher.com Published On :: Sun, 14 Aug 2011 17:00:00 -0700 I’ve started using a backup strategy based on that originally described by Jamie Zawinski and subsequently covered in Jeff Atwood’s What’s your backup strategy? article. It works by incrementally backing up your data to a bootable clone of your computer’s internal drive, in order to replace the internal drive when it fails. This script is maintained in my dotfiles repo. Please report problems or improvements in the issue tracker. This post is mainly to document – for myself as much as anything – the process I went through in order to implement an incremental backup strategy in OS X 10.6+. Use at your own risk. Feel free to suggest improvements if you know of any. Formatting and partitioning the drive With your backup drive in its enclosure, connect the drive to your Mac and open the Disk Utility application. Click on the disk’s name. This should bring up a “Partition” tab in the right panel. Click on the “Partition” tab. Under “Volume scheme” select the number of partitions you need. Probably “1 partition” if it is to match your internal disk. Under “Name” enter the volume name you want to use, e.g., “Backup”. Under “Format” select “Mac OS X Extended (Journaled)”, which is necessary if the disk is to be bootable. Click “Options” and check that “GUID Partition Table” is selected. Click “Apply”. This will format and partition the disk. The partition(s) should now show up in the Finder and on the Desktop. Enable ownership permissions The new partition needs permissions to be enabled to avoid chown errors when using rsync. To do this, select the partition and view its information page (using “Get Info” or Command+I). Expand the “Ownership & Permissions” section and uncheck “Ignore ownership on this volume” Backup script The backup script uses rsync – a fast and versatile file copying tool – to manage the copying and moving of data between volumes. You need to install rsync 3 (this is easily done using Homebrew: brew install https://raw.github.com/Homebrew/homebrew-dupes/master/rsync.rb). Rsync offers a wide variety of options and only copies the differences between the source files and the existing files in the destination, making it ideal for incremental backups. You can find out more about rsync in the rsync documentation The following is the contents of a script I’ve named backup. I’m using it to backup all of the data on my internal disk, with a specified set of exceptions contained within a file called .backupignore. #!/bin/bash # Disc backup script # Requires rsync 3 # Ask for the administrator password upfront sudo -v # IMPORTANT: Make sure you update the `DST` variable to match the name of the # destination backup drive DST="/Volumes/Macintosh HD/" SRC="/" EXCLUDE="$HOME/.backupignore" PROG=$0 # --acls update the destination ACLs to be the same as the source ACLs # --archive turn on archive mode (recursive copy + retain attributes) # --delete delete any files that have been deleted locally # --delete-excluded delete any files (on DST) that are part of the list of excluded files # --exclude-from reference a list of files to exclude # --hard-links preserve hard-links # --one-file-system don't cross device boundaries (ignore mounted volumes) # --sparse handle sparse files efficiently # --verbose increase verbosity # --xattrs update the remote extended attributes to be the same as the local ones if [ ! -r "$SRC" ]; then logger -t $PROG "Source $SRC not readable - Cannot start the sync process" exit; fi if [ ! -w "$DST" ]; then logger -t $PROG "Destination $DST not writeable - Cannot start the sync process" exit; fi logger -t $PROG "Start rsync" sudo rsync --acls --archive --delete --delete-excluded --exclude-from=$EXCLUDE --hard-links --one-file-system --sparse --verbose --xattrs "$SRC" "$DST" logger -t $PROG "End rsync" # Make the backup bootable sudo bless -folder "$DST"/System/Library/CoreServices exit 0 Adapted from the rsync script at Automated OSX backups with launchd and rsync This is the contents of the .backupignore file. .Spotlight-*/ .Trashes /afs/* /automount/* /cores/* /dev/* /Network/* /private/tmp/* /private/var/run/* /private/var/spool/postfix/* /private/var/vm/* /Previous Systems.localized /tmp/* /Volumes/* */.Trash Adapted from the excludes file at Automated OSX backups with launchd and rsync Every time the script runs, messages will be written to the system log. Check that the source (SRC) and destination (DST) paths in the script are correct and match the volume name that you chose when partitioning the disk. Wrapping the $SRC and $DST variables in double quotes ensures that the script will work even if your volume names contain spaces (e.g. “Macintosh Backup”). The command option --exclude-from tells the script where to find the file containing the exclude patterns. Make sure you either have .backupignore in the home directory or that you update this part of the command to reference the full path of the excludes file. Running the backup script You can run the script from the command line, or make it executable from the Finder or the Desktop: Type the following into the command line to ensure that you have permission to execute the script: chmod +x /path/to/rsync_backup.sh Remove the .sh extension from the script. Create an alias of the script and move it to the Desktop. Double click the icon to run the backup script. It’s important to run the script regularly in order to keep the backup in sync with your internal disk. If you have a desktop computer, or you never turn off your laptop, you can automate the running of the script by setting up a cron job. Checking the disk is bootable Once you’ve run the backup script, you should test that the backup disk is bootable. To do this, restart your computer and hold down the Alt/Option key. Your backup disk should be presented, with the volume name you chose, as a bootable disk. When I first booted my backup, the terminal displayed the following line: dyld: shared cached file was build against a different libSystem.dylib, ignoring cache According to this article, the fix for this is to update the cache by entering the following into the terminal: sudo update_dyld_shared_cache -force That should be everything you need to start implementing an incremental backup strategy when using OS X. Full Article
w “Mobile first” CSS and getting Sass to help with legacy IE By nicolasgallagher.com Published On :: Mon, 28 Nov 2011 16:00:00 -0800 Taking a “mobile first” approach to web development poses some challenges if you need to provide a “desktop” experience for legacy versions of IE. Using a CSS pre-processor like Sass can help. As of Sass 3.2, there is another way of catering for IE, described by Jake Archibald. One aspect of a “mobile first” approach to development is that your styles are usually gradually built up from a simple base. Each new “layer” of CSS adds presentational adjustments and complexity, via CSS3 Media Queries, to react to and make use of additional viewport space. However, IE 6/7/8 do not support CSS3 Media Queries. If you want to serve IE 6/7/8 something more than just the base CSS, then you need a solution that exposes the “enhancing” CSS to those browsers. Popular existing options An existing option is the use of a CSS3 Media Query polyfill, such as Respond.js. However, there are some drawbacks to this approach (see the project README), such as the introduction of a JavaScript dependency and the XHRing of your style sheets, which may introduce performance or cross-domain security issues. Furthermore, adding support for CSS3 Media Queries is probably not necessary for these legacy browsers. The main concern is exposing the “enhancing” CSS. Another method, which Jeremy Keith has described in his post on Windows mobile media queries, is to use separate CSS files: one basic global file, and an “enhancing” file that is referenced twice in the <head> of the document. The “enhancing” file is referenced once using a media attribute containing a CSS3 Media Query value. This prevents it being downloaded by browsers (such as IE 6/7/8) which do not support CSS3 Media Queries. The same file is then referenced again, this time wrapped in an IE conditional comment (without the use of a CSS3 Media Query value) to hide it from modern browsers. However, this approach becomes somewhat cumbersome, and introduces multiple HTTP requests, if you have multiple breakpoints in your responsive design. Getting Sass to help Sass 3.1 provides some features that help make this second approach more flexible. The general advantages of the Sass-based approach I’ve used are: You have full control over how your style sheets are broken up and reassembled. It removes the performance concerns of having to reference several separate style sheets for each breakpoint in the responsive design, simply to cater for IE 6/7/8. You can easily repeat large chunks of CSS in separate compiled files without introducing maintenance problems. The basic idea is to produce two versions of your compiled CSS from the same core code. One version of your CSS includes CSS3 @media queries and is downloaded by modern browsers. The other version is only downloaded by IE 6/7/8 in a desktop environment and contains no CSS3 @media queries. To do this, you take advantage of the fact that Sass can import and compile separate .scss/.sass files into a single CSS file. This allows you to keep the CSS rules used at any breakpoint completely separate from the @media query that you might want it to be a part of. This is not a CSS3 Media Query polyfill, so one assumption is that IE 6/7/8 users will predominantly be using mid-size screens and should receive styles appropriate to that environment. Therefore, in the example below, I am making a subjective judgement by including all the breakpoint styles up to a width of 960px but withholding those for any breakpoints beyond that. The ie.scss file imports numerous other files, each containing a layer of CSS that builds upon the previous each layer of CSS. No CSS3 @media queries are contained within the files or the ie.scss file. It then compiles to a single CSS file that is designed to be served only to IE 6/7/8. // ie.scss @import "base"; @import "320-up"; @import "480-up"; @import "780-up"; @import "960-up"; The style.scss file imports the code for each breakpoint involved in the design (including any beyond the limit imposed for legacy versions of IE) but nests them within the relevant CSS3 @media query. The compiled version of this file is served to all browsers apart from IE 6/7/8 and IEMobile. // style.scss @import "base"; @media (min-width:320px) { @import "320-up"; } @media (min-width:480px) { @import "480-up"; } @media (min-width:780px) { @import "780-up"; } @media (min-width:960px) { @import "960-up"; } @media (min-width:1100px) { @import "1100-up"; } The resulting CSS files can then be referenced in the HTML. It is important to hide the ie.css file from any IE-based mobile browsers. This ensures that they do not download the CSS meant for desktop versions of IE. <!--[if (gt IE 8) | (IEMobile)]><!--> <link rel="stylesheet" href="/css/style.css"> <!--<![endif]--> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="/css/ie.css"> <![endif]--> This Sass-enabled approach works just as well if you need to serve a basic style sheet for mobiles without CSS3 Media Query support, and prevent those devices from downloading the CSS used to adapt the layout to wider viewports. For example, you can avoid importing base.scss into the ie.scss and style.scss files. It can then be referenced separately in the HTML. <link rel="stylesheet" href="/css/base.css"> <link rel="stylesheet" href="/css/style.css" media="(min-width:320px)"> <!--[if (lt IE 9) & (!IEMobile)]> <link rel="stylesheet" href="/css/ie.css"> <![endif]--> You’ll notice that I didn’t wrap the style.css reference in a conditional comment to hide it from legacy versions of IE. It’s not necessary this time because the value of the media attribute is not understood by legacy versions of IE, and the style sheet will not be downloaded. In different circumstances, different combinations of style sheets and media attribute values will be more appropriate. Summary Even if you want to don’t want to use any of the Sass or SCSS syntax, the pre-processor itself can help you to write your CSS in a “mobile first” manner (with multiple breakpoints), provide a “desktop” experience for IE 6/7/8, and avoid some of the performance or maintenance concerns that are sometimes present when juggling the two requirements. I’m relatively new to using Sass, so there may be even better ways to achieve the same result or even to prevent the inclusion of IE-specific CSS unless the file is being compiled into a style sheet that only IE will download. Full Article
w Walking around San Francisco on July 4th By nicolasgallagher.com Published On :: Sat, 06 Jul 2013 17:00:00 -0700 For the first time since coming back to San Francisco in January, I had everything I needed for a saunter across the city in the sun: a means of taking photos / videos, a pair of sunglasses, no work, no plans, and no excuse. On the morning of July 4th, I decided to spend the next couple of days offline. I read a book, and decided to go for a walk the rest of the day. I didn’t have any expectations or intended destination. I left my apartment at 2pm and decided to walk west, as I haven’t spent any proper time on that side of the city. I passed through a couple of small parks and quiet neighbourhoods before hitting the edge of The Presidio. At this point, I realised how long it had been since I’d seen a large expanse of something approximating nature. The Presidio was beautifully tranquil, with just a handful of people strolling or running through the trees. Walking off the trails, I saw a lizard for the first time in years; probably a San Francisco Alligator Lizard. I exited The Presidio somewhere near the golf course and picked a long road to keep walking west. On the way, I hit a main road and stood at the traffic lights. While I waited a young woman walking her dog struck up the first of several impromptu conversations I had with strangers that day. She must have seen me looking around for the street name, as she asked, “Are you lost? Are you a tourist? Where are you going?” “I’m not sure. That way”, I said pointing down the long road before us. She laughed. “See, you are lost!” We chatted for a few blocks before our paths diverged. She told me that I would find some nice trails, and a good view of the Golden Gate Bridge, in the woodland near Lands End. It was dead ahead for another 30 minutes. So that’s where I went. I hit the trails at about 4:30pm. It must have been close to perfect weather. Really sunny, warm, only a mild breeze, and the bay was completely clear. I wandered around for over an hour; perching near the edge of cliffs, taking in the sight of the Golden Gate Bridge on my right and a vast expanse of ocean to my left. Such a relaxing place. I made time for a Dorsey-like Vine (my first Vine)… On the way back, I crossed a road to take a photo. A post-middle-age man crossed my path, struck up a conversation, and began to tell me about his life in San Francisco “back in the day”. As if he could peer into my soul, he assured me that there was nothing wrong with being a software engineer (although he did initially think I was an estate agent; that was one of the first things he said to me). My spirits further lifted by a stranger’s validation, I continued home. For last 30 minutes all I could think about was lying down, resting my feet, and eating. I’d been walking for nearly 6 hours. I’ll definitely do it again, but a skateboard would be helpful next time. Full Article
w How to test React components using Karma and webpack By nicolasgallagher.com Published On :: Sat, 16 May 2015 17:00:00 -0700 I’m working on a project at Twitter that uses React and webpack. After a few conversations with @sokra last year, this is the setup I put in place for testing React components (authored using JSX and ES6) using Karma. Dependencies You’ll need to install various packages. It looks like a lot of dependencies, but all the non-Karma packages will be necessary for general module bundling during development. Full set of required packages: babel-core: to transform JSX and transpile ES6. babel-loader: webpack loader for Babel. karma: the test runner. karma-chai-plugins: assertion library (or your library of choice). karma-chrome-launcher: Chrome browser launcher. karma-cli: CLI tool for Karma. karma-mocha: adapter for the Mocha testing framework. karma-sourcemap-loader: sourcemap loader. karma-webpack: to use webpack with Karma. react webpack: module bundler webpack entry file If you use webpack-specific features in your modules (e.g., loaders, plugins) you will need to use webpack to build a test bundle. The fastest and simplest approach is to create a single, test-specific entry file. Create a file named tests.bundle.js. Within this file, you create a webpack context to match all the files that conform to a naming pattern – in this case *.spec.js(x). var context = require.context('.', true, /.+.spec.jsx?$/); context.keys().forEach(context); module.exports = context; Next, you point Karma to this file. Karma config Karma is configured using a karma.conf.js file. The browsers, plugins, and frameworks are specified in the standard way. Point Karma at the tests.bundle.js file, and run it through the relevant preprocessor plugins (see example below). The karma-webpack plugin relies on 2 custom properties of the Karma config: webpack and webpackMiddleware. The value of the former must be a webpack config object. module.exports = function (config) { config.set({ browsers: [ 'Chrome' ], // karma only needs to know about the test bundle files: [ 'tests.bundle.js' ], frameworks: [ 'chai', 'mocha' ], plugins: [ 'karma-chrome-launcher', 'karma-chai', 'karma-mocha', 'karma-sourcemap-loader', 'karma-webpack', ], // run the bundle through the webpack and sourcemap plugins preprocessors: { 'tests.bundle.js': [ 'webpack', 'sourcemap' ] }, reporters: [ 'dots' ], singleRun: true, // webpack config object webpack: { devtool: 'inline-source-map', module: { loaders: [ { exclude: /node_modules/, loader: 'babel-loader, test: /.jsx?$/ } ], } }, webpackMiddleware: { noInfo: true, } }); }; Rather than duplicating your webpack config, you can require it in the Karma config file and override the devtool value to get sourcemaps working. var webpackConfig = require('./webpack.config'); webpackConfig.devtool = 'inline-source-map'; module.exports = function (config) { config.set({ ... webpack: webpackConfig }); }; That’s all you need to do to configure Karma to use webpack to load your JSX, ES6 React components. Full Article
w Coronavirus | Lockdown chokes Maharashtra’s economic lifeline By www.thehindu.com Published On :: Sat, 09 May 2020 02:29:44 +0530 The industrial hub faces a massive shortfall in revenues amid growing cost of combating the pandemic Full Article Other States
w Coronavirus | Maharashtra adds 1,089 new cases; Mumbai’s death toll stands at 462 By www.thehindu.com Published On :: Fri, 08 May 2020 22:39:05 +0530 Of the 1,089 new cases, Mumbai accounted for 748, with a cumulative tally of 12,142. With 75 new cases, Pune district’s tally has risen to 2,537. Full Article Other States
w Migrant workers | Maharashtra train accident victims were battling hunger By www.thehindu.com Published On :: Sat, 09 May 2020 00:23:34 +0530 The previous night, they had called up relatives in Madhya Pradesh to say they were in a helpless state Full Article Other States
w Coronavirus | Indore remains worst hit in Madhya Pradesh with 3 more deaths By www.thehindu.com Published On :: Sat, 09 May 2020 02:21:20 +0530 Bhopal, by comparison, has so far reported 679 cases and 24 deaths, with 354 patients, or more than half of those infected, having recovered. Full Article Other States
w Coronavirus | 390 new cases, 24 deaths in Gujarat; clashes in Ahmedabad By www.thehindu.com Published On :: Fri, 08 May 2020 23:22:50 +0530 Two prominent medical experts — AIIMS director Dr Randeep Guleriya and Dr. Manish Suneja — flew into Ahmedabad on Friday following instructions from the Home Minister to guide local doctors Full Article Other States
w Coronavirus lockdown | With no work or food, workers brave the long march home from Uttar Pradesh By www.thehindu.com Published On :: Sat, 09 May 2020 10:06:56 +0530 "We don’t want anything from the government. We just want to be dropped home," says a migrant worker from Chhattisgarh. Full Article Other States
w Take back changes in labour laws: Priyanka By www.thehindu.com Published On :: Fri, 08 May 2020 23:54:28 +0530 ‘U.P. government crushing their rights’ Full Article Other States
w APMC market to shut down for a week By www.thehindu.com Published On :: Sat, 09 May 2020 01:35:05 +0530 The Agriculture Produces Market Committee (APMC) in Navi Mumbai on Friday decided to shut all five markets — vegetables, fruits, masala, grain and oni Full Article Other States
w PMC Bank fraud case: Rakesh Wadhawan denied interim bail By www.thehindu.com Published On :: Sat, 09 May 2020 01:37:30 +0530 HDIL promoter is lodged in Arthur Road Central Jail Full Article Other States
