<wdg/> - Web Development General

Prev 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 - Web Development in 2018

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

Attached: wdg.png (822x552, 868K)

Other urls found in this thread:

errec.surge.sh/
codepen.io/user/pen/NzWMmp
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors
jsfiddle.net/fed3c083/
twitter.com/SFWRedditGifs

Office Code Pro, thank me later.

tl;dr: Can I have a timeline of things I should be able to do when learning webdev?

Wall of text : Started with an entry level webdev job despite coming from a maths background. Managed to learn a lot on the job but got transferred to mobile development after half a year. Didn't want to let what I learned go to waste so I've been studying it on my own during down time. Started learning everything from scratch properly rather than the ad hoc method I used to complete tasks previously.

It's been another half year since then but I feel like my progress is too slow. Currently just started the intermediate level courses for Javascript. I'm already 27 this year and feeling slightly pressured by the younger and better developers. I want to do more things faster and decided to set some goals or milestones to accomplish. Can I have some help in setting the goals and timeline to achieve them?

What is "intermediate level courses for Javascript" exactly?
Do you know ES6?
A front-end framework? Have you started going deeper into it with redux etc?
Full stack or just front end?

When I google "intermediate javascript" it just comes up with like for loops and other things I would consider to be the basics, so I have no idea

It looks great, thanks.

Don't be discouraged by younger developers. Let go of your ego, I have started when i was 32 years old and this is my accomplishments for one year.

>errec.surge.sh/

sorry for my english

Koa vs. Express?
Rails vs. Koa/Express?

vert.x

I also want to add that here is not where you want to be if you seek advice. In my experience the people here are toxic and will insult your effort to learn. They will make you feel like giving up

Sorry for being too vague on that. By intermediate I meant things like memory management. Haven't went on to frameworks yet as I've been concentrating on plain Javascript. Plan on doing full stack though I was only doing front end for my job before this.

Thanks for the encouragement! I don't really mind younger people being better than me, the pressure is more on not being skilled enough if I need to find a new job.

Thanks for the advice, I lurk here enough so I get what you mean and have a thick enough skin to weather it. Decided to ask here because I noticed some people that seems to know a lot on the topic.

can you web devs explain to me the difference between front end and back end?
My only experience programming is with Python and some C++, where those things seem one and the same thing.

In what situations a "back end" is needed?

Front end is writing the code that the user interacts with. Back end is writing the code that the front end interacts with.
Back end takes the API requests from the front end, validates them, and interacts with the database and caches, for example.

Thank you.
Is Django any good? Could I write a website with it?
I don't even know what the normal approach is. Do I have to write html or php too? Or I can write Python code that "generates" the pages?

Django is a good start but Rails is better IMO, especially for beginners and experts (whereas Django is probably better for people between beginner and expert).
Ruby and Python are used instead of php, so you won't have to write php too.
Rails and Django both come with templating engines that will generate the pages. However, you'll have to understand basic HTML to use the templating languages. But HTML is easy compared to programming languages, so you can probably pick it up as you go.

redux is too fucking stupid and confusing.

I am just going to not bother with it and wait until someone makes an NPM module to make the new react context API actually decent.

this is so fucking dumb, the learning curve is like all or nothing and everything is destructured to shit so you are reading hieroglyphic code that you don't even understand which makes no fucking sense anyway

>(whereas Django is probably better for people between beginner and expert)
Just want to elaborate on this -- the reason being Django's preference for explicitness and Ruby's preference for magic.
Magic is good for beginners. It lets them focus on getting their code to do what they want instead of going on wild goose chases of understanding different parts of the system they probably won't understand anyway. I remember as a beginner, I tried Django because "you can understand it because it's explicit" but I didn't understand shit because I was n00b af. There are layers upon layers upon layers.
Then, as you start to understand programming, Django becomes nice, because magic can be hard to understand when you start to need to understand what you're doing. The explicit helps there. However, once you become a highly competent programmer, magic becomes awesome again because you're able to harness and conjure that magic yourself. But a lot of advanced users just prefer explicit over magic anyway, personal preferences.
But there are other reasons to prefer Rails over Django, and IMO, I prefer Ruby a lot. Reason? Its Smalltalk and Lisp roots make a lot of awesome. Python, however, is too tainted by C-style thinking. The "Python way" isn't the best way, it's the way that people falling for the blub paradox are used to. It's often tried and true, but there's often a better way, too. But you won't find the better way in the Python way.

