[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


Thread archived.
You cannot reply anymore.


[Advertise on 4chan]


Front-end 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: >>108134607
>>
>>108171942
I'm very thankfuk for being in BE now, fucking FE aids
>>
File: Fvh_FeoWYAQdaP7.jpg (25 KB, 496x496)
25 KB
25 KB JPG
FUCK FRAMEWORKS
>>
>>108173462
wish the industry would hear for once
>>
i came up with a custom 0 framework approach that just uses the indexdb as a dedicated permanent store that has proxied setters that when you set goes to a function that sets the value on every elements that has that class for it, or there's an index of functions that you can use to mutate the data before setting it on a specific element that is also keyed to listen to those
its like 40 lines and it works perfectly and there are 0 performance issues
>>
I'm looking to offer an improved version of something I developed during my PhD as a SaaS product (B2B although it's mostly going to target researchers in my field). The back-end is a bit complex and I'm deploying that on a bare Hetzner VPS, but I'm wondering how to set up the front-end.

Since I already have a VPS where the back-end sits do you guys think it makes sense to just host the front-end there (behind Cloudflare or whatever), or is there a reason to get a separate hosting service for what's supposed to be a pretty basic site that just provides some company info an a simple interface for the back-end? e.g. Cloudflare Pages

It's a niche thing so there won't be that much traffic, I don't expect more than a couple hundred people accessing this at a time ever.
>>
>>108173462
https://justfuckingusereact.com/
>>
>>108173848
Sorry I only need
EventTarget.prototype.on()

and
EventTarget.prototype.off()
>>
File: 1771367744506.jpg (7 KB, 225x225)
7 KB
7 KB JPG
>>108173837
Ran into a similar issue. I see two options;
* Transform your code into a rest API and put a FE of choice on GitHub pages
* Make your application into a monolith, PHP style.

I went with the second option, converting my python script into a SQLModel+Fastapi+HTMX+Jinja2 microframework. With AI it only took me under an hour to make necessary adjustments.
>>
>>108172173
Speak for yourself. Our backend guys are so incredibly slow, that we have to simulate the entire backend in the frontend only to be able to show that we frontend devs aren't at fault that the product isn't ready.
>>
File: 1771370083083.png (29 KB, 308x300)
29 KB
29 KB PNG
>>108173848
>You think you're gonna build a real-time collaborative editor, a dynamic trading dashboard, or an enterprise-grade project management tool with those HTML "interactive" elements and a sprinkle of onClick?
Most projects are just glorified CRUDs
>Try building a dashboard with a dozen filters, real-time updates from ten different sources, user preferences that change everything, and collaborative editing where five assholes are mashing keys at once.
This is backend with some front sprinkle, PHP has better performance than node for that

Again, frontend frameworks were a mistake and people are finally ready to have this conversation
>>
File: 1770011505308942.png (7 KB, 238x211)
7 KB
7 KB PNG
>>108173462
based
>>
>>108174969
I already have something like option one, my backend is accessible through an Express REST API, and there's no porting it away from a VPS setup into a monolith really since it's dependent on all sorts of preexisting command line utilities and a specialized C toolkit.

It's more that I'm wondering if I should just serve my front end the same way from the same VPS or keep it separate.
>>
>>108173837
I mean it shouldn't be a huge problem to later split them up when necessary
But frontend is pretty lightweight on your server, it literally just serves HTML and the rest of the compute is on the client, so having a separate server for just the frontend could be overkill
But in general - it doesn't really matter. You can always separate them later
>>
Which IDE or code editor can I use if I want to instantly see (live see) the webs I'm creating?
>>
>>108175935
any one that has auto-save feature after some delay
+ you need some framework with HMR (Hot Module Replacement)
>>
>>108175444
In this case keeping it on a separate place might be better - the only upside of serving frontend from the server is making a reverse proxy for front and back. GH pages allow setting up a domain pretty easily and tells you about library vulnerabilities, haven't tried the cloudflare version, tho
>>
>>108175444
I see nothing wrong with serving it from the same server, especially if you won't get a lot of traffic.
>>
>haiku 4.5 can code backend while it takes a sonnet 4.5 to do frontend
Backend shitters are the biggest frauds in this industry
>>
>>108173914
elaborate
>>
>>108175935
VS code has a plugin 4 that iirc, but it's not black magic in any other editor or ide
>>
File: mickey_program.jpg (150 KB, 1124x1104)
150 KB
150 KB JPG
>>108171942
Add these to the resources:

https://uiverse.io/
https://www.footer.design/
>>
>>108178363
Now try to make a monolith application and tell us the experience.
>>
let's prettend jQuery has top talent of the js world, and is preparing his next release to once again revilutionize the world of js
what does it provide this time?
what I remember from other posters
>lodash
what else?
>>
>>108179603
Behold https://github.com/remix-run/remix
>>
>>108180636
what do u use it 4?
>>
>>108179603
(My) take
>handling big nums and float with ease
>models can be imported from major back end langs by merely specifying the native be lang
>types, but the java/c# way, all the way
>build a gateway for making interactive vector animation happen all over again, this handled by FOSS program emulating flash
>same as above but for 3d
>>
>>108178431
pajeet.on("click", "button.redeem", () => pajeet.scream());

