/wdg/ - Web Development General

wwmd

Previous Thread:
>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 (independent of your browser choice)
freecodecamp.com
codecademy.com
hackr.io

>Further resources
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
github.com/kamranahmedse/developer-roadmap - Frontend+Backend learner-path suggestions
youtu.be/Zftx68K-1D4 [Behead those who Embed] - Web Development in 2018

jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS

Attached: wdg_m.png (1280x720, 208K)

Other urls found in this thread:

tttt63733.wixsite.com/openeys,
npmjs.com/package/eslint-config-airbnb
jsbin.com/pupaxaloda/edit?html,css,js,output
jsbin.com/sosatoritu/1/edit?html,css,js,output
jsbin.com/xaruqikiqa/1/edit?html,css,js,console,output
glitch.com/edit/#!/magical-berry?path=README.md:3:79
package.elm-lang.org/packages/elm-lang/core/latest/Date
reddit.com/r/programming/comments/886zji/why_has_there_been_nearly_3_million_installs_of/
typography.com/blog/introducing-operator/
developer.mozilla.org/en-US/docs/Web/API/Node/parentElement
packagecontrol.io/browse/labels/color scheme
codepen.io/elad2412/pen/hBaqo
twitter.com/NSFWRedditGif

I like the pic :3

It's just creating a dom element. Just look up how to do that.

Specifically it's pushing it as a child to the list.

That said I don't offhand know how to do that, so look it up. I almost never write vanillajs, since I deal with fairly big applications. Usually I end up using vue or react or elm or something to get a better performing result and nicer templating.

Getting into web dev with some programming experience already, and wanted to contribute to projects on github. How do you deal when scripts and installation never works the way docs say, they have docker things to set up some of the services but the docker containers never build right, etc.

I'm 50% confident the problems I'm coming up against are not my fault, and I can usually figure out what's wrong if I spend the time on it. But overall, how much labor and errors should you expect to go through setting up a dev environment for a web app that has like, your standard database, API server and frontend app?

How do I tell if I need to git gud, or if I'm dealing with a project that's simply not maintained well or has bad docs? I've only tried a couple of them so far.

Attached: gitgud.png (164x86, 8K)

Wtf is elm/purescript

Anons,

Some of us over at /sci/ are working on a cure for several kinds of blindness (). We are making really amazing progress and are beginning to get media attention (there should be a Vice article up this weekend), but right now we have no web presence. I could make a pretty nice website, but I'm too tied up with the other research aspects of the project.

Can you help us?

Attached: 1519955894146.png (242x285, 125K)

>make a pretty nice website
Probably

What about hosting, stack choice & content?

>not naming the project EyesWideOpen

I was going to do vanilla HTML/CSS/JS hosted on github pages, but really it doesn't matter.

We're still deciding on a name. The current name is a play off of the name of the protein.

So something with the content of tttt63733.wixsite.com/openeys, but good?

We're not really sure what to put on it. Our documentation is really bad because our main focus is on research. Maybe some kind of basic tl;dr landing page for now?

Okay, I'll make a pull request to the git with something in a couple hours.

I can't figure it out properly, I can add it to the page but I can't make it into an while also adding a class

..I'm just going to use jqeury, youmightnotneedjquery is no help and this is just stupid.

Awesome, thank you!

Mate.

let li = document.createElement('li');
li.classList.add('className');


Don't give up so easily.

I think it does this:

todos.forEach( (todo)=>{
let newTodo = `${todo.name}`;
let lists = document.getElementsByClassName("list");
for(let i = 0; i < lists.length; i++)
lists[i].innerHTML += newTodo;
});

var newTodo = document.createElement('li');
newTodo.innerHTML = todo.name;

Sup webdevs, how much do you guys make a year?

I'm about to get a job in webdev (even though i really dunno how to do much of anything) and im guessing the salary is around $45,000. How does that compare to you guys? I live in appalachia btw.

$70K/yr, 3rd year.

>Guys gets little help
>Pretends to give up and use jQuery
>4 replies within minutes
We got baited.

>he writes javascript with semicolons

Attached: 1521701151508.gif (512x384, 836K)

How does the Heroku Free ClearDB/MySQL shit work? is it like 1GB maximum of database size on disk? I can't find info about this

guys I am the designated IT guy in a project team of 3 people and I gotta setup a simple website + webapp

