/wdg/ - Web Development General

Slow Weekends Edition

Previous: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap (don't be overwhelmed, ignore the later parts and go step-by-step)
youtube.com/watch?v=UnTQVlqmDQ0

>Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org/en-US/docs/Learn - a good introduction to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages
pastebin.com/gfBPg24A - Collection of PHP links.

>Need help with some HTML, CSS or JS?
jsfiddle.net - create an example here and post the link
codesandbox.io - or here if you're using React/Angular/Vue

Attached: karlie_kloss_general.png (1142x636, 258K)

Other urls found in this thread:

iswc.pw/
exploringjs.com/es6/index.html
caniuse.com/#feat=css-variables
tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/
jsfiddle.net/0k53pzdv/
github.com/domasx2/docker-django-webpack-starter
udemy.com/complete-react-developer-zero-to-mastery
reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial
motherfuckingwebsite.com
twitter.com/NSFWRedditVideo

wdg is dying
send help

R8

iswc.pw/

note, I follow the safely exit standard

Probably because web development isn't real programming and there's no challenge involved, so there isn't really much to discuss.

noticed that also, seems like web development is memorizing frame works and libraries so that you're able to copy/paste code snippets into your website.

there is a lot of cool stuff you can do with web development but desu, pic related is why everyone is doing web dev

Attached: programming_languges_people.png (989x654, 410K)

n00b here
how do i change the position of the menu in wordpress?
i want it centered

Attached: images (7).png (473x648, 21K)

ask reddit

>file sharing
>pizza

Or because most web developers here have jobs and money and don't really want to spend most of their weekend shitposting on a javanese cockfighting board, unlike the NEETs at /dpt/ who must show off their pedo weeb desktops and Fizzbuzz implementations in Haskell.

move to /dpt/ so we can shitpost together

I don't want to become a mediocre webdev. Help me.

learn rust and webdev using actix, then down the road use rust for web assembly

Am I the only one finding web development difficult?
It's not the logic of the programming in itself, but having to learn so many things.
Core JS, Node.js, Client-Side JS, HTML, CSS, databases, everything specific to the frameworks you are using, npm packages, having all of the resources scattered and many other things.

Attached: large.jpg (500x370, 25K)

var num = 100

for (var i = 0; i

are you retarded

no i'm new

desu, all of those things are easy to learn

exploringjs.com/es6/index.html

Yes, there are a lot to learn, but with some effort in 6 months max it will get easier. Although you will not be proficient in anything you will probably have the basic understand of a little bit of everything, so you can manage you way around what is happening in the most cases.

Yes, brain programming is the future!

you were close
#.(loop for i from 1 to 100 do
(format t "~:[~:[~a~;Buzz~]~;Fizz~:[~;Buzz~]~]~%~@*" (= 0 (mod i 3)) (= 0 (mod i 5)) i))

I literally lost my job to Wix

is that the best you got

sucks to be you

nope

How learning a new language and framework is different of learning React Hooks or Spring?

Step aside Lisplet
['FizzBuzz'[i%-3&4:12&8-(i%-5&4)] or i for i in range(1,101)]

Attached: 1563511651141.png (1024x655, 329K)

step aside
>['FizzBuzz'[i%-3&4:12&8-(i%-5&4)] or i for i in range(1,101)]
>61 chars

["FizzBuzz"[i*i%3*4:8--i**4%5] or i for i in range(1,101)]

>58 chars

(set-dispatch-macro-character #\# #\f
(lambda (stream c1 c2)
(declare (ignore stream c1))
`(loop for i from 1 to ,c2 do
(format t "~:[~:[~a~;Buzz~]~;Fizz~:[~;Buzz~]~]~%~@*" (= 0 (mod i 3)) (= 0 (mod i 5)) i))))

CL-USER> #35f
1
2
Fizz
4
Buzz
Fizz
7
8
Fizz
Buzz
11
Fizz
13
14
FizzBuzz
16
17
Fizz
19
Buzz
Fizz
22
23
Fizz
Buzz
26
Fizz
28
29
FizzBuzz
31
32
Fizz
34
Buzz

>Got a job as a sharepoint specialist
>Have to learn HTML, CSS, and JS so can do shit since most of the shit you can do on SP is limited

Not that bad of a gig desu.

Attached: 1560713835845.png (500x466, 120K)

Don't give up user, you're about to understand the hardest part of web development : understanding how all the parts of this clusterfuck of technologies work and click with each other.

Attached: 1_sEgImulGWlLP62uWqi5LlA.png (800x2713, 843K)

Will there ever be a day where webdev finally consolidates itself from all these meme frameworks and a standard is written?

This comic reminded me of something I'm often afraid to ask, but I still don't know the answer:
Why do people jerk off to JavaScript's prototypal inheritance? What's so great about it that is better than the regular OOP we're all used to from Java, C++, Python, etc.? I have little knowledge of Scheme and no knowledge of Self, pls be gentle.

I wish. But sadly, the web browser is the most common and used software worldwide nowadays,
and managers from business people want to make developers run whatever they imagine on it.
That's why we came to this point, because of all this consumerist bullshit.

There have been some great improvements lately (W3C, Docker, WaSP...) but it won't be enough I'm afraid.

Being a web dev nowadays is very very hard, despite popular beliefs, because modern software is such a huge fragmented clusterfuck that making something work and stable is nearly impossible.
Just look at modern smartphones ffs.
Just look at the number of things they have to manage simultaneously.
If you don't implement solid state machine patterns everywhere, you're fucked.
You're always on the brink of the burnout if you are in a shitty firm with tight deadlines.
Yeah, take the web dev or modern software dev blackpill.
I'm afraid of the future, humanity will fuck itself or burnout for sure.

Attached: 0dd64b1babc3c9aa1a11abfadda0655ce708005c.jpg (289x217, 31K)

Alright sticking with IT Security then, thanks!

doubtful
maybe if javascript was allowed to become a lisp, but eich was coerced into making an algol-like shitlang by satan

>What's so great about it
Absolutely nothing, and nobody ever uses it, that's why JS is moving toward proper class-based OOP.
Adding more shit to a mountain of shit only makes it an even bigger mountain, though.
In truth, the language should be taken out back and shot, as should C++. But (just like C++) it has too much legacy momentum.

idk i only feel this way in a companies, working as a solo dev ive got a few boilerplates and a workflow. Takes me 1 day to have a working test website and app for the customer to see.
Alot of it is thank to docker though and expo.

Nope,it keeps getting worse and worse.

You now have to add on AWS/Azure on top of everything.

Why doesn't

.item:first-child .item__img-wrap {
width: 700px;
--aspect-ratio: 1/1;
--image: url("/res/photos/img1-min.jpg");
}

work on iPhones? what can i do to make it work on ios too?

Those.
Webdev is fucked beyond repair.
Time for me to switch to embedded programming, until it's fucked too, then I'll switch to even lower level programming, then...
repead ad infinitum.
Life is a meme.

Attached: 436d848bab1de6bf48f14b3c8550498af6f049a6.jpg (140x104, 4K)

what is it suppose to do, you're setting variables and not doing anything with them

oh i didn't show the corresponding html sorry bout that

There's just too much shit fuck knows how people get into web development nowadays.

More and more stuff gets introduced that adds to the workload and knowledge requirements. I can't remember the last time I heard "this is a new language/structure, it's a single thing that unifies multiple tools/frameworks and makes things easier".

That's even before you get things like PHP where major version numbers require learning new ways of doing the same shit because of deprecation and forcing you into specific ways of coding.

Which browser? Check if it supports custom properties/CSS variables, otherwise use PostCSS to compile modern CSS down to CSS that the browser supports.
caniuse.com/#feat=css-variables

unless there is more css that actually uses the css variables you've set they're not going to do anything, post what you have on jsfiddle

I’ve made it niggers.

I’m a university dropout. I started as a support agent in some company. Taught myself how to code and got transferred to webdev team.

After 1 year they said “we could start the promotion process from junior in a couple of months”. Know what I did? I fucking quit!

Now I landed a mid-level job at a much bigger globally known company, no junior shit, and making much more.

I finally feel that this is now my career and not just a fluke.

Fuck you all, keep studying and working hard and achieve your dreams niggas!

I literally copied this and changed the content

tympanus.net/codrops/2019/07/10/how-to-add-smooth-scrolling-with-inner-image-animations-to-a-web-page/

all browsers on IOS, it works on android
thanks for the site btw

congrats on going from just being a cog in the machine to being a cog in another machine

then copy it into jsfiddle and show it not working, no one wants to debug a tutorial for you

Th-thanks. You are mean.

You're just another brick in the wall

sorry about that, hope this helps
jsfiddle.net/0k53pzdv/

>cries in comfy job

Thanks for your insight user-kun, we newbies need someone to look up to.

don't listen to the jelly fags user, good job

That’s why I wanted to write here. I was always looking for these “you can do eet” stories when I was studying how functions worked.

You really can “do eet” bro. Good luck!

thx

not being funny user but at least replace the images with ones that work so it can be tested properly. I can't see any reason it wouldn't work, do only the 1/1 ratio images not work or do none of them work? I suspect it's a javascript issue, maybe something to do with how it's trying to preload images on mobile

yeah none of them work, i thought maybe its because of that im loading them from the css and not HTML but i dont know.

The general theme of this comic is fair, but most of the points are kind of wrong.
>asm.js
>Problem: asm.js is basically unwritable by humans.
>Solution: Compile a better language to JavaScript (C, ECMAScript 2016, CoffeeScript, JSX)
asm.js was never meant to be written by humans, that's not a real problem. Compiling from C is just part of the original solution. ES7 and CoffeeScript have more to do with the other arrows pointing to this bubble, but JSX has absolutely nothing to do with anything pointing to this bubble.

>Problem: JavaScript won't run outside the browser.
>Solution: V8
(V8 is literally a component of a browser, so it's not a 'solution' to the problem of JS not being able to run outside the browser.)
>Problem: JavaScript is single-threaded by design.
(Has nothing to do with V8, but ok.)
>Solution: asynchronous programming, Node.js
(Node.js isn't a solution to that problem, async programming is sort of a solution, another solution is web workers, or to some degree Node.js cluster.)
>Problem: Callback hell
>Solution: Compile a better language...
(A more direct application of this solution is promises and async/await, but I guess they just figured mentioning ES7 was sufficient for that.)

have you tried remote debugging mode on an iphone to see if there are any errors in the console? you can use safari to debug an open webpage in ios

do i just used an iphone to test, and i dont really have more than that on resources

sorry fren, you're gonna have to reword that sentence

i think i want a big obnoxious three.js model on my portfolio homepage

First of all, you want your for loop to encapsulate all of that code, and make sure the console.log(i) is at the bottom of it after all conditionals were checked. Try this and see the results, this should be enough for you to figure out the rest on your own.

yes you do

in addition to the other comments you got, you need the 'fizzbuzz' condition to come before the 'fizz' or 'buzz' conditions. otherwise it will never get triggered

Challenge for bored people.

Write a function that accepts an emmet style css selector string and returns the markup that matches it. Only elements, classes and child descenders are supported for now and an element will always be specified in front of a class.

Example: div.class-one > p.class-two would produce

If you finish that, then try supporting multiplier and id's div#id > p.item*5

Attached: 1256044.jpg (900x540, 169K)

fucking code tags

Example: div.class-one > p.class-two would produce


If you finish that, then try supporting multiplier and id's

>Alot of it is thank to docker though and expo.
Can you elaborate a bit?

Attached: 1564751694497.jpg (1280x720, 166K)

sounds kinda boring and pointless as a webdev exercise

you ever used docker-compose its pretty nifty cause if u got it working once u can push ur boilerplate to any server and it just works. Ngnix, ssl, backend, frontend, development and production whatever u desire my friend.
Then i just use the website backend as rest api for my app which i develop and publish with expo. its a react framework that allows testing on physical devices. i got a samsung and an iphone so that covers most use cases.

Usually use react for the frontend since im already using it for the app and hey presto it takes me 30 min to have a working website with their logo on ot and a button or two. which is enough to impress any customer.

Then if u do anything new for a customer u just save it as a branch, say generic login and register with email verification.

Thx, saved for reference.

I once told a webdev to build a wix site for our company since my boss was not able to navigate shit regardless which CMS he used but he demanded full control even though he hired other people to post content. Webdev left screeching when he couldn't sell his typo3 build to us.

Can you do it?

i started off with this
github.com/domasx2/docker-django-webpack-starter
but u should really use whatever frameworks u want, dont feel like u have to use django or whatever.

>boss asked to build a website from a series of mockups
Why is CSS so hard? I literally didn't knew where to start. Literally. In that moment I realized that I'm a JS monkey with some knowledge about bootstrap.

Attached: ted-striker-sweating-airplane.jpg (1280x720, 183K)

>hit a problem with project
>check out youtube vids for answers
>they are all pajeets

Attached: side-eye-chloe.jpg (800x450, 30K)

medium is where the cool hipsters hang out now days.

Never even heard of it but if it has less pajeets then i'm all for it.

>medium
very blackpilling first impression, mostly because of the pajeet reference, I hope it's just a coincidence and he doesn't mean PHP is being PAJEETED

Attached: PHPajeet.png (727x741, 952K)

Thoughts on this course: udemy.com/complete-react-developer-zero-to-mastery
?
I bought it because I can't, for the life of me, into react. I've built shit with it before, but it was all hacked together and I definitely produced shit code base.

I had the same problem on my first freelance gig. Got the design, first thought was "how the fuck am I going to do that?" It was simple layout, but separated by "block" sections with some borders. Had no idea where to begin. Tried s with some borders, didn't work. Posted here asking how it should be done, got an answer, and finished the project.
CSS is for artists, not developers.

you should be able to copy layouts with css, even if you dont design the page yourself. Just find a good looking website and copy it completely.

Yeah, can do that, but that's not what this was like. It was super unique, never saw a website like it before.

Well, try it out.
If it's cheap and if you find it helpful then the money is well spent.
I'm using this reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial and the docs now and will look for more resources when I'm done with these.

> I hope it's just a coincidence and he doesn't mean PHP is being PAJEETED

Funny you should say that because it was php videos about phpmailer on youtube I was looking at and they were all pajeets.

well, everyone is a pajeet on youtube webdev side

I hate cheap ass clients

where can i find professional node or django projects? i want to learn about how to architecture my apps and see what kind of "techniques" are used by good programmers

Please do the needful

what happen

What's a good intro to learn back end using PHP and MySQL?

What's a good service for anonymous hosting? I've looked at anonymously.io so far.

What is your DBMS of choice?

Attached: q.png (350x262, 20K)

How much would you charge if someone asked for a site like this?

motherfuckingwebsite.com

$100 per kilowatt hours

Depends, does it need a cms? Probably build it as a pwa, angular, aws s3, load balancers, global cdn. Don’t leave anything to chance

They're super stingy on money and just want to have their products/services written and their hours. I charge at least 1K for a CMS and they said they're only willing to pay $500 even if everything else gets stripped. They currently have a third party directory they point their domain to and it's already cluttered with competitors in the area looking like a complete clusterfuck from the 90s

I was joking user... I wouldn’t charge more than £350 for a one pager with WordPress behind it. It’s just a days work.