/wdg/ - Web Development General

Surviving till 310 Edition

>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:

jsfiddle.net/w2mnvmtp/56/
jsfiddle.net/JvqHs/18/
jsfiddle.net/w2mnvmtp/59/
vuejs.org/v2/guide/single-file-components.html
vuejs.org/v2/guide/comparison.html#React
youtube.com/watch?v=4aWkqe4O9kE
hastebin.com/raw/unatuziliy
jsfiddle.net/b0s2c7dq/
painlessprogramming.blogspot.hr/
ibiblio.org/e-notes/webgl/gpu/bounce.htm
fractalfantasy.net/#/7/visceral_minds_2
twitter.com/SFWRedditVideos

I'm using a function because I want to make a toggle switch using knockoutJS similar to.this jsfiddle.

HTML
Update Color


JS
var color = ["Grey", "White"];

var data = [];
data.remainder = ko.observable(0)
data.selectedColor = ko.observable(color[0]);

data.UpdateColor = function(){
data.remainder((data.remainder()+1)%2);
data.selectedColor(color[data.remainder()]);
}
ko.applyBindings(data);


I'm trying to make a group of buttons though, but I have no idea how to change the observableArray once it's been set :\

this.markerType = ko.observableArray([
{ name: 'foo1', tglStatus: 0},
{ name: 'foo2', tglStatus: 0},
{ name: 'foo3', tglStatus: 0},
{ name: 'foo4', tglStatus: 0},
{ name: 'foo5', tglStatus: 0}
]);

this.navbtnToggle = function(data, index){
this.remainder((this.remainder() + 1) % 2);
this.selectedColor(onoff[this.remainder()]);

console.log(index, data);
};

I don't know knockoutJS at all, but can you describe at what exact step you are stuck at?
Can't you just access this.markerType with the "index" variable and toogle "tglStatus" as you would with any other array?

Could be a few days, could be months.

I started applying to jobs 2 months ago and only now getting replies. I also got 4 replies from companies I applied to last week. They were startups though, who reply much quicker.

Yes but how would I have selectedColor set the color of the text to color[tglStatus] on button click?

ah man, if it was Vue I could probably help no problem.

so on click it calls "navbtnToggle", which sets remainder and selectedColor properties on the button *element/component*?
I guess your current style binding already looks like this?
style:{color:selectedColor}

and "onoff" being an array that holds the color variable?

Post a jsfiddle of your current code maybe

jsfiddle.net/w2mnvmtp/56/

Also, here's one that has what I want working but it uses css instead of style if that helps.

jsfiddle.net/JvqHs/18/

The documentation is extremely lax :\

How long until you start applying for jobs?

I have made a lot of small, simple projects with basic JS and some with React.

I've also made a very basic business page for a small company in wordpress.

I'm not quite sure what to write on my CV. Any protips on getting a job?

Has anyone here used vue? How have you liked it?

I'm starting a big front end project at work soon, and I get to choose the framework. I've used React in the past and am kind of done with it. I'm leaning toward vanilla JS, but this is an open source project, and I want to make contributing as easy as reasonably possible.

Go ahead and apply for jobs. Worst case, you'll learn what you need to do to make yourself a more attractive candidate. Best case at your level is probably to be told, "Well, we can't hire you as a dev, but we've got this well-paid internship you can do," but you never know.

More important at this point is to go out and network. Learn from people working in the industry. They'll be able to point you toward jobs you have a better chance of landing, but learning from them is more important. It will make you a much better developer. Talking shop with them will also help you know/practice how to talk during interviews.

Make sure that your small projects are visible because they're going to be the meat of your CV. Put them up on github and link to them on your resume.

here, is this what you intended?
jsfiddle.net/w2mnvmtp/59/

liking Vue a lot personally
single-file-components are great and the code is nice to read imo

>come to work on time
>been here 20 minutes
>none of the other 6 devs here yet
>boss isnt even here yet
>lights are off

It's like this every day. How do I find out whats going on without seeming like a dick for asking why everyone is always super late.

can we ban vueposting yet