I have been thinking about using bootstrap + react front end and php for server side (php bc I already had to learn it b4) what do you guys think? any tips/programs for making it easier?

Goodness gracious me, I'm in a pickle of a pickle patch tonight /wdg/. Just give me a second to paste my code into a JSBIn and then you will all see just how much of a pickle I am in. Oh, good grief.

It's a pants on head retarded way of writing
const lists = document.getElementsByClassName("list");
for (const { name } of todos)
for (const list of lists) {
list.insertAdjacentHTML("beforeend", `${name}`);
}

>he writes his method chains on one line

What's your coding music, /wdg/?

I like listening to Gas and other ambient "artistes".

npmjs.com/package/eslint-config-airbnb

I obey this wisdom.

Bjork

I'm still insomnia mode and up for teaching if anyone wants. Just give a shout and a discord id or something.

what can you teach?

var myObject = {
a: 1,
b: 2,
c: 3
}
[x, y] = [1, 2]

:^)

Maybe a better thing is to list what you want to learn.

Maybe for context though I should mention that I do a lot of backend work j in scala, and feel pretty at ease switching language in general.

Functional programming is probably the biggest thing I have of value to offer. But just say what you want to learn and I'll tell you if I can be of help.

I see three things wrong instantly.

Here is my pickle /wdg/.

jsbin.com/pupaxaloda/edit?html,css,js,output

The character count shows after you've focused on the input field then blurred. I want it to show up the first time you focus. But all the stuff is inside an oninput event handler. Which I need to keep it updating with each keystroke.

What in frick do I DO about THIS /wdg/

nothings wrong dude

wrap the construction of the text object in a clojure which is called, setting up the entire thing with an initial value.

I'll have your solution in a sec.

you can do this with CSS
jsbin.com/sosatoritu/1/edit?html,css,js,output

PKA, MF Doom, DAM, Гpибы, Noize MC, Gorillaz, Childish Gambino, Death Grips, 25/17, Higher Brothers, Rich Chigga, Лyнa, Taylor Swift, Mos Def, 50 Cent, Linkin Park, Blur, Foo Fighters, Johnny Cash, (((Bob Dylan))), Who See, Drake, etc

jsbin.com/xaruqikiqa/1/edit?html,css,js,console,output

Can't be arsed to debug in this toy thing.

const myObject = {
a: 1,
b: 2,
c: 3,
}
[x, y] = [1, 2,]

oh, sorry, missing two more things.
const myObject = {
a: 1,
b: 2,
c: 3,
};
[x, y] = [1, 2,];

i agree.

why not use let ?

const yourMom = {
g: 1,
a: 2,
y: 3,
}

This doesn't solve the problem I'm trying to display. And I wasn't going for that full airbnb style, I just think semicolons are good.

Are you the same guy as , because if not I still want to know what the three things wrong were.

what do the other 2 fags in your team do

Because let is not immutable.

I'm the same girl yeah. And I was miscounting, it was 5.

they collect info for our databases, get connections with businesses etc

I don't trust them with the technical stuff they were barely able to use joomla and wordpress

you have a lot of faith in /wdg/

Do you have content ready for a site?
Maybe post it and see if someone comes up with something usable.

>trailing commas

I got it working all by myself anyway using axios instead, my main problem was that I was just trying to appendChild to a string, so I just selected the list and then figured it out that way.
function getTodos(res) {
res.data.forEach(function(res){
var newUl = document.querySelector(".list");
var newTodoList = document.createElement('li');
newTodoList.innerHTML = res.name;
newTodoList.classList.add('task');
newUl.appendChild(newTodoList);
});
}

This guy's one worked though

Alright, fair enough, I just tend to default to var when it's not a real project so I know I'm not gonna be compiling with Babel. And what's the advantage of the trailing comma again? I was never clear on that one.

The lack of semicolons was the point that I was trying to demonstrate, and if you run the code sans semicolons, you get unintuitive results.

Nor is const.
In fact that's a perfect example of it.

const notImmutable = {
a: 1,
b: 2,
c: 3,
};
notImmutable.a = 5;

hey /wdg/ just wanted to ask if anybody else uses paint for concepts sometimes

Thank you both for your kind assistance

The references are immutable.

Same as final in java, and general const mechanics in all languages.