as a shortcut for
pajeet.addEventListener("click", (e) => {
if (e.target.closest("button.redeem")) {
pajeet.scream();
}
}
>>
>>108181596
pretty sure I've never seen this before, nice
>>
to think this used to be one of the most active generals on /g/...
>>
File: 1654611058655.jpg (68 KB, 978x1094)
68 KB
68 KB JPG
after i finish to learn C should i learn Go or Java
>>
>>108184523
finish to learn... god fucking damnit, after im FINISHED LEARNING C*

it's 2 am lads
>>
>>108184523
Java/C#
Once you have the fundamentals with C, it's an excellent next step. Also SQL and Python.
>>
p.10
>>
>>108184523
If I were you I'd take go, might as well be bleeding edge
>>
>>108171942
Is Angular even relevant outside of legacy projects? I only see React and Vue jobs/projects. Even Svelte seems to be more popular in my bubble.
>>
>>108175935
VSCodium has like 50 different versions of Live Server. Frameworks like Angular implement it by default.
>>
File: 1751379854210538.jpg (94 KB, 849x1200)
94 KB
94 KB JPG
Gentlemen, I give you Hugo: a framework for static HTML + CSS pages. https://gohugo.io/

I'm quite fond of Hugo and WordPress. Static websites don't need anything else but then again, Blogspot already solved this over a decade ago.
>>
>>108186926
It's used a lot in France. Lot of Java/Angular job.
>>
>>108173848
Based

>>108175223
>PHP has better performance than node for that
Node isn't relevant to React running in a browser
>frontend frameworks were a mistake
Why? React just works. Easy to use, gets the job done. Simple as.
>>
File: 1754582460734145.png (39 KB, 159x163)
39 KB
39 KB PNG
>was doing PHP/Laravel + jquery for a year at a job
>mfw I have to do frontend with backend at a new job
How long til you get used to typescript?
>>
>>108187119
>How long til you get used to typescript
A couple of weeks at most, then probably a couple of months until you "get good". Just remember to think of types as mathematical sets of values a variable can be. They're not actual data types you'd see in a language like C. They're effectively just a comment telling your IDE/compiler "this variable should always be a value within this set. show an error if it's logically possible for it to become a value outside of this set"
https://en.wikipedia.org/wiki/Set_(mathematics)
>>
>>108187160
thank, anon.
>>
How long is your commute to your web dev job?

I'm looking at a good job but it would be a 30 minute cycle to the train station and then a 50 minute train. Man I need a car.
>>
>>108187187
0 seconds because I work remotely. before that it was 10-15 minutes by foot.
>>
File: 1771500534631.jpg (54 KB, 640x480)
54 KB
54 KB JPG
>>108187028
Did you even read my response? All the issues mentioned on the website are complexities that would be trivial to solve if processed by the backend, keeping the frontend light and dumb, as it should be.

React is awesome, the problem is the design for most applications over engineering for a use case that will most likely not happen.

Take a CRUD, for example and let's compare MERN against vanilla PHP. The only worry you should have when implementing it in PHP is avoiding XSS, SQLi and configuring the Apache server correctly - the MVC is done and all backend variables are available at the front without worrying about threat actors.

Now, for React you have to develop the whole backend including authentication, authorization, endpoints, sessions, error handling and DB sanitization, only to then start on the frontend and implement auth, routes, state, views, interceptors, and duplicate the validation logic.

When PHP changes the backend the frontend is ready, but when the MERN app changes if you have to create tests for everything to make sure it doesn't break the previous code.
>>
>here's how my AI agents build and test 8 bazillion code on its own
How do they achieve this?
>>
>>108187187
I work remotely too. I don't even consider fully on site jobs. 1 day in office per week is acceptable, 2 is pushing it for me.
>>
>>108187777
LoC is a bullshit metric used by snake oil salesmen
>>
File: 1761963841122598.jpg (16 KB, 702x480)
16 KB
16 KB JPG
>>108187807
I notice they only use business metric to fool retarded linkedinfags
>>
>>108187439
I like having an interactive front-end with JS because my website can have a more app-like experience. You can make a PWA which feels just like a native app. I could achieve this sort of thing with just vanilla JS, but React makes things easy, so I find myself using that.

For some kinds of website, you don't need JS and yeah you can just render everything on the server with PHP or another preferred language. I guess it depends on what you want the user experience to be.

>duplicate the validation logic
Not necessarily. Just get the back-end to return validation errors which are then shown in the front-end.
>>
>>108186926
I like Angular for how opinionated it is. I have a few apps I wrote in 2016-2019 that get some traffic and that I update once in a while and it's a breeze since the changes to the framework are fairly logical and well explained so I know what to change when needed. Similar situation with RxJS which meshes well and powers much of the internals.

I feel if they were written in React I'd have to review what changed in a half dozen other libraries in the surrounding ecosystem and reorganize my projects entirely and get stuck in a (in)decision loop of investigating what's best in current year.
>>
>>108188877
>>108187439
nta, and I admit I'm not too in the loop. but 4 me, the ideal would be ssr + spa, some kind of hybrid
>>
File: 1770788485671173.jpg (219 KB, 1000x1000)
219 KB
219 KB JPG
>>108173848
that's some of the gayest retard shit I ever read
>>
>>108171942
i want to learn react and angular in order to get a job, which versions should I learn? (I know angular changes a lot in between, so I'm willing to learn multiple versions in case I get migration job or smthing)

Also I want to learn vue for my own shot, which ones the best Vue version?
>>
>>108189372
tets
>>
>>108189348
I think Next.js is meant to achieve that but I don't know much about it. I think it renders some of your React components on your server while rendering stuff that's highly interactive on the client
>>
>>108189572
I wonder if modern js has a straightforward enough history/bookmarks api, in jQuery times it was ultra mindfuck
>>
>>108189348
>the ideal would be ssr + spa, some kind of hybrid
You're literally describing Next, Nuxt and Sveltekit.
>>
>>108190023
the only thing that worries me slightly is, like I mentioned, history and bookmark api, everything else seems ez to me, and I wouldn't need anything other than js and BE SSR to accomplish that, maybe I'm being naive, but that's the way I see it
>>
File: 1579269270478.jpg (31 KB, 409x265)
31 KB
31 KB JPG
>>
useless niggers
>>
>>108189372
For angular learn the latest version. Take the Academind course from Udemy, it's a gold mine and teaches you not only to code, but how to check the docs (where you'll spend most of your time)
For React the same, latest version. Mosh has the best courses.
Ad for Vue, version 2 is the easiest, but you'll see more and more libraries, docs and tutorials focused on V3, so I would recommend latest as well (since it's the easiest any course should do, I really like NetNinja YT channel)
>>
>>108193389
Thank you anon, I already know how to code btw I simply lack knowledge about which version is getting used of these frameworks
>>
Can I get a webdev job if all I know is html, php and css?
>>
>>108193641
how good is your css though?
>>
>>108193808
nobody is better at css than AI. css is extremely anal
>>
>>108193832
desu, I just let AI write all my css/tailwind nowadays.
>>
>>108189756
I've manipulated browser history with JS before and it was straightforward. Dunno about bookmarks though, I never tried that.
>>
I fucking hate css.
>>
>>108194597
If history api is straightforward bookmark might either be one and the same or similar
>>
>>108193389
>>108189372
Vue2 is dead in 2k26, 3 is the way to go.
>>
>>108194599
I've seen this post 8383886368247 times in thus general, css is just autism boxes
>>
>>108194599
>>108195747
I just use flexbox for pretty much everything now. It's pretty straightforward. I should probably learn CSS grid at some point.
>>
I haven't built a project in so long. I have a job but I find it very boring, I haven't touched frontend in over 2 years. Most of my stuff involves microservices and lambda so there's barely any UI work. Any ideas on building some cool stuff?
>>108186926
Very big in corporate stuff, where you want "only one way to do something". Corporate loves this because anyone can work in the structure, especially *cough* indians *cough*.
>>
>>108196989
it's worth it.
T. learned grid recently after only using flex box
>>
>>108196989
literally same
>>
>>108195747
I like autism box.
I just don't like animation
>>
You DO have over 100 repos on your GitHub account, right /wdg/?
>>
File: what_the_dog_doin'.jpg (14 KB, 286x277)
14 KB
14 KB JPG
ChatGPT challenge time