Thanks! How much tooling do you need to be able to use vue sanely? I'm avoiding react because I don't want to start a new project with a million extra tools. The vue docs say you can use it with no extra tooling, but react says the same thing without mentioning that no one uses it that way so good luck finding docs/tutorials/support for that way of doing things.

>It's like this every day
I think you have your answer. Devs usually don't give a shit about getting to work on time because it doesn't matter. They don't deal with customers. As long as they are available during enough business hours and get their work done, what time they show up is irrelevant.

If you're confused by that, ask your boss. Frame it as asking whether or not you're allowed to do the same thing. Asking for clarification of what's expected of you is allowed/encouraged.

>jsfiddle.net/w2mnvmtp/59/

Thanks a bunch!

And how does knockout bind itself to html? Does it scan the html and find data-bind then replace it after its parsed the line and done x y z with it?

Theoretically none.
Vuex only if you want some extra library for state-management, though I personally never had the need for it.
Webpack if you want to have .vue single-file-components in your project.
vuejs.org/v2/guide/single-file-components.html
It's not adding extra functionality, but just helps to keep your components organized. To be fair, I wouldn't even use .vue files straight away, if you just want to get a feel for the library itself.

vuejs.org/v2/guide/comparison.html#React
might be of interest

no idea, most frameworks like that work with a virtual DOM

It was the same at my last dev job. If it's a startup or smaller company, completely normal.

If you're new, try not to be late even though they are.

On mornings when I go to the gym I can end up being 20-30 minutes early. Boss is always here. Shame it's not all productive time, often he'll spend a lot of time roaming around chatting to people.

LOL-ing at you guys. Everybody can make their own website by themselves. Your nothing special.

youtube.com/watch?v=4aWkqe4O9kE

>5 minutes
i hope that includes long breaks otherwise wtf why did he take so long

I am new.

There are two other new guys that started a few weeks before me. One was 45 minutes late and 58 minutes for the other.

This is just so bizarre to me.

IS THERE ANY WAY AT ALL to NOT call setInterval immediately but to save it in a variable and use it later on? OR DOES JAVASCRIPT JUST LIKES BEING A BITCH

Then don't call setInterval immediately but wait until later?
wtf are you doing user

>being mentally retarded

I love it when retards blame the language when in fact the problem is that they are a retard. You should hit the books because you aren't ready for any kind of programming.

what I think you are trying to retardily do: hastebin.com/raw/unatuziliy

Ok so here is my conundrum and I won't be so mentally retarded this time.

I am making a game in JS. The user clicks on a button and a number decreases until it reaches zero. The user has to reach zero before the opponent does, the opponent being a DASTARDLY (oops sorry, slipped out) setInterval() function which decrements its own number.

This game has many levels. Level 1, the speed at which the setInterval decrements is very slow. But with each successive level, the speed increases.

So here is how I have the code laid out. I was going to describe it here but it would take too long, so here is a jsfiddle:

jsfiddle.net/b0s2c7dq/

I am referring to variables that exist in local scopes in this setInterval() to make the game work as it should, so the setInterval() should go inside the same scope right? No, because then it gets called a second time, third time, fourth time etc with each new level.

So what are my options here, shoot myself in the head or stop making things so difficult and put each level of the game into separate functions rather than one gigantic function?

Vanilla.
Frameworks are a meme.

>because then it gets called a second time, third time, fourth time etc with each new level.
Do you not want that? you should be clearing the interval at the end of the level and starting a new one with the new speed at the start of the next level

Fuck it, that is the easiest way to do it. Fuck the DRY principle, I'm repeating shit.

It's in a loop. You're not repeating yourself

`setInterval()` returns a value that can later be passed to `clearInterval()` to terminate it. Hold onto that value and call `clearInterval` at the end of every level.

How should I learn React as a total noob? I've tried some youtube channels but everythig's deprecated. Any recommended udemy course or something?

Read the documentation my man.

RTFM

