dys 🐙
dys 🐙
PostsComments
KPCKevin Powell - Community
Created by snxxwyy on 11/13/2024 in #front-end
@media | print, screen & only
I did a reasonably complex print stylesheet for my online résume that let me generate a pretty enough PDF that I could send it to potential clients replete with hyperlinks back to more detail on items on my site.
60 replies
KPCKevin Powell - Community
Created by fatihinn on 11/6/2024 in #front-end
Routes Route and render={(props) => ()} using
This is react-router? You might look at Tanstack Router for a more recent offering.
2 replies
KPCKevin Powell - Community
Created by Dev_HK on 11/5/2024 in #front-end
issues with svg being resized based on their parent flexbox
If it's a site built using Vite, you can add the ?raw suffix, like import Image from '$assets/image.svg?raw, and you can insert it into the page without having to edit it.
20 replies
KPCKevin Powell - Community
Created by Faker on 11/4/2024 in #front-end
Understanding the "this" keyword for objects in JavaScript
Yeah, anything that is within scope, local or global, is in the current context.
10 replies
KPCKevin Powell - Community
Created by Faker on 11/4/2024 in #front-end
Understanding the "this" keyword for objects in JavaScript
The "context" is the variables that are in scope at any point in time.
10 replies
KPCKevin Powell - Community
Created by Rio200 on 11/5/2024 in #front-end
Huge table excel into html
Maybe dump them to CSV, & use a component that converts CSV to a table?
10 replies
KPCKevin Powell - Community
Created by empty on 11/5/2024 in #front-end
how to select the last div that has class 'visible' in a container using CSS selector?
.visible:last-of-type.
9 replies
KPCKevin Powell - Community
Created by Faker on 11/4/2024 in #front-end
Understanding the "this" keyword for objects in JavaScript
If you just wrote name[0], it would look for name in the current context, which doesn't include the other members of the object, so name would be undefined. Why doesn't the current context include the other members of an object? Well, one situation that comes to mind is initialization: 
class Testing {
  varA = 'test'

  constructor(varA, varB) {
    this.varA = varA
    this.varB = varB
  }
}
class Testing {
  varA = 'test'

  constructor(varA, varB) {
    this.varA = varA
    this.varB = varB
  }
}
If the varA member were visible in the constructor scope, it would be "shadowed" (i.e. overwritten) by the varA argument to the constructor. Just in general, if all the members of an object were inserted into the namespace of the methods in that object you'd run the risk of altering the behavior of a method unexpectedly when you define a new property. Using this makes it explicit. You could also write person.name[0] in this situation. Also, as a point of syntax, you would usually write member functions as bio() {…} rather than bio: function() {…}.
10 replies
KPCKevin Powell - Community
Created by vince on 10/21/2024 in #back-end
How to build this db model
Well, probably /count since slash commands are listed by the system & autocomplete.
17 replies
KPCKevin Powell - Community
Created by Justine on 10/29/2024 in #front-end
api is not working on live site
You see on the second line where you're setting the CORS origins? Add your Render server there.
13 replies
KPCKevin Powell - Community
Created by Justine on 10/29/2024 in #front-end
api is not working on live site
ngrok will allow you to tunnel a port on localhost out to the public Internet. It's not hard for an experienced dev to operate, but it sounds like you might be less experienced. In the long term you need your API server to be running on a machine outside of your LAN. If you're using Next.js for your API server, it will be running on whatever hostname Vercel gives you. Connect to that host rather than localhost. Without knowing more about your architecture, it's difficult to diagnose this & give suggestions.
13 replies
KPCKevin Powell - Community
Created by dys 🐙 on 10/30/2024 in #front-end
How to link to an external CSS style in SVG?
The @import works.
7 replies
KPCKevin Powell - Community
Created by dys 🐙 on 10/30/2024 in #front-end
How to link to an external CSS style in SVG?
Where? I tried it in the <link/> as xmlns & in the <svg/> as xmlns:html.
7 replies
KPCKevin Powell - Community
Created by ABUL KALAM on 10/24/2024 in #front-end
Animate SVG
If I were doing this, I'd put your shape in the <defs> section then <use/> it twice, once in white, and once in blue. Then, I'd create a <clipPath> using a <circle> with the r attribute animated on hover with a SMIL <animate/> tag and filter one of the <use/>s with it like: 
<circle cx="0" cy="100%" r="0">
  <animate
    attributeName="r"
    from="0"
    to="100%"
    dur="3s"
    fill="freeze"
    begin="mouseover"
    end="mouseout"
    repeatCount="1"
  />