turn this
wave("two words")


into this
[
"Two words",
"tWo words",
"twO words",
"two Words",
"two wOrds",
"two woRds",
"two worDs",
"two wordS"
]


No regex, single pass, no mutating original string
>>
File: 1771599327776873.png (706 KB, 1666x1902)
706 KB
706 KB PNG
shit son, look at this fine ass UI, also post nice UIs you like I guess
>>
>>108197090
That's extremely easy though.. ?
>>
>>108197638
it's slightly mind-fucky, simple, but not so simple, I had to give it a second thought, had to check mdn and play with the console a little
>>
>>108197065
i dont use microslop products
>>
>>108197090
const capitalizeIndex = (
/** @type {string} */ str,
/** @type {number} */ targetIndex,
) =>
str
.split("")
.map((char, charIndex) =>
charIndex === targetIndex ? char.toUpperCase() : char,
)
.join("");

const isWhiteSpace = (/** @type {string} */ str) => !str.trim();

const wave = (/** @type {string} */ str) =>
Array.from(str).flatMap((char, index) =>
isWhiteSpace(char) ? [] : capitalizeIndex(str, index),
);

>>
>>108199149
>single pass
>>
>>108199470
show us your code
>>
>>108199470
second, chatgpt would be mad, points for style though
>>108199509
I'll give the thread some time and post mine, pro-tip: old school loop
>>
>>108197090
function wave(s: string) {
const result = [];

for (let i = 0; i < s.length; i++) {
const char = s[i];
if (char === ' ') continue;
result.push(s.slice(0,i) + char.toUpperCase() + s.slice(i+1,s.length))
}

return result;
}

