Victor Ramirez talks about the approach here: https://www.youtube.com/watch?v=3o66SvY9G1k&t=91s
The plan itself was posted on Twitter. It is a bit old, but it sounds like decent approach
Level 1
A package to easily make use of SVG icons in your Laravel Blade views. Originally “Blade SVG” by Adam Wathan.
Turn…
<!-- camera.svg -->
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>Into…
<x-icon-camera class="w-6 h-6" />
Or into…
@svg('camera', 'w-6 h-6')
Search all 84,305 Blade Icons:
https://blade-ui-kit.com/blade-icons#search
But for a better overview you may want to go to the homepages of the icons set instead. For example:
Read Morehttps://www.innoq.com/en/blog/wie-ich-meine-konzentration-wiederfand/
Below my excerpt of this article:
July 29, 2022
For years, I enthusiastically produced content: books, articles, blog posts, and talks – averaging a book and a half plus five articles per year. Since about 2020, my productivity has plummeted – leaving me totally frustrated. There were no external causes, even the pandemic didn’t affect me, thanks to a nice home office and online work options — so no excuses. To find a way out of the misery, I put my own working habits to the test – and diagnosed a massive loss of concentration.
Read Moreregister_taxonomy() now has support for that built in via the show_admin_column setting passed via arguments. developer.wordpress.org/reference/functions/register_taxonomy.
'show_admin_column' => true,If you aren’t registering the taxonomy yourself, you can still alter the args via the register_taxonomy_args filter developer.wordpress.org/reference/hooks/register_taxonomy_args
https://roots.io/favorite-wordpress-plugins-and-utilities/
I asked Brandon Nifong, Mike Spainhower, Craig, Evan Mattson, Nathan Knowler, and Matt Mirus for their recommendations on WordPress plugins and any relevant Composer packages they use on their sites. Here’s what our list of most frequently used WordPress plugins looks like!
$ composer require wpackagist-plugin/better-search-replace$ composer require wpackagist-plugin/breadcrumb-navxt$ composer require wpackagist-plugin/disable-comments$ composer require wpackagist-plugin/duplicate-post$ composer require wpackagist-plugin/easy-wp-smtp$ composer require wpackagist-plugin/html-forms$ composer require wpackagist-plugin/imsanity$ composer require soberwp/intervention$ composer require wpackagist-plugin/post-type-switcher$ composer require wpackagist-plugin/query-monitor$ composer require wpackagist-plugin/restricted-site-access$ composer require wpackagist-plugin/safe-redirect-manager$ composer require wpackagist-plugin/safe-svg$ composer require wpackagist-plugin/simple-page-ordering$ composer require wpackagist-plugin/stream$ composer require wpackagist-plugin/autodescription$ composer require wpackagist-plugin/goodbye-captcha$ composer require roots/wp-stage-switcher$ composer require wpackagist-plugin/wp-term-order$ composer require wpackagist-plugin/wp-user-avatars$ composer require wpackagist-plugin/wp-user-profiles$ composer require wpackagist-plugin/wp-optimize$ composer require stoutlogic/acf-builder$ composer require samrap/acf-fluent$ composer require brain/cortex$ composer require johnbillion/extended-cpts$ composer require stevegrunwell/wp-cache-remember$ composer require primetime/wp-plugin-activation-manifestfunction remove_jquery_migrate( $scripts ) {
if ( ! is_admin() && isset( $scripts->registered['jquery'] ) ) {
$script = $scripts->registered['jquery'];
if ( $script->deps ) {
$script->deps = array_diff( $script->deps, array( 'jquery-migrate' ) );
}
}
}
add_action( 'wp_default_scripts', 'remove_jquery_migrate' );
In filters.php add:
// /**
// * The filter is named rest_{post_type}_collection_params. So you need to hook a new filter for each
// * of the custom post types you need to sort.
// * @link https://www.timrosswebdevelopment.com/wordpress-rest-api-post-order/
// */
// This enables the orderby=menu_order for Posts
add_filter( 'rest_post_collection_params', __NAMESPACE__ . '\\filter_add_rest_orderby_params', 10, 1 );
// And this for a custom post type called 'faq'
add_filter( 'rest_faq_collection_params', __NAMESPACE__ . '\\filter_add_rest_orderby_params', 10, 1 );
// /**
// * Add menu_order to the list of permitted orderby values
// */
function filter_add_rest_orderby_params( $params ) {
$params['orderby']['enum'][] = 'menu_order';
return $params;
}
Now you can use SITEURL/wp-json/wp/v2/faq?orderby=menu_order
https://jonsuh.com/hamburgers/
https://discourse.roots.io/t/how-to-using-hamburgers-package-in-sage/11543
mmirus (2018):
Install:
yarn add hamburgers
Import in main.scss:
@import "~hamburgers/_sass/hamburgers/hamburgers";
Add the markup:
Probably in your header.blade.php partial.
<button class="hamburger hamburger--vortex" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
In this case, I’m using the ‘vortex’ type.
Customize as desired in _variables.scss:
Here’s what I used for my current project, but see the different types and the list of SASS variables in the page linked to above.
/** Hamburger icon */
$hamburger-padding-x: 0;
$hamburger-padding-y: 0;
$hamburger-layer-width: 20px;
$hamburger-layer-height: 2px;
$hamburger-layer-spacing: 4px;
$hamburger-layer-color: $brand-primary;
$hamburger-types: (vortex);
Again, I’m using the ‘vortex’ type here.
Add JS to make it functional to common.js:
export default {
init() {
// JavaScript to be fired on all pages
$(".hamburger").click(function() {
$(this).toggleClass("is-active");
});
},
finalize() {
// JavaScript to be fired on all pages, after page specific JS is fired
},
};
You would likely also be toggling the state of your menu in the same click handler.
That should be it.
toddsantoro (2022)
Might want to change the snippet in the guide to initiate the hamburger to:
$('.hamburger').on( 'click', function() {
$(this).toggleClass('is-active');
});
so the deprecation warnings go away.
Or in AlpineJS you can do something like this:
<div class="flex justify-center items-center w-10 h-10 rounded-full border border-solid xl:hidden border-[#888]">
<button
:class="isOpen ? 'is-active' : ''"
class="hamburger hamburger--3dy"
type="button"
@@click="isOpen = !isOpen">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
</div>Reactive UI without the complexity of SPA frameworks. Use any backend you like; bind to the HTML you already produced.
Corset binds JavaScript to HTML. It doesn’t matter how the HTML is produced and Corset doesn’t need to own your templating choice. Instead it uses a CSS-like syntax to enhance whatever you give it.
HTML
<div class="counter">
<button
type="button"
class="increment">Increment</button>
<button
type="button"
class="decrement"
disabled>Decrement</button>
<div
class="result">
Count: <strong class="count">0</strong>
</div>
</div>JavaScript with Corset
import sheet, { mount } from 'https://cdn.corset.dev/v1';
mount(document, class {
count = 0;
bind() {
const { count } = this;
return sheet`
.counter {
--count: ${count};
--inc: ${() => this.count = count + 1};
--dec: ${() => this.count = count - 1};
}
.count {
text: var(--count);
}
.increment {
event[click]: var(--inc);
}
.decrement {
attr-toggle[disabled]: ${count === 0};
event[click]: var(--dec);
}
`;
}
});