What’s up with Jetpack?
On the host is the CSS and JS files even needed since these are bundled and minified? Test this out on one of my own sites like Cheese.
I really like using the delay on a transition property: opacity 250ms ease 300ms;
To recap the copying of a current theme to use a starting point for a different theme. I should really formalize this starter instead of copying over but I make changes on the builds and forget to integrate into the starter. Step One: Copy over theme folder and update theme name in the files package.json, webpack.config, style.css?, function.php (ai1wp function) and then npm install after this is completed. Step Two: Custom Screenshot. Step Three: Create menu if applicable and then activate custom theme in admin panel.
Favicon to my themes are in the wordpress customizer?
Dig into glide.js styling
Deactivating Elementor dropped content into the default editor. This was a welcomed surprise.
Need to Test using native WP, or plugin like smush, to upload and post images using the smallest filesizes and lazy-loading without digging into any code.
native WP editor has images and a gallery. the gallery is easy and looks great on desktop but not fullwidth on mobile? If you change columns to 1 then they are full screen but this makes them giant on desktop. Adding images in a two-column block doesn’t look too bad.
1920×1280 is HD, 1380×920 is ~72%, 990×660 is ~51%, 640×427 is ~33%. Images sizes should really match up with mixins to avoid different breakpoints for images and text.
site-header is a fixed height which I would like to re-work to use padding on logo. This would make scaling logo affect the height of the site-header which could be a cool transition
Brad Schiff in the WP course challenges students to explore a custom carousel as a custom-post-type with custom fields for things like slide title slide link text and target, slide photograph. Also mentions in a homepage page you could display advanced custom fields for slides including above and timings. Flexibility with ACF Pro “repeater field” let’s user add another filed by clicking a plus sign. Another badass feature is a the flexible content field, (like your own custom page builder; not sure if this is relevant in 2021). ACF Pro was $100 now $149 for 10 sites and unlimited is $249.
I watched a devEd tutorial on creating your own carousel: flex images. Use translateX to animate. Duplicate the End and beginning photos. Use event listener “transitionend.” Show clone while jumping back to the original. Overflow hidden hides a row of images. There is a bug if you click really fast.
Keep getting git errors on merge and checkout, “you local changes to bundled assets manifest and styles would be overwritten- commit or stash first: aborting.” I think this is related to the dev script running in the WP webpack.config. Every save triggers a new build and these new files want to be staged and committed. Deleting these build files then merge gets around this.
Used a new image compression tool in the browser for hfrr 2021 theme rebuild. jpeg-optimizer.com you can compress and resize although I just compressed.
There was a bug I had to fix on stick transparent header in which if you are scrolled down the page and refresh the header doesn’t revert back to dark since the scrollY is greater than zero. used window.onload to fix this.
On the sydney WP theme they had really sharp images and as a guide for file-sizes: 1920×1275 was 270kb, 1280×850 was 360kb, 640×426 was 37-99kb.
An aside on the WP customizer. This gives you some page builder functionality without a page builder. Can be powerful for things such as fonts, font-size, plugin options, etc. How many different places can we make changes?
Need to learn, implement, understand a simple parallax.
Kevin Powell really has some great content. all: unset to avoid having to undo all the styles you already did. This is a cool feature but not supported yet. Had a good video on the navbar using the CSS checkbox technique. the gist is you use an inout elent with a typeof checkbox and it’s important this have this in your code right before the nav because you will use a sibling selector .nav-toggle:check ~ nav {} In order to link up the checkbox input to a hamburger icon you use <label for=”nav-toggle” class=””><span>X</span></label> Note that in using “for” an id needs to be added to the input. An id is used over a class because an id has higher specificity. You have the label and input synced together and then you hide the input with display none and leave only the label visible.
Dad mentioned something called SBAR. AN acronym for Situation – Background – Assessment – Recommendation