/wdg/ - Web Dev General

>Official botnet chat server
discord.gg/wdg

>Getting started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good intro (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn

>Free online courses
codecademy.com/
freecodecamp.com/
bento.io/

>Roadmap
github.com/kamranahmedse/developer-roadmap

>Resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
stackoverflow.com/ - Developers asking questions and helping each other
caniuse.com/ - Check browser support for front-end web technologies

>Youtube channels
youtube.com/user/TechGuyWeb - Traversy Media
youtube.com/channel/UC8butISFwT-Wl7EV0hUK0BQ - freeCodeCamp
youtube.com/channel/UCO1cgjhGzsSYb1rsB4bFe4Q - funfunfunction
youtube.com/learncodeacademy - codecademy
youtube.com/derekbanas

>in-depth comparison of VPS hosts
webstack.de/blog/e/cloud-hosting-provider-comparison-2017/

Other urls found in this thread:

atom.io/
developer.mozilla.org/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment
drawasaurus.org/room/awefdawdef
codepen.io/user/pen/ZJowKE
jsfiddle.net/hu1ph7vx/
w3schools.com/cssref/css3_pr_resize.asp
youtube.com/watch?v=yQaAGmHNn9s&list=PL11A62FF1A8BA35C1
jsfiddle.net/q8v2j578/1/
jsfiddle.net/q8v2j578/2/
github.com/lukasz-madon/awesome-remote-job#job-boards
fieldnation.com/
php.net/manual/en/mysqli.quickstart.prepared-statements.php
twitter.com/AnonBabble

Post what you're working on

I am thinking of getting a used/refurbished laptop for about

In general:

1. Phone app/ ARG (react native)
2. Online store for a design studio (wp/ woo)
3. Online store for a fashion designer (wp/ woo)
4. After Effects plugin (c++/ aesdk)
5. A few open-source front-end libraries (js)

Today:

The phone app
Maybe the AE plugin if I get time

you can do webdev on a anything, only issue is you have to run webbrowsers + ide/code editor and these tend to get bloated
i'm still using a 2010 toshiba laptop

you have to install and manage databases, servers and dependencies + occasional scripts to automate stuff
this is ez mode with linux but you can do the same things on other oses so just pick whatever you like more

OS shouldn't matter.

I don't think you will be able to get a decent second-hand macbook for

You can learn Web development on any OS, just choose what you like more, and what fits you. I doubt I would find a second hand mac at that price where I live though.

I always recommend Linux because the customiseable work flow, but it's up to you.


Working on my own buy/sell website, that caters to a niche market. Obviously I can't say exactly what, because I don't want my idea stolen. Using django with jinja2, and I have no idea how anyone considers Web dev without liquid templating, fuck all that extra work.

>Working on my own buy/sell website, that caters to a niche market
>can't say exactly what, because I don't want my idea stolen

It's anime dildos to NEETs right?

>It's anime dildos to NEETs right?

www kanojotoys com
It already exists mate, I'm not that unoriginal. That shows what you think about though.

Yet it's you who supply the URL instantly ;)

>what is google/ixquick

Tell me, when you have a template engine that is either PHP or JS, if the end user has JS disabled will that fuck up your site for them, or does the templating happen before then?

Stupid question but does anyone know how to style buttons to make them look like those old as fuck brick-like ones. It's driving me crazy, I can only remember how to do css and bootstrap

>ARG
ARG are exiting stuff. Tell us moar.

exciting*

how do I align a form to the top right

>an "official discord server" autist actually made a new thread, before going back to only posting on discord again

depends
fixed, flexbox, etc.?

It's a small game for a convention being held early next year. Players place items at their geolocation for other players to interact with, and choices made in the game will affect the physical layout of the convention area.

Sorry if that sounds vague; I don't want to give too many details (and effectively doxx myself)..

>>an "official discord server" autist actually made a new thread, before going back to only posting on discord again
What the fuck did you just fucking say about me, you little php dev? I’ll have you know I graduated top of my react bootcamp, and I’ve been involved in numerous nodejs todo apps, and I have over 300 confirmed posts in /wdg/. I am trained in asynchronous callbacks and I’m the top comiter in the entire ruby ecosystem. You are nothing to me but just another code snippet to copy paste. I will model the fuck out of the finite state of your mum with precision the likes of which has never been seen before on this board, mark my fucking words. You think you can get away with saying that shit to me over the Internet? Think again, fucker. As we speak I am contacting my secret network of 5y+ experience .net developers across India and your repos are being filled with pull requests right now so you better prepare for the storm, maggot. The storm that wipes out the pathetic little thing you call your QA process. You’re fucking dead, kid. I can be anywhere, anytime, and I can fizzbuzz you in over seven hundred ways, and that’s just in brainfuck. Not only am I extensively trained in database design, but I have access to over 300 web development ebooks and I will use them to their full extent to wipe your drown your comits off the face of your projects, you little shit. If only you could have known what unholy retribution your little “clever” comment was about to bring down upon you, maybe you would have held your fucking tongue. But you couldn’t, you didn’t, and now you’re paying the price, you goddamn idiot. I will shit fury all over you and you will drown in it. You’re fucking dead, kiddo.

fake and gay

That hit way too close to home..

;_;

Hey /wdg/, I dunno if it should be posted here or in /sqt/ but I hope a kind user can help with this confusing thing

I want to make a button, which when clicked or hovered on, extend a few text links to other stuff on the site. Please help me out of this pinch!

test1
test2
test3
test4
test5

use code tags when posting

on button click apply css classes to the other link elements to make them visible.
Either via opacity or moving them in from behind the button itself.

Html


thing 1
thing 1
thing 1

CSS
#button {
display: inline-block;
}

