Skip to content

Instantly share code, notes, and snippets.

View ritabradley's full-sized avatar
:octocat:

Rita Bradley ritabradley

:octocat:
View GitHub Profile
@ritabradley
ritabradley / camelCaseToNormalText.js
Created June 15, 2023 01:46
A helper function to turn camelCase properties into regular text
function camelCaseToNormalText(text) {
return text
.replace(/([A-Z])/g, ' $1') // insert a space before all capital letters
.replace(/^./, (str) => str.toUpperCase()); // capitalize the first letter
}
@ritabradley
ritabradley / gradientanimation.css
Last active July 15, 2024 23:51
Background Gradient Animation CSS
.css-selector {
background: linear-gradient(212deg, #5932e6, #b332e6, #e032e6);
background-size: 600% 600%;
-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
-o-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;
}
@-webkit-keyframes AnimationName {
0%{background-position:33% 0%}
@ritabradley
ritabradley / drag-drop.js
Last active April 3, 2023 23:59
A few functions to enable a drag and drop function for a file input
const handleFileChange = (e) => {
const file = e.target.files[0];
if (file) {
onImageUpload(file);
}
};
const handleFileDrop = (e) => {
e.preventDefault();
const file = e.dataTransfer.files[0];
@ritabradley
ritabradley / lastElement.js
Created September 26, 2022 18:17
Get last element of at array using array.length
const lastElement = (arr) => {
if (arr.length > 0) {
return arr[arr.length - 1]
} else {
return null
}
}
@ritabradley
ritabradley / git-pushing-multiple.rst
Created September 11, 2022 20:36 — forked from rvl/git-pushing-multiple.rst
How to push to multiple git remotes at once. Useful if you keep mirrors of your repo.

Pushing to Multiple Git Repos

If a project has to have multiple git repos (e.g. Bitbucket and Github) then it's better that they remain in sync.

Usually this would involve pushing each branch to each repo in turn, but actually Git allows pushing to multiple repos in one go.

If in doubt about what git is doing when you run these commands, just

@ritabradley
ritabradley / twelve-column.css
Created January 21, 2022 04:50
12 Column Layout CSS Grid
.twelve-col {
display: grid;
height: 100vh;
grid-template-columns: repeat(12, 1fr);
column-gap: 12px;
align-items: center;
}
@ritabradley
ritabradley / pancake-layout.css
Created January 20, 2022 05:14
Pancake Layout CSS Grid
.pancake {
display: grid;
height: 100vh;
grid-template-rows: auto 1fr auto;
}
@ritabradley
ritabradley / gold-gradient.css
Created June 24, 2021 06:04
Gold Linear Gradient
background: linear-gradient(0deg, #7D3E00 -7.62%, #FFC170 14.51%, #FFEED8 32.4%, #FFC170 84.95%, #7D3E00 106.96%);
@ritabradley
ritabradley / useCurrentLocation.js
Created January 8, 2021 00:45
Geolocation fetching hook
const useCurrentLocation = (options = {}) => {
const geolocation = navigator.geolocation;
const [error, setError] = useState();
const [location, setLocation] = useState();
const handleSuccess = (position) => {
const { latitude, longitude } = position.coords;
setLocation({ latitude, longitude });
};
@ritabradley
ritabradley / grid.html
Last active August 7, 2020 21:03
A basic grid structure
<section class="grid">
<div class="row">
<div class="col-1-of-2">col-1-of-2</div>
<div class="col-1-of-2">col-1-of-2</div>
</div>
<div class="row">
<div class="col-1-of-3">col-1-of-3</div>
<div class="col-1-of-3">col-1-of-3</div>
<div class="col-1-of-3">col-1-of-3</div>
</div>