/wdg/ - Web Development General

Previous > Discord
discord.gg/wdg
OR
discord.gg/0qLTzz5potDFXfdT
(they're the same)

>IRC Channel
#Sup Forumswdg @ irc.rizon.net
Web client: rizon.net/chat

>Learning material
codecademy.com/
bento.io/
programming-motherfucker.com/
github.com/vhf/free-programming-books/blob/master/free-programming-books.md
theodinproject.com/
freecodecamp.com/
w3schools.com/
developer.mozilla.org/
codewars.com/
[YouTube] Crockford on JavaScript - Volume 1: The Early Years lecture series.

>Frontend development
github.com/dypsilon/frontend-dev-bookmarks

>Backend development
en.m.wikipedia.org/wiki/Comparison_of_web_application_frameworks
backendDevelopmentBookmarks.md

>Useful tools
pastebin.com/q5nB1Npt/
libraries.io/ - Discover new open source libraries, modules and frameworks and keep track of ones you depend upon.
developer.mozilla.org/en-US/docs/Web - Guides for HTML, CSS, JS, Web APIs & more.
programmableweb.com/ - List of public APIs

>NEET guide to web dev employment
pastebin.com/4YeJAUbT/
>How to get started
[YouTube] WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice - "WATCH THIS IF YOU WANT TO BECOME A WEB DEVELOPER! - Web Development Career advice"
[YouTube] Javascript is Easy - "JavaScript is Easy" - If you can't into programming, you probably won't find a simpler introduction to JavaScript than this.


>cheap vps hosting in most western locations
lowendbox.com
digitalocean.com/
linode.com/
heroku.com/
leaseweb.com
openshift.com/
scaleway.com/

Other urls found in this thread:

programming-motherfucker.com/
meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/
gatekeeper-grooves-60380.bitballoon.com/
clipchamp.com
jsfiddle.net/asm48w1L/
github.com/facebookincubator/create-react-app
webpack.github.io/docs/usage-with-gulp.html
jsfiddle.net/wjg4f8wL/
jsfiddle.net/vq5wg2r9/
twitter.com/NSFWRedditImage

Get to work you lazy cunts.

rpg character gen user here.

Seems like a neat idea, but it's a bit beyond my ability at the moment. Basically the thing I'm making picks a D&D inspired class, race, alignment, gender, and age, and constructs a character description based on that, dwarf-fortress style. It's not much, but it's something I've been wanting to make for a while.

2am. I have work in the morning

>programming-motherfucker.com/
>This site can’t be reached

the site works fine, drop the https

>
>

thanks for the suggestions but this worked exactly how i wanted:


Press Me


function test(){
var audio = new Audio('C1a.wav');
audio.play();
}

How about this:

A dynamic dashboard that automatically refreshes and updates content from a database table that you can define individually.

You have tables in a DB. You can go to the console and create a new widget that'll be shown on the home page of your control panel. You point it to a table by entering the name of it, give it a name and a custom logo, and it automatically creates a widget that watches that table for updates in real time.

best practice is to avoid using onclick, add an event listener instead.

The person who had a problem with the error message thing: use file.form-field-name.errors instead of your own error message.

pic related

Why would you want to watch a table in real time? Usually it's the aggregates you care about, not the raw table data. It's not particularly interesting to see random users updating their profile pictures, but it is interesting if the rate of user profile picture updating suddenly drops, for example.

What do you guys think about the MERN stack?

literally websockets lel

Mongo can fuck right off. Other than that, it's solid.

Personally i prefer the MDAEN stack when it comes to deploying something quick n dirty.

D for Docker presumably?

>Usually it's the aggregates you care about

Makes sense, thanks for the suggestion. I'll adjust my idea to take this into account rather than just showing raw data from the DB.

Yes, in essence, but this would be a fronted representation of the data.

rethinkdb + horizonjs

>websockets

So... you're expecting a DB to send WS events to a server somewhere? Do you know what a DB does?

"lel"

Thanks, I've been looking for something new to try. Will check these out.

How do I clear a form and stay on the same page after submitting a post request in Node.js / Koa? Where do I start?

color: darkgoldenrod;
color: blanchedalmond;
color: mediumspringgreen;
color: rebeccapurple;

The guy who created CSS was probably high as fuck when he came up with this naming scheme.

Loop the form fields and clear all values. Intercept and preventDefault() the submit event.

>rebeccapurple
> probably high as fuck

He was sad as fuck. Learn the difference. It might save your life someday, user.

What exactly is cli in npm? I've seen this babel-cli, gulp-cli, etc.

Boilerplate generators and other useful stuff

feel you senpai

>meyerweb.com/eric/thoughts/2014/06/19/rebeccapurple/
Not him, but i didn't know this story. Yeah, sad as fuck

Nobody uses suave here?

fuck guys, got a problem. When I AJAX load a div with new content, the handlers don't work on the new things.

Worse yet, I need to bind EVERY major event to EVERY possible tag.

so... can someone give me the quickest way to do
jq("div").on([all handlers], [all possible elements], function(e){
[I don't even know what should be in here. It just needs to rebind everything to all the new content]
});

Bind the event listeners to a parent container and use event.target to filter/identify/handle/etc.

ok, I'm not sure what exactly you mean.

s, would I do something like
jq("#CONTENT").on(event, event.target, function(){[I'm still not sure what this function should be]})

ok, um, maybe an example?
one of the new content in #CONTENT will be #UPDATE_CONTACT_INFO, which is a form.
The form submit function will need to be load AJAX another module, which will then load over the form with the posted data.
After which, a button called, maybe #CLOSE_EDITOR will be there and need to trigger the click event.
On which, the profile page reloads in #CONTENT, which goes back to step 1, so another form needs to be bound again to submit, so the editor can be opened.

hey guys im stuck and could use some help please.

im making a site with flask and added user registration to it, but the users i add trough it wont login, while previous users created with a postman like program work just fine.

any idea what could be the problem?

You will need to bind for each type of event separately.
document.querySelector("#content").addEventListener("click", event => {
if (event.target.matches.("#close_editor")) {
// Do shit
}
// etc ...
})

document.querySelector("#content").addEventListener("submit", event => {
event.preventDefault()
if (event.target.matches.("#update_contact_info")) {
// Do shit
}
// etc ...
})

submit the form via ajax

use event delegation

thoughts on backbone?

Hmmm, this is actually what I was hoping to avoid.

I was willing to be a bit more obfuscated to avoid having to list every function...

So, there's no way to simply make the script act on the new elements?
That really makes this more annoying.

Thanks, though

I'll also look this up

It's deprecated

Well built, but ultimately slow, unless heavily modded. Relies heavily on >jQuery
Best practice would be creating a basic view class for each type of interactive element you want and extending those as needed. You don't usually need event delegation, unless you have a fucking lot of views.

>Best practice would be creating a basic view class for each type of interactive element
What do you mean by 'basic view class'?

Like, I have a couple classes already such as "JAXABLE_LINK" and "JAXABLE_FORM".
Is that what you meant?

for instance, here's the code for jaxable_links:
jq(".JAXABLE_LINK").click(function(event){
event.preventDefault();
var paramStr = jq(this).attr("href");
jaxMyMod(jq(this).attr("name"), paramStr, replacePage);
//this is the AJAX function I'm using. I'm not a fan of the particular implementation of jQuery's AJAX
})

document.querySelector("#content").addEventListener("click", event => {


Holy shit that looks better than

jq(".JAXABLE_LINK").click(function(event){

I mean JavaScript classes. Something generic enough to be reusable.

Eh, it's easier to work with. There's not a lot I DON'T like about jQuery.

Oh, hmmm, I'll have to look into that, but I don't use JavaScript as the basis of my display. I just call in PHP scripts, since I'm trying to support both JS AND non-JS users.

DESU, the only languages I've ever heavily used classes in were C++ and Java. The syntax for PHP and JS classes has always been weird for me, so I kinda avoid them.

also, what's a ".ts" file?

TypeScript - basically Microsoft's take on statically typed JS. Makes large projects a lot more manageable.

oh, hmmm.
never even heard of it before.

>Eh, it's easier to work with
Dat ES6 do

I actually just got it.

This seems to work regardless of if it's new or not:
jq(document).on("click", function(event){
event.preventDefault();
var T = event.target.className;
var ELEM = event.target;
//alert(T);
switch(T){
case "JAXABLE_LINK":
var paramStr = jq(ELEM).attr("href");
jaxMyMod(jq(ELEM).attr("name"), paramStr, replacePage);
break;
case "JAXABLE_BUTTON":
//alert(ELEM.parentNode.className);
if(ELEM.parentNode.className == "JAXABLE_FORM"){
//alert("Is part of form");
jaxMyMod(jq(ELEM.parentNode).attr("action"),
"?"+jq(ELEM.parentNode).serialize(), formPage)
}else{
alert("Not a submit button");
}
break;
default:
alert("Default: Item is of type '"+T+"'.");
}
})

(obviously, the alerts are temporary and for testing)

ES6? I'll have to look into that

sweet, it works. Just gotta adjust some other parameters now, b/c the link is a bit weird in PHP mode

encoding

Webpack or Gulp?

>CSS
>HTML
>programming languages

wew

>>>/dpt/

>don\'t
>\r\n\r\n
wow, you sure suck at php

Who are you quoting?

Looking to go into freelance web dev, I know I could pick up jobs from freelance websites such as oDesk, and Freelancer, but I was wondering if anyone had any tips on how to find clients to do work for besides going through freelance sites?

How exactly do I use react and express at the same time? They both have their own pseudo languages.

SystemJS

gatekeeper-grooves-60380.bitballoon.com/

any suggestion? its unfinished but what should i change in your opinion?

You need to sort that nav out, the links are too close together.
Use nicer fonts.
Even with the video in the background it still looks pretty dull.

>Converted with clipchamp.com - online video converter, video compressor, and webcam recorder

gross.
where's the webm vp9/vp8

Where do I register a cheap domain name?

I'm with gandi for a few years now.

just avoid godaddy and you're fine.

how do you found that out

it's in the files metadata.

Thanks! Will give it a try.

namecheap

Still used with prevalence in the .NET community.

If you're looking to get a job, learn Angular 1.X, React, or Angular 2.0 instead.

They do different things. Webpack is a bundler and gulp is a task runner. You can use both.

Can't gulp also bundle code? And webpack run tasks?

$('#useAlias').on('change', function() {
if ($(this).val() == 'Yes') {
$('#otherName').show(500);
} else {
$('#otherName').hide(500);
}
});


Can someone tell me why this doesn't hide the div when I click no please

jsfiddle.net/asm48w1L/

ids have to be unique, you can't have both elements use the same ID, only one will work.
so the event only gets added to your yes radio button.

besides, that's a shit way to do it.

>github.com/facebookincubator/create-react-app

Will I finally be able to start doing actual coding with react without having to mess around with tons of tooling?

Yes, but Webpack's purpose is in bundling. I mean, you can do most of what one does with the other, but Webpack was never intended to be a task runner.

Here's Webpack's guidelines for using both:
webpack.github.io/docs/usage-with-gulp.html

$('input[type="radio"][name="useAlias"]').on('change', function() {

This works, is this better?

>Decide to learn a meme stack
>Need to download a bunch of garbage
>Follow guide that uses dozens of dependencies and frameworks within frameworks
>Some have their own meme pseudo languages
>Need to set up task runners to transpile jsx, ejs, es2015 code, scss
>It all boils down to compiling all this shit to an HTML, CSS and JS file

What happened to web development?

yes, though name should suffice, have a look at this on how to do it more efficient.
first with and second without jquery.
jsfiddle.net/wjg4f8wL/


you shouldn't do animations like this anyway, use css for that.

>NEET guide to web dev employment
Have ny NEETs here actually followed this guide? Did it work?

Thanks alot man, I appreciate it.

Cleaner way would be to attach the event handler to a parent element. Also jQuery has a .fadeToggle() method that does what you're trying to do in a cleaner way.

example:
jsfiddle.net/vq5wg2r9/

Working on a note editor with React and Local Storage

Neat, thanks for this too.

need some help on this if anyone is willing(contact form to email on node using sendgrid)

the issue is that "if(data=='sent')" isn't getting tripped, so it appears to be sending the payload multiple times, resulting in me receiving multiple duplicate emails from the server, and the "Email is been sent at "+name+" . Please check inbox !" line is never updated

script.js
$("#send_email").click(function(){
name=$("#name").val();
email=$("#email").val();
message=$("#message").val();
$("#feedback").text("Sending E-mail...Please wait");
$.get("MYDOMAIN.com:3000/send",{name:name,email:email,message:message},function(data){
if(data=="sent") {
$("#feedback").empty().html("Email is been sent at "+name+" . Please check inbox !");
}
});
});


app.js
app.get('/send',function(req,res){
var request = sg.emptyRequest()
request.body = {
"personalizations": [
{
"to": [
{
"email": "DESTINATION EMAIL"
}
],
"subject": "New message received"
}
],
"from": {
"email": req.query.email
},
"content": [
{
"type": "text/plain",
"value": "From: "+req.query.name+"\n Message: "+req.query.message
}
]
};
request.method = 'POST'
request.path = '/v3/mail/send'
sg.API(request, function (response) {
console.log(response.statusCode)
console.log(response.body)
console.log(response.headers)
})
});

>localStorage
>not IndexedDB

you're checking if the response is "sent" but there's nothing in app.js that actually responds with "sent"

so does your server get the request?
you don't seem to send anything back to the client.

shoot, thanks m9

I haven't been into webdev at all since 2009 when I was in highschool. How much has changed? It seems like on websites CSS is more prominent now and static images aren't used as much. Like I remember making buttons in photoshop or gimp but I've noticed most websites just use pure CSS and html now for buttons.

Shouldn't you be using POST instead of GET?

you can't POST to different ports and I guess he didn't want to setup a transparent proxy for that.

Pretty much everything has changed since 2009, that was ages ago in internet time. You should pretty much throw out everything you know and start fresh.

Best place to start?

...

I wanna make an interactive *WEB APPLICATION*, not a WEB SITE. I wanna have sort of live editing or at least autorefresh, but I want it to be LIGHT so I can't use Meteor.

Whats the best workflow for that? I'm willing to learn anything as long as it's not meteor and doesn't require me to keep refreshing the webpage like a faggot.

What do you mean by live editing?

Things changing as I edit them.

Websockets probably, with two-way data binding.

the server does get the request

I tried adding "res.end('sent') to the sg.API line in app.js which isn't helping. Where should it go?