You just summed how I feel about it. In the end, it seems that there's so much fucking trouble to set it up and layers of abstraction when I just want to have state available to props in one spot. At least prop drilling makes sense.

Just spent 90 minutes unminifying the compiled file used in mdbootstrap demo because I am too cheap to pay and because I want to manually manage all the dependencies and because I want to save 600kb of bloat.

Attached: mdb but pro.jpg (384x361, 24K)

Redux is smart and awesome.
When it's stupid and confusing, it's usually because of premature optimization. There's some point when your app becomes complex enough that the cost of not using redux exceeds the cost of using redux. Using redux before this point is fucking stupid.

Thank you man...
One last thing... Do I need to learn JavaScript?

how do you force electron to crash?

I wrote a custom testing suite because I'm retarded, and I want to break out of the JS vm on failure so that it shows up as a failure on travis ci.

how do?

I am having trouble making sliders display properly on internet explorer and firefox. They display as they should on chrome and safari. The sliders are basically just

The css I am using for each browser is
input[type=range]::-webkit-slider-runnable-track {
(some code)
}
input[type=range]::-webkit-slider-thumb {
}

input[type=range]::-moz-range-track {
}
input[type=range]::-moz-range-thumb {
}

input[type=range]::-ms-track {
}
input[type=range]::-ms-thumb {
}


But the sliders still look quite different and the one on chrome snaps into place whereas the one on IE slides into place.

Any ideas on how I can fix this? Thanks in advance.

You can get really far in Django/Rails without Javascript, and you can get even farther by sprinkling a little Javascript in, and you can learn that as you go.

The problem is that a lot of jobs pair react with redux so I feel forced to learn it to get a react job, even though it's completely pointless for me.

Fuck it I guess, when the time comes that I actually need it I'll learn it then.

what can cause SOME images to break?
My website is only showing 4/9. I've checked the paths and cleared cache...
The paths for the ones appearing are in the same folder as the missing ones, so I don't understand what is happening.

did you get the names right...
can you access them directly...

yeah. I'm using brackets, so when I mouse over the filename it correctly shows the thumbnail, but the "live preview" and directly opening the .html files they're broken.
Triple checked the filenames, copying and pasting directly from the image in windows explorer but still not working.

HOLY FUCK I am retarded.
Somehow I've subconsciously or forgotten that Iadded a / to all the start of all the paths for some unknown reason.
meant to be img/image.jpg
but I had it as /img/image.jpg

what the fuck is wrong with me

It's all tough love baby

We're basically just a bit sick of this: >the difference between front end and back end
Aside from what they do, they execute in different places. Front-end code runs or renders in the browser, back-end code runs on the server.

Sometimes front-end code is 'pre-rendered' on the server but that's a more or less optimisation rather than a fundamental change in architecture.

Guys I have a dumb question:

Can I use a normal websocket-compliant client to "talk" to a signalR server?

how are people able to hide frontend styling and effects css stuff? Is it just a natural consequence of everything being organized properly?

Define 'hide'

What do you mean hide?

>he uses a (((framework)))

Do you honestly think you're any better than wordpress monkeys?

Attached: 1512660184428.jpg (539x552, 30K)

for example when i go to double chan/basedboys/ i want to know what kind of effect they are using to make the images bounce up and down when i hover over them but inspecting the page code doesn't reveal anything as there is no :hover elements. Maybe it's some js and it's so neatly organized along with some other tens of other javascript files that it's impossible for me to find out how something is being done on the frontend readily.

>tfw wanted to make robots
>tfw instead ended up here

Could someone take a look at my code?
I'm using node, express, and MongoDB, and I want to use jwt with both the access and refresh token.

