write a reply

coding tips & tricks

options
quote
coding tips & tricks written Dec 31, 2021 14:31:05 GMT
aliasdismay
pronounsshe/her
445written posts
fossaearned bits
offlinecurrently
fossa
Senior Member
fossa Avatar
he's suppose to be DEAD
i thought we should have a nice thread where ppl can share tidbits of coding advice!!

my first piece is u can use all: unset to destroy jcink's base coding and make it ur bitch. you can read more on it here but what it does summed up is remove every associated property/style and start the element from step 0.
options
quote
coding tips & tricks written Dec 31, 2021 20:02:13 GMT
ᕕ( ᐛ )ᕗ
aliasthat bitch.
pronouns"that bitch" still works tbh (any OK!)
551written posts
selkieearned bits
offlinecurrently
selkie
Part of the Furniture
selkie Avatar
a verb in perfect view.
hi i love this thread already and ill probably be back here

  1. if you put in the time to learn them, display: flex and display: grid can solve 75%+ of technical problems in CSS
  2. (if you put in the time to learn it, javascript can solve the remaining %. i think. dont ask me im still on this grind lmao.)
  3. +1 on unset!! its twin sister, display: revert does something similar, but keeps previous CSS rules
  4. if you put in the time to learn them, display: flex and display: grid can solve 75%+ of technical problems in CSS
  5. BROWSER DEV TOOLS!!! browser dev tools. browser dev tools r so powerful if u learn how to use them.
  6. when ur declaring fonts, put in fallbacks i.e if the font font family ur using is roboto, have ur line be font-family: roboto, sans-serif; why? to stop this from happening. please learn where i have fallen.
  7. if you put in the time to learn them, display: flex and display: grid can solve 75%+ of technical problems in CSS
  8. keeping your HTML as bare-bones as possible and doing all of your heavy lifting in CSS/JS will help in the long run with maintainability. (how do u do that? flexbox and grid.)
  9. don't exclusively get coding muse/inspiration from other RPers. a lot of us, including me, have picked up bad habits because we're self taught and legitimately don't know any better. make a habit of poking around on codepen's trending page! make a dribbble account! i was gonna say touch grass but this is actually the exact opposite of grass touching so nvm.
  10. relative units >>>>>>>> absolute units. %/em units >>>>> px/pt units. getting into the habit of using relative unit whenever possible helps both in accessibility and just being less of a headache to fcking work with. 
  11. if you put in the time to learn them, display: flex and display: grid can solve 75%+ of technical problems in CSS
  12. im sobbing and shaking and crying about flex and grid please believe me okay we dont have to use <td> <tr> anymore guys we dont have to ever type translateY(-50%) to center shit anymore we can be free okay we can be fr
weeping omens advertisement

all my proboards templates require the style tags plugin!
options
quote
coding tips & tricks written Dec 31, 2021 21:06:49 GMT
aliasdismay
pronounsshe/her
445written posts
fossaearned bits
offlinecurrently
fossa
Senior Member
fossa Avatar
he's suppose to be DEAD
adding onto accessibility & responsiveness a really fast thing u can do (maybe not the 100% most optimal but it works so w/e) that will help mobile users, especially with post templates:

width: 100%;
max-width: 1400px; (or whatever)

add box-sizing: border; to keep padding inline and help post templates not stretch on mobile.
options
quote
coding tips & tricks written Jan 1, 2022 8:03:53 GMT
all hail Garfield and the Holy Lasagna
pronounsshe/her
403written posts
dijit.exeearned bits
offlinecurrently
dijit.exe
Senior Member
dijit.exe Avatar
no talk me angy
If you're ever lazy as hell (like me) and you wanna center a single item on your screen (like a posting template, tracker, ect), put margin-left: auto and margin-right:auto on the wrapper div.

Also, if you hate rgba values, you can throw a opacity value on your hex code colors. It can only be two digits. An example: If I want #FFFFFFF (white) but I want it to be opac, Just throw a 50 at the end and you're solid. So it'd be #FFFFFF50

