[a / b / c / d / e / f / g / gif / h / hr / k / m / o / p / r / s / t / u / v / vg / vm / vmg / vr / vrpg / vst / w / wg] [i / ic] [r9k / s4s / vip] [cm / hm / lgbt / y] [3 / aco / adv / an / bant / biz / cgl / ck / co / diy / fa / fit / gd / hc / his / int / jp / lit / mlp / mu / n / news / out / po / pol / pw / qst / sci / soc / sp / tg / toy / trv / tv / vp / vt / wsg / wsr / x / xs] [Settings] [Search] [Mobile] [Home]
Board
Settings Mobile Home
/g/ - Technology

Name
Options
Comment
Verification
4chan Pass users can bypass this verification. [Learn More] [Login]
File
  • Please read the Rules and FAQ before posting.
  • You may highlight syntax and preserve whitespace by using [code] tags.

08/21/20New boards added: /vrpg/, /vmg/, /vst/ and /vm/
05/04/17New trial board added: /bant/ - International/Random
10/04/16New board for 4chan Pass users: /vip/ - Very Important Posts
[Hide] [Show All]


[Advertise on 4chan]


The great debate edition.

>Free beginner resources to get started with HTML, CSS and JS
https://developer.mozilla.org/en-US/docs/Learn - MDN is your best friend for fundamentals
https://web.dev/learn/ - Guides by Google, you can also learn concepts like Accessibility, Responsive Design etc
https://eloquentjavascript.net/Eloquent_JavaScript.pdf - A modern introduction to JavaScript
https://javascript.info/ - Quite a good JS tutorial
https://flukeout.github.io/ - Learn CSS selectors in no time
https://flexboxfroggy.com/ and https://cssgridgarden.com/ - Learn flex and grid in CSS

>Resources for backend languages
https://nodejs.org/en/learn/getting-started/introduction-to-nodejs - An intro to Node.js
https://www.phptutorial.net - A PHP tutorial
https://dev.java/learn/ - A Java tutorial
https://rentry.org/htbby - Links for Python and Go
https://quii.gitbook.io/learn-go-with-tests - Learn Go with Tests

>Resources for miscellaneous areas
https://github.com/bradtraversy/design-resources-for-developers - List of design resources
https://www.digitalocean.com/community/tutorials - Usually the best guides for everything server related

>Need help? Create an example and post the link
https://jsfiddle.net - if you need help with HTML/CSS/JS
https://3v4l.org - if you need help with PHP/HackLang
https://codesandbox.io - if you need help with React/Angular/Vue

/wdg/ may or may not welcome app development discussion. You can post and see what the response is.
Some app technologies of course have overlap with web dev, like React Native, Electron, and Flutter.

We have our own website: https://wdg-one.github.io

Submit your project progress updates using this format in your posts, the scraper will pick it up:

:: my-project-title ::
dev:: anon
tools:: PHP, MySQL, etc.
link:: https://my.website.com
repo:: https://github.com/user/repo
progress:: Lorem ipsum dolor sit amet

Previous: >>108171942
>>
>>108260794
DeoxSUS is better than both
>>
>>108260794
Why would I use either of these when Tkinter exists?
>>
>>108261009
Apparently that's something to do with Pokemon

>>108261011
Because Python is lame
>>
we out here doing webshit while Iranians are being nuked by child diddlers
>>
So is Tauri better than Electron?
>>
File: file.png (725 KB, 592x1244)
725 KB
725 KB PNG
>>108261069
Iran isn't nuking itself
>>
Should I fall for the datastar meme?
>>
>>108261069
>sand child diddler vs long nose child diddler
>>
File: 1767037450192656.png (86 KB, 772x482)
86 KB
86 KB PNG
why would you do
current = stack[-1]
stack.pop()

instead of
current = stack.pop()

??
>>
>>108261195
what exactly do you propose you retarded idiot
>>
File: so.png (144 KB, 1994x658)
144 KB
144 KB PNG
>>108263462
There is no point in Python anymore. JavaScript has usurped it.

