Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
PublisherPick is a platform where publishers, bloggers and content creators can monetize their website, gain high eCPM and traffic engagement. Publishers have the benefit of relying on the expertise of a company that has been in the industry for over 20 years. The PublisherPick team provides many indistinct features like anti-adblocker, servers problem solving, dedicated Read More →
The post PublisherPick Review – What makes it different? appeared first on WPArena.
Suppose I have a timekeeper, Ronald jack x628-C, I export time attendance data from the device, including two files: data.dat and device.dat because the old machine runs or crashes the device, I buy the device again If I restore the fingerprint from the old device, I added the remaining device.dat file, which was reported: "IP Error Input!" Restore the data to the device, and the data must be the backup BIN data passing the backup function before. Any of you know this error only helps with.
Consider, a DOM Event:
const button = document.querySelector("button");
button.addEventListener("click", (event) => /* do something with the event */)We added a listener to a button click. We’ve subscribed to an event being emitted and we fire a callback when it does. Every time we click that button, that event is emitted and our callback fires with the event.
There may be times you want to fire a custom event when you’re working in an existing codebase. Not specifically a DOM event like clicking a button, but let's say you want to emit an event based on some other trigger and have an event respond. We need a custom event emitter to do that.
An event emitter is a pattern that listens to a named event, fires a callback, then emits that event with a value. Sometimes this is referred to as a "pub/sub" model, or listener. It's referring to the same thing.
In JavaScript, an implementation of it might work like this:
let n = 0;
const event = new EventEmitter();
event.subscribe("THUNDER_ON_THE_MOUNTAIN", value => (n = value));
event.emit("THUNDER_ON_THE_MOUNTAIN", 18);
// n: 18
event.emit("THUNDER_ON_THE_MOUNTAIN", 5);
// n: 5In this example, we’ve subscribed to an event called “THUNDER_ON_THE_MOUNTAIN” and when that event is emitted our callback value => (n = value) will be fired. To emit that event, we call emit().
This is useful when working with async code and a value needs to be updated somewhere that isn't co-located with the current module.
A really macro-level example of this is React Redux. Redux needs a way to externally share that its internal store has updated so that React knows those values have changed, allowing it to call setState() and re-render the UI. This happens through an event emitter. The Redux store has a subscribe function, and it takes a callback that provides the new store and, in that function, calls React Redux's <Provider> component, which calls setState() with the new store value. You can look through the whole implementation here.
Now we have two different parts of our application: the React UI and the Redux store. Neither one can tell the other about events that have been fired.
Let's look at building a simple event emitter. We'll use a class, and in that class, track the events:
class EventEmitter {
public events: Events;
constructor(events?: Events) {
this.events = events || {};
}
}We'll define our events interface. We will store a plain object, where each key will be the named event and its respective value being an array of the callback functions.
interface Events {
[key: string]: Function[];
}
/**
{
"event": [fn],
"event_two": [fn]
}
*/We're using an array because there could be more than one subscriber for each event. Imagine the number of times you'd call element.addEventLister("click") in an application... probably more than once.
Now we need to deal with subscribing to a named event. In our simple example, the subscribe() function takes two parameters: a name and a callback to fire.
event.subscribe("named event", value => value);Let's define that method so our class can take those two parameters. All we'll do with those values is attach them to the this.events we're tracking internally in our class.
class EventEmitter {
public events: Events;
constructor(events?: Events) {
this.events = events || {};
}
public subscribe(name: string, cb: Function) {
(this.events[name] || (this.events[name] = [])).push(cb);
}
}Now we can subscribe to events. Next up, we need to fire those callbacks when a new event emits. When it happen, we'll use event name we're storing (emit("event")) and any value we want to pass with the callback (emit("event", value)). Honestly, we don't want to assume anything about those values. We'll simply pass any parameter to the callback after the first one.
class EventEmitter {
public events: Events;
constructor(events?: Events) {
this.events = events || {};
}
public subscribe(name: string, cb: Function) {
(this.events[name] || (this.events[name] = [])).push(cb);
}
public emit(name: string, ...args: any[]): void {
(this.events[name] || []).forEach(fn => fn(...args));
}
}Since we know which event we're looking to emit, we can look it up using JavaScript's object bracket syntax (i.e. this.events[name]). This gives us the array of callbacks that have been stored so we can iterate through each one and apply all of the values we're passing along.
We've got the main pieces solved so far. We can subscribe to an event and emit that event. That's the big stuff.
Now we need to be able to unsubscribe from an event.
We already have the name of the event and the callback in the subscribe() function. Since we could have many subscribers to any one event, we'll want to remove callbacks individually:
subscribe(name: string, cb: Function) {
(this.events[name] || (this.events[name] = [])).push(cb);
return {
unsubscribe: () =>
this.events[name] && this.events[name].splice(this.events[name].indexOf(cb) >>> 0, 1)
};
}This returns an object with an unsubscribe method. We use an arrow function (() =>) to get the scope of this parameters that are passed to the parent of the object. In this function, we'll find the index of the callback we passed to the parent and use the bitwise operator (>>>). The bitwise operator has a long and complicated history (which you can read all about). Using one here ensures we'll always get a real number every time we call splice() on our array of callbacks, even if indexOf() doesn't return a number.
Anyway, it's available to us and we can use it like this:
const subscription = event.subscribe("event", value => value);
subscription.unsubscribe();Now we're out of that particular subscription while all other subscriptions can keep chugging along.
Sometimes it helps to put all the little pieces we've discussed together to see how they relate to one another.
interface Events {
[key: string]: Function[];
}
export class EventEmitter {
public events: Events;
constructor(events?: Events) {
this.events = events || {};
}
public subscribe(name: string, cb: Function) {
(this.events[name] || (this.events[name] = [])).push(cb);
return {
unsubscribe: () =>
this.events[name] && this.events[name].splice(this.events[name].indexOf(cb) >>> 0, 1)
};
}
public emit(name: string, ...args: any[]): void {
(this.events[name] || []).forEach(fn => fn(...args));
}
}
See the Pen
Understanding Event Emitters by Charles (@charliewilco)
on CodePen.
We're doing a few thing in this example. First, we're using an event emitter in another event callback. In this case, an event emitter is being used to clean up some logic. We're selecting a repository on GitHub, fetching details about it, caching those details, and updating the DOM to reflect those details. Instead of putting that all in one place, we're fetching a result in the subscription callback from the network or the cache and updating the result. We're able to do this because we're giving the callback a random repo from the list when we emit the event
Now let's consider something a little less contrived. Throughout an application, we might have lots of application states that are driven by whether we're logged in and we may want multiple subscribers to handle the fact that the user is attempting to log out. Since we've emitted an event with false, every subscriber can use that value, and whether we need to redirect the page, remove a cookie or disable a form.
const events = new EventEmitter();
events.emit("authentication", false);
events.subscribe("authentication", isLoggedIn => {
buttonEl.setAttribute("disabled", !isLogged);
});
events.subscribe("authentication", isLoggedIn => {
window.location.replace(!isLoggedIn ? "/login" : "");
});
events.subscribe("authentication", isLoggedIn => {
!isLoggedIn && cookies.remove("auth_token");
});
As with anything, there are a few things to consider when putting emitters to work.
forEach or map in our emit() function to make sure we're creating new subscriptions or unsubscribing from a subscription if we're in that callback.Events interface when a new instance of our EventEmitter class has been instantiated, but I haven't really found a use case for that.As long as we're speaking practicality, we could do all of this with a function:
function emitter(e?: Events) {
let events: Events = e || {};
return {
events,
subscribe: (name: string, cb: Function) => {
(events[name] || (events[name] = [])).push(cb);
return {
unsubscribe: () => {
events[name] && events[name].splice(events[name].indexOf(cb) >>> 0, 1);
}
};
},
emit: (name: string, ...args: any[]) => {
(events[name] || []).forEach(fn => fn(...args));
}
};
}Bottom line: a class is just a preference. Storing events in an object is also a preference. We could just as easily have worked with a Map() instead. Roll with what makes you most comfortable.
I decided to write this post for two reasons. First, I always felt I understood the concept of emitters made well, but writing one from scratch was never something I thought I could do but now I know I can — and I hope you now feel the same way! Second, emitters are make frequent appearances in job interviews. I find it really hard to talk coherently in those types of situations, and jotting it down like this makes it easier to capture the main idea and illustrate the key points.
I've set all this up in a GitHub repo if you want to pull the code and play with it. And, of course, hit me up with questions in the comments if anything pops up!
The post Understanding Event Emitters appeared first on CSS-Tricks.
Codecademy introduced a new free course today called Learn PHP. The company, which offers free coding courses, is rebuilding its PHP education after removing all of its PHP courses in 2017.
A Codecademy representative explained that the courses were outdated and that their team thought PHP was declining in popularity:
The PHP courses were very old, buggy, and outdated. They were the least used courses on Codecademy by far, and declining in use all the time, just as PHP itself is declining in popularity in the web development world. Student demand was far higher towards making, for example, more content in other languages like JavaScript or offer all-new languages like C#, rather than continuing to maintain PHP. Continued support and maintenance of any course for us costs money, and hiring PHP specialists to rewrite a course costs more money, but the market for PHP is very small. So, the decision was clear – to sunset this course.
PHP was created in 1994 by Rasmus Lerdorf, and it is still going strong 25 years later. Roughy 80% of websites run on PHP. Redmonk’s 2019 language rankings put PHP at #4 behind JavaScript, Java, and Python, based on data from GitHub and Stack Overflow.
Codecademy’s new Learn PHP course offers users an introduction to the fundamentals of PHP with language-specific syntax. Prerequisites include basic HTML. Students will learn about PHP variables and the string and number data types. Codecademy Pro users will get more quizzes and will create a portfolio project to showcase their new skills, but the basic course is free. The course currently takes approximately three hours to complete, and the company plans to add more content in the future.
Hello all,
I am a new to this world of IT and working on my BA in Computer Science (six classes to go); this is a second career for me (I am now 48 and a disabled Veteran of the USMC) so I am seeking out every tool that I can find to improve my knowledge.
We just recently (read, today) implemented SameSite cookies to prevent CSRF attacks. The thing is, while there's a decent amount of information online about the benefits of them, I can't find any other sites that implement them. Not even any of the big ones I would suspect were spearheading something like this, such as Facebook or Google. Didn't this begin as a Chrome project? Is there a reason why they're not in use?
When it comes to WordPress and SEO, the Yoast SEO plugin is the go-to solution for many of us. And why not? After all, this popular plugin is active on 5+ million WordPress websites plus it’s easy to setup Yoast SEO and new features are added regularly. It provides all the essential features to optimize […]
The post 5 Best Yoast SEO Alternatives for WordPress Sites appeared first on WPExplorer.
This tweet kicked off some interesting thoughts.
Front enders… how would you achieve this layout change between small and large screens? pic.twitter.com/CxsvAj9lXA
— Foamcow 🏴🇬🇧🇪🇺 (@foamcow) March 20, 2019
Wes Bos made a video exploring why it's such a tricky layout situation, and ultimately wrote some JavaScript to deal with it:
There are lots of "almost" solutions. You might think CSS grid is easily capable of this, but it's not exactly cut and dry. You can't really use any rows, otherwise, the desktop layout doesn't come out right with the variable paragraph lengths. And if it's just a single row with left and right column, that means the images need to be alone in a container, which makes the mobile layout not really doable.
And if you start with img + p + img + p + img + p like the mobile layout, there is no great way of yanking all the images over to the left also in a way that supports images and paragraphs of any size, length, number, and order.
That's not to say it can't be done.
My favorite two solutions that came out of that thread both use CSS grid at the single-column level, yanking things into place with order.
In Benjamin Sterling's demo, all the text content is float: right; clear: right; at the wide breakpoint, mimicking two columns. Then at the smaller breakpoint a single CSS grid column is in place and the images are yanked up to break up the paragraphs with order.
See the Pen
Wes Bos Impossible Challenge by Benjamin Sterling (@ben_sterling)
on CodePen.
In Dannie Vinther's demo, the two columns are built with CSS grid at the wide breakpoint, with images in one column and paragraphs in the other. Then they come together at the smaller breakpoint by giving images and paragraphs that should be together the same order.
See the Pen
Impossible Layout — Solved with CSS Grid by Dannie Vinther (@dannievinther)
on CodePen.
This really reminded me of an article I wrote a number of years ago called Content Folding, which is essentially a great use-case for CSS regions, which are ☠️ dead for the time being.
The polyfilled demo still works though.
With this (dead) version of regions, you could specify elements that content should flow into when they overflowed. Pretty cool idea and extremely useful, if a little semantically awkward. Now that we have CSS grid, and could overflow content from grid cell to grid cell, it would be even cooler.
The post Interdigitating Content appeared first on CodePen Blog.
Frontkom‘s presentation at WordCamp Nordic introduced the audience to the Gutenberg Cloud project, which allows developers to share JS-only blocks across CMS platforms. Marco Fernandes and Thor Andre Gretland, representatives of the 45-person agency based in Europe, are also part of the Drupal Gutenberg project that brings WordPress’ open source editor to Drupal via an optional module. The module’s release candidate has been downloaded more than 9,000 times.
In the video below, I had the opportunity to sit down with the team at WordCamp Nordic to discuss the progress on their Gutenberg-related projects. Frontkom has clients using the Drupal module in production and their experience echoes a theme that seems common among those who are using the Gutenberg editor with clients.
“We see that especially people who don’t have too much experience in general working with visual content online, they find it easier to use than the ones that are into a routine where they expect some behavior,” Gretland said.
Drupal’s Gutenberg module could become a primary driver for the Gutenberg Cloud project, as access to the cloud blocks is included by default for all installations. The Cloud Blocks plugin for WordPress has been much less popular so far, with an estimated 100 active installations.
We discussed the potential of Drupal adopting Gutenberg as its core editor and the Frontkom team predicts that it will likely remain a separate module. Their vision for both Drupal Gutenberg and the Gutenberg Cloud is to make Gutenberg “the go-to solution for editing rich content on the web.” It is still achievable as a separate module but would have more impetus behind it if Drupal adopted it for its default editor.
Gretland said idea behind the Gutenberg Cloud was to provide “a sustainable ecosystem of blocks but also ease of use.” The project is a precursor to WordPress.org’s planned JS-only single block library. We discussed whether they perceive any competition between the two directories.
As the discussion on make.wordpress.org was just developing at the time of the interview, I contacted Frontkom CTO Per Andre Rønsen later on to get their thoughts on WordPress.org’s planned block directory. He had commented on the proposal, asking if this could become a library of truly CMS-agnostic blocks.
“I commented on the Make WP blog post right away, because I simply loved the idea of a directory of JS-only blocks,” Rønsen said. “We haven’t discussed it directly with Matt, but have had some good chats with the core Gutenberg team, and are planning to meet on a weekly basis. If Gutenberg Cloud can serve as a proof of concept that WP.org can later adopt as their own, we are happy. As the spec is very similar to what we already have created, porting between the two will be easy.”
Rønsen is advocating for a more open approach that isn’t so strictly tied to WordPress’ infrastructure.
“A more ideal approach however, would be to merge the two efforts,” Rønsen said. “The key for us, is to make the infrastructure open to other communities, not just WP developers. We are happy to put our project in the hands of the WP core team – given that they share the same open vision.”
A CMS-agnostic library for Gutenberg blocks is part of Frontkom’s long term vision for improving the open web. This is one of reasons the team created Gutenberg.js, which provides a foundation for using Gutenberg on any CMS or framework. Gretland said they see it as “more than just a new editor but a platform that enables communities to build new features.” This is the vision the team came to share at WordCamp Nordic. Check out the video below to hear more about how the Gutenberg Cloud team is working to make Gutenberg an editor that more open source communities on the web can share.
Before any work can be done on improving the performance of our applications we must first decide what areas we want to improve. When analyzing data collected either in test or production you will want to focus on metrics which can help you decide whether or not your efforts to scale have been effective.
Can you find the bottleneck?
In my "applied linear models" exam, there was a tricky question (it was a multiple choice, so no details were asked). I was simply asking if the following statement was valid, or not
Consider a linear regression with one single covariate, y=β0+β1x1+ε and the least-square estimates. The variance of the slope is Var[β1] Do we decrease this variance if we add one variable, and consider y=β0+β1x1+β2x2+ε ?
The national airline of Turkey, which flies to 122 countries around the world, has updated its branding hand in hand with the Imagination studio.
Airlines always look for the best design that defines their identity. Therefore, Turkish Airlines has renewed its image, refining its traditional bird symbol and adopting a new wave that seeks to reflect the seven continents of the world to which the company travels.
The previous logo showed the name of the airline in bold, typography sans serif in blue on the left, with a red circle and an abstract image of a bird in the center on the right. According to the Turkish airline, the shape of a bird drawn on a line represents a “wild goose”. This has been chosen as his mascot, since geese are well known for traveling great distances.
The new brand presents a refined version of the goose symbol encapsulated within the circle, which is now red in color. The goose has been adjusted, now placed at a more diagonal angle, and is smaller in size, as it does not reach the edges of the circle.
The logo is now configured in white within the circumference, created with a palette of colors in red and white. The typography has been modified and now has rounded corners in some characters. The logo is accompanied by a wave chart composed of seven horizontal lines, which seek to refer to the seven continents of the world, in an attempt to transmit the airline as an international entity.
The logo is located at the point of convergence, or center of the graphic line, which appears to represent “Turkish Airlines at the center of global travel,” the design consultancy mentioned.
Red and white are the main corporate colors of the brand, and have been used to represent the economy class, while a combination of golden and black rose is the main palette of the business class, to create a more “premium” feeling and “distinctive” look.
In addition, a new set of graphic icons has been designed, representing different elements of the airline’s experience, including hold baggage and items that are restricted by airport security.
The presentation of this new image coincides with the launch of the new Istanbul airport in Turkey, which will become the new center of Turkish Airlines operations and which will open its doors in April. The current hubs of the airline are Istanbul-Atatürk Airport and Ankara Airport.
The new brand has begun to expand, starting with signage, positioning, billing counters and other interior points of contact at the new airport.
This new rebranding will continue to be implemented over the next few months in interior aircraft designs, digital platforms that include the website and social networks, printed advertising materials and merchandise.
Imagination has also created a set of guidelines for Turkish Airlines, so that the company can continue to produce branded products in the future, such as signs, shoes and blankets in the cabin.
Read More at Turkish Airlines Updated its Logo
One of the most annoying things in the WordPress universe are plugins and themes that don't conditionally load their scripts and styles (i.e., JavaScript and CSS files). For example, you install a dashboard plugin and it loads its scripts in the entire Admin Area and the frontend. Instead, the developer should have used conditional logic to NOT load the script on the frontend (e.g., via !is_admin()), or anywhere in the Admin Area EXCEPT the dashboard (e.g., via get_current_screen()). It's just basic human decency.
Unfortunately, a LOT of plugins FAIL when it comes to conditional loading of assets. They just spit them JavaScripts and CSS files all over the place, across every page on the site. And that my friends is frustrating. Especially when performance matters and you're trying to optimize loading of script and style.
Fortunately, WordPress makes it easy to disable any unwanted scripts or styles. So let's put an end to the nonsense and disable any unwanted CSS and JavaScript files. This tutorial explains how to do it in TWO steps.
The first thing we need is the specific ID for the script or style that we want to disable. There are numerous ways of getting this information, from easiest to most time-consuming:
<script> or <style> tagIn theory, you can just go through the list until you find the ID. In practice, however, finding script/style IDs is more an art form, trial and error until it works kind of thing. So basically just use that list as a guide and try each technique until you get the desired ID. This is a critical step for any script or style that you want to disable. Let's take a moment and go through each technique..
The easiest way to get the ID is to just examine the <script> or <style> tag in the markup of your web page. For example, let's say we want to disable EDD plugin styles. Looking at the source code of one of our pages, we find the style tags output in the <head> section:
<link rel='stylesheet' id='media-styles-css' href='https://example.com/wp/wp-content/themes/example/lib/css/media.css' type='text/css' media='all' />
<link rel='stylesheet' id='default_styles-css' href='https://example.com/wp/wp-content/themes/example/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='edd-styles-css' href='https://example.com/wp/wp-content/themes/example/lib/css/edd.css' type='text/css' media='all' />Here we have three style tags, each loading a separate CSS file. The key thing to notice here are the id attributes. We have the following ID values:
media-styles-cssdefault_styles-cssedd-styles-cssSeems straightforward, right? Wrong. If you try to use these IDs to disable or dequeue the associated styles, it won't work. Why? Because those values are NOT the actual style IDs. Nope. WordPress appends -css ("dash css") to the actual ID values. Applying this esoteric bit of knowledge, our list of style IDs now looks like this:
media-stylesdefault_stylesedd-stylesSo now we have the correct ID for the unwanted EDD stylesheet, edd-styles. Let's remember that value, as we'll be using it in Step 2.
The previous method of getting the ID is the easiest. But the problem is that WordPress does not include an id attribute on <script> tags. So to get the ID of any unwanted scripts, we can use a simple "script-inspector" function like such as this little number by yours truly:
/*
Get Script and Style IDs
Adds inline comment to your frontend pages
View source code near the <head> section
Lists only properly registered scripts
@ https://digwp.com/2018/08/disable-script-style-added-plugins/
*/
function shapeSpace_inspect_script_style() {
global $wp_scripts, $wp_styles;
echo "\n" .'<!--'. "\n\n";
echo 'SCRIPT IDs:'. "\n";
foreach($wp_scripts->queue as $handle) echo $handle . "\n";
echo "\n" .'STYLE IDs:'. "\n";
foreach($wp_styles->queue as $handle) echo $handle . "\n";
echo "\n" .'-->'. "\n\n";
}
add_action('wp_print_scripts', 'shapeSpace_inspect_script_style');How it working? Just add to your theme's functions.php file, upload, and refresh the page. No modifications are required unless you want to spice it up. As-is, the function will display a list of all properly registered script and style IDs. So in your markup in the <head> section, look for something like this:
<!--
SCRIPT IDs:
jquery
jquery-migrate
edd-checkout-global
edd-ajax
STYLE IDs:
media-styles
default_styles
edd-styles
-->And these are the actual IDs, nothing appended or anything weird. So hopefully the unwanted script or style is listed here, so you can get the ID using this method and then proceed to Step 2.
If neither of the previous techniques works, an effective way to get the ID is to grep through the actual plugin source code. There are many strategies for searching through plugin files and code, so use your search skillz and get to work. Tip: search for the file name and path, and/or just the file name, should yield some results to go from.
Another good strategy is to search for the names of WordPress functions that may be used to add the unwanted script or style. For example, search for wp_enqueue_script(), wp_register_script(), and friends.
If all else fails, take a guess. Look at the actual file name that you want to exclude. For example if you have this:
<script type='text/javascript' src='https://example.com/wp/wp-content/plugins/amazing-plugin/assets/js/amazing-plugin.min.js?ver=1.2.3'></script>There is a pretty good chance that the correct ID is going to be amazing-plugin or something similar. If not, and/or if all else fails:
Ask the developer
Surely the developer will be able to provide proper script and style IDs.
Once you have the correct ID, actually disabling the script or style is straightforward. Going with the EDD example, the ID of the unwanted stylesheet is edd-styles. So to disable, we can add the following to our theme's functions.php file:
// disable stylesheet (example)
function shapeSpace_disable_scripts_styles() {
wp_dequeue_style('edd-styles');
}
add_action('wp_enqueue_scripts', 'shapeSpace_disable_scripts_styles', 100);Done. With this code in place, the EDD stylesheet will not be loaded on any frontend page. We know that it's front-end only because of the particular action hook we are using, wp_enqueue_scripts. If we want to disable stylesheets in the Admin Area, we instead would use admin_enqueue_scripts.
The only other secret here is the WordPress function used to disable the stylesheet, wp_dequeue_style(). If we want to disable adding of a JavaScript file, we instead would use wp_dequeue_script(). Hit those links for more details on any of these excellent functions.
Now that we understand how everything works, here is my growing collecting of real-world examples of disabling CSS and JavaScript added by plugins.
In my latest site redesign, I removed a bunch of plugins and scripts that no longer were needed. After cleaning up my plugins, I no longer needed to explicitly disable any CSS or JavaScript files. Thus, I was able to remove the following function:
function shapeSpace_disable_scripts_styles() {
// easy digital downloads
if (!is_page('checkout') && !is_page('purchase-confirmation') && !is_page('purchase-history') && !is_page('transaction-failed')) {
wp_dequeue_script('edd-ajax');
wp_dequeue_script('edd-password-meter-passfield-locales');
wp_dequeue_script('edd-password-meter-passfield');
wp_dequeue_script('edd-password-meter');
wp_dequeue_style('edd-sl-styles');
wp_dequeue_style('edd-password-meter-passfield');
wp_dequeue_style('edd-password-meter');
}
// super stripe plugin
if (!is_page('direct') && !is_page('custom') && !is_page('cancel') && !is_page('success')) {
wp_dequeue_script('supstr-aweber-js');
wp_dequeue_script('supstr-shortcode-js');
wp_dequeue_script('supstr-validate-js');
}
// search everything
wp_dequeue_style('se-link-styles');
remove_action('wp_head', 'se_global_head');
// yet another related posts plugin
wp_dequeue_style('yarppWidgetCss');
}
add_action('wp_enqueue_scripts', 'shapeSpace_disable_scripts_styles', 100);This function disables various scripts and styles otherwise added via EDD, Super Stripe, Search Everything, and YARPP. It felt really good cleaning up all of that mess. As a bonus, notice the use of remove_action() to remove the unnecessary Search Everything stuff from the <head> section.
Next, here is a function that disables some plugin style in the Admin Area:
function shapeSpace_disable_scripts_styles_admin_area() {
wp_dequeue_style('jquery-ui-css');
}
add_action('admin_enqueue_scripts', 'shapeSpace_disable_scripts_styles_admin_area', 100);As explained previously, the key to targeting the Admin Area is using the admin_enqueue_scripts hook.
And last but not least, here are two examples that demonstrate an important point. Not all functions register and enqueue CSS and JavaScript files as recommended. And in those cases, the previously prescribed methods may not work. So sometimes we have to get creative with alternate methods and hooks to use. Here is a good example:
// via the wp_print_styles hook
function shapeSpace_disable_download_manager_styles() {
wp_deregister_style('dlm-frontend');
}
add_action('wp_print_styles', 'shapeSpace_disable_download_manager_styles', 100);For whatever reason, the only way I could disable this particular plugin's stylesheet was to use wp_deregister_style() hooked into wp_print_styles. Whatever it worked. To be fair, I didn't have a lot of time to fiddle around with unwanted plugin styles, so there may be some sort of rational explanation.
And the second example is even more unusual. Observe:
// had to use the get_footer hook!!!
function shapeSpace_disable_yarpp_styles() {
wp_dequeue_style('yarppRelatedCss');
}
add_action('get_footer', 'shapeSpace_disable_yarpp_styles');Notice the hook used here: get_footer!!! Whaaaa...? Truly bizarre but it was the ONLY thing that would work to disable the unwanted YARRP styles. Not sure if I would recommend this technique on any other live site, just because it feels kinda weird using wp_dequeue_style() via the get_footer hook.
That's all for now, Thank you for visiting :)
A great article by Richard Rutter on how to control hyphenation with CSS.
Learn the basics of hillshading, soft shadows and ambient lighting in this WebGL tutorial by Rye Terrell.
Divi is powered by the Divi Builder, an insanely fast and incredibly intuitive front end editor like nothing you have seen before. It will change the way you build websites forever.
A three.js demo of jellyfish swimming in an ocean of plastic.
Daniel Velasquez breaks down Aristide Benoist’s infinite scroll effect for the Everest website.
Mathieu Dionne experiments with using WordPress as a headless CMS with Vue.js.
A neat trick by Cassie Evans to use numeric variables in generated content with the help of counters.
Dan Abramov takes a look at style guides and the principles that are really useful for React components.
A beautifully made immersive scroll experience by Webflow.
A UI dashboard framework built with React.js and Bootstrap 4.
A React-based web video player that makes streaming easy.
An article by Jennifer Riggins with some tips on how to get started with making a design accessible highlighted at this year’s Monki Gras conference.
The final article in a series that will help you understand and build web components. By Caleb Williams.
A theming experiment with CSS Dark Mode, Geolocation and Ambient Sensor API. By the team of De Voorhoede.
Bryan Rasmussen shows how to turn SVG circles into paths which you can use in animation and text paths.
The mesmerizing process of creating beautiful Shadertoy animations by Connor Bell.
Read how @pika/web installs npm packages that run natively in the browser, for a faster and less complex web app.
Ken Bellows shows on a hands-on example how to make HTML more semantic.
A collection of podcasts around the web.
A collection of the best resources in Machine Learning and AI.
Jeremy Mikkola notes down a set of rules for auto-completing text that often get broken.
A static type checker for the Python language.
A tutorial on how to transition WebGL instances in a smooth way based on the scroll position using three.js and Phenomenon.
Collective #502 was written by Pedro Botelho and published on Codrops.
The Insurance industry had a later start to the digital transformation game than some other financial industries, likely due to providers' reluctance to invest in costly updates of hefty legacy systems. But also possibly due to brokers being reluctant to agree to automate the selling and buying of insurance, which tends to be a very personal transaction.
One of the Oracle’s articles describes in great detail when Default methods should be used:
The section Interfaces describes an example that involves manufacturers of computer-controlled cars who publish industry-standard interfaces that describe which methods can be invoked to operate their cars. What if those computer-controlled car manufacturers add new functionality, such as flight, to their cars? These manufacturers would need to specify new methods to enable other companies (such as electronic guidance instrument manufacturers) to adapt their software to flying cars. Where would these car manufacturers declare these new flight-related methods? If they add them to their original interfaces, then programmers who have implemented those interfaces would have to rewrite their implementations. If they add them as static methods, then programmers would regard them as utility methods, not as essential, core methods.
In this age of minimalism and simplicity in graphic design, it’s no wonder that line art is becoming so popular. You can find it everywhere online, from logos to icons and even full-fledged illustrations.
Line art may be so well-liked because there’s many ways of creating it. Some artists make only the simplest of drawings, while others go all in with complex designs and all the bells and whistles. Either way, it appeals to all lovers of minimalism.
A few constants unite all line art, however: basic lines, curves and shapes, small color palettes, and little-to-no shading. These are what make the simplistic style so beautiful.
Need some inspiration for your next graphic or web design project? Thinking about including line art? This is all the convincing you’ll need. Take a look at these fifteen examples of amazing line art illustrations. You’ll be floored by what you see.
There were so many fantastic illustrations here! All provided a unique take on what line art can be.
Some were truly minimalistic, with only a few lines and one or two colors. Each stroke of the brush in this type of design is important to conveying the image you want people to see. Others were complex with hundreds of complicated, painstakingly made lines. And some went super fancy with pretty gradients, tiny detailing, and extra accent colors.
But every one remains a perfect example of what you can do with this seemingly simplistic art style. There are no limits to line art – clean icons or elaborate decorations are all within possibility if you know what you’re going for. Which did you prefer in these images: simple or complicated line art design?
Each year, the Game Developers Conference (GDC) brings with it a host of important announcements and demonstrations and GDC 2019 did not disappoint. This week was packed with news, including Google's Stadia gaming service, partnerships between the console makers, and a demonstration of the basic features of Microsoft's Project xCloud. In this article, we will recap the top news of the week. The following articles covered the day-by-day announcements throughout the week:
Although there were dozens of important announcements during the week, three stood apart from the rest: Google's announcement of Stadia, Nintendo's partnership with Microsoft, and Microsoft's demonstration of its Project xCloud Software Development Kit (SDK).