ul {
display: inline-flex;
}

li.hidden {
opacity: 0;
transform: translateX(-100px)
}


jQuery (inb4)
$('#button').on('click', function(){
if ($('li').hasClass('hidden') {
$('li').removeClass('hidden');
} else {
$('li').addClass('hidden');
}
});


Enjoy your free boilerplate :^)

So, is anyone watching the Polymer Developer Summit stream?

Has anyone here used native web components in any project yet?

use toggleClass to save an if

could be better even with only changing one class on the button itself

JS:
buttonElement.classList.toggle("hide")

CSS:
.hide+ul>li{
opacity: 0;
}


unless that selector is too hard to follow, but I think the other user just wanted sibling divs anyway, so

.hide~.link{
opacity: 0;
}

ah fuck me.. just opacity on the element itself...

dood opacity attribute will hide elements but have them take place
use display: none in case this is a problem

>toggle

Fucking hell, I've been doing it the other way for literally 3+ years.

Also, thanks

No but I intend to later this year. Seems pretty gud m8

Under NDA :^)

I was at pax south this year and they did something similar, so I'm guessing pax south.

If so, will probably see you there.

Asking again since the last thread died. I just started learning node 2 weeks ago and all the packages there are seems somewhat overwhelming. Am I suppose to know which ones I need and how to set them up before I start a project? Obviously I'm suppose to read the documentation but it seems like there's a shit ton of set up to do before the app can even start.

you tell me, i'll keep your secret

What packages are you talking about?

it's the same as last thread. Noone really knows what you are even asking user.
You write the code according to what your app is supposed to do. For some tasks node has built in packages, like if you need to access the file system. Other times you might not want to write a feature from scratch, so you just google "node ajax request" or something similar.

You are doing it the other way around. You are wondering what packages you need to start writing your app, instead of writing your app and then seeing which packages might be a good fit, when you work on specific features.

Or do you mean there are too many options to choose from and you don't know which package to use for a certain task?

>shit ton of set up to do before the app can even start.
node main.js

So I am going through some material, starting off with front end, following the stuff that is listed in that developer roadmap. Does anyone know of a good video that is about setting up my work environment (linux) for they type of stuff I will be doing?

All you need is an editor and a local server.

Editor:
atom.io/

Set up a server and view a site through localhost:
developer.mozilla.org/en-US/docs/Learn/Common_questions/Set_up_a_basic_working_environment

does anyone have experience building a responsive HTML canvas? I'm trying to make a pictionary game, and making the canvas work on resize is making me pull my hair out.

This is the best I've found and it's fucking shit:

JS
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop); //Record mouse X and Y coordinates


CSS
#canvas {
width: 800px;
height: 500px;
}


HTML

var canvas = document.getElementById("canvas");
var cssWidth = canvas.offsetWidth;
canvas.width = cssWidth;
canvas.height = (cssWidth * (5/8));

Well think about it. How is it supposed to resize? How would you expect it to?

fuck if i know, my brainlet ass has spent hours on this with no success

it's so fucking retarded that html canvas coordinates rely on the height / width attribute of the element rather than the CSS size

also theres the issue that iOS browsers don't support offsetLeft or offsetTop