Also, bookmark CSS-Tricks. You'll thank me later.
last edit on Jan 1, 2022 8:04:20 GMT by dijit.exe
options
quote
coding tips & tricks written Jan 2, 2022 4:32:52 GMT
stultifera navis
aliasnines
pronounsshe/her
583written posts
ninelieearned bits
offlinecurrently
ninelie
Part of the Furniture
ninelie Avatar
VOLITION [Medium: Success]
using box-sizing: border-box; i'm begging everyone who makes templates or anything in general to use this so you're not calculating your width sizes when you're accommodating padding pls and ty
options
quote
coding tips & tricks written Jan 2, 2022 19:15:07 GMT
aliasdismay
pronounsshe/her
445written posts
fossaearned bits
offlinecurrently
fossa
Senior Member
fossa Avatar
he's suppose to be DEAD
dijit.exe Avatar
Jan 1, 2022 8:03:53 GMT said:
If you're ever lazy as hell (like me) and you wanna center a single item on your screen (like a posting template, tracker, ect), put margin-left: auto and margin-right:auto on the wrapper div.

Also, if you hate rgba values, you can throw a opacity value on your hex code colors. It can only be two digits. An example: If I want #FFFFFFF (white) but I want it to be opac, Just throw a 50 at the end and you're solid. So it'd be #FFFFFF50

Also, bookmark CSS-Tricks. You'll thank me later.        
adding onto the first part of this to make it even faster -- you can also just do margin: 0 auto; (or whatever number you want the 0 to be for the top & bottom parts)

i'd never heard of the hex opacity tho that's amazing???
options
quote
coding tips & tricks written Jan 3, 2022 23:37:14 GMT
all hail Garfield and the Holy Lasagna
pronounsshe/her
403written posts
dijit.exeearned bits
offlinecurrently
dijit.exe
Senior Member
dijit.exe Avatar
no talk me angy
lumi Avatar
Jan 2, 2022 8:30:12 GMT said:
I use this grid generator. Also, this flexbox generator. Still learning how it all works, but in the meanwhile : )

Holy hell I wish I had this when I was learning flexbox and grid. I am now stealing this so I can be lazy.
options
quote
coding tips & tricks written Jan 5, 2022 9:05:36 GMT via mobile
praise the cats!
aliasthomas, breezescodes
pronounshe/him
899written posts
bcearned bits
offlinecurrently
bc
Summer '19 Bingo Completionist
bc Avatar
this is my murder mittens ^-^
IMAGE RESIZING, that i think most people know but just in case:

as mentioned in coding confessions, cover is like a life style. ain’t no one got time to create very specific ratio images so don’t force them to and instead, code your shit with

for background-images, background-size: cover;
for image elements, use object-fit: cover;

contain will force people to crop to specific ratio so even if it looks like it’s working for your exact ratio images, it’s not.



LIFE HAXX WITH GRID — easiest way to vertically & horizontally align an element is:

display:grid;
place-items:center;

put that onto the parent container and voilá. bear in mind that if you have multiple divs or elements inside, things get fucked up but it’s good in a pinch.

last edit on Jan 5, 2022 9:11:12 GMT by bc
options
quote
coding tips & tricks written Jan 5, 2022 9:10:10 GMT via mobile
praise the cats!
aliasthomas, breezescodes
pronounshe/him
899written posts
bcearned bits
offlinecurrently
bc
Summer '19 Bingo Completionist
bc Avatar
this is my murder mittens ^-^
dijit.exe Avatar
Jan 1, 2022 8:03:53 GMT said:
Also, if you hate rgba values, you can throw a opacity value on your hex code colors. It can only be two digits. An example: If I want #FFFFFFF (white) but I want it to be opac, Just throw a 50 at the end and you're solid. So it'd be #FFFFFF50


just as a note here but while you can absolutely do this, the benefits of using rgba is that it’ll work with css variables. you can do something like rgba(var(—blah),0.6) but you can’t do var(—blah)50.

otherwise yeah it’s often pretty convenient to be able to throw like half a thing at the end.
options
quote
coding tips & tricks written Jan 6, 2022 22:28:52 GMT via mobile
praise the cats!
aliasthomas, breezescodes
pronounshe/him
899written posts
bcearned bits
offlinecurrently
bc
Summer '19 Bingo Completionist
bc Avatar
this is my murder mittens ^-^
random thing I thought but just something I noticed myself doing that might help others learn grid.

First off I split grid into grid-template-rows / grid-template-columns. I don’t use grid-area (the shorthand) because a) I cannot keep track of the order that it goes, b) it doesn’t work on either less or scss/sass I forgot idk

Anyway, whenever I’m trying to remember how grids work, instead of drawing some mathematical grid which helps for shit naught, I think of things as

- for COLUMNS: those Roman/Greek pillars/columns (like the ones outside the Lincoln Memorial). They long cylinders up and down and they’re placed next to each other

- for ROWS: foosball tables or abacuses (which can be made vertically ig but I’ve always thought of them as going horizontal lol). They’re sticks that go left to right and they’re stacked on top of each other.

