1657170000
Rollup Plugin Re: Replace Text with Regular Expressions
rollup-plugin-re
Power rollup content transform plugin.
Installation
npm install --save-dev rollup-plugin-re
Usage
import { rollup } from 'rollup'
import replace from 'rollup-plugin-re'
import commonjs from 'rollup-plugin-commonjs'
rollup({
entry: 'main.js',
plugins: [
replace({
// ... do replace before commonjs
patterns: [
{
// regexp match with resolved path
match: /formidable(\/|\\)lib/,
// string or regexp
test: 'if (global.GENTLY) require = GENTLY.hijack(require);',
// string or function to replaced with
replace: '',
}
]
}),
commonjs(),
replace({
// ... do replace after commonjs
})
]
}).then(...)
Define macro pre-processor
use defines options to remove macro blocks
Options
{
defines: {
IS_SKIP: false,
IS_REMOVE: true,
}
}
input
// #if IS_SKIP
console.log('!Skip!')
// #endif
// #if IS_REMOVE
console.log('!Remove!')
// #endif
output
// #if IS_SKIP
console.log('!Skip!')
// #endif
Replace
use replaces options to quick replace text
Options
{
replaces: {
$version: "1.0.1"
}
}
input
console.log('$version')
output
console.log('1.0.1')
Options
{
// a minimatch pattern, or array of patterns, of files that
// should be processed by this plugin (if omitted, all files
// are included by default)...
include: 'config.js',
// ...and those that shouldn't, if `include` is otherwise
// too permissive
exclude: 'node_modules/**',
defines: {
IS_SKIP: false,
IS_REMOVE: true,
},
replaces: {
$version: "1.0.1"
},
patterns: [
{
include: [], // same as above
exclude: [], // same as above
// regexp match with resolved path
match: /formidable(\/|\\)lib/,
// string or regexp
test: 'if (global.GENTLY) require = GENTLY.hijack(require);',
// string or function
replace: '',
},
// replace whole file content
{
text: 'exports = "content"', // replace content with given text
},
{
file: './replace.js', // replace with given relative file
},
{
transform (code, id) { // replace by function
return `'use strict';\n${code}`
}
}
]
}Author: jetiny
Source code: https://github.com/jetiny/rollup-plugin-re
License: MIT license
#javascript #Rollup
What is GEEK
Buddha Community
1650870267
Navigating Between DOM Nodes in JavaScript
In the previous chapters you've learnt how to select individual elements on a web page. But there are many occasions where you need to access a child, parent or ancestor element. See the JavaScript DOM nodes chapter to understand the logical relationships between the nodes in a DOM tree.
DOM node provides several properties and methods that allow you to navigate or traverse through the tree structure of the DOM and make changes very easily. In the following section we will learn how to navigate up, down, and sideways in the DOM tree using JavaScript.
Accessing the Child Nodes
You can use the firstChild and lastChild properties of the DOM node to access the first and last direct child node of a node, respectively. If the node doesn't have any child element, it returns null.
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
console.log(main.firstChild.nodeName); // Prints: #text
var hint = document.getElementById("hint");
console.log(hint.firstChild.nodeName); // Prints: SPAN
</script>Note: The
nodeNameis a read-only property that returns the name of the current node as a string. For example, it returns the tag name for element node,#textfor text node,#commentfor comment node,#documentfor document node, and so on.
If you notice the above example, the nodeName of the first-child node of the main DIV element returns #text instead of H1. Because, whitespace such as spaces, tabs, newlines, etc. are valid characters and they form #text nodes and become a part of the DOM tree. Therefore, since the <div> tag contains a newline before the <h1> tag, so it will create a #text node.
To avoid the issue with firstChild and lastChild returning #text or #comment nodes, you could alternatively use the firstElementChild and lastElementChild properties to return only the first and last element node, respectively. But, it will not work in IE 9 and earlier.
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
alert(main.firstElementChild.nodeName); // Outputs: H1
main.firstElementChild.style.color = "red";
var hint = document.getElementById("hint");
alert(hint.firstElementChild.nodeName); // Outputs: SPAN
hint.firstElementChild.style.color = "blue";
</script>Similarly, you can use the childNodes property to access all child nodes of a given element, where the first child node is assigned index 0. Here's an example:
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
// First check that the element has child nodes
if(main.hasChildNodes()) {
var nodes = main.childNodes;
// Loop through node list and display node name
for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>The childNodes returns all child nodes, including non-element nodes like text and comment nodes. To get a collection of only elements, use children property instead.
Example
<div id="main">
<h1 id="title">My Heading</h1>
<p id="hint"><span>This is some text.</span></p>
</div>
<script>
var main = document.getElementById("main");
// First check that the element has child nodes
if(main.hasChildNodes()) {
var nodes = main.children;
// Loop through node list and display node name
for(var i = 0; i < nodes.length; i++) {
alert(nodes[i].nodeName);
}
}
</script>
1625664660
Regular Expressions - How to Find, Replace, and Format Text - Beyond Code Live X
Regular expressions are like salt: A little goes a long way, and a lot is just plain bad.
I use them on a daily basis and it makes my life better.
Cheat Sheet:
https://github.com/BeyondCodeBootcamp/beyondcodebootcamp/blob/master/regex/README.md
Beyond Code:
(Learn to Code in 15 Minutes a Day)
Bootcamp Playlist: https://www.youtube.com/playlist?list=PLxki0D-ilnqZfyo2dZe11ZNGP7RJxJcoA
Subscribe on YouTube: https://youtube.com/channel/UC2KJHARTj6KRpKzLU1sVxBA
Join on Facebook: https://fb.com/beyondcodebootcamp
Follow on Twitter: https://twitter.com/@_beyondcode
AJ’s Live Streams:
Watch on Twitch: https://twitch.tv/coolaj86
Subscribe on YouTube: https://youtube.com/coolaj86
Watch on Facebook: https://fb.com/coolaj86
Health, Wealth, Commitment
(My Morning Shower Thoughts as a Daily Lifestyle Vlog)
Join on Facebook: https://www.facebook.com/groups/5406824179391158
Subscribe on YouTube: https://www.youtube.com/channel/UCbw2SbqD0OofAEVF_T61wCQ
#softwaredevelopment #softwareengineer #webdevelopment #webdeveloper
#softwaredevelopment #webdevelopment #regular expressions #format text #webdeveloper #replace
1623050167
Mad Libs: Using regular expressions
From Tiny Python Projects by Ken Youens-Clark
Everyone loves Mad Libs! And everyone loves Python. This article shows you how to have fun with both and learn some programming skills along the way.
Take 40% off Tiny Python Projects by entering fccclark into the discount code box at checkout at manning.com.
When I was a wee lad, we used to play at Mad Libs for hours and hours. This was before computers, mind you, before televisions or radio or even paper! No, scratch that, we had paper. Anyway, the point is we only had Mad Libs to play, and we loved it! And now you must play!
We’ll write a program called mad.py which reads a file given as a positional argument and finds all the placeholders noted in angle brackets like <verb> or <adjective> . For each placeholder, we’ll prompt the user for the part of speech being requested like “Give me a verb” and “Give me an adjective.” (Notice that you’ll need to use the correct article.) Each value from the user replaces the placeholder in the text, and if the user says “drive” for “verb,” then <verb> in the text replaces with drive . When all the placeholders have been replaced with inputs from the user, print out the new text.
#python #regular-expressions #python-programming #python3 #mad libs: using regular expressions #using regular expressions
1657170000
Rollup Plugin Re: Replace Text with Regular Expressions
rollup-plugin-re
Power rollup content transform plugin.
Installation
npm install --save-dev rollup-plugin-re
Usage
import { rollup } from 'rollup'
import replace from 'rollup-plugin-re'
import commonjs from 'rollup-plugin-commonjs'
rollup({
entry: 'main.js',
plugins: [
replace({
// ... do replace before commonjs
patterns: [
{
// regexp match with resolved path
match: /formidable(\/|\\)lib/,
// string or regexp
test: 'if (global.GENTLY) require = GENTLY.hijack(require);',
// string or function to replaced with
replace: '',
}
]
}),
commonjs(),
replace({
// ... do replace after commonjs
})
]
}).then(...)
Define macro pre-processor
use defines options to remove macro blocks
Options
{
defines: {
IS_SKIP: false,
IS_REMOVE: true,
}
}
input
// #if IS_SKIP
console.log('!Skip!')
// #endif
// #if IS_REMOVE
console.log('!Remove!')
// #endif
output
// #if IS_SKIP
console.log('!Skip!')
// #endif
Replace
use replaces options to quick replace text
Options
{
replaces: {
$version: "1.0.1"
}
}
input
console.log('$version')
output
console.log('1.0.1')
Options
{
// a minimatch pattern, or array of patterns, of files that
// should be processed by this plugin (if omitted, all files
// are included by default)...
include: 'config.js',
// ...and those that shouldn't, if `include` is otherwise
// too permissive
exclude: 'node_modules/**',
defines: {
IS_SKIP: false,
IS_REMOVE: true,
},
replaces: {
$version: "1.0.1"
},
patterns: [
{
include: [], // same as above
exclude: [], // same as above
// regexp match with resolved path
match: /formidable(\/|\\)lib/,
// string or regexp
test: 'if (global.GENTLY) require = GENTLY.hijack(require);',
// string or function
replace: '',
},
// replace whole file content
{
text: 'exports = "content"', // replace content with given text
},
{
file: './replace.js', // replace with given relative file
},
{
transform (code, id) { // replace by function
return `'use strict';\n${code}`
}
}
]
}Author: jetiny
Source code: https://github.com/jetiny/rollup-plugin-re
License: MIT license
#javascript #Rollup
1622722796
How To Customize WordPress Plugins? (4 Easy Ways To Do)
WordPress needs no introduction. It has been in the world for quite a long time. And up till now, it has given a tough fight to leading web development technology. The main reason behind its remarkable success is, it is highly customizable and also SEO-friendly. Other benefits include open-source technology, security, user-friendliness, and the thousands of free plugins it offers.
Talking of WordPress plugins, are a piece of software that enables you to add more features to the website. They are easy to integrate into your website and don’t hamper the performance of the site. WordPress, as a leading technology, has to offer many out-of-the-box plugins.
However, not always the WordPress would be able to meet your all needs. Hence you have to customize the WordPress plugin to provide you the functionality you wished. WordPress Plugins are easy to install and customize. You don’t have to build the solution from scratch and that’s one of the reasons why small and medium-sized businesses love it. It doesn’t need a hefty investment or the hiring of an in-house development team. You can use the core functionality of the plugin and expand it as your like.
In this blog, we would be talking in-depth about plugins and how to customize WordPress plugins to improve the functionality of your web applications.
What Is The Working Of The WordPress Plugins?
Developing your own plugin requires you to have some knowledge of the way they work. It ensures the better functioning of the customized plugins and avoids any mistakes that can hamper the experience on your site.
1. Hooks
Plugins operate primarily using hooks. As a hook attaches you to something, the same way a feature or functionality is hooked to your website. The piece of code interacts with the other components present on the website. There are two types of hooks: a. Action and b. Filter.
A. Action
If you want something to happen at a particular time, you need to use a WordPress “action” hook. With actions, you can add, change and improve the functionality of your plugin. It allows you to attach a new action that can be triggered by your users on the website.
There are several predefined actions available on WordPress, custom WordPress plugin development also allows you to develop your own action. This way you can make your plugin function as your want. It also allows you to set values for which the hook function. The add_ action function will then connect that function to a specific action.
B. Filters
They are the type of hooks that are accepted to a single variable or a series of variables. It sends them back after they have modified it. It allows you to change the content displayed to the user.
You can add the filter on your website with the apply_filter function, then you can define the filter under the function. To add a filter hook on the website, you have to add the $tag (the filter name) and $value (the filtered value or variable), this allows the hook to work. Also, you can add extra function values under $var.
Once you have made your filter, you can execute it with the add_filter function. This will activate your filter and would work when a specific function is triggered. You can also manipulate the variable and return it.
2. Shortcodes
Shortcodes are a good way to create and display the custom functionality of your website to visitors. They are client-side bits of code. They can be placed in the posts and pages like in the menu and widgets, etc.
There are many plugins that use shortcodes. By creating your very own shortcode, you too can customize the WordPress plugin. You can create your own shortcode with the add_shortcode function. The name of the shortcode that you use would be the first variable and the second variable would be the output of it when it is triggered. The output can be – attributes, content, and name.
3. Widgets
Other than the hooks and shortcodes, you can use the widgets to add functionality to the site. WordPress Widgets are a good way to create a widget by extending the WP_Widget class. They render a user-friendly experience, as they have an object-oriented design approach and the functions and values are stored in a single entity.
How To Customize WordPress Plugins?
There are various methods to customize the WordPress plugins. Depending on your need, and the degree of customization you wish to make in the plugin, choose the right option for you. Also, don’t forget to keep in mind that it requires a little bit of technical knowledge too. So find an expert WordPress plugin development company in case you lack the knowledge to do it by yourself.
1. Hire A Plugin Developer3
One of the best ways to customize a WordPress plugin is by hiring a plugin developer. There are many plugin developers listed in the WordPress directory. You can contact them and collaborate with world-class WordPress developers. It is quite easy to find a WordPress plugin developer.
Since it is not much work and doesn’t pay well or for the long term a lot of developers would be unwilling to collaborate but, you will eventually find people.
2. Creating A Supporting Plugin
If you are looking for added functionality in an already existing plugin go for this option. It is a cheap way to meet your needs and creating a supporting plugin takes very little time as it has very limited needs. Furthermore, you can extend a plugin to a current feature set without altering its base code.
However, to do so, you have to hire a WordPress developer as it also requires some technical knowledge.
3. Use Custom Hooks
Use the WordPress hooks to integrate some other feature into an existing plugin. You can add an action or a filter as per your need and improve the functionality of the website.
If the plugin you want to customize has the hook, you don’t have to do much to customize it. You can write your own plugin that works with these hooks. This way you don’t have to build a WordPress plugin right from scratch. If the hook is not present in the plugin code, you can contact a WordPress developer or write the code yourself. It may take some time, but it works.
Once the hook is added, you just have to manually patch each one upon the release of the new plugin update.
4. Override Callbacks
The last way to customize WordPress plugins is by override callbacks. You can alter the core functionality of the WordPress plugin with this method. You can completely change the way it functions with your website. It is a way to completely transform the plugin. By adding your own custom callbacks, you can create the exact functionality you desire.
We suggest you go for a web developer proficient in WordPress as this requires a good amount of technical knowledge and the working of a plugin.
#customize wordpress plugins #how to customize plugins in wordpress #how to customize wordpress plugins #how to edit plugins in wordpress #how to edit wordpress plugins #wordpress plugin customization