Artisan JavaScript frameworks edition
Previous Thread:
>Free beginner resources to get started
Get a good understanding of HTML, CSS and JavaScript.
developer.mozilla.org
freecodecamp.com
codecademy.com
hackr.io
Start your own project, no better way to learn and stay motivated.
>Further resources
developer.mozilla.org
github.com
youtu.be
jsfiddle.net - Use this and post a link, if you need help with your HTML/CSS/JS
d3 is pretty cool. I'm currently messing around with it for a project in my statistics class.
What websites should I clone to practice HTML/CSS?
Until you want some basic things like text not overlapping and then you're on your own.
a simple landing page for a small retail store
Why do you need AngularJS and such for frontend?
t. not webdev but curious
goatse.cx
They are JavaScript frameworks. It's easy to run JavaScript from the server now thanks to node.js and its popularity. Frameworks like Angular, React etc provide a structure to work off of so that you don't need to write so much code that other people have already written in order to produce an enterprise-level web service.
>Frameworks like Angular, React etc provide a structure to work off of
uhhh
Such as?
I understand HTML/CSS/JS what for, but frontend frameworks?
templeos.org
He just literally told you: to write much less code while getting the same results or better. Efficiency!
What do you mean, "such as"? React came from the Facebook team so if you want to build a site with the same rules and guidelines that they follow then you use React. Same thing for Angular, it's by Google so if you want to work with the same ideals that they work with, then the scaffolding for your own projects is readily available to import and utilise with Angular.
>It's easy to run JavaScript from the server now thanks to node.js
Are you sure you know what you're taking about? Why even bring up Node.js when you're talking about frontend frameworks?
I don't understand.
You need frontend frameworks for easier interaction with server?
And how do frameworks influence the final code of the page?
Fellas, I just started to learn PHP last January when I went into internship. I'm about to look for a job on back-end development now, but I am clearly lost on what I should be doing.
First off, I started to use Laravel and everything is pretty fine as far as I can tell. I made the basic stuff like controllers, event, the eloquent is actually pretty nice. In fact, this is the first time I've properly used a framework, we don't touch it here on our third-world university so it's nice having everything handed out. Anyway, I've made basic shit, but not sure how should I proceed from here. What do employers look for anyway, especially if I am a fresh graduate with no prior experience? The problem is that, I only started with web development just a few months ago and I'm not sure if I'm ready. I'm just starting to build a simple site with vue and Laravel and just plan post it on GitHub to show it on my resume. I think I got the basics down, but I'm sure this is not enough. Any tips would be appreciated. Sorry for the convoluted writing.
You don't.
Shut up.
Go look at the difference between vanilla JS code and frameworks such as React/Angular.
Is there any webdev who have some expierence in node and callbacks? All this async stuff is quite confusing for now
There is a thing:
for(var i = 0; i < req.files.length; i++) { //a loop that goes thru files
sha1File(req.files[i].path, function (err, sha1) { //this shit should calc my sha1 of a file and gives a result as a sha1
if (err) throw err;
if (fs.existsSync(uplDir+sha1)) {
fs.unlink(req.files[i].path, function(err) {
if (err) throw err;
if (err) { console.log(err);}
//console.log("file detected and deleted");
})
} else {
fs.rename(req.files[i].path, uplDir+sha1, function (err) {
if (err) throw err;
if (err) { console.log(err);}
//console.log('renamed complete');
});
}
In the sha1File function first parameter is a path and I provide the path with req.files[i].path, and later on I'm checking if the file exists (fs,existsSync) and if exists I delete the file (fs.unlink). The problem is fs.unlink() doesn't see req.files[i].path variable anymore even tho its in a loop. Any ideas or some tips?
shit, forgot the } after a loop statement and dont mind these console.log(err) was just testing stuff..
Hey everyone. I'm getting so frustrated with Bracket's poor performance that I'm looking for a new editor. I used Brackets because it automatically compiles my LESS files, but I'm sure that can be replaced with something else.
Could anyone please provide me with an up-to-date list of modern development tools? I'm basically asking what the pros use these days. I hear a lot of things about Gulp, Composer and that kind of stuff, but I don't even know what those are or where to start.
Is there anything better than D3?
>Chartist.js
>Chart.js
>Highcharts
>Pixi.js
>CanvasJS Charts
>AnyChart
>ZingChart
>Webix
>Raphael
>Anime.js
>Flot
>Livegap charts
>Shield UI Charts
>be me
>shitty manual labor job that pays 300 euros/mo
>get fed up with it over time and start a new webdev project for practice
>get super motivated for 2-3 months
>look at job listings
>instantly kill all my motivation because all of them require a degree
>make peace with my current situation
>rinse and repeat
it has been like this for 6 years now
Same here. I like web dev and programming, but I made peace with myself that it's going to be a hobby and nothing more.
I need to render a node graph (like pic related) as part of a web app. Individual nodes must be draggable and nodes can be connected with edges. The style needs to be consistent with the rest of the site.
Do you think it would be better to do this in the DOM or in the canvas? It seems to me like individual nodes would be easier to implement in the DOM since I'd be able to style them however I like with CSS, but the interaction would be easier with a canvas. I have no idea how I'd draw the lines between the nodes in the DOM.
browsersync
that way it doesnt matter which editor is used
Composer is a package manager for PHP, allows you to install and require dependencies in your projects
Gulp is a task runner, it allows you to set up and automate "tasks" that can compile stuff like LESS, optimize images, etc. using NPM packages
You should try switching to VSCode and learning Gulp to set up a Browser Sync and LESS task
Just use emacs with js2 mode, tern and company mode for linting and auto complete
emacs.cafe
Get libraries from npm, bundle stuff and run scripts with webpack
I still suggest you give it a shot. I don't know where you live, I'm here in the Balkans so every listing here requires a uni degree but it doesn't hurt to apply every once in a while, especially if you already have a decent portfolio.
I'm too anxious to apply lel and I feel I wouldn't fit in either.
Thanks, I'll look into this stuff.
I know some of those words.
browsersync isn't that complicated you'll be fine cunt
>Go look at the difference between vanilla JS code and frameworks such as React/Angular.
Where?
Could anyone point me in the direction of a guide on how to create a SQL query for a database, based off values inputted through a web form?
believ in urself
hey google show this user how to create a sql query for a database based off values inputted through a web form
www.google.com
*filters every other thread on Jow Forums except wdg*
ah so this is how you're supposed to use this site
Why is Ruby on Rails so fucking gay. I've been working with RoR for half a year next to my studies and I'm getting fucking braindead. This shit is so easy now I understand why they hired me even though I didn't even know this cuck framework.
canvas, because i've done that way before
>filters
>thinks he can write a regular expression that match every accented letter
try harder.
If i really want you to see a thread I will.
does anyone use this og: tags in HMTL?
saw it on a website
yea i do for SEO purposes
I'm learning database design in SQL, can anyone answer me this. I have a bunch of tables that need their own address, those tables aren't really related to each other (say, apple table and car table). Should I make an address table for apple and one for car? Or is it OK to dump all my addresses into one big Address table?
have an address table and each of the other tables have a foreign key attribute to the address table
So, just one address table?
There is no code there
I have a few newbie questions.
How come everytime I look at common web stacks I see Node JS, Express, React bundled with MongoDB and rarely MySQL? Is there a reason for this? Can I still use MySQL or will I encounter problems?
Also, I'm not sure I understand the usage of CSS frameworks like Bootstrap. Are they to be used with JS frameworks like React and Angular or is it a separate thing? I was trying to implement Bootstrap with React but it didn't really work, doesn't seem like they are compatible with each other. I've heard about react-bootstrap but that seems to be something else entirely, not a CSS framework?
Do more side projects and apply anyways faggot.
Also, get a degree if it bothers you so much.
two days ago i solved a SQL query test in 5 hours with no previous sql knowledge. just googling stuff and testing out with xamp. You can do it.
>MongoDB
mongoDB is hot fucking garbage that's only used by queers who want to be on the "bleeding edge" fucking normies
if u wanna really be on the bleeding edge use cockroach
and yes mysql / postgres is totally fine and used in the majority of websites :)
yes 1 address table, other tables have an attribute that's a foreign key from the address table
This way you don't have duplicate addresses and it makes it easier for you to edit the addresses later on
triggered
only faggots use the word triggered, faggot
I know that I can link it to other tables with a forgeign key, my question is that I have many tables that require an address, but most of those tables aren't really related at all. Is it ok to have hundreds of thousands of addresses that belong to and are requested by many diferent tables
>verytime I look at common web stacks I see Node JS, Express, React bundled with MongoDB
That's not common at all
Common web stack is stuff like lamp
Don't use a document database like mongo to stock stuff other than documents, use relational databases to store relational data.
Boostrap is just a set of premade and standard css rules basically, it can save you time when prototyping and gives you common ground when developing with others
why the homophobia?
Filed a complain for micro-aggression to the HR.
Yes, imagine having different address tables all over the place and then having to delete or modify them.
Look at the Vue or React guides on their sites.
The main thing is declarative (reactive) rendering and using components to structure your site.
sounds like you are on the right track and don't really need to change much, if you want a PHP job, as long as you continue to learn and build things.
When people have a site that you can upload an image to what happens?
Like say Jow Forums, if I upload an image to Jow Forums does it go to the database and get saved there or does it go to cloudinary or something?
yes it goes to the archives, unless the threads is deleted or the poster posted some illegal shit
Just make wrapper functions to sha1File and the fs functions that returns promises.
Then use async / await.
async function g () {
for (let file of req.files) {
const sha1 = await sha1File(file.path);
if (fs.existsSync(path.join(uplDir, sha1))) {
await removeFile(file.path);
continue;
}
await renameFile(file.path, path.join(uplDir, sha1));
}
}
arrow functions, as they don't have their own "this" context (I think that's how you say it)
Still would put "req.files[i].path" into a var for clarity, if you use it in more than one place.
Generally it's absolutely worth learning how to do proper async with Promises and Async/Await, as it will make code much more readable and easier to manage.
Guess you'll have to remain unemployed then.
vscode is a great editor.
webpack is a good bundler, but potentially a but overwhelming at first.
Since version 4 it has much better out-of-the-box settings, or you could look at Parcel, which is another easier bundler. (with possibly fewer options)
>no job, but interested in webdev
>learn Vue and Node.js
>look at jobs
>everyone wants PHP and Angular 1 devs.
t-thanks Merkel
>not just applying with current work anyway
Man I had 2 sites under my belt and html/css/JS experience with a small amount of PHP knowledge, managed to land my self a Junior Dev role because I was a better fit than the other candidates as I actually had real world experience and not a degree.
Just fucking apply and stop being a bitch.
>does it go to the database and get saved there
Nah you only want to store image metadata in the db, not the image itself
Like if you store pics locally on the server you can store the image's name, format and file path in db so that your server can find it again and serve it when users hit /pics/imgename.ext for example.
On 4chinz and other big traffic and storage requirements sites media are stored on cdns or other 3rd party services, so you would store relevant info in your db on how to retrieve the pic when needed.
>callbackhell.com
good read, thanks
>giving excuses when you live in Germany
nigga pls
Got my job in web development after 5 months of hard work/studying. I mean 10 hours of research/videos/code every day. I still do a lot. I love it.
I thought webpack was just a bundler and minifier. Why do I need it to lazy load in react? In angular lazy loading is done through the modules not an outside source like webpack. Does this mean webpack also runs in the browser?
okay new concept coming right at ya
its like /wdg/ but like without talk of the general job market
CSS Grids and Flexbox
Wow, finally something sane. Any front-end use this? It really feels like I'm no longer tweaking with a pile of shit for positioning things.
Experience/Github > Degree
CS students are JUST as clueless as you.
Every 2 threads or so someone asks this exact same question almost verbatim
>I thought webpack was just a bundler and minifier.
Bundling assets is the starting block of webpack.
Your entry is usually the index.js or main.js of your site/app, and in there you will require() all kinds of other assets.
In webpack you can add loaders and plugins, that can process and modify those assets further.
One example that you mentioned is minification. Or maybe you require() some markdown and want to parse it to HTML for your final output bundle, or you require()/import some SASS/SCSS that you want to transpile to normal CSS, or you write ES8 syntax with Async/Await and want to transpile it to ES5 with Babel, or want to scan your CSS for unused classes and remove them with PurifyCSS/PurgeCSS.
You get the idea.
>In angular
Does Angular not also use Webpack?
In any case you usually need some build step to compile your React/Vue/Angular components to JS render functions, since a browser can't do much with Typescript, React's JSX or Vue's single-file-components
>Does this mean webpack also runs in the browser?
no
Yeah, learn it. It's good.
Learn a few CSS frameworks too if you want. Don't ask me which, just google the most popular ones.
No need to dive too deep into it, but it helps to know.
Best project to do as portfolio piece for a full-stack position?
How about back-end position?
Cool.
Really a big change from 6 years ago where we still relied of clear float and a ton of hacks
>Any front-end use this?
literally everyone to escape from float hell
if you want a deeper dive into css grids, wes bos has a free course you can learn some new tricks from
Network > Social ability > Experience > Anything else.
It doesn't matter how good you are if you're a raging asshole, HR will gloss over you. Same goes for if you're competing for the role against someone who has been recommended by someone from within.
It's why CS students tend to have the upperhand, unless they were completely isolated, they attended events and go to know people and then get recommended.
If you don't know what they're for, you don't need them.
Front-end requires them for a reason, I want to understand, why.
why does it improve SEO? what does it stand for?
>requires
You mean prefers? Nothing really """"requires""" a frontend framework, but you sure as shit want to use it if you're doing any type of complex conditional rendering or routing.
With React you can seamlessly and efficiently(code wise) make things that in vanilla JS would be a total nightmare.
Think like spotify web player, you can browse through anything and it just instantly loads up no matter where you go. Even Google music player isn't that fast, Simply because React is just that good at doing that kind of react-routing around.
I'm sure there's a million other examples but you get the idea.
I'm c*mming
why do you censor words?
are you retarded?
Thanks
I gotta start learning them
Any reason i should not use aws free tier for a static single page site that won't get more than 100 views/mo? I'm planning on also signing up with a prepaid card so i don't fuck myself.
is that the 199$ font?
free tier is only 1 year, isn't it?
>Any reason i should not use aws free tier for a static single page site
Static sites can be hosted for free in various places like Netlify, Surge.sh, GitHub/GitLab pages, Zeit Now, etc.
Without being dependent on some limited free-tier thing.
no that's operator mono
idk if they'll charge for this font
>being late to m*m*s
chilling in cedar rapids am i right gramps
>can be hosted for free in various places like Netlify, Surge.sh,
are these reliable? i wouldn't feel comfortable hosting my business' website for free for example, what happens if netlify goes bankrupt 2 years from now?
anyone here worked with passport.js and OAuth?
why doesn't "proxy: true" work anymore for forcing a https URI?
You don't need a degree if you have a GitHub with working examples. Host your shit on free tier Heroku, AWS EC2, Surge, Forge, Now and even Netlify. Share your code, make your commits functional and with reasonable messages, make useless stuff like todo lists, twitter and instagram clones. Show your potential employers that you can write some fucking code.
Fresh graduates are clueless and ride their high horse straight to McDonalds. You'd be willing to work your ass off for a €1000 salary, they've been told that special snowflakes earn 100k at Facebook so they won't settle for less(unless it's McDonalds). Let's face it - €1000 salary is peanuts for developers who can write some fucking code. I'd pay three times that to a recruiter or someone who can refer such a person to me, because I'd make fucking bank on them. I don't care and have never cared about degrees, but I always include it as a requirement in postings I set up because I want people with chutzpah. People who can confidently say that they can code without a degree and live up to it.
I'm honestly more interested in learning AWS than free hosting
i mean if it's a business website that you actually want to gain traction on you wouldn't fit any of the free offerings lol
maybe for light stuff like html and css
but in my 10+ years of working in enterprise I have never once seen a non-degree developer working on backend development
html, css, jquery is usually where the ceiling is for "savants"