>>
>>108199149
>>108199922
functionalsperg VS proceduralboomer who will win???
>>
>>108175223
Frontend frameworks were a mistake but they conned people so hard these young web devs have to gaslight older SWEs into thinking front end is worth it.
>>
>>108199149
Literal mental illness
>>
File: 1771640426478.png (48 KB, 300x300)
48 KB
48 KB PNG
>>108171942
I decided to switch backend again.
FastAPI is ok, but it's too much hassle to render Jinja templates:
@app.get("/todos", response_class=HTMLResponse)
def list_todos(request: Request):
todos = get_todos()
return templates.TemplateResponse(
"todos.html", {"request": request, "todos": todos}
)


In contrast, this is the equivalent in Sinatra:
get "/todos" do
@todos = Todo.all
erb :todos
end


I come from a Rails background, and considered a good python framework (not Django) to make simple apps for team requirements, but after realizing I'll be maintaining my own projects anyway, why not switch to something more light and comfortable? Ruby _is_ better than Python for fast prototyping, the only thing I'll miss is pandas.
>>
File: 1622139710026.png (333 KB, 800x600)
333 KB
333 KB PNG
>>108199922
yes, this is how my solution looked like, well in fact I got mindfucked by slice and chose .substring instead, eventhough it seems to work exactly the same way, long time I don't do string slicing
>>
>>108199969
one makes 2 passes the other makes 1 pass, the rules said 1 pass
>>
>>108199149
>arrow functions everywhere
>jsdoc
Cringe
>>108199922
>typescript
>regular function instead of arrow function cancer
Based
>>
>>108201249
>Ruby
Shame that it's so slow
>>
any of you run or know about "datamining the living fuck of your users", what strategies are there, besides tracking mouse movement, clicks, navigation paths, what else is there?
my php teacher told us that through malicious cookies alone, you could pull the navigation list of a user
>>
File: 1771627251980044.gif (19 KB, 341x498)
19 KB
19 KB GIF
>>108203105
build step is le bad
function hoisting is le bad
>>
>>108197090
in ruby this is just
def wave(str)
lower = str.downcase
str.size.times.map { |i|
next if str[i] == " "
lower.dup.tap { it[i] = it[i].upcase }
}.compact
end

>>108203115
it's only as slow as Python now, there's even two JIT compilers (neither are good for production)
>>
>>108203374
If you're shipping code for the browser then surely you need a build step anyway to minify the code and strip out the JSdoc stuff. I like TS because it's easy to write and makes it easy to see exactly what data I'm passing around
>>
>>108203353
Please respect the privacy of your users
>>
Vibebros failed me, this shit doesn't help at all. I wanted to do some frontend with vibecoding, nope. It's never working. I'm done vibin'
>>
>>108204400
I don't think most major sites would do that, I'm just curious
>>
>>108204413
yeah, using the latest shit and giving it detailed instructions and the result is utter garbage slop. maybe it's because i told it not to use tailwind lmao
>>
>>108204413
I write all my own code until I get stuck with a problem, then I ask AI to give me a solution. I guess I could ask AI to write all my code but I don't trust it to do the job properly.
>>
>>108204571
AI is better at code snippets in my experience
>>
anyone feels like posting an easy-medium js challenge?
>>
>>108205804
Just use LeetCode
>>
File: 1721233771125788.jpg (79 KB, 462x462)
79 KB
79 KB JPG
Honest Question, I want simple site done in flask, I can do Python by myself but HTML and CSS is always something that stops me since I can't do nice things. How can get inspiration or not make utter shit design?
>>
File: pablopicasso1-2x[1].jpg (81 KB, 1200x630)
81 KB
81 KB JPG
>>108206188
Stripe, Zero Financial, Crypton Trading, KIKK, Epicurrence. https://yle.fi/uutiset , https://systemspace.link/ , https://rahul.io/ , https://garden-eight.com/
https://www.neom.com/en-us/regions/trojena

/*design*/
https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886

/*desing inspiration web*/
https://dribbble.com/
https://www.uplabs.com/
https://www.behance.net/
http://www.goodweb.design/
https://onepagelove.com/
https://www.awwwards.com/
https://medium.com/refactoring-ui/7-practical-tips-for-cheating-at-design-40c736799886
https://codepen.io/nicolaspavlotsky/full/ZJPXgy
https://hype4.academy/articles/design/glassmorphism-in-user-interfaces

/* fonts */
https://fontpair.co/

/* design theory */
https://www.ibm.com/design/language/illustration/flat-style/design/
https://www.ibm.com/design/language/

/* hosts refactoring UI pdf */
https://z-lib.org/

/* design from refactor ui dude */
https://twitter.com/i/events/880688233641848832?lang=fr
https://www.youtube.com/watch?v=7Z9rrryIOC4 [Embed]
https://gofile.io/d/KCQMw2


