« first day (3264 days earlier)      last day (1685 days later) » 
01:00 - 22:0022:00 - 00:00

10:07 PM
refactor (verb) - deleting code and then spending hours rewriting code to make it function exactly the same
 
I like it
 
input[type=checkbox] {
    all: unset;
    display: inline-block;
    width: 32px; /* 36 - 2 * 2px padding */
    height: 18px;
    border-radius: 9px;
    background-color: #b7b7b7;
    margin-right: 8px;
    vertical-align: middle;

    color: white;
    text-align: left;
    padding-left: 2px;
    padding-right: 2px;
}

input[type=checkbox]:checked {
    background-color: black;
    text-align: right;
}

input[type=checkbox]:before {
    content: "⬤";
    vertical-align: bottom;
}
not sure if I should be proud
or scared
you decide
 
this is the first app I'm making that has unbearable load times
and I dont think I can fix it
without going native
the other option would be spreading out the wait times
 
what
what could possibly be unfixable
are you doing heavy computation or huge network requests
 
heavy rendering
I have to decide, make the user wait awhile and then everything be fast, or things be slowish all the time but fast to startup
 
10:27 PM
why heavy rendering
 
Ok. So I got a div. div is currently scrolled to the top. The div is gonna be expanded an unknown amount. I need to scroll to the new height - the old height. How do I get this height?
stackoverflow.com/a/15615701/7886229 clientHeight or offsetHeight?
@KevinB 10's of thousands of nodes have to be created. Some have to be rendered.
the nodes being created take a long time
 
don't store thousands of invisible elements in the DOM
load the small window of whichever ones are visible at any time
 
so then what do you suggest? It feels snappier when I do it this way than dynamically loading the nodes.
 
do they go in and out of view depending on user scrolling?
 
no
its like tabs
each tab has thousands of nodes/elements
 
10:34 PM
how many are visible at any time
 
anywhere from 10 to thousands
 
surely the user isn't looking at thousands of elements at once
 
ok well I am redoing a portion of it
so it will be 50 + 10 as they scroll
 
that's better
 
hence my scrolling question above
 
10:35 PM
use an infinitescroll library, there are several decent ones
 
const scroll = convo.messagesView.offsetHeight;
convo.messagesView.innerHTML = "";
convo.messagesView.append(...convo.getDisplayed().map(message => createMessageNode(message)));
convo.messagesView.scrollTo(0,convo.messagesView.offsetHeight - scroll);
 
I don't understand your height question
ok
 
that doesnt work it still remained scrolled to the top
 
yeah I'm not getting it
if that scrollTo isn't working then log its arguments
 
ok so when you scroll through your messages and get to the top (the oldest message thats in view) it should load more. But when it loads more it should keep the scroll bar at the end of the previous top.
 
10:38 PM
Ah okay that makes sense
Use an infinitescroll lib
This problem has already been solved
 
why use a library when I can fix it in 3 lines of code?
 
it sounds like you're having trouble accomplishing it in your three lines of code hahah
 
true but still
I just need to get the math right
 
I've worked with infinitescroll stuff myself, it can pose unexpected challenges
e.g. Chrome's behavior scrolling through viewports of dynamic height
it cuts corners when rendering, and it'll bite you
scroll anchoring will trip you up
 
alright time log every variable possible
 
10:43 PM
why are you using scrollTo instead of scrollIntoView
do you have a constraint with your list elements
 
because
convo.messagesView.innerHTML = "";
I have no way to tell which element needs to be scrolled to
fixed it
and wow I'm an idiot
 
what was the fix
 
its scrollHieght
 
hahah
gotcha
 
  const scroll = convo.messagesView.scrollHeight;
  convo.messagesView.innerHTML = "";
  convo.messagesView.append(...convo.getDisplayed().map(message => createMessageNode(message)));
  convo.messagesView.scrollTo(0,convo.messagesView.scrollHeight - scroll);
yippee
 
10:46 PM
are you unloading the elements that were scrolled out of view?
 
now I have an almost identical iMessage app
@forresthopkinsa no, cause iMessage app doesnt
but when I do the search mechanic it will only load within 25 messages of the search message and then you can scroll up and down to load more
 
makes sense
 
sidenote, theres got to be a better way of doing this:
function updateTheme(dark) {
    document.querySelector('link[title=theme]').href = `css/${dark ? "dark" : "light"}.css`;
}
 
yeah that's not great
 
I tried two <link>'s and then added and removing hidden attribute but chromium seems to have a bug with that
 
10:50 PM
if you insist on vanilla css then maybe just have a .dark or .light class on the top-level body
 
that could work
 
but you'll have a nicer time using Less or something
they're better suited to global theming and that sort of thing
 
I like vanilla, its a good flavor. No need to add all these extra toppings. Then it'll get fat and slow.
 
¯\_(ツ)_/¯ you may find that React has already figured out ways of being memory-efficient and fast that you haven't thought to implement yourself
 
one day ill try react again
you know what, besides load up times, my app is faster than iMessage so ha
and iMessage is native, so ha
 
10:56 PM
iMessage is definitely not a lightweight program lol
that's a good accomplishment though
side note, Flutter's ListView does a spectacular job of dynamically generated scrollable lists
 
I'll take a look, thanks
 
not a web thing (yet) though
 
11:12 PM
you can't run without a db from a Mac or iPhone but here's the project if you are interested → github.com/jbis9051/messages-viewer
 
hmm, maybe thats the issue
the browser is loading hundreds of 4000+ x 4000+ images and then scaling them down to like 50 x 50
 
hold them in memory put don't put them in the dom until you need to
 
11:54 PM
Anyone know why this is blocking? It's async
 
how do you know it's blocking
 
Cause I get the beach ball of deal th
Cause I get the beach ball of death
 
would you get the beach ball forever if you commented out L44
 
01:00 - 22:0022:00 - 00:00

« first day (3264 days earlier)      last day (1685 days later) »