</circle>
<circle cx="0" cy="100%" r="0">
  <animate
    attributeName="r"
    from="0"
    to="100%"
    dur="3s"
    fill="freeze"
    begin="mouseover"
    end="mouseout"
    repeatCount="1"
  />
</circle>
Bear in mind that mouse interactions only work when the <svg> is inline or included using the <object/> tag. When <img/> is used, no mouse interactions are processed.
7 replies
KPCKevin Powell - Community
Created by snxxwyy on 10/22/2024 in #front-end
arrow function .this value
The call & apply methods of functions allow you to set this: 
const context = { a: 'testing' }
const arrow = () => console.debug({ arrow: this.a })
const vanilla = function() { console.debug({ [arguments.callee.name]: this.a }) }
arrow.call(context)
vanilla.call(context)
const context = { a: 'testing' }
const arrow = () => console.debug({ arrow: this.a })
const vanilla = function() { console.debug({ [arguments.callee.name]: this.a }) }
arrow.call(context)
vanilla.call(context)
{ arrow: undefined }
{ vanilla: 'testing' }
{ arrow: undefined }
{ vanilla: 'testing' }
16 replies
KPCKevin Powell - Community
Created by vince on 10/21/2024 in #back-end
How to build this db model
I actually misread your code. Because you used an array, I assumed you were tracking all the emojis in a list. Your structure is actually what I was suggesting. 😸 How I'd change what you have is to use a map, so you have user.emojiCount = { chart: 10, … } (so you can call user.emojiCount['chart']) rather than user.emojis = [{ emoji: 'chart', count: 10 }, …] & have to find the count.
17 replies
KPCKevin Powell - Community
Created by vince on 10/21/2024 in #back-end
How to build this db model
Could you the counts of each emoji in your db? It seems like the list of emojis could get voluminous quickly. You have to do a db update for each emojiing event anyway. It'd definitely speed up the calculation. (Also, your sort should return userBCount - userACount since it's expecting a positive, 0, or negative value.)
17 replies
KPCKevin Powell - Community
Created by snxxwyy on 10/17/2024 in #front-end
checking if a string is empty.
If, when you run, xyz.length, it tells you "xyz is null", xyz is not an empty string. It is null. ''.length === 0. Try opening the developer's tools console in the browser and pasting ''.length in. As for the if('') thing, read up on "falsy values".
32 replies
KPCKevin Powell - Community
Created by snxxwyy on 10/16/2024 in #front-end
classes | constructor, super, get & set
For example, I'm using a custom object in the React Context I'm creating to expose some information pulled from an online source to several child components. The object definition looks like: 
export class ChaptersArray<T> extends Array {
  current = 0

  constructor(...items: Array<T>) {
    super()
    this.push(...items)
  }

  get active() {
    return this[this.current]
  }
}
export class ChaptersArray<T> extends Array {
  current = 0

  constructor(...items: Array<T>) {
    super()
    this.push(...items)
  }

  get active() {
    return this[this.current]
  }
}
A "ChaptersArray" is returned from the chapters property of a Book. Having current & active properties lets me write statements like book.chapters.current to represent the index of the active chapter and book.chapters.active (note the lack of parentheses when accessing a getter) to get the Chapter itself. A ChaptersArray extends Array, so it is an Array. The normal constructor for an Array takes a number and returns an Array with that number of elements. The constructor for a ChaptersArray takes a list of elements, calls the constructor of the "superclass" with no arguments, and then inserts all the elements passed into its constructor into itself.
62 replies
KPCKevin Powell - Community
Created by Faker on 10/9/2024 in #front-end
What is vite
Vite integrates a variety of build-assisting tools, but it's primary purpose is to "bundle" your application so a web browser can display it. When developing, you frequently npm install a variety of libraries, and then import them into your code. Were you to send this code directly to the browser, it wouldn't know where to find the sources for those libraries, so Vite pulls in the code from the libraries and "bundles" them with your code, so that everything necessary for your program to run is present in what's sent to the browser. The bundling process is intelligent, however, and Vite does "tree-shaking" to only pull in the parts of the imported libraries that you actually use to make for a smaller bundle size.
16 replies