some links might be dead but you get the picture
>>
>>108206218
Thanks anon, It appears that my simple plan to use AI failed, but we will see what I will be capable of doing, I have few colours that I picked from Anime figures so it might end up ridicules since somebody competent picked right colours before me.
>>
>>108206254
>I have few colours that I picked from Anime figures so it might end up ridicules since somebody competent picked right colours before me.
I followed that strat once, I literally stole the color palette of the national tv channel's redesign, and it was hella cool
>>
>>108175015
>there are distinct backend and frontend guys
company is ngmi
>>
>>108173462
You're the man.
>>
>>108206696
>letting js framework demonic influence corrupt your backend devs
>>
>>108197090
>>108203395
def wave(text)
(0...text.size)
.select { text[_1].match?(/[[:alpha:]]/) }
.map { |i| "#{text[...i]}#{text[i].upcase}#{text[i + 1..]}" }
end
>>
>>108206188
My approach to HTML/CSS is to make something functional, responsive, and with consistent spacing between elements. I don't bother with fancy gimmicks like animations and shadows etc. Maybe one day I'll dive down that rabbit hole but things like that aren't crucially important.
>>
>Theo got called a faggot on twitter
lmaoo
>>
File: 1682970642143621.png (1.84 MB, 1344x1010)
1.84 MB
1.84 MB PNG
>>
>>108204413
It's provides a good starting point component for CSS, but you still need to do some tard-wrangling once in a while.
>>
>>108210392
>I don't bother with fancy gimmicks like animations and shadows etc
just use AI.
>>
>>108212466
I'm trying to get a new web dev job so I don't want to use AI for everything and then be unable to explain how something works in a job interview. I want to write as much code as I can by hand to increase my knowledge. Then I just use AI to inform me if I'm stuck with something.
>>
>>108212600
that's the right approach as a newbie imo, then when you're done, you ask the AI how to improve it, best of both worlds, then if a senior reviews your code you show him both codes, just in case
>>
Why does Cloudflare fuck with my response headers. Stupid bastards
>>
>>108215216
they fuck with more than just your response headers
stop using glow ware
>>
>>108215333
But it's free
>>
is java a good frontend?
>>
>>108216927
the best
>>
>>108215333
Firstly this: >>108216917
Secondly I wanted DDOS protection
Thirdly it means I don't have to expose the IP of my server since my domain just points to Cloudflare's servers
Fourthly I found a way to make Cloudflare stop messing up my headers

Yeah maybe ideally I wouldn't use it but it's just an easy anti-DDOS solution.
>>
based thread
>>
>>108218087
honestly there really is no decent alternative to cloudflare unless you want to get fucked in the ass by bad actors draining your wallet from egress fees
>>
>>108218112
>>108218087
nta, back around the 2010's give or take, 4chins tried DDOS towards tumblr, but tumblr legit neutered it somehow, aka used cloudflare before it even existed, I believe that's one way in which cloudflare was born
what I think they did was just identify a DDOSing IP and ignored it
but that's just my wild guess and I don't know shit about these subjects
>>
>>108218112
>egress fees
I'm running on a VPS with unlimited egress. I just didn't want to worry about idiots online hammering my VPS and crashing it
>>
>>108218791
www.webdesignmuseum.org%2Fgolden-age-of-web-design
>>
>>108218087
what is the chance of attacks DDOSing your linkedin portfolio website?
>>
>>108218851
Low, but I'd rather be safe than sorry
>>
>>108218991
alright, gonna set up cloudflare too then
>>
>>108218997
Personally I'm using Cloudflare Tunnel. My domain points to Cloudflare, which then sends requests to my server, which is running the `cloudflared` daemon. I guess I could not use Cloudflare and just have requests go straight to Nginx on my server but I thought Cloudflare might be a bit more secure so I went with that.
>>
>>108218997
>>108219036
something really cool to bring up in a job interview, since most people won't implement that
>>
>>108219155
in my experience it's what literally everyone does because it's the easiest path
>>
File: 1771852915773.jpg (108 KB, 1080x757)
108 KB
108 KB JPG
>>108210729
>literally who

>>108218087
>see pic rel

>>108218290
>4chins tried DDOS towards tumblr
AKA 3 tards spammed F5 for 5 minutes and nothing happened.
>>
>>108219258
>AKA 3 tards spammed F5 for 5 minutes and nothing happened.
no, that's not how it was, or do you think you can take down visa's site like that? c'mon now
>>
>>108219197
when you're at portfolio level, you don't usually concern yourself with ddos protection
>>
>>108219258
>>see pic rel
Prove that they're responsible for DDOS attacks
>>
File: xbox-2004.jpg (561 KB, 830x1100)
561 KB
561 KB JPG
>>108218812
Very based
>>
>>108219841
AHHHH WHERE ARE ALL THE SHADOW AND ANIMATION?
>>
>>108219844
94773 times more shadows and highlights than designs of the now, just baked in a jpg/png, at least in that regard, we should go back
other than that, I find some flaws in the design the metallic thingie should frame the content within it at least with some outter side borders and not just a header and footer
>>
>>108171942
I'm a 28 yr old boomer currently enrolled in a mediocre college for CS. Can I just apply after I graduate for web deving
>>
>>108220539
I'd say keep your eyes hard focused on the internships and know them throughly, talk with students from the years that are getting them and figure out how to get them, which are the best ones and how to get those, and the salary and hire ratio, don't forget you are studying to get a job, so try to secure that job while you're still studying
>>
>>108197950
Okay, GitLab then
>>
>>108189363
It's correct, React just works and gets the job done
>>
File: 1768414954406193.png (19 KB, 617x747)
19 KB
19 KB PNG
where do you get inspiration for modern design?
>>
>>108225365
ya don't
websites don't even need CSS, let alone js
doctype XHTML strict 4ever
>>
>>108225393
but the HR recruits wouldn't like it.
>>
>>108225395
okay then use daisyui
>>
>>108225400
I am actually using that.
this is for components that daisy don't have.
>>
>>108225404
I like Pinterest for design inspiration
>>
>>108225421
thank, anon.
>>
>>108225365
>>108206218
>>
Been awhile since I code so here goes.
What do I need if I want to test out wordpress locally without internet? I got php 8 and mysql 8 installed already. I used to do apache stack or some sort but I forgot.
Also want to test out laravel,will i need to install that too?
Thank you for your help and suggestion.
>>
>>108227362
I dunno about WordPress but Laravel is straightforward, I think they have instructions on their website. Install PHP first and then follow Laravel's instructions. You need Composer but I think Laravel's instructions go over that
>>
I've been looking for jobs and sometimes I come across "low-code" or "no-code" jobs which are supposedly to do with web development, and these job ads nearly always mention "AI"