basically, I'm fucked atm. no idea how there isn't a single working example on github.

is there any simple text editor with browser console addon?

now I am using firefox spreadsheet and console to js learning but it's not very usefull in long run.

If you could post working code example, that would be helpful.

Say you start out at the resolution of 800x500px. Then you resize larger.. You now have more pixels, where do you put them? I guess you could put them in on the bottom left, nbd.

Then when you go to resize and make it smaller. Where do you take pixels away from? From the bottom left? Because if you're trying to compress the drawing, that's complex when you think about it. Which pixels do you take away?

I think I might just keep the canvas whatever dimensions it starts with and glue it there. Doesn't matter if the screen adjusts size or not

What are some client side javascript projects I can work on?

I'm going into this company so I can work for a day, and that is probably my weakest bit.

Here's a guy who figured it out completely, but no repo for me to look at:
drawasaurus.org/room/awefdawdef

hes using flexbox for the layout and i have no idea how he keeps the canvas responsive

there are some responsive canvases on github i am looking at now, thanks

Anonymous to the rescue:

codepen.io/user/pen/ZJowKE

Is that what you meant??

Btw: to get the mouse position you should use:

e.clientX
e.clientY

see
By the way you don't need to set canvas size with CSS.

Really impressive desu. Scales up and down really well.

How do I allow people to input dangerous and evil characters like apostrophes into PHP forms to submit into a MySQL database but without them actually being able to fuck up the database? I have a forum system but posts don't go through if the content has an apostrophe in it...

Sounds cool, user. Good luck with your event.

Can anyone recommend any good JS/JQ tutorials, preferably videos?

Ive started JQuery but Ive hit a wall and I think I need more supplementary material before I start writing my own.

don't pollute your mind with jq plx

this one breaks if you zoom and scroll

Edit: fuck code pen

Here is your solution:

jsfiddle.net/hu1ph7vx/

Seconding the other guy, don't learn jQuery. Stick with Javascript. You're learning baby version of JS for no reason and wasting your time.

Wait what? Why not make the canvas 100% height and 100% width and leave the resizing to the parent element?

w3schools.com/cssref/css3_pr_resize.asp

Then just fire a JS event and resize the picture accordingly.

Okay, so same question but with JQ removed.

Im following The Odin Project and thats what it instructed me to do.

I'm working on a project which includes having a google map with markers and other info pulled from a database via jquery. What's a good way to describe that in few words? "Gmaps dynamic markers and data"?

how many of you are doing TDD? either at work or on side projects. how many of you aren't writing tests at all? was TDD just a meme?

>videos

I remember watching this guy many years ago. It's the absolute basics however.

youtube.com/watch?v=yQaAGmHNn9s&list=PL11A62FF1A8BA35C1

On the jQuery issue, I would recommend learning it later once you have a solid grasp of JS. I don't understand the hate for it here in /webdev/ so it's probably a hivemind thing. It's very useful for projects where you are doing significant DOM manipulation.

jq is like a straight razor. It is good for a quick hack, but it isn't scalable, and it's highly unrefined.

To answer your question I need to know what you're trying to achieve. What kind of job do you want? You can lean a couple directions : 1. More stable, more rigid, safer, slower, lower paying. 2. Less stable, more flexible, faster, higher paying.

Or something in between. Are you even going for a job? Idk what your goal is

Currently learning the front end but I want to be a backend developer, which language would be easiest to find remote work? Python or Java?
I'll probably eventually know both but trying to figure which one I should start with.

Nah this is excellent, I'd like a refresher on the whole thing honestly.

Thank you!

Those are both great choices. I'd also look at C#.

that will break the canvas drawing. either it wont be resized correctly, or the lines you draw won't follow your mouse pointer

you're free to try it but i dont think it would work

Well you obviously have to resize the image manually, d'oh. Copy the pixels into an array at resize start, scale and redraw the entire image on resize stop.

I am willing to pay if a course is worth it, consider it an investment, does anyone consider any of them good enough, or should I just stick to free material.

My main thing is getting a clear course structure.

I've searched for everything on Google. Have no clue why there isn't an answer for this that isn't for jQuery or some shit.

How do I get a counter to show how many characters more the user can input into a field?

jsfiddle.net/q8v2j578/1/

If you're talking about udemy etc courses they're all no better than free ones, apart from algorithms etc. Best way to learn is to think up a project and start working on it.

here's a simple one

jsfiddle.net/q8v2j578/2/

