/wdg/ - Web Development General

>Previous thread
>Free resources to get started
Get a good understanding of HTML, CSS and JavaScript.
MDN web docs offer a good introduction (independent of your browser choice)
developer.mozilla.org/en-US/docs/Learn
freecodecamp.com/
codecademy.com/

>Further resources
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
github.com/kamranahmedse/developer-roadmap - Roadmap
stackoverflow.com/ - Developers asking questions and helping each other

>Tools
jsfiddle.net/ - Use this and post a link, if you need help with your code
caniuse.com/ - Check browser support for front-end web technologies

Other urls found in this thread:

jsfiddle.net/x04qscq8/
github.com/hongru/canvas2image
bbc.co.uk/news/resources/idt-sh/the_city_fit_for_no_one_raqqa_syria_islamic_state_group
jsfiddle.net/a9La262u/
css-tricks.com/snippets/css/a-guide-to-flexbox/
jsfiddle.net/x04qscq8/2/
jsfiddle.net/x04qscq8/3/
jsfiddle.net/x04qscq8/4/
en.wikipedia.org/wiki/False_dilemma
twitter.com/NSFWRedditImage

I'm looking for a good FTP client on Mac, preferably with a non-shit UI, preferably free.

FileZilla has been my choice for a while but I'm wondering if there's a better Mac client I have overlooked?

What's the best laptop for wedev and a workflow?

I've got a T410 but hate constantly having to change the window to go back from code, to terminal to browser and what not. Don't have enough money or even space for a desk monitor/pc. I use the ones at university and a big monitor helps makes it so much easier to do stuff like live reload and see the updates in the browser while coding because you can do split screen without the looking at tiny code but even then I want a good laptop for webdev stuff.

if you say macbook, tell me which one fagots

I would like to know this as well. I have an x220 which is neat to carry around since it is so tiny but the small size comes with lack of space in web work. I would like a hi-res MacBook or something else with a lot of display resolution to work with but those things come at a price.

I am writing a messageboard system in PHP from scratch. For posts it has the URI /post.php?id=[id of post]. How do I grab the post content of the post with that id?

What language is this?

I know that feel. I got a T430, but the first thing I did when I got it was get an extra monitor, can't live without it

Just get a recent Macbook Pro, and you'll be good.

Actually, I lied. There's no solution other than to get multiple monitors.

>Just get a recent Macbook Pro, and you'll be good.
Is there nothing else I mean the nub is great for typing and moving the mouse quickly without having to move my hands so much


and i just typed this all out

>select * from post where id = escape($_GET[‘id’])

can you guys keep general purchasing advice on other threads
thx

Visual Basic :DDDDDD

...

>tfw sublime supports ligatures

Have a 50k AngularJS proyect.

How hard will it be to migrate to vue.js? Is it worth it performance wise?

inb4 >meme frameworks

I hate doing dev work on a laptop unless it's connected to my monitor at home so I have two screens to work with.
Get a 17" laptop so you can maximize on screen space, that's what I'd do.

>webflow doesn't work in firefox
Why live?

>50k AngularJS proyect
>50k

what

1. use chrome like a real man
2. design the real way without a gui editor u mongoloid

I don't think anyone is really able to give you an accurate answer to that.
Why not try to migrate a single component or small part of it and see how that goes?

I have a background image .png that I would like to use it to give some sort of "falling snow" effect on my website. Not with actual white snowballs though, but with whatever images I have in that .png file.


How do I go about achieving this?

does anyone else ever forget the really simple shit, for example in css have you ever had to do something stupid like align some text on an element and can't remember how and have to look it up?

is this normal or am i retard

I mean, if you really can't remember the align command you're kinda dumb but yeah that's normal. The idea that you have to look things up, I mean.

A huge part of programming is, after all, research.
But what differentiate professionals from copy/pasters is they truly do understand the code and how to implement it, change it, debug it, etc. So don't be shy to look things up, after having given your own shot.

Remembering syntax isn't just a requirement of good programming, but also a result of it. The more you code, the more you remember.

there's no way anyone is gonna remember every single css property and tricks on the fly. stackoverflow exists and it's huge for a reason. you're gonna have a lot of questions and there's a good chance it's already been answered before.

>is this normal
absolutely, but not for the example you gave. if you can't remember "text-align" then you're retarded because that is part of the absolute basics of the language, it's like saying you forget how to declare an array, you're supposed to know it no matter what

