/wdg/ - Web Development General

>Previous Thread
>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/derekbanas

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

Other urls found in this thread:

education.github.com/pack
github.com/spykr/drawasaurus-frontend/blob/master/src/containers/App.js#L45
youtube.com/watch?v=3J9EJrvqOiM
github.com/mweststrate/react-mobx-shop/tree/react-amsterdam-2017
code.visualstudio.com/docs/languages/php
discord.gg/wdg
developer.mozilla.org/en-US/docs/Web/CSS/background-size
github.com/klarstrup/rehentai
jsfiddle.net/o5ha6Lbq/
scanlibs.com/survivejs-webpack-apprentice-master/
jsfiddle.net/o5ha6Lbq/4/
webpack.github.io/docs/
pastebin.com/s3edh57S
youtube.com/watch?v=wFtCSc-4nYw
twitter.com/NSFWRedditVideo

I have two arrays of different sizes, I want to add (as in addition) every element of one list to the other and run a check on them. These lists are going to be different sizes everytime.

I tried

for (length of either array) {
add each element at i
perform check


But obviously this doesn't work as if I go off the length of the longer list, eventually the shorter will be out of bounds and if I go off the length of the shorter list I miss elements in the longer.

I hope this makes sense and any guidance would be helpful

different options
Either go once over the shorter array and add all entries to the longer one, then afterwards do another iteration on the longer to do the checks.
Or do it all in one loop and while the index is less than length of the shorter array add it to the longer and do the check in the same step.

>education.github.com/pack

You're a good man. Free shit is all I can afford.

looks pretty damn good to me. I just love how easy it is to follow someone else's code when they use mobx. my friend needed help once to figure out how a redux app deals with data storage, and that shit was ridiculously over-complicated.
just one thing I do differently is I prefer to move logic like this to stores:
github.com/spykr/drawasaurus-frontend/blob/master/src/containers/App.js#L45

also take a look at this if you haven't
youtube.com/watch?v=3J9EJrvqOiM
github.com/mweststrate/react-mobx-shop/tree/react-amsterdam-2017
I think this is a better approach to handle routing

use tiling wm and disable unnecessary window decorations

code.visualstudio.com/docs/languages/php

the answer is still Spring, the answer 10 years from now will still be Spring

How do I into web design?

I hate design I am a programmer, I can do decent stuff with programming languages, but I can't do pretty shit.

just use the framework defaults in that case otherwise you'd just fuck shit up

If your main task is programming functionality, then it's unreasonable for someone to expect, that you put out the same result as a proper designer.
With modern CSS Frameworks you can at least make things quote passable though and then getting a better eye for design decisions becomes inevitable over time.
>Guess I should change the padding on that element
>Some better contrast here would be easier on the eyes
>etc.

What happened to the discord link? Can somebody post it?

discord.gg/wdg

you think everyone is retarded or what?

Yes, but what does that have to do with anything?

implode()

What's a good php websockets tutorial?
>inb4 PHP LOL

i want my website to be responsive. i have a given theme that i developed and so far is everything working.
now i included a background image on the left.
for small screens this image is not shown at all but it was developed on a big resolution and for all resulutions in between i want responsiveness.

here is the css so far:

@media (min-width: 1800px){
body {
margin: auto;

background-image: url("bg-img.png");
background-repeat: no-repeat;
background-position: 15.7% 55%;
background-attachment: fixed;
}
}


@media (min-width: 1200px) and (max-width: 1799px) {
body {
max-width: 100%;
background-image: url("bg-img.png");
background-size: auto;
background-repeat: no-repeat;
background-position: left center;
background-attachment: fixed;
}
}


it works on the big resolution, but if i shrink the width of my browser the image goes to the left. i would like it to stay in a static position where it resizes.

how can i get a "fixed" position for my background image s.t. it also scales to smaller screens?

Why would you do web design? I thought you were a programmer.

developer.mozilla.org/en-US/docs/Web/CSS/background-size
"contain" or "cover" with appropriate background-position

>background-position: 15.7% 55%;
makes it seem like you adjusted it to one specific width. Not a good idea.

lolPHP

How anal is upwork on the profile review? I have no education or work experience so I put self taught and freelancer respectively. into the trash will i go?

Yes.

For real?

Yes.

Even setting yourself as junior experience?

Yes.

Is it TCP or IP that splits the data you're sending into smaller packets?

thanks!

yeah i hardcoded it because i wanted my image left next to the content

with background-position: left center the image gets pushed to the leftest place of the page.

any ideas with that?

can you make a simple jsfiddle with your layout?

in a majority of cases a bg image works well with
background-size: cover;
background-position: center;


but that depends on whether there is some specific effect or look you are going for with your specific image.

>Transmission Control Protocol accepts data from a data stream, divides it into chunks, and adds a TCP header creating a TCP segment. The TCP segment is then encapsulated into an Internet Protocol (IP) datagram, and exchanged with peers

Ratchet is a good library for that and has some learning resources, but desu I would use node for that portion of the app and not php.

Anyone here got experience with phalcon? I was comparing it to my current Laravel stack and was completely fucking flabbergasted at how much faster it was.

wait till you try dropwizard

I don't eat curry.

check out my WIP hentai browser

github.com/klarstrup/rehentai

Are there any good resources/tutorials on learning phalcon?

haha it's le ebin pajeet meme xD upvoted

People usually hire freelancers with the best reputation on there. That's why I never really got going on any of those freelance sites. Also, you will almost always lose out to pajeets who are willing to work for 1/10th of what you would consider acceptable pay. Good luck.

The docs are ridiculous. They cover everything, the guy is columbian I think, so sometimes the english isn't great, but it's understandable. There isn't anything like Laracasts, but the more I dig into it, the more I start to realize that Laravel is a total pleb framework that holds your hand and you don't actually learn anything. I've learned more about REAL PHP in two months of using phalcon that I did in a year and a half of using laravel. You don't really learn PHP using laravel, you learn laravel.

> Laravel is a total pleb framework that holds your hand and you don't actually learn anything

Yeah, I got the same impression. Still, I think I will continue on using Laravel when it comes to simple webdev projects, it's quite handy nonetheless.
Anyways, thanks, I'll go through the docs now!

I really really want to switch from Wamp to Ampps but this shit's SQL keep crapping out on me and there no fucking way to fix it.
I just want to webdev. Fuck this shit I'm been searching for a fix for more than a week

Just use a VM. You can set up a centos virtualbox with nginx php-fpm and mysql in less than an hour. You have the added benefit of being able to save the disk image and restore it easily if you ever fuck it up.

>GraphQL
do you enjoy being owned by Zucc?

Excuse me?

1. install gentoo
2. pacaur -S mariadb apache php php-apache
3. ???
4. PROFIT

> Laravel is a total pleb framework that holds your hand
Yeah, I think that was the whole point of its existence. There's a reason why Laravel is used for enterprise level shit and not for small projects. It's mature enough to handle just about everything you need it to do right out of the box so you won't have to come up with much logic on your own.

I give up.

its been a while, im quite shit at this,
but i have certain situation:

jsfiddle.net/o5ha6Lbq/


the tower needs to be left.
but not sticked to the left border of the page.
it should responsively stay left next to the content field.

REQUESTING: Good Portfolio suggestions.

I'm working with React. Haven't used Redux yet.

Can someone spoonfeed me a good introduction to webpack and how to use it effectively? I want to write a general purpose js library that can be used both in browser and with node.js.

The only thing that's going to make your portfolio look good is a proper web application. Not a blog or photo page or some shit like that.

>another jelly neckbeard
typical!

scanlibs.com/survivejs-webpack-apprentice-master/

nig i'm not reading a book on fucking webpack

you asked for an introduction to webpack and that's just that. just skim it for fuck's sake if you're really that lazy to google for one of 10000 webpack tutorials on medium

>portfolio

I've ranked in the top 10% of both of the tests I've taken so far, how else can I build my reputation? (assuming they approve me..)

build a personal website and add some projects. show that you can actually build things and not just take a test. open source contributions on github/bitbucket also look good.

>it should responsively stay left next to the content field.
so simply 2 divs next to each other. One for the image and one for the content.
Or just the content in a container in the centre, with an absolute positioned background div, atached to the contents left side?

What kind of app based on React/Redux should I create to make my portfolio look good?
Maybe simple ecommerce app with users and cart?

linux development is not comfy at all.

something similar to that?
jsfiddle.net/o5ha6Lbq/4/

webpack.github.io/docs/

it is extremely comfy if you know what you're doing

Comfiest by far.

How do I get over the overwhelming fear that I'll never be good enough for a job

Every day I try to work on something and it either never feels like enough or I'll get stuck on something for hours with nothing to show for it

Okay, I may have gotten Upwork confused with Freelancer, but I guess my comment about having a good reputation still stands. On freelancer, the users with the highest ratings for job completion and satisfaction always get preferential selection because naturally people pick what they perceive to be the best option to complete their project.

This also made me realize I never really went through with setting up and Upwork account. I'll get back to you in a bit, gonna give this a real go this time.

Kill yourself.

I know how you feel. I have several unfinished projects laying around that I haven't been able to motivate myself to complete.

see a clinical psychologist

Well, fuck. Turns out I () got rejected. I have a BSc degree, several projects, and valid work experience yet I'm not allowed to sign up.

I wonder if it's because I live outside of the US/Europe. I can't believe I actually got excited for this shit, fuck my life it's in a downward spiral. Nothing is working out rn.

I feel you. I got into webdev and design work thinking those kind of plateform were ironed out and actually working. Turns out it's some kind of scam everytime.

I'm slowly coming to term with the fact that I will absolutely never find work in the field I like and wasted all this time learning useless garbage skills.

>Chrome insists on detecting my page as encoded with ISO-8859-1 instead of UTF-8
>tried using meta charset, doesn't work
>tried using meta http-equiv Content-Type, doesn't work
>no issue with Firefox, UTF-8 is detected correctly
WHAT DO YOU WANT ME TO DO

It's not because of your region lol

fug
at that point is it better to just sling a resume with your projects at companies and hope it sticks?

Is this good enough for an .net 4.5 crud app?

Question

I just gave my neighbor the password to my wifi so she can use FB and shit. Hypothetically speaking, if I wanted to phish her by creating a fake FB page, showing it to her when she tries to access FB, capture her login data, then send her to the real FB page, how would one actually go about doing this?
I would never do something like this desu, I just want to know the logic behind it.

I'd probably do something like first creating a mockup of the facebook page, then figure out what kind of request facebook's login actually makes and to what endpoint. then have your backend send the login data to your database first, then replicate the request facebook's page makes

>doesn't even know what a CSRF token is
/wdg/ is trash.

Sounds good to me. How do I redirect her to my site instead of the real FB though? Guessing that has to be done on the router?

>front end developer
>Whole office is slowly converting from Windows to Ubuntu
>Never used a Linux OS with any regularity before
>It's beautiful

My eyes are open /wdg/

You would spoof the domain by setting up a DNS record that points to your site. Then you'd have a webserver that serves the same html file for all domains, your mirror of the facebook login page. Then when she submits the form you'd send the POST request to your application server which stores the creds somewhere and redirects her to the original URL she was going to, which wouldn't work because now she's got this DNS record pointing to your site, and you can't get it off of her computer. Maybe you could have your app server talk to the router and dynamically remove the DNS record, or even setup a separate DNS server that the router tells all clients to use and you could reconfigure on the fly via some API. Well, that's way too technical and you'd probably give up a quarter of the way through. Okay, well, maybe you could proxy the actual facebook site through your site. Wait, no, SSL prevents that. What if you just kept her in a login loop so it kept telling her her password was wrong? Well, then she would start trying to reset her password and everything pretty quickly falls apart from there. What about just sending her to a 404 page or something? That would be pretty suspicious and weird, though. Well, maybe you could somehow direct her to a DIFFERENT site with like an e-mail or a facebook message from a fake account under some pretense, like maybe you could pretend to be asking her if it was her in some random picture on facebook, or something. The link you gave would be to facebook.oom or facebook.com.login.html or something that you could control from your own dns server, and then your application server could redirect to a real facebook link where she'd be asked to sign in again. Maybe it could work! Nah, it's shit. And you're never actually gonna do it. And if you did, you'd end up in prison.

go back to discord gamer girl

>And you're never actually gonna do it. And if you did, you'd end up in prison.
top lel

Was wondering if I could get a bit of help.

This pastebin is a skeleton of a tetris game we have been working on for class that someone else has posted, I haven't used any of their code as it parts seemed incorrect and I would not have learned anything anyway. The exercise has passed but I would like to get it working.

pastebin.com/s3edh57S (embed) (embed)

I'm posting it for reference on structure of classes, etc.

What I'm having trouble with is on line 475, I'm having trouble figuring out is how to call the functions associated with my models correctly to get the following piece of code working.

I am currently getting:

Uncaught TypeError: this.active.moveDown is not a function - Line 515
next = this.moveDown()


else if (action === Action.Down) {
if (this.active !== null) {
next = this.moveDown();

if (!next.active.Visible() && !next.hasCollisions()) {
this.active = this.moveDown();

} else if (!next.active.Visible() && next.hasCollisions()) {
this.gameOver = true;

} else if (next.active.Visible() && next.hasCollisions()) {
this.active = this.moveDown;
this.activeToGrid();
this.clearLines();
}
}

I'm confused because in my Action.left, next.moveLeft() was not throwing an error before I wrote this function.

Any tips would be appreciated

Kind bump

Start your own business. They're hardly useless skills if you're good. I don't know about you but I can save tens of thousands of dollars in design, branding and coding if I ever start a business. That's something most business owners can't say. That's the sort of advantage that can squash competitors. Code up a really nice website for your area where people can book a lawn cutting and pay through stripe. Do it yourself until you can hire more people and scale up then code up an android app so that your employees can get notifications of the jobs as they're coming in from the site.

just looking at java web dev makes me want to blow my brains out. How did it all become such a fucked and cluttered mess? You need a fucking novel just to set up the damn environment.

I like this "fluent" design scheme Microsoft came with and since I want to update my website I thought I could use some of their tricks.

Requesting example websites that were designed following these recommendations. For inspiration.

Sure, it's fine. Is that Servarica?

youtube.com/watch?v=wFtCSc-4nYw
gee that was really hard

there aren't any really. one of the tricks is to use semi-transparent noise texture and semi-transparent background color with backdrop-filter: blur, but the latter is not really supported yet (you need to enable "experimental web platform features" for it to work on chrome. firefox doesn't support it too)

what's a current solution if I want a component-like web UI, but don't want to use a framework like angular or vue?
by that I mean a UI with some static navigation elements like a sidebar and a navbar at the top, and some dynamic content panels displaying tables, input elements etc.

a solution im currently looking at is having a base html with the static nav elements, and then loading the dynamic parts from html files on the server via $.load(...)

any experiences/advice?

It's called html my man.

Are you adding a lang attribute to your html tag, like


idk if that could help but it's worth a shot

redpill me on amp and progressive webapps

>Start your own business
I already did, since I couldn't find regular company work anyway. But I have no idea how to actually start working for peoples. Doesn't help that I don't think I'm that good since I obviously lack experience in a real work environment, so I don't feel confident at all.

if (mysqli_num_rows($result) > 0) {
// output data of each row
while($row = mysqli_fetch_assoc($result)) {
foreach($row as $r){
//echo $r;
$row = $r;
echo "
" ;
}
}
} else {
echo "0 results";

How do I take every row and insert it into a graph?

So I'm spitting out all the results in an array and I wanna use them all as variables. I'm getting this as the result set.

Array ( [0] => 59.50 [1] => 110.00 [2] etc.

If I serialise it, how do I split it?

start by using PDO instead of mysqli

What are the fastest websites to make to add to a portfolio?

Would recruiters be able to tell if you used a bootstrap 3 theme?

This doesn't help if you don't want to cut lawns

Quick /wdg/ give me a good name for my site

>"my sequel"