Here's the relevant users route where I send the token and refresh token after the user logs in within the users.js
// @route POST api/users/login
// @desc Login User / Returning the JWT
// @access Public
router.post("/login", (req, res) => {
const email = req.body.email;
const password = req.body.password;

// Find user by email
User.findOne({ email }).then(user => {
// Check for user
if (!user) {
return res.status(404).json({ email: "User email not found" });
}

// Check password
bcrypt.compare(password, user.password).then(isMatch => {
if (isMatch) {
// User matched

const payload = {
// JWT Payload
id: user.id,
name: user.name
};

// Sign the token

const token = jwt.sign(payload, process.env.SECRET, {
expiresIn: process.env.TOKEN_LIFE
});
const refreshToken = jwt.sign(payload, process.env.SECRET_2, {
expiresIn: process.env.REFRESH_TOKEN_LIFE
});
const response = {
sucess: true,
token: "Bearer " + token,
refreshToken: refreshToken
};
tokenList[refreshToken] = response;
res.status(200).json(response);
} else {
return res.status(400).json({ password: "Password incorrect" });
}
});
});
});

and here's the relevant passport code in passport.js
const opts = {};
opts.jwtFromRequest = ExtractJwt.fromAuthHeaderAsBearerToken();
opts.secretOrKey = process.env.SECRET;

module.exports = passport => {
passport.use(
new JwtStrategy(opts, (jwt_payload, done) => {
console.log(jwt_payload);
})
);
};


Is this a proper way to set it up? Did I miss something?

Open browser debug tools, inspect the element and expand anything in that element as far as you can (or as it matters), then mouse-over or whatever to activate the hover, watch for changes in CSS, if nothing changes then there's probably a hover somewhere but it might be in a :before or :after or something. If something changes then some js is detecting the mouse-over and doing something.

Basically, it's probably not really hidden, just well-organised as you suspect. Some user who's familiar with the site might tell you more.

iktf: I wanted to make The Culture real, ended up helping startups do useless shit. It pays enough to afford top-shelf booze to drown my disappointment.

thats too simple of a procedure and only works when the front end of a website is handcoded
have you ever tried to look up an effect on a website like facebook? Everything looks like some reactjs generated nonsense.
If there were a tool that could tell you what kind of js is being invoked with a particular event.

You'll still see the css that actually gives you the effect, no matter how that css is generated. Basically all JS frameworks still actually compile down to VanillaJS and CSS.

And if it were react, you'd just check the React tools tab in your browser dev tools (which you might have to install first but whatever).

>facebook? Everything looks like some reactjs
There's a really good reason why Facebook's JS would look like compiled ReactJS.

How do promises work? How do I get a function to return the result of a promise?

The simple answer is to use "await" but you're supposed to pass a function that uses the promise result as a parameter.

I got something like

function something(someJSONshit){
getData(someJSONshit).then(response => parseData(response)).then(res => console.log(res)) }

where the getData returns a promise

the console.log gets me what I want but the function returns undefined, how do I get the function to return something?

function foo(){
//do stuff
}

var foo = function(){
//do stuff
};

Is there any practical differences between those two?

I'm glad the whois is dead. Such a cancer that was.

Please help Jow Forums i am retarded.
How in Holy Stallmans Neckbeard do i get the 2nd value of the array, (the one that has key 'Manufacturer Code') the catch is that the key will change but needed value is always the 2nd item in the array? PHP wizards pls...
object(ArrayObject)#357 (1) { ["storage":"ArrayObject":private]=> array(3) { ["ID"]=> string(3) "123"
["ManufacturerCode"]=> string(5) "PO,YU" ["ManufacturerName"]=> string(34) "Dumb Company" } }

Good post, I agree with what you said.

Attached: Rails.jpg (720x479, 61K)

you should probably return a promise
> getData = () => new Promise((resolve, _) => resolve("some|unparsed|data"))
function getData()
> parseData = (data) => data.split("|")
function parseData()
> something = () => new Promise((resolve, _) => getData().then(data => resolve(parseData(data))))
function something()
> something().then(result => console.log(result))
Promise { : "pending" }
Array(3) [ "some", "unparsed", "data" ]


foo(); // works
bar(); // TypeError: bar is not a function

function foo (){}
var bar = function() {}

foo(); // works
bar(); // works

I need to store high scores for my online game written in JS. Which is the better database management system: relational like MySQL or key-value-pair like MongoDB?

both are overkill, use something simple like sqlite or leveldb or just store the results in-memory and sync them to a json file

localStorage

Is there anything I should know about if I intend to randomise the delay of a setTimeout which calls itself over and over again until a condition is achieved? The delay in ms isn't set, it is the result of a random number within a range that is defined in the function. Anything wrong with that /wdg/?