I bet you whoever made the moronic decision to use a "low-code/no-code platform" has no technical experience at all
>>
>>108228173

Yeah the rigor of development is in the maintenance, after the initial build is done. This is why so much emphasis is put on design, readability, maintainability, your ability to respond to change, bugs, issues is going to define how effective your product is.

Nocode creates spaghetti cruft that is fundamentally unmaintainable by definition. It's doomed from the start.
>>
>>108228173
It's buzz words that investors like
I know a guy who work in a company like that, and it's endless deadline rushing on top of fixing AI janky codes with no regard for scaling.
>>
>>108228188
If my boss asked me to build a website with a "low/no-code" thing then it would take me much longer because I'd have to learn some stupid proprietary crap instead of just jumping in and writing code

Also I just looked up one of these "low-code" platforms and it advertises its built in AI assistant. i could just use ChatGPT or the Gemini CLI which would probably be much better.
>>
>>108227362
well u need apache most likely, or nginx, if wp has progressed till that point, most people opt for using lamp/xamp, etc
>>
>>108228207

I gave it a shot just to try it out. One platform refused to let me see the underlying code so obviously that's a no, no way to start your own product like that. The other allowed me to and it was a garbled mess. And yeah you have to learn their platform, deeply, which is a waste of time as it will probably get quickly outdated.
>>
>>108228238
Ceo types love "no code" shit, because it literally means not overpaying for an engineer that's bucksmaxxed, aka they're greedy and scummy
>>
how long to learn Symfony if i already know PHP?
>>
>>108228756
Give it a shot and see
>>
File: firefox_77825.gif (1.79 MB, 800x225)
1.79 MB
1.79 MB GIF
How does one even begin to learn how to do shit like this
>>
>>108230371
it's just math
>>
>>108230371
it has all to do with image and video manipulation, source?
it's like some 2 tone applied, and another filter, and some kind of animated shapes
>>
>>108230371
Firstly this: >>108230384

Secondly I mostly care about technology which makes me employable, and that sort of graphics wizardry is arguably not very important when it comes to employability in web dev
>>
>>108228756
>how long to learn Symfony if i already know PHP?
don't bother. just learn laravel if you actually care. no one uses symfony or old junk.
>>
Am I the only one who is not on a high horse about AI? At least for web development, Claude Sonnet 4.5 is very competent at understanding a feature and creating snippets, functions, extractions, etc. If you take a minute to learn how it can be effectively integrated into your workflow, it's very handy.

Yes, it will probably decimate the field before long, but there's nothing we can do to stop that at this rate. If you've got a job, get the money while the getting's still good.
>>
>>108186991
>Gentlemen, I give you Hugo: a framework for static HTML + CSS pages. https://gohugo.io/
I have a hot take: I think hugo is too complex for what it is. You basiclly don't need anything to generate a static site with golang. It comes with templating built in. Why not just do something like this?

{{define "index"}}
{{template "header" .}}
<h1> my ocol site</h1>
{{template "footer" .}}
{{end}}
>>
>>108231213
>effectively integrated into your workflow
you kidding me? all I do is talk to ai. I don't even program anymore. I just talk to ai. EIGHT FUCKING HOURS A DAY. is this how normies live?
>>
>>108231213
I just dislike the cognitive loads from AI.

My workplace has decreased the time allotted for a feature and expect you to finish more features in a small duration of time because of AI, so I am stuck with doing high-level thinking most of the time which somehow burn you out faster than just plain coding.

it's great for quickly building up a feature, but it's terrible in the sense that you get even more busier + your skill deteriorating from lack of practice.
>>
File: cat.jpg (57 KB, 1014x609)
57 KB
57 KB JPG
how do i scrape a website behind a cloudflare? i've got all the files in a json, but hitting the 403 error. do i need to use a paid captcha solver or residential proxy for best results?
>>
>>108234373
Us people who run websites would appreciate it if you respect the rules of websites. If a website doesn't want to be scraped then please don't scrape it. Thanks.
>>
File: 1751084390780074.jpg (116 KB, 1371x1017)
116 KB
116 KB JPG
>>
>>108231213
I feel myself legit getting dumber and rustier (not starting HRT yet) by the minute when using AI.
I was very against it at first until I got codex right into codium running and I started to just write:
>TODO: fix this bug and separate the component and all its calls into a generic plug-in
Then I just watch as codex implements it.