That was just a convenient example. the real life example was using a flex-box to align to separate links with space between, but yeah, thanks for all the answers everyone.

...

Google's home page automatically moves the page so that the search bar/logo is in centred if it isn't already.
How does it do this?

He only has one monitor, what a simpleton.

Use percentages instead of pixels. That or multiple media queries.

rocket science

Could anyone help me?
>jsfiddle.net/x04qscq8/

I have this header which on resize I would like the "Web Developer" to move on top of "About/Projects/Resume"

But the problem is that, if you resize the window the menu doesn't just fall in right away. I would like it to simply disappear and reappear under "Web Developer" and stay there. Right now it just slowly pushes the menu as I resize and that's ugly.

Sorry, I'm just trying to understand how this works and if I can see someone's example it might be easier.

Throw out those floats and start using flexbox.
In the end it's also fine to just use a CSS framework (as long as you still know how to do things manually).

I will look into it

noob coming through!

I'm using this library

github.com/hongru/canvas2image


to generate png images from the canvas.

The problem is that, the fonts i use in canvas are not saved in the exported image

>e.g. on canvas i use Ubuntu Mono. When i export the image it comes with Times New Roman or some shit like that

Any thoughts how to solve this problem?

Something is fucky here, I can't get your media query to work. Don't really have the patience to debug it but your query isn't working basically.

It seems it was missing one last curly bracket.

Why don't popular databases also come as embedded versions?
That extra step of having to set up a server/daemon first, when ultimately I just want a single non-networked instance per app.

Does anyone have good books on the subject of typography to recommend? I really want to master web design, but I feel I lack in that department. To add, I wish I were rich enough to buy all the fancy fonts I want. Google fonts are so boring.

This is the most impressive page I've seen in a while. How would you even build something like this?bbc.co.uk/news/resources/idt-sh/the_city_fit_for_no_one_raqqa_syria_islamic_state_group

>not using prepared statements

>How would you even build something like this
press ctrl+u, read all the .js files

>not using binaries and instead choose php, python, or nodejs

lots of background-attachment CSS I think
jsfiddle.net/a9La262u/

>built with jquery
wdg btfo

>not putting a norton safety certificate image in the footer to automatically protect your site against all attacks

>duck typing an interface in typescript and never casting user input

How is java used in web development?

I have a ridiculously excessively ambitious web project idea planned.

How do I set up NGINX so that I can browse my JavaServer Pages while they're on my desktop?

wiki is built in .php - does that mean all the info, even article text, is pulled through via php requests into html tags and displayed on page loads? or would that bit be static and just stats or whatever be the in the database

It's just a shit ton of Parallax Scrolling. Not hard if you know how and where to position the different sections.

quick: how to i convert SVG to PNG in vanilla JavaScript?

Do people still use cookies now or is there another way to provide persistent login functionality?

look into token based authentication but you're basically doing the same thing just instead of saving a cookie you save a token in some form of client side storage

Look into JWT like said
You're gonna have to store it persistently, I recommend LocalStorage

You're a normal retard.

>bbc.co.uk/news/resources/idt-sh/the_city_fit_for_no_one_raqqa_syria_islamic_state_group
>bloated parallax dogshit
>HOW TO MAKE MORE WEBSITES THAT TAKE HALF A YEAR TO LOAD

Please don't.

Don't worry m8, I do frontend work and I forget shit all the time. Recently started using Flex a lot more and I've had to open a tab with info about it every day since then, just to give me a reminder of certain things.

for(var i in str){
if(str.charAt(i) == /\w/g) {
console.log("found");
}
}


I'm retarded, why doesn't this log anything? str = 'Test' in my code.

Is "i" a character index, pajeet?

That's not how you get every character of a string.
And that's not how you compare a char with a regular expression. Me is sorry.

and they keep dumping more data as you scroll, like twice as much as the initial payload. they could optimize the images through webp, too bad firefox still doesn't support it.

Yes.

Oh ok match() works, thanks. How do you get every character of a string?

What would you say to convince Sup Forums to learn your stack?

What are some good resources I can use to learn javascript? I did the codeacademy course but I still feel awkward with it.

As a fellow who's also sort of in the same stage as you:

>Code
>Research
>More code
>More research