It's server-side, I mean high scores of all players and not just client-side

>or just store the results in-memory and sync them to a json file
Can you elaborate on this further?

Just get the values of the array and put them into a new array, then get the second element.
$second_value = array_values($your_array)[1]

keep them in the memory of the program running on your server and save/load them from/to disk to preserve them between restarts of this program/the server

I'm really really new to Angular.

I'm trying to build a basic storefront app, in the form of a fake used car sales website. I've made multiple components, one for the dashboard, one for each of the separate pages.

I want the buttons on the dashboard to change based on which page the user is on. For instance, on the home page the dashboard will have all the page buttons, when you click on a page that will change to a single back button.

I tried implementing this by storing a Boolean property in the Dashboard export class, then changing it in the component that imports it.

Unfortunately I can't access the property itself in the component importing the export class.

I'm not posting the rest of my code because I'm probably going about this entirely the wrong way.

I'm mostly looking for a general answer of what I should look into about changing the buttons on a component based on the url of the page or the status of another component, and I guess I'll hit the documentation to figure out the rest hopefully.

you did that in one year? excuse me while I go and kill myself.

Attached: Screen Shot 2018-05-29 at 12.57.29 PM.png (1911x663, 239K)

what sql db should i run on a windows machine?

If your name is Stanley for example. Is it acceptable to have a domain like stanl.eu ?

Or is that a nonsensical domain hack. It saves having to spell out my gibberish last name every time.

Just install xampp

Wtf? Get the domain you want noob.

What sort of dumb logic.

const APP = EXPRESS();
APP.set('views', PATH.join(__dirname, 'views'));
APP.set('view engine', 'pug');
APP.use(COMPRESSION());
APP.use(FAVICON(__dirname + '/public/favicon.ico'));
APP.use(BODY_PARSER.json());
APP.use(BODY_PARSER.urlencoded({
extended: false
}));
APP.use(COOKIE_PARSER());
APP.use(require('stylus').middleware(PATH.join(__dirname, 'public')));
APP.use(EXPRESS.static(PATH.join(__dirname, 'public')));

for (var i = PAGES.length - 1; i >= 0; i--) {
APP.use('/' + PAGES.short, ROUTE_PAGE);
}
the routes won't work, why?

>checking out what this MongoDB meme is all about
>hate it at first, then it started to click
>seems kinda comfy now, i think i like it

wtf is happening
quick, somebody tell me why it sucks!

Attached: web_scale.jpg (480x360, 10K)

does it need "/" added to the pathnames?

nvm i'm a fucking brainlet who used PAGES.short instead of PAGES[i].short

Could anyone help me out.
I am looking to read through an array with a list that has arrays that has two elements and I want to always pick the second element from the array and check the content.

How to do in js?

t.newbie

codepen.io/user/pen/NzWMmp ???

Almost
test = {arr{stuff,stuff},arr{stuff,stuff}}
want to pick out everything from test = {arr{stuff,this_Iwant}, etc,etc}

something like that

In react, what's the diference between setting state in constructor and outside of it?

You might want to check out how objects and arrays work in JS because what you've written there looks like an object but misses its keys.

The state set in your constructor is just the initial state, every else goes from there.

postgres

there are no lists in javascript

True but that's how I have stuff and it's annoying that am stupid to not be able to get it

The way the dollar sign looks really triggers my autism.

How can I deploy a laravel "app" on a LAMP stack? Like the ones provided by Bitnami for AWS.
I can get to the "php artisan serve" part, running without problems, but that is not a production server, as I understand.

I know this sounds dumb, but my knowledge is mostly about software (non-web) development. The deployment procedures are very different, and I still don't fully understand all the parts of these bloatish, modular frameworks.

Doing a timed technical test for a semi-remote position. Three hours to do it, I took eight.
Welp, bet I'm not getting that job.

Most of it was easy enough but they wanted a SPA that took a provided graph and found every path between two points in a cyclical, undirected, partially connected graph. BFS/DFS/Djikstra only find the shortest/first path without modification and most modifications for them assume an acyclical graph. Kind of threw me a bit.

DigitalOcean has tutorials on deploying Laravel apps, but really all you have to do is point the webserver to the index.php file

