/wdg/ - Web Development General

Previous thread: >Beginner Roadmap and Overview
github.com/kamranahmedse/developer-roadmap
youtube.com/watch?v=UnTQVlqmDQ0

>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 to HTML/CSS/JS and Node.js or Django
freecodecamp.org - curriculum including HTML/CSS/JS, React, Node.js, Express, and MongoDB
javascript.info - curriculum providing a strong basis in JavaScript

>Further learning resources and documentation
developer.mozilla.org/en-US/docs/Web - excellent documentation for HTML, CSS & JS
hackr.io - crowdsourced collection of tutorials from across the web for learning languages and libraries (ignore sponsored stuff, look at upvotes)
learnxinyminutes.com - quick reference sheets for the syntax of many different languages (generally not sufficient on their own for learning something, but very helpful)
pastebin.com/gfBPg24A - Collection of PHP links.

>Asking questions
jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS
3v4l.org/ - Use this and post a link, if you need help with PHP/HackLang

Attached: 1520763440985.png (1280x720, 180K)

Other urls found in this thread:

w3schools.com/css/css3_animations.asp
zendev.com/2018/10/01/javascript-arrow-functions-how-why-when.html
medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1
w3schools.com/code/tryit.asp?filename=G4Q1SQ6CNPOT
twitter.com/SFWRedditVideos

do people really still use the internet lmao

Phalcon

typescript

Redpill me on Redux, what's the point

I want a tooltip to show up (after a slight delay) when you hover over part of a child component.

Should I have the child component emit a hover event after a timeout then have the parent immediately display a tooltip, or should I have the child emit the hover event immediately then have the parent display the tooltip after a timeout? Which approach makes more sense?

Redux is a pattern for managing application state. If you do not have problems with state management, you might find the benefits of Redux harder to understand. Some UI libraries (like React) have their own state management system. If you are using one of these libraries, especially if you are just learning to use them, we encourage you to learn the capabilities of that built-in system first. It might be all you need to build your application. If your application becomes so complex that you are confused about where state is stored or how state changes, then it is a good time to learn Redux.

yes it's possible 100% CSS, transitions, @keyframes or some shit like that:
w3schools.com/css/css3_animations.asp
so step based attribute manipulation, like keyframes with attributes each.

Just add a show class immediately and use css transitions to time the delay, fade, etc

thank you for copy pasting user

why even events and not just the CSS ::hover selector?
sure

hope it helped

>why even events and not just the CSS ::hover selector?

It's a canvas with complex fancy stuff on it and it takes some logic to identify what is the hover target, whether it's a valid hover target, and what should go into the tooltip. I pack all that up into an event and send it off to the parent.

ah alright,
then since you want a delay I guess it's better to emit the event after the timeout, otherwise you might emit events unnecessarily in case the element gets hovered but then the mouse moves somewhere else again.

Yeah that makes sense, thanks.

I'm going to try React Hooks in my new project after being a Redux user for quite some time now, wish me luck.

Attached: UyQVhKc.jpg (720x960, 98K)

Is Pluralsight worth it lads? I am an intermediate level front-end developer and would like to reach advanced level.

Attached: 24e9b15c99358437a0d7498b35f3a86b3d175828_hq.jpg (509x1024, 59K)

Thank you

Any continuous delivery people here? How does it work with two pipelines? Let's say you write some front end code that requires new back end code to work. You have one pipeline for front end code and another pipeline for back end code.

You push your front end code, but not your back end code. Your front end code passes all tests, because it's not using the real back end, but if you deploy it, the front end code won't work because the back end code isn't ready.

Oh, could you use feature flags for this? You just keep the feature turned off until after you push your back end code? What do your companies do to handle this problem?

feature flags are great. integration tests too.
write tests. not too many. mostly integration.

do you know vanilla-js? Do you use some frameworks?

Can i write SPA with pure JavaScript (no frameworks)?

sure why not

what do you think those frameworks are written in?

which one?
const foo = () => 1;

var foo = function foo() {
return 1;
};

function foo() {
return 1;
};

zendev.com/2018/10/01/javascript-arrow-functions-how-why-when.html
medium.com/@charpeni/arrow-functions-in-class-properties-might-not-be-as-great-as-we-think-3b3551c440b1

Thank me later

3.

>1
foo is a function, not a const, so 1 is shit.