It's that plain and simple... I'm probably different from you even since technically I'm still at "basic algorithm scripting" on FCC (I do know the basics of programming). But my curiosity to learn made me research about animations, effects, slideshows, etc. It all uses JavaScript, and it all teaches you to learn through building/projects.

I suggest working on (a)your website. Think about things that you want and soon you'll find out the techniques that they require. And then just learn as you build, it's more fun this way!

Well... at least for me it was helpful to "see" what I can do with my code.

What font is this?

50k lines of code, I guess.

You can look those up in 5 seconds, so there's no need to remember them. Save your memory for the stuff that is hard to look up.

You gotta use flexbox, bro. It's fucking easy.

css-tricks.com/snippets/css/a-guide-to-flexbox/

Don't abuse it though. Take it from me. I'm a noob, and after I learned it, I overused it. Sometimes inline or block display is all you need.

>This is the most impressive page I've seen in a while.

Can't see anything impressive about parallax scrolling in 2017, but I'm impressed with the amount of shitty code all over the place.

I managed to do the thing. Without flexbox, it took me some playing around with margins, %, width and stuff but it looks pretty smoothly. It's good, I learned quite a few things in the process.

I'll use flexbox for my next project, I also want to know about it yeah.

You can use a nodeJS package to do this, but it sounds like pure masochism.

tokens and localStorage

I agree with -- but I could see some application for a webpage JS converter. For instance, I could see letting users input SVG images into it somehow.

I think you should probably not look on Sup Forums for this, but at the SVG specification or something. Should be a way to convert them. Wikipedia does it.

it would be much easier than from React to Vue but 50k is painful

Can I use Java EE 8 with JDK 9? The version releases are ridiculously out of sync with EE. I think they must have trouble coming up with new feature ideas.

fixed your shit with flexbox
jsfiddle.net/x04qscq8/2/

>jsfiddle.net/x04qscq8/2/
Nice job.

you need to specify what it is that you want, you only said the links should go under the brand

jsfiddle.net/x04qscq8/3/

>needs consistent alignment and even margins specified.
Too bad that doesn't help me at all.

jsfiddle.net/x04qscq8/4/
i aligned everything for you, added some padding and added support for super small screens

the rest is up to you buddy, gl

I'm not at my work computer but if I'm not mistaken there's a js plugin that'll take the canvas and convert it to svg + your styles, then converts it to a raster image (png, jpg, etc..)

The thing your missing is importing / referencing the font before conversion to image. It's a bit of a hassle though.

Now that I have been employed for a few weeks, I understand why /wdg/ is super slow. I am swamped with tasks and there is no time to post.

Trying to use the mongodb shell, where am I going wrong lads?
> use hotel
switched to db hotel

> var user = db.bookings.findOne({"date":"2020-1-1"},{"user":1})

> user.user
ObjectId("59e5a7353453b1c8721c9a9c")

> db.users.findOne({"_id" : ObjectId("59e5a7353453b1c8721c9a9c")})
{
"_id" : ObjectId("59e5a7353453b1c8721c9a9c"),
"name" : "Data",
"email" : "[email protected]",
"pass" : "pass3",
"category" : "Patron"
}
> db.users.findOne({"_id" : user.user} )
null

> user.user
ObjectId("59e5a7353453b1c8721c9a9c")

It was because i initally stored the user's _id as a string. schemaless, weakly typed my ass

How's your first month been user?

Some font with ligatures, probably Fira Code

Why would you want to change your FTP client if you already have a perfectly fine FTP client?

Why does

work, but not

with asd.php being

can you do
?>

You are not hashing your passwords.

touché
It's a bit weird to leave away the php tags in a php file though. Let alone having no syntax highlighting because of it.

u're a fucking mong.

Do you also think i'm storing the information of data, the android office from the uss enterprise?

Not that guy but I expect to be fired soon lol

How do you guys setup vscode to work with JS ? Syntax highlighting isball over the place and trying to work with react doesnt highlight html correctly whereas sublime just works(tm)

It doesn't seem to work if the php file has no php tags either.

Not him, but I introduce you to
en.wikipedia.org/wiki/False_dilemma
Why not adding the hash system in the name of research?

I don't know a thing about MongoDB, but
var user = db.bookings.findOne({"date":"2020-1-1"},{"_id":1})

Enable error reporting