Ayy, I'm working on the main nav for this site and I've achieved the effect I want, a little slide down effect on hover using just CSS. It looks fine in both Firefox and Edge but in chrome when you first load the page the nav always has a one pixel line in between at least two of the items, pic related. That's how it looks when the page first loads and if you hover over the menu items to get the transform effect it can disappear and reappear but the menu items don't shift at all, the widths stay consistent. Any idea what could be happening here? Is it just a bug in chrome?

inspect the element and check which rules apply.

Are you already using something like normalize.css ?

How did you guys learn Python?

I looked at other Python code and read the docs

Posted earlier in the /sqt/ but it died and I got no response. I'm trying to learn a bit of webscraping with Python and Selenium webdriver. I managed to scrape the table I was interested in like this:
try:
element = WebDriverWait(driver, 10).until(EC.presence_of_element_located((By.ID, "table-type-2")))
finally:
for i in element.find_elements_by_xpath('.//tr '):
with open("C:/test.csv", "a") as csvfile:
print(i.get_property('innerText').strip(), file=csvfile)

How would I have to do this if I wanted to go through cell after cell instead of printing out the complete rows? For now I am simply importing the file into Excel but I would rather work with the data directly, so being able to access specific cells in the table that match certain critiera would be ideal.

read a bunch of books. Maybe start with Automate the boring stuff with Python, it's pretty good.

Running a backend in Node.js with mongoDB - where do I deploy? Its a small e-commerce site.

Who do you host on? I found Diigital Ocean to be ok. Any recommendations?

Most providers want me to get a VPS

DO or Vultr is fine

how does /wdg/ version control?

git

There's effectively no reason to use anything other than git.

git

vultr, digital ocean, heroku

I keep folder backups and just put shit live.

Which is odd since I use git at work.

u crazy nigga?

I realized when I print the rows there are always a certain number of spaces between the values of each cell so now I am just splitting the string like print(i.get_property('innerText').split(' ')[2]) for example. That way I can get to each value of the cells. Please let me know how bad of an idea that is.

learn to programm here:
painlessprogramming.blogspot.hr/

just set up an apache on ubuntu. I don't have permissions to edit under var/www/html though. I can't even edit the index.html file apache provided me. What the fuck do i do

Obviously. But the click binding expects a function. You don't need to call it. Knockout calls it with the correct parameters already.

>scan the html and find data-bind then replace it
The DOM, actually, and the handlers don't usually replace it, but just clone or remove the child(ren), attach handlers, and/or modify attributes. data-x attribute becomes DOMNode.dataset.x so it's not horrible terrible performance-wise. afaik it doesn't use shadow DOM.

Any good good ORM-like libraries for node? I want to do an application with a lot of dependent data and I dont feel like writing SQL.

Django's models are an example of what would work well here but I want to build a single page app and Django for API's is eh

anyone?

>doesn't understand basic unix
>pointlessly tries to bump own post by spamming
>never asked a support question before
>shitposts support questions in /wdg/ instead of any of the many valid support channels for apache
Go fuck yourself.

I have finally succumbed to the webdev meme because webdev jobs are practically everywhere, thank you for making this thread and the guides & links are great OP, thank you all for participating in this thread and sharing your knowledge by answering questions in your spare time (you are all very busy I know).
Thank you once again.

pic semirelated, replace the greek statue with webdev

Don't you call my passion a 'meme' you cretin

yeah it's nice

I miss /fit/ :(

If you have any questions about getting a web dev job then I can answer probably.

Is there some

php -l file.php

alternative that does a syntax check on the file, but doesn't run it?

...

You have a good tutorial for that kind of thing?

:-)
Definitely, plus this gen is pretty new
Should have guessed it came from /fit/ considering the bodybuilder.
Which jobs are more fun in your opinion? Front end stuff or the back end stuff ?
I'm guessing you need a portfolio for the front end stuff?

WebGL2 is pretty new so there's little choise for tutorials specifically on transform feedbacks but this may help

ibiblio.org/e-notes/webgl/gpu/bounce.htm

Today I learned: Inheritance! woot!
function Cname() {
this.a = "";
this.b = Number;
}