>2
same as 1, but also var is cancer.

typescript

?

Has anyone ever seen an actual site of any type which offloads image hosting to a free service like Imgur or whatever?

Attached: ba3.png (712x516, 289K)

No need for that. S3 is cheap.

I'm interested in image curation, actually. Namely, for a way to weed out shit like CP some cuck might upload way before you can get online and deal with it. Image hosts have at least some measure of moderation (pajeets galore, I imagine), but file hosts would nuke your site rather than delete an offending pic.

>IM SILLY

Yes I am pretty good at vanilla JS.
No I don't use any javascript frameworks.

feature flags are not enough

you should have some kind of contract between the front end and the back end - separate repository for the actual API spec

3 in general
1 if trying to preserve this without .bind

don't worry there's a person who posts the word typescript every 50 posts to keep it relevant

it's shit and you probably don't need it. use mobx but you also probably don't need it.

I prefer frontendmasters. Pluralsight is kind of dated.

do you have a job? Can you get a job doing pure JavaScript?

>some kind of contract - separate repository for the actual API spec

Any links where I can read/watch more about this idea? All the CD stuff I can find on google only talks about 1 pipeline.

(Cross-thread)

Yo I'm back zibba

Any ideas how do I trick it to play animation when I transition from fixed height value to auto

Are there any guides or courses that will get me up to speed on Wordpress dev but from the perspective of a dev coming from stuff like django, rails, express, golang etc? It all seems so alien to me.

Oh, I see. Well, we didn't do that at my old company, but as long as imgur or whoever's api gives you all the control you want over your media. I don't see a problem with putting your images there. In fact, kinda sounds like a good idea.

(cont)
for instance how does the workflow with ftp shared hosting and git work?

I'm taking a udemy course on HTML/CSS and I feel like I grasp most of the ideas, the problem is that I suck at applying them. Copying and pasting the code from websites I build along with an instructor just feels like cheating. I've been doing this stuff now for about 3-4 days and about 8 hours worth a day.

Do you guys recommend anything to help me get over this hump?

Hi everyone, I'm thinking about working on a new project. I currently just built a MERN app (the M is actually mysql), and I'm thinking about making something that would look good on my resume.

Should I make a real time chat application? Or should I make a message board?

Another option I was thinking about was making an online game, which I would probably find the funnest since I can actually use my knowledge of data structures and implement cool things like quadtrees, spacial hashing, and maybe A* (if I can figure it out)

Which do you think will help me land a job? Btw, I just turned 20 two days ago, and I'm in community colllege

Could you send us a screenshot of some of your work? It's hard to know how to help when we don't know what your abilities are. One technique I like to use is to take a minute and draw out what you want to make on paper before you go to implement it. Also, it helps to give everything a class name and then style it out to hell. Also, flex box is your friend.

Also, did you really need to take a udemy course? You can find a ton of tutorials on youtube

Please send picks :3

dont ever copy paste
if you must copy, type it in directly

One thing that will help 10x is to never copy/paste when doing tutorials. Always type it out as cumbersome and redundant it may seem.

this right here
if you see someone write some html/css/js, if you want to learn it, don't copy it but actually write it out yourself.
Ideally try to reproduce it without checking line by line and only compare it after you have finished that short block of code.

How many online game companies are there? If you wanna get a job, don't waste time doing that.

You're totally right. But if I can make a really nice game that is real time, has nice UI, and is extensively written in JS (both front and back end), then wouldn't that make me seem like an expert?

it provides a global top-down approach to state management in react apps. most of the time you won't need it but if you find it hard managing your state it can be very useful. It has a good debugging tool as well

the videogame will help you stand out, my advice is to make the three things in this order. message board > chat > videogame (for 2 online players minimum)

I'd say pic related is the best I can do so far. I'm trying to avoid things like flexbox and grids for the time being because I want to know the barebones stuff well. i am not the most creative, so I struggle if I just open up an html document and start coding.

Also, did you really need to take a udemy course? You can find a ton of tutorials on youtube

I agree with you for the most part, but the guy I watch on youtube also made a udemy course and it's very organized and concise. That's worth $10 for me, just to have all of the information there so I don't waste too much time wading through garbage.