Fuck boys... I'm starting to lose hope here. I got six months of experience (4 months internship, not sure if that counts and I had a two month contract as a developer).

I cannot find an entry level job at all. I've moved to a major city and people will not contact me. I'm still applying for out of state jobs so I don't tie myself down to just one region.

It seems like everything is reserved for experienced devs, no one wants an entry level dev. What the fuck do I have to do? It took me a year and a half to find that two month contract. I assumed it was because I was in a smaller town.

This shit is soul crushing.

What kind of jobs are you going for? What kind of experience do you have?

In the meantime, this is a good board for remote work. Maybe you'll get a bite

github.com/lukasz-madon/awesome-remote-job#job-boards

Anything UX, Dev, WordPress, etc...

My experience is a degree in web design (yeah I kind of fucked up on that. I was too far in by the time I noticed I should've just gone CS). My web dev internship, I had a two month remote job as a web dev.

My skillset is well rounded, but honestly I am probably lacking in everything, jack of all trades and all that. Html, CSS, JS, PHP, bootstrap, foundation, Adobe CS, WordPress. Everything I think an entry level job should need. I don't think I'm fucking up on anything. The only thing I might be fucking up on is I don't have a pic on my LinkedIn profile and I don't have a Facebook.

It just doesn't seem like employers want entry level, they don't want to train anyone I guess? They expect an entry level applicant to know everything plus 5 frameworks.

Pic unrelated. Thanks for the link too btw. I appreciate it.

My client wants a web app where people can post jobs and contractors can bid for them but he is hellbent on using Joomla. I'm not very experienced with any CMS, but is this type of thing possible with Joomla? Is it worth learning how to extend Joomla to achieve this or should I just try and convince him to let me custom code this project. This is the website he sent me as an example: fieldnation.com/

>text all day and listen to joe rogan podcasts
>do udemy courses
>do everything but work.

I knocked out a projected 6 months worth of work in my first 2 weeks and now I have nothing to do.


So, what do?

Ha, this idea has been beat to death already. My sister gave me that idea in 2010 and within a few years those apps were everywhere.

I could care less so long as the client is paying me. It's also for a niche market but still.

Do whatever the client wants. Just be sure to let them know your quote will change due to this new requirement.

Express that any future Joomla security vulnerabilities will make their site a hacker's playground so they can expect needing to pay programmers in the future to patch the holes. If you make it custom, it will be cheaper and more secure.

php.net/manual/en/mysqli.quickstart.prepared-statements.php

Make some dank open source libraries

>find perfect domain keyowl.com
>it's taken

Go look at what took it.

Anyone wanna do a RoR project together? Or have a project their looking for contributors on? I don't have anything in mind, just wanna work with someone

When using a npm library, Is there a way to get documentation to my IDE when I hover over a function? Like how it works in eclipse for java.

As of right now it looks like this (pic) in my editor, it says what's supposed to go into the function but I have no idea what it does and I'm lazy and don't want to check out the docs on the internet. Using visual code btw.

I was really considering just going with .net just to take advantage of all the jobs that seem to be out there. But I've tried looking up what's needed for an entry level job and no where really breaks it down.

VSCode should have intellisense for JSDoc, if the library is actually documented with JSDoc.

Disclaimer: I've never used VSCode.

lol

at least yourfullname.com isnt taken and put to poor use fml

>website automatically redirects you to a localized version based on your IP
If I wanted the site in german, I would have typed in .de

Writing the UI for a chat client. This is a waste of time, isn't it? I should be learning algorithms or something, shouldn't I?

W-Wait, you got an internship and you're still fucked? I was expecting everything to be smooth sailing after I finally get an internship.

Yeah, at least it seems that way. I honestly think that most job board postings are bullshit. More often then not I get very little other than the occasional "X has viewed your resume" notification.

Im not sure if interning at a realty company versus a web firm has anything to do with it. But it hasn't won me any favors. I'm sure my web design degree hurts me more than anything else user, I'm sure you'll be fine.

is that some kind of early internet throwback site?

i want to go back

Is Head First's PHP & Mysql book good?

It's from 2006, so not that early, but yes!

Me too. :((( I am going to rebuild 2004 era AIM next.

Head First are alright but they are goofy as well. If you don't mind goofy shit then go ahead

Thanks senpai, i dont care about the goofy stuff, at least they have a lot of good reviews and its a different approach. I have a Java book, but i know they are from different authors so asking doesnt hurt.

Give me your honest thoughts on jQuery, /wdg/.