So if you have difficulty with keeping grid straight, it may help to think of it as physical objects?

additional note because once more, I’m awful @ keeping grid straight, when it comes to defining items on a grid, i usually format it as grid-row/column:{starting column/row #}/span #

So for example grid-row:1/span 2; means for it to start @ line 1 and then span two boxes, which is more in line with how I think of grid. This would be the equivalent of grid-row:1/3; it’s just easier for me to think of grids as the cells rather than the division lines.
last edit on Jan 6, 2022 22:33:31 GMT by bc
options
quote
coding tips & tricks written Jan 7, 2022 0:44:48 GMT
937written posts
gimmickearned bits
offlinecurrently
gimmick
Part of the Furniture
gimmick Avatar
All birds and men are sure to die but songs may live forever
Incoming wall of text

CSS shorthands
Spacing. Fossa mentioned margin: 0 auto, but you can set specific values for every side, not just symmetrically. Padding uses the same shorthand. margin: 0 auto 30px translates to 0 margin-top, horizontally centered, 30px margin-bottom.

Or margin: 0 10px 20px 30px which translates to 0 top, 10 right, 20 bottom, 30 left.

Other basic ones include...

Font. Instead of separate declarations for font-size: 12px, line-height: 1.5em, font-family, you can do
font: 12px/1.5em georgia, serif. You can include weight and style too with font: bold italic 12px/1.5em georgia, serif. Font-size and font-family are the only two that have to be included for it to work.

Background image, position and size: background: url() center / cover


Fallbacks for variables
color: var(--accent, #000). If --accent isn't defined, then it'll use #000, or whatever you decide to put there. But you can also use another variable for your fallback by doing var(--accent, var(--backupAccent). Small thing, but nifty for things like image areas on profile pages


Standard CSS to Proboards newclasses hack
If you ever feel exceptionally lazy about converting your code to newclass, you can skip 99% of the css conversion by wrapping everything into one newclass. How it works is that [*newclass=.class] is output as <style> .class { and [/newclass] is output as } </style>.

Step one: take your css and run it through here to remove all line and paragraph breaks.

Step two: With that remaining mega block of css, take your very first selector and format it as [*newclass=.yourclass]. Then go to your very last selector and replace its closing } with [/newclass]. You should end up with something like [*newclass=.one] ... } .two {...} .three {...[/newclass].

Step three: profit.

This is also how you set custom keyframe animations in PB. Unfortunately, @import won't work though if you're thinking of importing an external style sheet; I've tried.


width: fit-content
Take a template with two sections side by side. Rather than setting a width for each section and then calculating how big to make the outer div, slap a width: fit-content on the outer div and it'll automatically be as big as it needs to be to fit those sections—handy for cutting down the math and if you later want to resize those columns.


Naming your grid areas with grid-template-areas
For after you've set your columns/rows. Once you've named them, use those names to position child divs. It sidesteps all the column/row numbering and it's super convenient for responsive design. Say you have a template consisting of a header with a two-column section below. Part of that would look like:
.table {
grid-template-columns: 1fr 1fr;
grid-template-areas: 'header header'
'colA colB'; }

.header { grid-area: header; }
Maybe on mobile you want to reorganize it so that the two columns stack in reverse order and the header is now a footer for some reason. Or maybe it's not responsive at all but you just want to rearrange things halfway through coding. All you need to do is reconfigure it like so:
.table { 
.grid-template-columns: 1fr;
.grid-template-areas: 'colB'
'colA'
'header'; }
and voila. That's it.
last edit on Jan 7, 2022 2:56:56 GMT by gimmick
options
quote
coding tips & tricks written Jan 9, 2022 1:32:14 GMT
praise the cats!
aliasthomas, breezescodes
pronounshe/him
899written posts
bcearned bits
offlinecurrently
bc
Summer '19 Bingo Completionist
bc Avatar
this is my murder mittens ^-^
GRADIENT TEXT

.text {
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-box-decoration-break: clone; //this line is incredibly important for cross-compatibility. your gradient text will cut off after the first line and be unreadable on ios mobile if you do not have this
}


its as simple as that. woo. this is something very easy to look up, but but but, i’m putting it here w/ something that most tutorials forget — the last line, the box-decoration-break is really important because otherwise your gradient text on ios mobile will not work for more than one line of text
last edit on Feb 26, 2023 22:00:11 GMT by bc
options
quote
coding tips & tricks written Jan 17, 2022 18:41:28 GMT
stultifera navis
aliasnines
pronounsshe/her
583written posts
ninelieearned bits
offlinecurrently
ninelie
Part of the Furniture
ninelie Avatar
VOLITION [Medium: Success]
I've compiled a list of resources that I personally like to use. Feel free to use them as well!

Fonts & Type

Lorem Ipsum
loremipsum.io/
Allows you to generate specific amounts of dummy text by paragraphs, sentences, and words.

Font Squirrel
www.fontsquirrel.com/
Free fonts repository. Also, if you own a license to a font you want to use on your site, you can use their generator to convert it web-compatible.

Google Fonts
fonts.google.com/
Everyone knows this site.

awwwards 2021 Free Fonts
www.awwwards.com/awwwards/collections/free-fonts/
A collection of trending fonts from 2021, free.


Icon Fonts

Icons8
icons8.com/
A huge repository of icons in lots of different styles

Icomoon
icomoon.io/
You can create your own icon font using your own SVG designs!

Game Icons
game-icons.net/
Extensive library of DnD/RPG-inspired icons

Material Icons
fonts.google.com/icons?selected=Material+Icons
Free icon font, easy installation.

Cappuccicons
cappuccicons.com/
Formally known as 'Honeybee Icons', and before that as 'Saturnicons'. Excellent free icon font with lots of icons.


CSS Generators

CSS Gradient
cssgradient.io/
Easy gradient generator for both box and text elements

Gggrain
fffuel.co/gggrain/
Converts gradients with grain texture to SVG

Clippy
bennettfeely.com/clippy/
Easy CSS clip-path maker

Blobmaker
www.blobmaker.app/
Generates blob-shaped SVGs

Animista
animista.net/
Easy CSS animation generator

SVG Artista
svgartista.net/
Helps you animate your SVGs

Particle Generator
codepen.io/dyarbrough93/pen/glBbn
Requires some prior experience/knowledge to install. Generates particle animations via scripts.


Colors

Colorable
colorable.jxnblk.com/
Lets you compare colors for contrast compatibility

Picular
picular.co/
Google search but for colors essentially

Colourcode
www.toptal.com/designers/colourcode/
Easy palette builder with just a few mouse clicks

Colors & Fonts
www.colorsandfonts.com/
Lets you compare and combine font pairings and color schemes

Scale
hihayk.github.io/scale/
Easy tool to generate color scales


Flexbox & Grid Systems

Interactive CSS Flexbox Generator
loading.io/flexbox/
Comprehensive tool to help you get started on creating flexbox elements

CSS Grid Generator
grid.layoutit.com/
Very intuitive tool to help you generate grid layouts


Design Platforms & Software

CodePen
codepen.io/
Online code editor. Simple to use. Pro subscription comes with a ton of useful features, including hosting your own files and the ability to link your projects as .css/.html/.js/etc files on external sites.

Figma
figma.com/
Completely free software that allows you to build mock-ups and wireframes for your website. Very intuitive to use, and industry professionals recommended.

Photopea
www.photopea.com/
No Photoshop? No problem. Photopea is a free online image editor that mimics PS's interface.
options
quote
coding tips & tricks written Jan 24, 2022 19:57:10 GMT
0written posts
Deletedearned bits
offlinecurrently
Deleted
Deleted Avatar
My CSS knowledge is almost exclusively responsive design, so here're some tips targeting that:

Most fields accept min(), max(), and calc() values.
Min() will set the value to the smallest of the listings.
Max() will set the value to the largest of the listings.
A good use-case would be fonts: in a world where font-size-min and font-size-max don't exist, you can hack your own and use "max(3vw, 15px);" so there's a nice responsive value that'll scale, but also clarify it should be at least 15px, because we all like readable fonts right?

... Also, sometimes I'm just straight lazy and go "width: min(100%, 1000px);"

You can combine min() and max(), if you really want to embrace your inner mad scientist. Handy for defining an upper and lower bound while still having that goldilocks window in-between.

Calc() accepts mixed inputs and does math so you don't have to - including variables! Instead of translating everything to a standard unit, you can use "calc(100% - 20px);", or "calc(5cm + 2vw);", or the ever-popular "calc(var(--RachelsFavouriteNumber) + 70% * 30px / 5vw + 8em);" - or as I like to call it, The Golden Rachel. I've used this in an influence bar for opposing factions, where instead of having to set the two numbers individually, I have a variable for one, and the other is "calc(100% - var(--faction1_influence));"
write a reply

QUICK REPLY

WRITE YOUR POST DOWN BELOW