If I'm watching someone build a site, I will follow along and comment some notes where I see them fit. I'll often forget somethings relating to floating and doing inline stuff though-- I'm guessing it's stuff that just comes with more practice and experience.

Attached: hotel sample.jpg (1863x942, 210K)

>I'm trying to avoid things like flexbox and grids
flexbox is barebones stuff.
Styling you will acquire over time don't worry.

Actually, you're right. If you make something like lichess.org or agar.io, or even something simple like tic-tac-toe. It's just websockets, which is the same as a real time chat application. Plus you can easily have all the standard boilerplate on an game site (users accounts, a db, etc)

If you would have more fun doing it, then do it.

>flexbox is barebones stuff.

True, but it's still the next step to where I am. I thought it'd make more sense to learn how to do things using float and all before using flexbox.

>Styling you will acquire over time don't worry.

What do you mean by this? Actually better at coding CSS or just getting an eye for better design?

you're right, floats/positioning > flex > grid is the way to go, the new to the old, so if you ever need to provide support for older browsers you'll know how to do just that (floats/positioning)

>avoiding flex, grid

As a formerly employed front end dev, I can authoritatively tell you that you are doing it wrong. When you're cssing anything, you always have to start with the layout of the page, which is what flex and grid are for.

Only then should start worrying about stupid shit like background color, or border radius.

>floats
Oh god. Is this what you consider barebones css? floats are not like a NAND gate upon which greater logic (such as flex or grid) is constructed. Floats are just shit. You should avoid them as much as possible. Floats have only one purpose in the modern age: if you want to put an image in the corner and have text wrap around it. That's it. If you're paying for a udemy course and the guy is telling you to use floats, you need to get your money back and run, because that shit is horribly out of date.

skip float, don't bother it's utterly bad practice to use it.
Flexbox does everything better and has universal support in all browsers nowadays.
>eye for better design?
this

Not sure if you're still here, but on chrome if you go to the console tab, click on the dropdown in the top left(should have top selected), and you can choose an extension or frame. This will put your console in the context of the selected extension/frame.

>Can you get a job doing pure JavaScript?
No.

Will a bachelors degree help at all when it comes to front end jobs?

yes

>Will a bachelors degree help at all when it comes to front end jobs?
What kind of degree?

Like applied math, statistics, some data science stuff like R and SAS.

Having a degree in math would help, but if you don't have any prior experience or work then be prepared to get out matched by some design fag who knows a little React if it's for a pure front-end role.

I was pushed very hard to go to school by my mom and ended up liking webdev a lot, starting my senior year with applied math and honestly couldn’t care less about it. I’m planning on applying for front end junior dev stuff right out of school. I have a portfolio page and all.

good night /wdg/

Attached: YrXbtSE.jpg (1803x1351, 388K)

What are some tools or technologies I should learn if I'm a professional backend dev that wants to expand my skillset? I've mostly just worked with Springboot Java services hitting relationship DBs

Bump

If any CSS pro can tell me how can I make the "unfold-v" animation works I'd appreciate it:

w3schools.com/code/tryit.asp?filename=G4Q1SQ6CNPOT

When did you realize that Javascript was retarded?

Attached: nigger.jpg (237x186, 9K)

What should I use for backend development? Java or Python?

>var n={"test":1};
you're disgusting

Objects aren't copied on assignment. Both variables reference the same object. When you mutate the state of that object via one reference, that change is visible to all references.