At first I kept reading through its code to make sure that it didn't introduce anything, but now I just hit F5 and see if anything broke before just pushing the code as is.

I hate how retarded and unskilled this is making me, but the difference in time use is huge. Now I just sit on my ass all day watching youtube then push 8 commits and pretend that I had an extremely productive day... and the worst part is that it just werks anyway.
>>
It's been a full year since we decided to abandon our startup's PWA for a react-native app. And it's turned out to be the right decision, much to my chagrin. The distribution is so much easier and the user's love it. I'm just annoyed because everything we can do natively we could do with a PWA. But user's didn't understand it and constantly asked "when is the app coming out?"

Learning and transitioning to RN wasn't too painful as a longtime web dev, but you get all the pain points of modern webslop with extra bullshit when the native problems crop up.
>>
>>108235401
This but for React
>>
>>108235976
I've dabbled in both PWAs and React Native in my spare time. I think Apple doesn't allow PWAs into their app store, while Google does allow PWAs into theirs. So then you kind of have to make a native app if you want to reach iPhone users, because they're used to looking in the app store, rather than installing a PWA from a browser

So basically fuck Apple. If they let PWAs into their app store then PWAs would be a better proposition. Also fuck Apple for charging a high fee just for putting apps into the app store.
>>
My current plan is to defy the odds of the shit job market and get a job as a junior web dev. May the gods of web dev have mercy upon me
>>
>>108230371
>contrast burn
>two tone
>points filter (this one is 100% found in photoshop but I figure an open implementation also exists)
>>
Page 8, /wdg/ is dying
>>
File: chad-virgin-html.png (353 KB, 1334x738)
353 KB
353 KB PNG
>>108173462
Based.
>>
>>108239653
indeed, sad
>>
For appdev is tauri the goat?
>>
>>108240812
From what I gathered, it's a huge fucking meme. I'm not going to write Rust for my application.
Electron already solved this with js, and the right thing to do would have been to do the same thing on mobile. It's retarded how nobody bothered to make a framework like that that actually works.
>>
>>108235468
why add Todo: ?
it helps the AI understand instruction better?
>>
>>108241085
But if I'm using electron I wanna use Next.js and they never work well if you go for both last versions, yes I'm being picky.
>>
>>108232654
So true, I work for a banking firm, and I haven't touched my IDE in a month while pumping a fuckton of code. People not being able to use it or having it wipe their pcs are morons.
>>
>>108241085
Electron is cancer because it's so bloated. I haven't tried Tauri but it looks interesting
>>
descrive your ideal web development ecosystem, it doesn't need to exist
>>
File: 1761771795622329.png (62 KB, 227x300)
62 KB
62 KB PNG
Hetzner just bumped up their prices by a LOT.
It's over.
>>
>>108243535
whata bouta digital ozean?
>>
>>108243665
Idk I don't have any servers at DO
But I'm sure it's coming to other providers too.
>>
>>108236783
>>108235976
Didn't google pretty much abandon PWAs anyway?
As much as I love them, though, I hated how my users kept begging for an app when the PWA was available and did the same thing anyway. But user is king in the end.
>>
>>108243535
Was inevitable.
They could rent their data centers for LLM goys, or they can rent their compute to you. One of these has much deeper pockets than the other.
>>
How do you quickly make sense of AI codes?
>>
>>108175444
>Express in 2026
If you don't need very specific libraries made for Express just swap it for Hono or Elysia
>>108175935
Pretty much all tooling for all frameworks will offer a live dev server with HMR at this point
Have it open in a browser and whenever you save changes in your editor it will instantly update & keep the state
>>108184523
Do you have a specific software, ecosystem, job, role, whatever in mind that focuses on one of them? Then pick that one
Otherwise I'd pick Go
>>108186926
Fuck old Angular
Modern Angular is okay
To be honest almost all modern libs and frameworks are okay now, it's not a meme that they're slowly converging into a similar solution
>>
>>108243847
Ask the AI to explain it, duh.
>>
>>108243903
how do you deal with information overload after?
>>
>>108173848
baseddev shit like this is why even local businesses have websites that have 50mb of requests. 90% of the web has zero need for anything beyond HTML + SCSS.
Your retarded blog or the local bakery doesn't need a fully hydrated JS sloppage.
>>108189363
>looks like a baseddev
>writes like a baseddev millennial
like clockwork
>>
>>108243907
takes tine to learn, take the time to learn, no ez short hack, just grind, it'll pay off (horrible job market asside)
>>
>>108244554
need to get rid of the tism to not used AI first on personal project.
>>
Should I fall for the datastar meme for my next project? SSEs seem comfy.
>>
>>108243911
you didnt even read it retard
>>
>>108242981
Wow, I would never have thought it was le heckin' bloaterino. Surely there must be zero advantages or tradeoffs here, g*sh, I'm glad I opened /g/ today, now I know what to avoid at all cost and why.
>>
https://www.youtube.com/watch?v=A8b7HFUXPqk
>>
>>108245699
My computer is a bit old and underpowered so I really notice the difference between proper native apps and Electron bloatware. I've never run a Tauri app but maybe I should try it out to see if it runs any better.
>>
File: file.png (52 KB, 763x404)
52 KB
52 KB PNG
>>108243535
sad, but this is inevitable for pretty much any platform atm
>>
>>108236783
aren't the Amazon and Spotify apps just a PWA wrapper? I thought both Apple and Google were still allowing this as long as it "feels" like a regular native app (imo Amazon's doesn't even)
>>
>>108246080
>My computer is a bit old and underpowered so I really notice the difference between proper native apps and Electron bloatware.
Probably not just "a bit" I suppose. My desktop PC is literally 11 years old, and Electron apps run on it just fine. Of course you can make native apps which run smoother, but nothing beats the compatibility of Electron, and the dev experience is also a lot better than the native humiliation ritual.
>I've never run a Tauri app but maybe I should try it out to see if it runs any better
Tauri runs in Chromium too (it's implemented with WebView2 on Windows), so I really don't think it'd be any faster. Nobody ever made Tauri apps unironically though. The binary is a lot smaller because it doesn't give you the dependencies (i.e. the browser), but in turn the program is not guaranteed to work properly because the dev has no control over what it's running on.
>>
File: 1626844164835.jpg (115 KB, 500x500)
115 KB
115 KB JPG
how would you like web dev to be if it was up to you entirely?
>>
bunupu
>>
BUMPITY BUMP BUMP BUMPITY BUMP BUMP
>>
>>108246567
Well my computer is shitter and Electron apps are a fair bit slower than other apps. I wonder if React Native and Flutter would fare any better.

>>108247705
>>108249466
Thank you for saving the thread.
>>
>>108245523
I read enough of it
>>
>>108251013
any time, as a rule of thumbs, always bump right before going to sleep, increases the chance of the thread surviving
>>
I'm too tired for js challenge today 2bh
>>
>>108181596
>>108181641
I am unironically considering switching to some kind of mini jQuery + htmx instead of all the other shit. Modern ES6 is so fucking capable. HTML is capable. CSS is kind of good too at this point. Browsers are highly optimized to kinda have a "functional" approach to the DOM where simply assigning stuff does NOT actually equal DOM changes all the time. Iterating over thousands of li in a ul and setting some value based on a ternary is a million times faster than doing a state-vDOM based reflow in react... Why are we dealing with frameworks again?
>>
So Tauri > Electron.
>>
>>108251291
>Iterating over thousands of li in a ul and setting some value based on a ternary
One of the first things I learned is that that approach is wrong, at that point unironically write to innerhrml or similar kust once instead of doing infinite re-renders of the dom shitting all over performance
>>
>>108251843
>write to innerhtml or similar just once
is there a better approach in that specific context? context being modify thousands of li at once
>>
>>108251318
Dunno because I haven't tried Tauri or used a Tauri app. Hopefully someone in /wdg/ will try it out and tell us what it's like.
>>
>>108252777
Can you try it please?
>>
>>108252875
lulz
>>
what's your back up plan when web dev went to shit?
>>
>>108251843
>instead of doing infinite re-renders of the dom shitting all over performance
Have you actually read my post? This is exactly the myth that people still believe, but it is not true. Most DOM operation are fast. Like really, really fast. Especially if they do not actually do anything. Just assigning a value to an attribute does not have a performance penalty. querySelectorAll().forEach($someDomOP) is FAST even for 10k items in a list - as long as they do not impose an actual change in the view that has to be rendered. Only then it gets slow, but no framework will help with that.
>>
>>108253424
talk is cheap, let's see a few thousands of li being interacted with and compare that to a single innerHTML write, and again, I wonder if there's something better than innerHTML for this specific task
>>
>>108253686
innerHTML is probably the worst choice, because overwriting with innerHTML will ALWAYS create new elements. This will drop listeners. And it will actually cause an actual render step. Do a simple test. Create a list from some data that is long and then do certain tasks. Like filtering with textContent or something, then simply set a class if the content matches. You are free to do your own tests, but I'll provide you the function still.
function filterOnTextExample(text) {
document
.querySelectorAll('li')
.forEach((li) => {
li
.classList
.toggle('filtered', text != '' && li.textContent.indexOf(text) != -1)
})
}
Yes, this is written in the most stupid way you can imagine. But on my machine, this still runs way too fast even with them dumbest CSS being applied by the class. It is not like you are actually having 10k li anywhere on a real page, or do you? But even then...
>>
>>108254018
I'm too lazy to cook something up, but I'm pretty confident that I'm right, mostly because I saw a dude innerhtml in a loop that was a moderately big table, changing the value of every cell. shit lagged hardcore, whereas he switched strategy, and built a string that he innehtml'd once and that was it 0 lag
>>
>>108254417
That is a different thing though. One complete overhaul causing ONE big change for the next frame to render vs multiple comparisons of how the layout should look in the next frame.

Of course one innerHTML is faster in that specific case, yet the problems remain. You are getting rid off all references. And you are running CSS animations again.

My function does not do that. Most DOM properties do not cause that and hence why my approach is just one big batch upgrade ONLY on those elements that actually changed.
>>
>>108254511
just one question, trying to understand here, does your thingie make a single render or multiple re renders?



[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.