https://survey.stackoverflow.co/2025/technology#1-programming-scripting-and-markup-languages
>>
>>108260794
Angular or React?
I want to get a job in webdev, but I don't know which route to take. I've read that because react is popular there are more jobs that require knowing it. But at the same time you are competing with more people for a job. Angular on the other hand is less popular, so less competition. Does this make sense?
>>
>>108261009
>forced to use axum
I prefer to use my own backend with no server function magice bullshit
>>
>>108263634
>Angular or React?
It doesn't really matter anymore.
>>
>>108263536
..nuking iran?
because of these fuckers supplying our retarded persident with Shaheeds, it prolonged SMO into positional warfare and now we've lost 1.8 million men
>>
is there a good site for curated web design inspo? i can't remember the last time i saw a modern website (esp. landing page) that either blended in with the mountain of minimalist shadcn aesthetics or tried to go retro or brutalist at the expense of being an eyesore
>>
>>108260794
I'm drinking and got a little bit nostalgic... I remember when I first started posting here back in 2022 while doing fullstackopen with others from this thread. I unironically got my first job largely because of it and the odin project.
>>
>>108263634
Angular might seem less popular, but believe me it is. It's definitely used more in larger and more enterprisey projects. It is better and highly opinionated, easy to extend. Handles a lot of use cases though it's core libraries. RxJS takes a little bit of practice but it's unironically comfy, and lets's you write beautiful FP style declarative data transformation pipelines.
Meanwhile React is not opinionated, has questionable design choices and operates via calculating diffs on it's vdom model. That often leads to shit performance if you have inexperienced devs or jeets working with you on the project. Also you have to build your own framework each time by gathering all the libs.
Make your own choice but I am currently a fullstack with Angular and have been a React dev previously for 2 years, and I would never choose React again.
>>
File: 1595758008260.jpg (40 KB, 600x899)
40 KB
40 KB JPG
>the chatgpt challenge that BTFO'd me
here it is
thurn this (input)
[
"src/index.js",
"src/utils/helpers.js",
"src/utils/math/add.js",
"public/index.html",
"README.md"
]