I don't think that's that surprising. What language have you been using that copies objects on assignment? (There are languages that do that, they're just not as common.)

Can anyone recommend me some tools or give some advice on how to test fronted js and html templates using mocha.js?

I need to build a calendar but I'm algorithmically retarded.

>Calendar
>Events scroll from the top, 9 am, to whenever at night (done)
>when two events are next to each other then split in half,3 events, thirds etc
>if there is an event at 9am in 3rd position that goes to 10:30 then the first event at 10:30 should nicely fill up the other 2/3s

Essentially, how do I ensure they don't overlap and nicely fill the remaining space?

I'm losing my skills FAST due to increased drug use and depression. Fuck it's a struggle to write basic SQL queries anymore.
It sucks bros it really sucks what I did to myself

What kinda drugs?

Before jumping into node and mongoDB I rather want to get used a bit more in react. What's a good project idea that isn't a to-do list and takes a bit longer?

Don't worry, my bro. No matter how bad things get, suicide will always fix it.

>mfw this does not work in latest Firefox

.toolbar-1t6TWx > div[aria-label="Text 1"],
.toolbar-1t6TWx > div[aria-label="Text 2"],
.toolbar-1t6TWx > a[href="support.thing.com"]
{
visibility: hidden;
height: 0px;
width: 0px;
margin:0;
padding:0;
}


HOW
it is 2019

>he doesn't understand pointers

is this your first language?

Why visibility: hidden and not just display: none?

Because they need to "exist".
Anyway I realized issue is not that but actually some weird bug when Shitfox puts flexbox items outside if viewport for 0 reason

Use HATEOAS and have the client discover which services the API provides.

>Binding functions is much faster than using arrow functions
Is it still the case? I mean, that article is from 2017, I just run some tests and unless I fucked up, arrow functions seems to be even a bit faster than binding.
I remember Object.freeze also having performance issues at some point, but it's now fixed.

Words from someone that helped develop the V8 compiler: don't bother trying to outsmart the JS engine. You shouldn't be caring about what kind of for loop to use because the engine shows better performance on one. By the next version it could be negated or end up being the opposite. That's not even taking in to consideration that there are more than one engines which perform well and bad at specific tasks and a huge amount of hardware and software configurations.

So yeah, use whatever you think makes more sense. I would lean to ES2015 arrow function binding spec.

is there anything like digital ocean that doesn't charge you when your vps is shut off but retains state?

At what point are you good enough to start applying for entry level webdev jobs these days ?
I know HTML5/CSS3 on a very comfortable level, javascript still pretty much beginner and a little bit of SASS.
Would I need knowledge of Node.js or something else before I become interesting enough for employers ?

can someone tell me what this even means please?

I'm trying to connect to a mariadb database (hosted on aws) through ssh with a key file

same key works when connecting to the ec2 instance, I don't understand

Attached: a.png (449x212, 23K)

Formerly employed front end dev here,

When I quit my first job after 1.5 years, I looked at the personal project I did before I got hired and basically had to re-factor all of it to get it to an acceptable level (based on all I had learned). So, you could say my html/css/js was all beginner level when I got hired. However, I also had beginner level knowledge of React and Redux - classes, component life cycle, reducers, etc, so I would at least add that to your knowledge base.

>html5/css3
Referring to html/css as html5/css3 is kind of a red flag for me. Makes it sound like you're new.

>knowledge of node
Think of node as a javascript interpreter for things that are not a browser. You don't really 'learn node'. You learn javascript and if you need to run that javascript outside of a browser, you run it with node. Node provides a library of functions that I guess you should be aware of, but aside from Path.resolve() and the __dirname global variable, I didn't encounter any Node specific stuff in my front end work.

Do you push your shit to github? That's something you should know how to do.

PS: I am already using a public, OpenSSH key
not to mention I've tried every possible format I could feed the connection, none worked

one day i'll finish

Attached: browser-2019-06-02.webm (1790x1111, 1.29M)

The fuck? No way I'm going to start learning react from scratch, that shit looks so fucking messed up. It'll take me months.

What's the next alternative? There's gotta be one. Something not complex

Ok boys, I've spent all of my NEET day googling CI/CD and multi/mono repos, and I still have no idea how the fuck I should structure my repositories or how to automate my building and deployments.

At my old work, we had separate repositories for backend and frontend. We pushed one and then the other. The changes were picked up by separate pipelines and deployed to our test environment. In order to push to production, we had to communicate with each other to make sure the backend and frontend were all up to date. If so, we'd push to production.

According to what I'm reading, we were following an Agilean model. A few times a month, everyone would stop what they were doing, wait for that one guy to finish his part, and then prepare a release to production.

According to what I'm reading, I should follow a CI/CD model, but I can't find a satisfying explanation of how it's a system that doesn't ultimately have the same problems as what we were doing at my old work.

The alternative is Angular, but Angular is 1000x worse than React.

no fucking way. How am I supposed to get into this? It'll literally take me months to get anything useful done... what the fuck?? I'll use something obscure, like hyperHTML; I remember using that once, it was simple enough.

Even just looking at react code is too much. It's just fucked with "compose" and "redux" and whatever.

it takes like 2 days to get comfortable with react if you start with next.js. 1 day for vue/nuxt.js.