for 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
for 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
for 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
for 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
for Facile synthesis of a direct Z-scheme BiOCl–phosphotungstic acid heterojunction for the improved photodegradation of tetracycline By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17369-17376DOI: 10.1039/D0RA02396E, Paper Open Access   This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Haijuan Tong, Bingfang Shi, Shulin ZhaoA one-step hydrothermal approach for synthesizing BiOCl–phosphotungstic acid (BiOCl–HPW) heterojunctions is proposed. The prepared BiOCl–HPW heterojunction exhibited good stability and photocatalytic activity.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
for 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
for Nitrogen-doped RuS2 nanoparticles containing in situ reduced Ru as an efficient electrocatalyst for hydrogen evolution By feeds.rsc.org Published On :: RSC Adv., 2020, 10,17862-17868DOI: 10.1039/D0RA02530E, Paper Open Access   This article is licensed under a Creative Commons Attribution-NonCommercial 3.0 Unported Licence.Yan Xu, Xiaoping Gao, Jingyan Zhang, Daqiang GaoThe reasonable design that N-doping and in situ reduced Ru metal enhances the performance of N-RuS2/Ru for HER.The content of this RSS Feed (c) The Royal Society of Chemistry Full Article
for Glossary format definition list By nicolasgallagher.com Published On :: Mon, 01 Jun 2009 17:00:00 -0700 Bruce Lawson recently asked for ways to style a definition list in the common glossary format. This is one way to do it. Bruce’s original post – css challenge – describes what he is after: a “glossary style” appearance with the term on the left and the definitions on the right. Some terms will have multiple definitions, definitions of varying length, and each new term should appear on a new line. A definition list is semantically correct for this kind of information, so there was to be no fiddling around with the HTML, and the browser requirements were for it to work in all modern browsers and IE 6+. You can skip straight to the demo where some additional classes are included in the HTML in order to highlight each term-definition association. The basic HTML The basic HTML structure is a simple definition list and nothing more. There are some short, long, and multiple definitions for each term. <h1>Styling definition lists</h1> <dl> <dt>Cheese</dt> <dd> <p>Velit esse cillum dolore in reprehenderit in voluptate duis aute irure dolor. Consectetur adipisicing elit, excepteur sint occaecat sunt in culpa. Velit esse cillum dolore eu fugiat nulla pariatur. Ut aliquip ex ea commodo consequat.</p> <p>Mollit anim id est laborum. Ut enim ad minim veniam, consectetur adipisicing elit, ullamco laboris nisi. Lorem ipsum dolor sit amet, sunt in culpa quis nostrud exercitation.</p> </dd> <dd>yummy!</dd> <dt>Building flexibility through spreading knowledge and self-organization, exploiting the productive lifecycle to experience a profound paradigm shift. Through the adoption of a proactive stance, the astute manager can adopt a position at the vanguard.</dt> <dd>balderdash</dd>; <dd>poppycock</dd> <dt>Aardvark</dt> <dd>never hurt anyone</dd> </dl> The styles In order to get the required appearance in all browsers I had to use negative margins and a few conditional styles to get IE7 and IE6 to play along. For the purposes of the demo I’ve placed all the styles in <style> blocks in the head of the document. <style> dl {padding-left:300px;} dt {clear:both; float:left; width:260px; padding:10px; margin:0 0 2em -300px; font-weight:bold; color:#686663;} dd {float:left; width:100%; padding:10px 0; margin:0 0 2em;} </styl> <!--[if lte IE 7]> <style> dt {display:inline; margin-bottom:0;} dd {float:none; width:auto;} </style> <![endif]--> That’s it. The widths of the <dt> can be set in ems or percentages if the layout requires. The complete code is available in the demo and you are free to use this code. Full Article
for 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
for Yet another HTML5 fallback strategy for IE By nicolasgallagher.com Published On :: Thu, 04 Nov 2010 17:00:00 -0700 If you’re using HTML5 elements then you’re probably also using a JavaScript shiv to help make it possible to style those elements in versions of Internet Explorer prior to IE9. But when JavaScript is disabled the accessibility of the content may be affected in these versions of IE. This is one way to provide a more accessible fallback. The concept is to ensure that all modern browsers are served the default style sheet(s) and that people using older versions of IE only download them if JavaScript is enabled. When JavaScript is not enabled, people using those browsers can be served either no styles at all (as Yahoo! suggests for browsers receiving C-Grade support) or simple fallback styles. Client-side method: conditional comments Doing this on the client-side comes at the cost of having to litter your code with proprietary conditional comments. First, it’s necessary to comment out the default style sheet(s) from versions of IE earlier than IE9. All other browsers will be able to read the file(s). <!--[if ! lt IE 9]><!--> <link rel="stylesheet" href="/css/default.css"> <!--<![endif]--> For earlier versions of IE, an HTML5 shiv is included and the necessary link elements are created and added to the DOM using JavaScript. This means that when JavaScript is not enabled in IE7 or IE8 the style sheet will not be present, resulting in an unstyled HTML page. In this example, IE6 won’t be served CSS at all. <!--[if (IE 7)|(IE 8)]> <script src="/js/html5.js"></script> <script> (function() { var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "/css/default.css"; document.getElementsByTagName("head")[0].appendChild(link); }()); </script> <![endif]--> To support multiple style sheets, an array and for loop can be used. <!--[if (IE 7)|(IE 8)]> <script src="/js/html5.js"></script> <script> (function() { var css = [ '/css/default.css', '/css/section.css', '/css/custom.css' ]; var i; var link = document.createElement('link'); var head = document.getElementsByTagName('head')[0]; var tmp; link.rel = 'stylesheet'; for(i = 0; i < css.length; i++){ tmp = link.cloneNode(true); tmp.href = css[i]; head.appendChild(tmp); } }()); </script> <![endif]--> Thanks to Remy Sharp and Mathias Bynens for helping me to improve this script. Fork it. Rather than serving unstyled content, it may be preferable to provide some simple fallback styles. This can be done by linking to a separate style sheet wrapped in noscript tags. In this example, IE6 will always use these legacy styles while IE7 and IE8 will do so only when JavaScript is disabled. <!--[if lt IE 9]> <noscript> <link rel="stylesheet" href="/css/legacy.css"> </noscript> <![endif]--> You may wish to use a generic style sheet, such as “Universal IE6 CSS”, or spend a few minutes crafting your own and ensuring that the typography and colours approximate those in the default style sheet. The complete example code is as follows: <!--[if ! lt IE 9]><!--> <link rel="stylesheet" href="/css/default.css"> <!--<![endif]--> <!--[if (IE 7)|(IE 8)]> <script src="/js/html5.js"></script> <script> (function() { var link = document.createElement("link"); link.rel = "stylesheet"; link.href = "/css/default.css"; document.getElementsByTagName("head")[0].appendChild(link); }()); </script> <![endif]--> <!--[if lt IE 9]> <noscript> <link rel="stylesheet" href="/css/legacy.css"> </noscript> <![endif]--> Server-side method: user-agent string detection The drawbacks of current client-side approaches to IE fallbacks is that they are IE-specific, make extensive use of conditional comments, and have to use JavaScript to create or rewrite link elements. This blog makes use of an alternative approach: server-side user-agent detection. It was inspired by Yahoo!’s Graded Browser Support strategy – created by Nate Koechley – which recommends that all CSS and JavaScript is withheld from legacy browsers (not limited to IE). The source code in the head of this blog changes when viewed in modern browsers, IE8, and legacy browsers that are incapable of styling HTML5 elements (e.g. Firefox 2) or lack adequate CSS2.1 support (e.g. IE7). Browsers are assumed to be capable; there is no need to update the script every time a new browser is released. Only when a browser is deemed to be severely incapable is it added to a “blacklist” and served simple styles to ensure that the accessibility of the content is maintained. This is the method I prefer, although it does require more time upfront. Full Article
for Better conditional classnames for hack-free CSS By nicolasgallagher.com Published On :: Thu, 19 May 2011 17:00:00 -0700 Applying conditional classnames to the html element is a popular way to help target specific versions of IE with CSS fixes. It was first described by Paul Irish and is a feature of the HTML5 Boilerplate. Despite all its benefits, there are still a couple of niggling issues. Here are some hacky variants that side-step those issues. An article by Paul Irish, Conditional stylesheets vs CSS hacks? Answer: Neither!, first proposed that conditional comments be used on the opening html tag to help target legacy versions of IE with CSS fixes. Since its inclusion in the HTML5 Boilerplate project, contributors have further refined the technique. However, there are still some niggling issues with the “classic” conditional comments approach, which Mathias Bynens summarized in a recent article on safe CSS hacks. The Compatibility View icon is displayed in IE8 and IE9 if you are not setting the X-UA-Compatible header in a server config. The character encoding declaration might not be fully contained within the first 1024 bytes of the HTML document if you need to include several attributes on each version of the opening html tag (e.g. Facebook xmlns junk). You can read more about the related discussions in issue #286 and issue #378 at the HTML5 Boilerplate GitHub repository. The “bubble up” conditional comments method Although not necessarily recommended, it looks like both of these issues can be avoided with a bit of trickery. You can create an uncommented opening html tag upon which any shared attributes (so no class attribute) can be set. The conditional classes are then assigned in a second html tag that appears after the <meta http-equiv="X-UA-Compatible"> tag in the document. The classes will “bubble up” to the uncommented tag. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <!--[if lt IE 7]><html class="no-js ie6"><![endif]--> <!--[if IE 7]><html class="no-js ie7"><![endif]--> <!--[if IE 8]><html class="no-js ie8"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> <title>Document</title> </head> <body> </body> </html> Fork the Gist The result is that IE8 and IE9 won’t ignore the <meta http-equiv="X-UA-Compatible"> tag, the Compatibility View icon will not be displayed, and the amount of repeated code is reduced. Obviously, including a second html tag in the head isn’t pretty or valid HTML. If you’re using a server-side config to set the X-UA-Compatible header (instead of the meta tag), then you can still benefit from the DRYer nature of using two opening html tags and it isn’t necessary to include the conditional comments in the head of the document. However, you might still want to do so if you risk not containing the character encoding declaration within the first 1024 bytes of the document. <!DOCTYPE html> <html lang="en"> <!--[if lt IE 7]><html class="no-js ie6"><![endif]--> <!--[if IE 7]><html class="no-js ie7"><![endif]--> <!--[if IE 8]><html class="no-js ie8"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> <head> <meta charset="utf-8"> <title>Document</title> </head> <body> </body> </html> Fork the Gist The “preemptive” conditional comments method Another method to prevent the Compatibility View icon from showing was found by Julien Wajsberg. It relies on including a conditional comment before the DOCTYPE. Doing this seems to help IE recognise the <meta http-equiv="X-UA-Compatible"> tag. This method isn’t as DRY and doesn’t have the character encoding declaration as high up in the document, but it also doesn’t use 2 opening html elements. <!--[if IE]><![endif]--> <!DOCTYPE html> <!--[if lt IE 7]><html class="no-js ie6"><![endif]--> <!--[if IE 7]><html class="no-js ie7"><![endif]--> <!--[if IE 8]><html class="no-js ie8"><![endif]--> <!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]--> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta charset="utf-8"> <title>Document</title> </head> <body> </body> </html> Fork the Gist While it’s interesting to explore these possibilities, the “classic” method is still generally the most understandable. It doesn’t create invalid HTML, doesn’t risk throwing IE into quirks mode, and you won’t have a problem with the Compatibility View icon if you use a server-side config. If you find any other approaches, or problems with those posted here, please leave a comment but also consider adding what you’ve found to the relevant issues in the HTML5 Boilerplate GitHub repository. Thanks to Paul Irish for feedback and suggestions. Full Article
for A simple Git deployment strategy for static sites By nicolasgallagher.com Published On :: Wed, 01 Jan 2014 16:00:00 -0800 This is how I am deploying the build of my static website to staging and production domains. It requires basic use of the CLI, Git, and SSH. But once you’re set up, a single command will build and deploy. TL;DR: Push the static build to a remote, bare repository that has a detached working directory (on the same server). A post-receive hook checks out the files in the public directory. Prerequisites A remote web server to host your site. SSH access to your remote server. Git installed on your remote server (check with git --version). Generate an SSH key if you need one. On the server Set up password-less SSH access First, you need to SSH into your server, and provide the password if prompted. ssh user@hostname If there is no ~/.ssh directory in your user’s home directory, create one: mkdir ~/.ssh. Next, you need to copy your public SSH key (see “Generate an SSH key” above) to the server. This allows you to connect via SSH without having to enter a password each time. From your local machine – assuming your public key can be found at ~/.ssh/id_rsa.pub – enter the following command, with the correct user and hostname. It will append your public key to the authorized_keys file on the remote server. ssh user@hostname 'cat >> ~/.ssh/authorized_keys' < ~/.ssh/id_rsa.pub If you close the connection, and then attempt to establish SSH access, you should no longer be prompted for a password. Create the remote directories You need to have 2 directories for each domain you want to host. One for the Git repository, and one to contain the checked out build. For example, if your domain were example.com and you also wanted a staging environment, you’d create these directories on the server: mkdir ~/example.com ~/example.git mkdir ~/staging.example.com ~/staging.example.git Initialize the bare Git repository Create a bare Git repository on the server. This is where you will push the build assets to, from your local machine. But you don’t want the files served here, which is why it’s a bare repository. cd ~/example.git git init --bare Repeat this step for the staging domain, if you want. Write a post-receive hook A post-receive hook allows you to run commands after the Git repository has received commits. In this case, you can use it to change Git’s working directory from example.git to example.com, and check out a copy of the build into the example.com directory. The location of the working directory can be set on a per-command basis using GIT_WORK_TREE, one of Git’s environment variables, or the --work-tree option. cat > hooks/post-receive #!/bin/sh WEB_DIR=/path/to/example.com # remove any untracked files and directories git --work-tree=${WEB_DIR} clean -fd # force checkout of the latest deploy git --work-tree=${WEB_DIR} checkout --force Make sure the file permissions on the hook are correct. chmod +x hooks/post-receive If you need to exclude some files from being cleaned out by Git (e.g., a .htpasswd file), you can do that using the --exclude option. This requires Git 1.7.3 or above to be installed on your server. git --work-tree=${WEB_DIR} clean -fd --exclude=<pattern> Repeat this step for the staging domain, if you want. On your local machine Now that the server configuration is complete, you want to deploy the build assets (not the source code) for the static site. The build and deploy tasks I’m using a Makefile, but use whatever you feel comfortable with. What follows is the basic workflow I wanted to automate. Build the production version of the static site. make build Initialize a new Git repo in the build directory. I don’t want to try and merge the new build into previous deploys, especially for the staging domain. git init ./build Add the remote to use for the deploy. cd ./build git remote add origin ssh://user@hostname/~/example.git Commit everything in the build repo. cd ./build git add -A git commit -m "Release" Force-replace the remote master branch, creating it if missing. cd ./build git push -f origin +master:refs/heads/master Tag the checked-out commit SHA in the source repo, so I can see which SHA’s were last deployed. git tag -f production Using a Makefile: BUILD_DIR := ./build STAGING_REPO = ssh://user@hostname/~/staging.example.git PROD_REPO = ssh://user@hostname/~/example.git install: npm install # Deploy tasks staging: build git-staging deploy @ git tag -f staging @ echo "Staging deploy complete" prod: build git-prod deploy @ git tag -f production @ echo "Production deploy complete" # Build tasks build: clean # whatever your build step is # Sub-tasks clean: @ rm -rf $(BUILD_DIR) git-prod: @ cd $(BUILD_DIR) && git init && git remote add origin $(PROD_REPO) git-staging: @ cd $(BUILD_DIR) && git init && git remote add origin $(STAGING_REPO) deploy: @ cd $(BUILD_DIR) && git add -A && git commit -m "Release" && git push -f origin +master:refs/heads/master .PHONY: install build clean deploy git-prod git-staging prod staging To deploy to staging: make staging To deploy to production: make prod Using Make, it’s a little bit more hairy than usual to force push to master, because the cd commands take place in a sub-process. You have to make sure subsequent commands are on the same line. For example, the deploy task would force push to your source code’s remote master branch if you failed to join the commands with && or ;! I push my site’s source code to a private repository on BitBucket. One of the nice things about BitBucket is that it gives you the option to prevent deletions or history re-writes of branches. If you have any suggested improvements, let me know on Twitter. Full Article
for Making SVG icon libraries for React apps By nicolasgallagher.com Published On :: Thu, 01 Feb 2018 16:00:00 -0800 Using SVG is currently the best way to create icon libraries for apps. Icons built with SVG are scalable and adjustable, but also discrete, which allows them to be incrementally loaded and updated. In contrast, icons built as fonts cannot be incrementally loaded or updated. This alone makes SVG icons the better choice for high-performance apps that rely on code-splitting and incremental deploys. This post describes how to make a package of React components from a library of SVG icons. Although I’m focusing on React, making any other type of package is also possible. At Twitter I used the approach described here to publish the company’s SVG icon library in several different formats: optimized SVGs, plain JavaScript modules, React DOM components, and React Native components. Using the icons The end result is a JavaScript package that can be installed and used like any other JavaScript package. yarnpkg add @acme/react-icons Each icon is available as an individually exported React component. import IconCamera from '@acme/react-icons/camera'; This allows your module bundler to package only the icons that are needed, and icons can be efficiently split across chunks when using code-splitting. This is a significant advantage over icon libraries that require fonts and bundle all icons into a single component. // entire icon library is bundled with your app import Icon from '@acme/react-icons'; const IconCamera = <Icon name='camera' />; Each icon is straightforward to customize (e.g., color and dimensions) on a per-use basis. import IconCamera from '@twitter/react-icons/camera'; const Icon = ( <IconCamera style={{ color: 'white', height: '2em' }} /> ); Although the icons render to SVG, this is an implementation detail that isn’t exposed to users of the components. Creating components Each React component renders an inline SVG, using path and dimensions data extracted from the SVG source files. A helper function called createIconComponent means that only a few lines of boilerplate are needed to create a component from SVG data. import createIconComponent from './utils/createIconComponent'; import React from 'react'; const IconCamera = createIconComponent({ content: <g><path d='...'></g>, height: 24, width: 24 }); IconCamera.displayName = 'IconCamera'; export default IconCamera; This is an example of what the createIconComponent function looks like when building components for a web app like Twitter Lite, which is built with React Native for Web. // createIconComponent.js import { createElement, StyleSheet } from 'react-native-web'; import React from 'react'; const createIconComponent = ({ content, height, width }) => (initialProps) => { const props = { ...initialProps, style: StyleSheet.compose(styles.root, initialProps.style), viewBox: `0 0 ${width} ${height}` }; return createElement('svg', props, content); }; const styles = StyleSheet.create({ root: { display: 'inline-block', fill: 'currentcolor', height: '1.25em', maxWidth: '100%', position: 'relative', userSelect: 'none', textAlignVertical: 'text-bottom' } }); Setting the fill style to currentcolor allows you to control the color of the SVG using the color style property instead. All that’s left is to use scripts to process the SVGs and generate each React component. Creating icon packages A complete example of one way to do this can be found in the icon-builder-example repository on GitHub. The project structure of the example tool looks like this. . ├── README.md ├── package.json ├── scripts/ ├── build.js ├── createReactPackage.js └── svgOptimize.js └── src/ ├── alerts.svg ├── camera.svg ├── circle.svg └── ... The build script uses SVGO to optimize the SVGs, extract SVG path data, and extract metadata. The example packager for React then uses templates to create a package.json and the React icon components shown earlier. import createIconComponent from './utils/createIconComponent'; import React from 'react'; const ${componentName} = createIconComponent({ height: ${height}, width: ${width}, content: <g>${paths}</g> }); ${componentName}.displayName = '${componentName}'; export default ${componentName}; Additional packagers can be included to build other package types from the same SVG source. When the underlying icon library changes, it only takes a couple of commands to rebuild hundreds of icons and publish new versions of each package. Full Article
for Odisha to expedite chariot construction for Rath Yatra By www.thehindu.com Published On :: Fri, 08 May 2020 19:08:57 +0530 The Home Ministry had on Thursday allowed chariot construction with a condition that no religious congregation should take place around the Ratha Khala. Full Article Other States
for 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
for PNB scam: HC rejects bail plea of accused who tested positive for COVID-19 By www.thehindu.com Published On :: Sat, 09 May 2020 01:43:26 +0530 Court says Hemant Bhatt needs to be treated at a govt. hospital Full Article Other States
for Former J&K Minister’s detention extended by 3 months By www.thehindu.com Published On :: Sat, 09 May 2020 01:57:10 +0530 With a view to prevent him from acting in any manner prejudicial to the maintenance of public order, Naeem Akhtar detention is being extended, an order said. Full Article Other States
for No fees for medical screening, Maharashtra tells HC By www.thehindu.com Published On :: Sat, 09 May 2020 02:19:48 +0530 Court wants decision on levying costs for transport of migrant workers Full Article Other States
for Coronavirus | Assam rights activist held for social media post By www.thehindu.com Published On :: Sat, 09 May 2020 03:26:43 +0530 Rupa Rani Bhuyan, assistant professor of Mangaldoi College, was held for “misbehaving” with the police and “obstructing” them from investigating cases against her Full Article Other States
for Odisha drafts more than 2 lakh people into COVID-19 workforce By www.thehindu.com Published On :: Sat, 09 May 2020 02:53:13 +0530 8,023 doctors, 8,296 staff nurses, 4,105 paramedics and lab technicians have been identified as dedicated COVID-19 service providers Full Article Other States
for Punjab Cabinet nod for non-teaching staff transfer policy By www.thehindu.com Published On :: Sat, 09 May 2020 02:57:03 +0530 State mulling changes in excise policy, labour laws amid lockdown Full Article Other States
for Lock down or lock up! Brimful misery for commoners By www.assamtimes.org Published On :: Fri, 27 Mar 2020 03:18:35 +0000 Full Article
for BTR at war with COVID19 with full force By www.assamtimes.org Published On :: Sat, 04 Apr 2020 10:00:05 +0000 Full Article
for SC asks for govt response on detention camp inmates By www.assamtimes.org Published On :: Tue, 07 Apr 2020 13:59:07 +0000 Full Article
for Strategic information management [electronic resource] : challenges and strategies in managing information systems / R.D. Galliers and D.E. Leidner By prospero.murdoch.edu.au Published On :: Galliers, Robert, 1947- Full Article
for Strategic risk management [electronic resource] : new tools for competitive advantage in an uncertain age / Paul C. Godfrey, [and three others] By prospero.murdoch.edu.au Published On :: Godfrey, Paul C., author Full Article
for The strategy of execution [electronic resource] : the five-step guide for turning vision into action / Liz Mellon and Simon Carter By prospero.murdoch.edu.au Published On :: Mellon, Elizabeth Full Article
for Stress less. achieve more [electronic resource] : simple ways to turn pressure into a positive force in your life / Aimee Bernstein By prospero.murdoch.edu.au Published On :: Bernstein, Aimee Full Article
for The stress test every business needs [electronic resource] : a capital agenda for confidently facing digital disruption, difficult investors, recessions and geopolitical threats / Jeffrey R. Greene, Steve Krouskos, Julie Hood, Harsha Basnayake, William Ca By prospero.murdoch.edu.au Published On :: Greene, Jeffrey R., author Full Article
for The subjective well-being module of the American Time Use Survey [electronic resource] : assessment for its continuation / Panel on Measuring Subjective Well-Being in a Policy-Relevant Framework, Committee on National Statistics, Division of Behavioral an By prospero.murdoch.edu.au Published On :: Full Article
for Informatik [electronic resource] / Kerstin Weinl By prospero.murdoch.edu.au Published On :: Weinl, Kerstin Full Article
for Superior customer value [electronic resource] : strategies for winning and retaining customers / Art Weinstein By prospero.murdoch.edu.au Published On :: Weinstein, Art, author Full Article
for Supply chain management for engineers [electronic resource] / Samuel H. Huang By prospero.murdoch.edu.au Published On :: Huang, Samuel H., author Full Article
for Tail risk hedging [electronic resource] : creating robust portfolios for volatile markets / Vineer Bhansali By prospero.murdoch.edu.au Published On :: Bhansali, Vineer Full Article
for The talent equation [electronic resource] : big data lessons for navigating the skills gap and building a competitive workforce / Matt Ferguson, Lorin Hitt, Prasanna Tambe, with Ryan Hunt and Jennifer Sullivan Grasz By prospero.murdoch.edu.au Published On :: Ferguson, Matt Full Article
for Target opportunity selling [electronic resource] : top sales performers reveal what really works / Nicholas A.C. Read By prospero.murdoch.edu.au Published On :: Read, Nicholas A. C Full Article
for The tech entrepreneur's survival guide [electronic resource] : how to bootstrap your startup, lead through tough times, and cash in for success / Bernd Schoner By prospero.murdoch.edu.au Published On :: Schoner, Bernd Full Article
for Technology entrepreneurship [electronic resource] : taking innovation to the marketplace / Thomas N. Duening, Ph.D, El Pomar Chair of Business and Entrepreneurship, Director, Center for Entrepreneurship, College of Business, University of Colorado at Colo By prospero.murdoch.edu.au Published On :: Duening, Thomas N Full Article
for Terraform [electronic resource] : up and running : writing infrastructure as code / Yevgeniy Brikman By prospero.murdoch.edu.au Published On :: Brikman, Yevgeniy, author Full Article
for There's no such thing as an IT project [electronic resource] : a handbook for intentional business change / Bob Lewis, Dave Kaiser By prospero.murdoch.edu.au Published On :: Lewis, Bob, author Full Article
for Think before you engage [electronic resource] : 100 questions to ask before starting a social media marketing campaign / Dave Peck By prospero.murdoch.edu.au Published On :: Peck, Dave D Full Article
for Thinkers 50 [electronic resource] : future thinkers : new thinking on leadership, strategy and innovation for the twenty first century / Stuart Crainer + Des Dearlove By prospero.murdoch.edu.au Published On :: Crainer, Stuart Full Article
for Thinkers 50 management [electronic resource] : cutting edge thinking to engage and motivate your employees for success / Stuart Crainer + Des Dearlove By prospero.murdoch.edu.au Published On :: Crainer, Stuart Full Article
for Tibco spotfire [electronic resource] : a comprehensive primer : create innovative enterprise-class informatics solutions using TIBCO Spotfire / Michael Phillips By prospero.murdoch.edu.au Published On :: Phillips, Michael, author Full Article
for Total quality management and just-in-time purchasing [electronic resource] : their effects on performance of firms operating in the U.S. / Hale Kaynak By prospero.murdoch.edu.au Published On :: Kaynak, Hale, 1956- Full Article
for Training and development for dummies [electronic resource] / by Elaine Biech, CPLP Fellow ; foreword by Tony Bingham, President and CEO, Association for Talent Development By prospero.murdoch.edu.au Published On :: Biech, Elaine Full Article
for Transformative scenario planning [electronic resource] : working together to change the future / Adam Kahane By prospero.murdoch.edu.au Published On :: Kahane, Adam Full Article
for Transforming legacy organizations [electronic resource] : turn your established business into an innovation champion to win the future / Kris Oestergaard By prospero.murdoch.edu.au Published On :: Oestergaard, Kris, 1973- author Full Article
for Transforming public and nonprofit organizations [electronic resource] : stewardship for leading change / James Edwin Kee, Kathryn E. Newcomer By prospero.murdoch.edu.au Published On :: Kee, James Edwin Full Article
for Transitioning to Agile [electronic resource] : understanding the business imperative for transforming enterprises / Rick Freedman By prospero.murdoch.edu.au Published On :: Freedman, Rick, author Full Article