Do they assume you remember how to do BFS/DFS/Djikstra off the top of your head? Is that something you're supposed to go into interviews prepared to implement on the spot?

It's done at home so I guess they expect you to google shit.

It wasn't doing that that slowed me down, that's trivial if you can google.
It was adapting it to find EVERY path instead of just the shortest. There aren't good solutions to that online.

knockout masterrace wadup

was this for a junior position?

what is knockout and what do you use it for?

>was this for a junior position?
It was for a "Full Stack Developer" role.
They only ask for two years experience so I guess it's just mid-level.

If you use PHP and you like it, please make blog posts about it and share on social media.

professional webdev and mobile dev are literally killing me. i don't know how you guys can stand it.

it's so bad i feel like going back to helpdesk.

Attached: 1523187808881.jpg (640x640, 39K)

share green texts why you hate it

Do you inform users about cookies?

Attached: sassas.png (729x683, 252K)

Here is a question for you guys, I'm learning html and css, what else can I learn that will greatly improve my web dev experience for the good?

Attached: 1527543826883.jpg (1024x577, 70K)

So say I want to have different forums, I'll use one single table with the different forum id's and that works fine. But what if I want to have a single posts table for all the forums but at the same time not share the post_id field so that different forums can reach (AUTO INCREMENT) a post with the same id and not conflict, how do I do it?

Do you have to spell the domain via the phone? Your example is either "stan el dot eu" or "stanleu, with a/the dot between the el and the u".
Do you expect people to remember the domain without misspellings? Cutesy domains with the words slightly changed are the worst for this. You may get alternate domains to cover for the misspellings however.
It's going to be used for something business critical? Then consider having an ordinary TLD (.com, .net, some non shit CC-TLD) in addition to whatever meme TLD you want. It has happened a few times with .io, a company uses the .io domain for everything, the .io stops resolving for no apparent reason, and then everything is fucked.

So you want to have like forum 1 post 2 and forum 2 post 2? and have urls like /1/2 and /2/2? You probably want a composite primary key then if that is what you're talking about.

That's exactly what I want, I'll look into it thanks

Either use your first name or a sensible-sounding nickname.

I use my business name since Im incorporated for freelancing.

I don't know what DB you're using but it's easy enough to specify a uniqueness constraint on forum_id and post_id together but it's a bit harder to easily get a unique serial number for the post_id based on the forum_id.
If your DB can handle that kind of complex serial number then no problem, otherwise you're making a few different calls and locking the table inbetween to prevent another user posting at the same time to get the same post_id. With enough load, that could become problematic.
All of that would go away if you didn't bother having post_ids increment PER FORUM since you could have one global serial number which the DB would increment for you automatically. It also goes away if you have a table per forum too.

If you're deadset on both those requirements then here's how I'd do it in the relational world:
There is no post_id field in the table. When the API retrieves anything to do with posts, the post_id is just the row number in a view on the posts table.
CREATE VIEW post_id_view AS
SELECT *, row_number() OVER(ORDER BY datetime_created, pkey) AS post_id
FROM (
SELECT *
FROM posts_table
ORDER BY (datetime_created, pkey)

Something like that anyway. Then your API just selects and filters on the view and the post_id should be stable I think. You might need to fuck with the view to guarantee stability.

You are probably going to want to use objects for that.

Here are two handy pages to check out
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors

Here are two ways I did it.

jsfiddle.net/fed3c083/

I went to college for accounting, but dropped out because I just didn't like what I was studying.

I've been thinking about getting into web dev because I'm tired of being a 25 year old guy working at a shitty bar. I've watched a few YouTube videos on html, css, and JS and it all looks really to me. I've been slowly learning html on code academy and I plan on learning css and JS after I'm done with html.


I'm just wondering, is it really possible to get a job as a front end dev w/o a degree or is that all just a meme?

Attached: lee.png (609x617, 712K)

Rails

>is it really possible to get a job as a front end dev w/o a degree
Yes

>I've watched a few YouTube videos on html, css, and JS
But you'd need to learn much more than that unless you want 3rd world code monkey tier salaries.

Nobody? I can't find a lightweight and portable enough SignalR-package for C++ and I'm really desperate, whereas there are tons of ordinary websocket implementations.