It's also one of the reasons I seldom work with JS and such langs ;)

Cheers.

>tfw still no one wants tutoring shits with chat and glitch.com things

Bored and don't feel like working on main project = 2am pain.

The trailing comma style allows for lines to function in isolation. IE, you can add or remove lines without thinking about the comma, comment them out, etc, whatever.

In the one-line array it was more to be pedantic than anything.

glitch.com is great
lots of ideas for projects

Sometimes.

Got an idea for a thing to make?

>Got an idea for a thing to make?
Only my existing main projects, which I guess I wouldn't mind help with while bringing someone up to speed.

Whatever you kids want though I guess.

w.. w.. wots vanillia html/css/js
/wdg/?

And also. Advice for a newbie in webdev. Im looking more into backend development. But dont know where to start. Cos idk anything about webdev

>kids

how old are you gram pa

It just means the language without excessive use of large frameworks.

It's an expression.
But 31.

glitch.com/edit/#!/magical-berry?path=README.md:3:79

I await someone to take the invitation and make something for fun.

I encourage you to use Elm or PureScript :3

What's it made with?

>I encourage you to use Elm or PureScript :3
but i don't know those languages

The front-end for the thing I'm working on at present as a hobby is in Elm.

The backend is going to be haskell.

Then tell me what you want to use.

Moment js is pure bliss for working with dates and it comes with locales.

>Moment js is pure bliss for working with dates
Why and how is it better than the in-built Date object

If you go through their docs you'll perhaps notice that moment.js has a bunch of methods that you can use to make your life easier when working with dates, like getting the difference between dates, getting the elapsed time from a set date, locales which came in super handy etc. For a larger project, moment js works great for me.

package.elm-lang.org/packages/elm-lang/core/latest/Date

Best :3

Explain yourselves, node.js cucks
reddit.com/r/programming/comments/886zji/why_has_there_been_nearly_3_million_installs_of/

Why is Node.js blamed for shitty packages on NPM? Most of the shit on there is for frontend anyway.

Anyone know what theme this is?

Attached: file.png (1200x580, 107K)

now : Task x Date
What is the 'x' supposed to signify? I'm not very familiar with this notation of functions

>cursive characters
what a fucking dumb trend

A type parameter.

>all this gay curly-write fag-script

so is it read Task x returns Date?

No, it reads as
Now returns a Task in a sort of .net-y way.

I think the now function can never fail, and that x is the error value of a Task, so it can be ignored.

That is to say, you get a Task with either an Error or Date value.

>type alias Task err ok = Task err ok
ok now it makes sense

theme?

font is this
typography.com/blog/introducing-operator/
199$

Live in the midwest and make 52k/year after my 3rd year of doing it after switching from Graphic Design. (recently got a big bump by switching jobs)

If I have a list of about 40 products on a page, how could I sort through them to find a specific title? I want to match titles based on the text between the tags. I want to store the ones I want in an array for later use. I'd actually like to store all the parent classes to it, so up to product. Want to do this in javascript of jquery.

Attached: Capture.png (309x178, 8K)

>199 $ for a shity ass font
>paying for fonts

ayy lmao

professional pellet salesman

Attached: b85.jpg (800x800, 63K)

Render a product from JSON object. Makes it way fucking easier.

what does this even mean? you're scraping a page, or it's yours? why do you need to store the class names? you're doing something seriously wrong. use a framework.

Snagged another client?
Go back to basics before tackling intermediate projects, pajeet!

Oh no. I'm just trying to scrap a website. It is just for fun and practice. I wanted to grab just a couple products. Put them into an array and pop them out in a different div.

developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

You can scrape the website and store the scraped data into a json array

use python, requests, and beautifulsoup

but for this, i would use xpath:contains, i'm sure there's a xpath library for node.

I know its the retarded $200 font, I'm asking about the color scheme

this is the website for color schmes for sublime text

see if you can find it there

there are hundreds of color schemes equal

packagecontrol.io/browse/labels/color scheme

>He doesn't program his games in pure CSS + HTML

codepen.io/elad2412/pen/hBaqo

uh thanks but are you saying i should click on every single one of those links until I find it? because that's a bit retarded.

no one's gonna do it for you

If someone recognizes it, they can just tell me the name.

Do you go into request threads and point people to www.google.com ?