Cname.prototype = {
z: 2,
method1: function() {
return this.a = "zzzzzz";
},
method2: function() {
return this.b = 22;
},
sum: function() {
return this.z + 1;
}
}

let xx = new Cname();
console.log(xx.method1()); // zzzzzz
console.log(xx.method2()); // 22
console.log(xx.sum()); // 3

xx.z = 4;
console.log(xx.sum()); // 5

let item = Object.create(xx);
console.log(item.sum()); // 5
console.log(item.method1()); // zzzzzz

let obj2 = new Cname();

obj2.aa = function() {
let inh1 = this.method1();
let inh2 = this.method2();
let str2 = "ownstr"
return inh1 + " " + inh2 + " " + str2; // zzzzzz 22 ownstr
}

console.log(obj2.aa());

let item2 = Object.create(obj2);
console.log(item2.aa()); // zzzzzz 22 ownstr

console.log(obj2.hasOwnProperty('aa')); // true
console.log(item2.hasOwnProperty('aa')); // false

console.log(item.hasOwnProperty('sum')); // false
console.log(xx.__proto__.hasOwnProperty('sum')); // true

Object-oriented is so fucking retarded for most things.

I love when companies are like WE USE JQUERY BUT WE NEED OOP PHP.

Like wait, so you want me to create an object of the class I'm creating and echo out the results so you can get it in ajax? Like what?

KEEP
IT
SIMPLE
STUPID

It's hard to find back-end and front-end really separated these days.

Sure, you usually have a designer that usually makes ads and stuff and also tells you what to change on the layouts, but most places that I have seen expect you to do back-end and front-end. Actually my previous job didn't even have a designer. We were as full-stack as you could get.

Yeah though, the best portfolio is a pretty one. Take the lead of the person doing the WebGL2 stuff. Some basic stuff like hitting a geolocation API to find the closest starbucks and a simple login system, or a guestbook.

Inheritance is trash tho.

>tfw no ideas for personal projects
How do I keep learning if I don't know what to do?

What's wrong with that?

Does /wdg/ have no dice roll sheet?

This probably extends just regular Web development but how to make something like this? And embed it into a website, and making it interactive?

fractalfantasy.net/#/7/visceral_minds_2

I've literally no idea. Is it something I could do in WebGL? Or what do you think.

Theres quite a few other 3d animations and visual things on that website which I think is cool

Sure man.

any recommended book/course/anything to learn PHP?

How do I develop website startups as quickly as possible?

Python Django or Ruby on Rails?
React or Angular?
etc.

>PHP

anything your heart desires
after all, it's your startups

Depends on the type of website.

I'm looking for resources on front-end design (not development), but Google isn't really turning up anything. Where do I start?

Why is that carpet so fucking filthy? She deserves better than that.

Anyway, you don't self-teach design. In order to be decent at design you need to get a degree from a good traditional college program. It's basically the opposite of web development.

>I'm looking for resources on front-end design (not development), but Google isn't really turning up anything.
you lie you lie you ain't ever lie so damn much

>Anyway, you don't self-teach design.
I would disagree

...

I believe there should be a list of simple website projects one could make? Like movie/book archive or a site of a school/university.

Can you self teach to senior full stack level?

I tried to do weekly challenges once but no one did them. They were simple.

Yes but it becomes horribly inefficient.

what's the best route to take? i already have a web dev job but can't progress past intermediate.

How do I show a random string of text on the page every time its refreshed?

As simple as possible.

Thanks for the advice.
This would be useful. Or at least a list of ''good for portfolio" ideas. Guestbook, interactive, own forum, filesharing site etc...

Do you mean a random phrase or a literal random string of characters?

What is the best way to create annotated interactive images?

Phrase, so i will have a list of them, and it will pick one at random.

pajeet tier

>Why is that carpet so fucking filthy?

It's the Eric Andre Show, you know? Look that shit up.

Is there a website that teaches about good layout design? i have something like this picture but i want it to dont look like shit

any recommendations?

Initialize an array with the Strings, create rng for the amount of elements in the array -> pick the String from the index of the random number. Tada

fuck linux