Search
center align vertical 2 items in a container flex
i had this issue and i was pretty sure that flex center could fix it but it was causing the two items in the div to sit next to each other, which was annoying as it was a header and content, but i sti..
Hello world in C and seeing what it is actually doing
One of the most simple C applications, how to compile it and how to objdump it. C #include int main() { int i; for(i=0;i < 10; i++) { puts("Hello Mac\n"); } return ..
Console Tips and Tricks
Here are some quick commands for the console. Getting to the console in your browser Press F12 and Find the console tab. That little blue > there is the console. this is in brave or chrome, bu..
How do Self-Closing JSX Tags Work?
So in JSX all the tags must be closed, other wise it can break the element. for example: <div> must have a closing </div> and also for elements like <br> and <hr> must include..
using babel for react compiling in browser
this is currently just an idea, as i saw that codepen uses babel to run react i was wondering i can do the same thing here and then just write normal react script and have babel compile it. so ..
timeline class and function
this is a class extend that generates a timeline based on structured data and order's the items by year decending. this code will not work out of the box as it has other requirements, but it is a goo..
twitter json feed testing
just testing using the Twitter Post Fetcher script, seems to be working well.
button with separated chevron
I have come across this kind of button format a few times now in various designs and the html and css for it is a bit different to normal button formats I have found. Chevron Detached Button Ex..
set the amount of lines to show in a textarea field
using the rows will allow you to add the specified amount of rows to the textarea you can also specify the cols which does the amount of characters width
globe svg testing (broken)
nope seems not to be working, it seems you cant just copy the glyph path into a normal svg and hope for the best, oh well i tried.
using clamp js to clamp lines of text
there is a css version of this as well but this version works in a greater range of browsers (i think) this one is not working for me... i think the overflow elipsis is still a better option than thi..
blur the background image while keeping the foreground normal
this one uses the ::before element to add a background and apply the blur filter to it, while allowing the foreground content to still be non blurry
css slow zoom in animation
give a bit of extra interest to otherwise static images
linking search results to view pages [finished] 🤣
I was thinking it might be useful to link the search term to the page, so that it can be found more easily using that search. For example, Link this search text (somehow) to the post page and display..
change the cursor to a pointer for an element
i find this class quite useful if you are adding a javascript click event to an element, and need the mouse to look like its a click item rather than just a normal item. If you mouse over the test ..
test page for the custom css 12 grid used on this site
This is my testing page for the grid used on this site, it shows elements and other things for use on the grid and other general formatting.
make an image white with css using filter brightness and invert
If you have an icon or something with transparency this can be useful if you dont want to have to edit the image and create another copy of it you can apply the filter brightness and invert. You can ..
foundation old grid format
This uses the old foundation grid style, i think it was a float grid, not sure which version it was maybe version 5 foundation. Somewhere around here: https://cdnjs.com/libraries/foundation/5.0.0&nbs..
use an emoji on your list items ul li
I didnt think this would work but it does somehow, i guess it may differ depending on what emojis are available on your system.
Fix Hover Over color on list group dark mode in bootstrap
How to fix the problem when switching to dark mode, the list group item text disappears when active. Here is what it currently looks like. To fix this we need to target the element and force the..
simple linear gradient overlay for an image to make it darker or lighter
i use this one often if i have a background image and some text over the top, you can darken or lighten the linear gradient values to match the text content and make it readable.
wordpress main nav dropdown fix
this unsets the flex and allows the menu items to stack properly in a dropdown menu, not sure if this is reusable
Writing Arrow Functions with Parameters
you can pass parameters to arrow functions as well as shown in the following demo, these functions are only meant to be used once where normal functions can be re-used.
Use the parseInt Function with a Radix
This is the same as the parseint function, but you can also specify a base for the number which can be between 2 - 36. 2 is binary. Zeros and Ones. I think base 10 is the normal numbering system, but ..
form checkbox replacement with large tick using label
this is good if you want to change a form checkbox with the default and show a fancy tick or something else, this will still check the checkbox so will work normally as the form element
apache redirect to https ssl from normal
good if you have apache and access to htaccess file to redirect requests to https version of the site. this one also includes a rewrite to index.php so if you don't need this remove the last line.
Move any element with css offsets
Make any element moveable without moving other items around by making it position: relative;
CSS Improve Compatibility with Browser Fallbacks
when using css variables to increase compatibility you should also include a normal color as a default.
wordpress enqueue slicknav and slick slider
add this to your theme scripts functions file here is the full one from HTML5 Blank // Load HTML5 Blank scripts (header.php) function html5blank_header_scripts() { if ($GLOBALS['pagenow'] != ..
json loop load elements
Loading json content from a url can be tricky, there are a few different things you need to watch out for. Here is some examples using an example json feed. Load the feed this will load the feed and..
document ready wordpress jquery
Wordpress uses JQuery rather than $ to initialize so here is a workaround that allows you to still use the $ to access JQuery functions. Just incase your normal document ready is not working.
testing chartjs
Update: 30 June 2020 I checked this code, and it was broken all fixed now. The issue with the demo included on the main site is that it was trying to run the chart js before the chart library was load..
using foundation 6.4 xy grid basics
Foundation 6.4 introduced a new xy grid which replaces the old row and large-x format here is a basic grid layout (foundation grid) add some style to show the cell border <style> .grid-x .ce..
youtube embed no controls auto play iframe
Sometimes you want the video to loop and play with just no controls on it, this is how you can do it. You can still click to pause it, but the normal controls are gone. Also it seems you have to ..
css grid sidebar main content fluid layout with fallback
this is a continuation from the original post with added fallback for older browsers that do no support the grid elements yet. I have tested this fallback in IE11 and it seems to work well, if you wa..
css grid for layouts and how to use it
Note: Added version 2 of this with no rows for the grid css grid for layouts with no rows so there is this thing called the CSS Grid Layout, and apparently we dont need a framework for grids anymore...
material design icons google font
you can just link to this like a font in your header how do we use the icons? <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> this one should ..
make your images look non squished when not using image backgrounds
Update: Fixed the code, you can see it here. i deal with a lot of sites where they have a bunch of images listed and sometimes they can end up looking a bit sqashed unless you add a div and set..
use font awesome on elements lists ul
good if you need to use font awesome in list items like ul lists, etc. .element { position: relative; } /*replace the content value with the corresponding value from the list below*/ ..
table border collapse
I see this quite often when dealing with tables the border-collapse: collapse; used on a table as so: table { border-collapse: collapse; } So what is the point of doing this? It seems to help..
check the server method post or get using php
Here is a basic usage method for checking if the server is in post or get mode. most normal pages are served in get mode. You can send data back to a page using get by adding variables to the string ..