into this (a function's output)
{
src: {
"index.js": null,
utils: {
"helpers.js": null,
math: {
"add.js": null
}
}
},
public: {
"index.html": null
},
"README.md": null
}


it's a file system in json form
>bonus
pretty print
src/
index.js
utils/
helpers.js
math/
add.js
public/
index.html
README.md
>>
>>108264667
pro-tip: current as a "pointer" or whatever the fuck it was, aka I return "result" but pointer is a reference to result that "moves" to represent different points of the file system/json
I just had no clue of that trick
>>
>>108263895
Unironically Tailwind.
They have a pretty good showcase page with many different design styles.
https://tailwindcss.com/showcase

>(esp. landing page)
Landing pages are all the same because they works and users know what to expect.
>>
>>108264667
easily done revursively
>>
>>108265134
hmh, interesting, I think gpt's solution wasn't recursive, I wonder what's more elegant and or efficient
>>
File: 1772325377676.mp4 (2.26 MB, 1920x1080)
2.26 MB
2.26 MB MP4
Good evening /g/oys.
I'm trying to create a personal website using the style of Nier:Automata menus.
Everything is still in early stages.
Tech stack as of now: Nuxt, Tailwind, vue-glitched-writer, lots of handmade SVGs and handmade animations.
Does this look good? Critique is welcome.
>>
>>108264667
type PathObject = {
[key: string]: PathObject | null;
} | null;

type PathString = string;

const pathList: PathString[] = [
"src/index.js",
"src/utils/helpers.js",
"src/utils/math/add.js",
"public/index.html",
"README.md"
]

function getPathObject(pathList: PathString[]): PathObject {
if (!pathList.length) return null;

const result: PathObject = {}
const keyCollector: Record<string, string[]> = {}

for (const path of pathList) {
const slashIndex = path.indexOf("/")

const key = path.slice(0, slashIndex > 0 ? slashIndex : path.length)
const subpath = slashIndex > 0 ? path.slice(slashIndex + 1) : undefined;

keyCollector[key] ??= [];
if (subpath !== undefined) {
keyCollector[key].push(subpath);
}
}

for (const key in keyCollector) {
result[key] = getPathObject(keyCollector[key])
}

return result;
}

function indentedLog(indent: number, message: string): void {
console.log(`${' '.repeat(indent)}${message}`)
}

function pprintPathObject(pathObject: PathObject, indent = 2): void {
function walk(obj: PathObject, currentIndent: number): void {
for (const key in obj) {
const sub = obj[key];
if (!sub) {
indentedLog(currentIndent, key);
continue;
}
indentedLog(currentIndent, `${key}/`);
walk(sub, currentIndent + indent);
}
}
walk(pathObject, 0);
}

console.clear()
pprintPathObject(getPathObject(pathList))


was fun
>>
>>108263602
>usurped
how about you usurp my balls
>>
>>108266039
looks pretty slick but not a great design in terms of user experience interface
>>
>>108266052
>was fun
I asked him for something fun and relaxed iirc, swear to god I don't get a clue of what you're doing in your code, might check it out later, or not, tired
here's gpt's code, I'm pretty sure it is based on my (failed) attempt
function setDeep(obj, keys, value) {
let current = obj

for (let i = 0; i < keys.length; i++) {
const key = keys[i]

if (i === keys.length - 1) {
current[key] = value
} else {
current[key] ||= {}
current = current[key]
}
}
}
>>
>>108266181
I guess I'm doing something similar here
 for (const path of pathList) {
const slashIndex = path.indexOf("/")

const key = path.slice(0, slashIndex > 0 ? slashIndex : path.length)
const subpath = slashIndex > 0 ? path.slice(slashIndex + 1) : undefined;

keyCollector[key] ??= [];
if (subpath !== undefined) {
keyCollector[key].push(subpath);
}
}

for (const key in keyCollector) {
result[key] = getPathObject(keyCollector[key])
}
>>
>>108266181
>* I believe
paths.forEach(path => {
const parts = path.split("/")
let current = result

parts.forEach((part, i) => {
const isLast = i === parts.length - 1

if (isLast) {
current[part] = null
} else {
if (!current[part]) {
current[part] = {}
}

current = current[part]
}
})
})
>>
>>108266198
yeah this is probably the cleanest

But this one is slightly faster because it avoids array allocation

const result = {}

for (const path of paths) {
let current = result
let start = 0

for (let i = 0; i <= path.length; i++) {
if (i === path.length || path[i] === "/") {
const part = path.slice(start, i)
if (i === path.length) {
current[part] = null
} else {
current = current[part] ??= {}
}
start = i + 1
}
}
}
>>
>>108266301
I have retard brain right now, why use an if + slice when you can just split("/"), again I'm retardminded right now so I might be missing somthing
>>
>>108266313
Because split creates a new array
And it's more expensive for CPU than just operating on a string input

When you do
const parts = path.split("/")


Then it creates something like
["src", "utils", "math", "add.js"]


And this array has created and held in memory for the duration of computation

VS. when you do
 if (i === path.length || path[i] === "/") 
const part = path.slice(start, i)


Then `part` is a string which is much cheaper to compute than creating an array.

slice still creates a new string for each segment, but that's just one small string at a time no array overhead. split allocates an array plus all the substrings upfront.
>>
>>108261076
yes
>>
>>108266313
Or in other words

Basically using `slice` solution has an overhead of only creating substrings, but `split`has an overhead of creating the substrings AND an array that stores them. But it's possible to get the answer without the array, so to make it faster we can avoid creating it.

But in practice this is micro-optimization, and actually the `split` solution is better because it's more readable
>>
>>108266389
I get it, very interesting
if you're on a position to give your insight, when is one take more desirable than other, I get that for performance reasons your solution is better, but when is performance not necessary, etc?
>>
>>108266434
I'd say you should care to make the main function body algorithm as fast as possible, that is to fit within a certain time complexity like O(n)

When you have some subfunctions within your function (like in this case slice, or split) then both solutions have the same time complexity, but one is doing more steps than other

In big O notation we don't care about specific numbers, that's why we say O(n). But we don't care whether it's like O(3n) or O(4n) or O(100n).
I mean depending on the purpose, we might care and want the fastest possible version of something even within the same time complexity.

But in general, if a slightly slower function with the same time complexity is cleaner to read then it's acceptable and arguably better.
But if you increase time complexity, i.e. go from O(n) to O(n^2), then it's not acceptable
>>
>>108266434
And to add to that, there are some functions that are "pure" or will always be expected to work the same way for the same inputs, pretty much forever
i.e. the function that you just sent, to make an object with a specific structure from a list of strings

So in that case you could make an argument to make it as fast as possible, because then if you build other functions on top of this one, then it will be optimized at the very base.

And ideally of course all functions "should be" as fast as possible

But in the real world we have some acceptable thresholds, and you have to balance development speed, readability for others and performance

For example at work you shouldn't really micro-optimize a function that works good-enough because you can do other work in that time
But you have to kind of recognize when it's good enough and when it's maybe too sluggish
>>
>>108266589
>But you have to kind of recognize when it's good enough and when it's maybe too sluggish
I can see that, that is key. So then my next question if you don't mind is, what should I study to know how to optimize to this level?
because when you tell me that it is cheaper to make an if and a string slicing every time instead of building an array of strings in one go, I can imagine in my head that it is faster what you say, but how do I know for sure, how can I know what is more performing than other solutions? aka, what should I study to develop this specific skill?
>>
>>108266640
Honestly I don't have one specific source, it's a mix of things over time. University CS basics, studying data structures and algorithms.

I think what really clicked for me was learning how hash tables work - understanding how data is actually stored in memory. And then I was learning about other data structures and kind of recognizing that they're all as minimal as possible and all have different tradeoffs that are not arbitrary - they come literally from physics and CPU itself. Once you get that, you start seeing the cost of operations everywhere.

If you want concrete resources:
- MIT 6.042J Mathematics for Computer Science (Fall 2010): https://www.youtube.com/playlist?list=PLB7540DEDD482705B - gives you the mathematical intuition for analyzing algorithms
- MIT 6.006 Introduction to Algorithms (Fall 2011): https://www.youtube.com/playlist?list=PLUl4u3cNGP61Oq3tWYp6V_F-5jb5L2iHb - I dropped this after a few episodes myself and used other sources, but it's a solid starting point. And honestly I might come back to it and watch the entirety

They are awesome and out there for free. Don't worry, they are not outdated because they're from 2010-2011. Actually they're better than modern lectures imo.

And just learn how basic data structures work under the hood - arrays, linked lists, hash maps, trees. That alone gives you most of the intuition you need. You don't need to know C or anything low-level (although it helps), just understand what operations are cheap and what aren't.

Also I would say that Backend development in Node.js helps a lot with understanding that. So go into backend for a little bit and use Node.js and not just JavaScript in the browser. Maybe create some CLI program in Node.js
>>
>>108266808
based as fuck post, I'm going to poke at everything you mentioned here, in fact I'm going to save the whole post, research and see if I hit the trigger on some book, really don't feel like reading a book nowadays, but sure do feel like researching how shit works under the hood
>>
>>108264146
Same.

Got my first job from doing fsopen and the odin project just from hanging out in /wdg/ in 2022. Went from depressed broke neet to making a lot of money and having my life put together. This thread unironically changed my life for the better.
>>108264213
The tools and libraries that are less opinionated and more ubiquitous are a major curse for the AI slop era. And that goes especially for react. My next career switch I'm refusing to use react on the frontend. I'm either doing backend, Vue or Angular because React gives you so many opportunities to make horrible architectural choices that will bite you later. If we weren't using tanstack query on my current project, I would kill myself.
>>
You DO regularly check for vulnerabilities in the code of your deployed web applications, right /wdg/?

I have a script to check for vulnerabilities. At the moment I run that script manually on a regular basis but I should probably automate that.
>>
>>108261069
Ppl out there dying horrific death school girls plastered across the road and all I can think about is CSS container queries and monday market futures open
>>
>>108261195
Once you internalize that around 53% of women have some sort of non consent or rape fetish, you realize that the world is actually quite a good place because stories like this should be much more common especially in the case of retarded blonde sluts like this vodka bimbo
>>
>>108261529
>sand child diddler vs long nose child diddler
on the one hand, Persian children are the most beautiful in the world and that's why Ancient Persia invented pedophilia and taught it to the Greeks (read Herodotus and Xenophon if you don't believe me)
On the other hand, long nosers, while also having adorable freckled children and incredibly bratty Jewish princesses, are responsible for social media and hundreds of terabytes of content that would never have existed otherwise. So it's difficult to pick a side here.

And of course, that data was essential to getting AI video models that allow you to generate cuties on demand. I think I must side with the pedokikes on this one.
>>
>>108266180
What should I improve?
The design is responsive and has already custom focus, focus-within and hover classes for both desktop and mobile view.
>>
>>108269357
nta, I looked at the design and reference side by side and couldn't spot a major difference, so I'd say in that regard at the very least the main objective is achieved



[Advertise on 4chan]

Delete Post: [File Only] Style:
[Disable Mobile View / Use Desktop Site]

[Enable Mobile View / Use Mobile Site]

All trademarks and copyrights on this page are owned by their respective parties. Images uploaded are the responsibility of the Poster. Comments are owned by the Poster.