/wdg/ - Web Development General

Happy Edition

>Previous Thread
>Free 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)
developer.mozilla.org/en-US/docs/Web - General documentation for HTML, CSS & JavaScript
freecodecamp.com/
codecademy.com/
bento.io/
google.com - It's amazing, you should try it user

>Further resources
github.com/kamranahmedse/developer-roadmap - Roadmap
youtu.be/Zftx68K-1D4 - Web Development in 2018

>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:

gitgud.io/chiru.no/chiru.no/
4stats.io
browserl.ist/).
flukeout.github.io/
flexboxdefense.com/
financial-hacker.com/bye-yahoo-and-thank-you-for-the-fish/
modernizr.com/
github.com/mozilla/webextension-polyfill
developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension
twitter.com/NSFWRedditVideo

test

I need to test my web application for against crashes.

what do?

gitgud.io/chiru.no/chiru.no/

How can you stripe prestashop or opencart out of buying functions, so it can serve as a plain catalog?

do we drop project links in this thread?
4stats.io

you mean crash it and see what happens, or test if there are potentials for fatal errors anywhere in the code?

>test if there are potentials for fatal errors anywhere in the code?
this which causes the application to crash

>4stats.io

nice. I am impressed that Sup Forums is one of the most popular boards

>weeb website
>Sup Forums most popular

imagine my shock

Still getting into testing myself, but had 'Jest' recommended as a good testing-framework multiple times here.
Make sure try/catch blocks are in order, when using things like async/await.
TypeScript can probably also help.

This is assuming you are talking about a JS app.

its 4chans origin after all

>use react bootstrap
>doesn't work no matter what I do or change
>use the EXACT SAME THING in normal bootstrap using divs
>works


?!?!?!?!?

I'm this close to never using this shit again I swear to god

What kind of portfolio mini-projects are good for showing knowledge of jQuery and Laravel?

why would you want to show skill of specifically jQuery instead of just normal JavaScript?

what to do when you have to wait for Sup Forums to finish loading its json part (aka all the posts in a thread)? I can't use the normal event listeners such as 4ChanIniitFinished or the 4chanX versions of them. onload doesn't work either because it doesn't wait for json. I don't want to make a timer again waiting for 5 seconds and hoping for the best..

>Make sure try/catch blocks are in order
Not using them is one of the inexperienced coder's most common mistakes. As soon as you make a habit of using try/catch blocks wherever you can, the more robust your code will be on its first implementation.

Because that is what the job postings are asking for. I know all that is necessary for JS but they also ask for jQuery and I have no examples of that. These are PHP-centred positions (no bully)

Guys, where could I start reading to put all front-end shit together? to make a good environment to develop? I'm overwhelmed by all the options, transpilers, packers, linters, sth-ify's, etc. Don't know how to put all together just to start with some react, for example. Want to learn instead of using a pre-made boilerplate init cli.

I would say get a simple webpack setup going and manually add the things you need one by one.
At least that's what I did with Vue, since I also didn't want to use some scaffolding magic.

Meaning just get the a simple bundle going, then add a load for CSS/SASS, a loader for JS, that uses babel, set up a .babelrc file to specify what to transpile (you can use "babel-preset-env" and browserl.ist/).
Loader for React/Vue.
Then optimizations like minification and purifying CSS from unused rules.
Somewhere in between maybe get a dev-server going that auto reloads on source changes.
Guess it's obvious why boilerplate and scaffolders are a thing, but it's really ncie if you know exactly what the steps in your build are and how you can modify things.

>linters
would always just use a plugin in your editor.
Can't imagine why someone would go through linting output on command line

didnt work

Thank you user.
I started with VUE at the moment which seems to be easier to setup and amalgamate without needing to rewrite everything from scratch.
I do want to use some scaffolders, but not without knowing, or at least having a general idea of what they're doing.

So, i'm going to get a simple webpack bundle for whatever I find first vue-related, and test it adding/removing things. I think it's webpack the root of my confusion.
Thanks again for the response!

Anyone here ever use drupal?

We have it for our CMS and i cant figure out how to do anything in it. There isnt even a lot of training material online.

Make a currency converter and live currency monitor. I think you can get free access to Yahoo's currency API (there's a limit on the number of requests).

Just dick around in it until you figure it out.

>use spaces as indents in my text editor
>upload project to github
>spacing is all fucked

I've been hired for a Ruby job, and I don't know any Ruby. It's ok, they know this, I'm a Python dev and they said 'yeah it's fine, you'll just learn it as you go'. Having said that, I wanna hit the ground running. What are the best resources to learn Ruby (and Ruby on Rails later on)? Books, videos, etc. I have 3 weeks until I start this new position.

>I started with VUE at the moment which seems to be easier to setup and amalgamate without needing to rewrite everything from scratch.
Yeah Vue has the advantage, that you can use it with or without a build setup.
Someone who just wants to try it out can load it from the CDN, but for more serious use you can then add a build step, so you can use .vue single-file-components.

If you want a basic webpack config with vue, I can recommend using vue-cli with the webpack-simple template and look over that.
It sets up the basics of css,sass,js,babel,images,devserver and minification in one file, so you get enough examples and know how the loaders and plugins should be set up.

The Odin Project uses Ruby

Do you guys know more "games" like CSS Grid and Flexbox Frog?

I find this kind of shit really entertaining and educational.

Also, what's a good website to look for really entry level front end jobs as freelancer?

I really want to get a grasp of what can I expect to do in a real world scenario, even if I work for almost nothing, or even free.

CSS Diner
flukeout.github.io/

How many of you have actually gotten hired from self study

flexboxdefense.com/

How's the current state of PHP?

I'm asking because I've read in many place that it is in decline, but still widely used.

I have a friend that works as web dev, he told me the company he works for is probably making a PHP + Laravel course. He has mentioned a coulple of times that if I'm serious about web dev, he would hire me if I have the skills.

Should I jump into it? I think this course is a good chance to show myself to his company.

So far I only know HTML, CSS and JS. Went through codecademy, freecodecamp (mid course) and currently at Colt Steel's Udemy course.

I was. The guy who interview me said that most people who came for the job were bootcamp shitters who only knew the absolute basics of HTML, CSS, Bootstrap and jQuery. They never touched vanilla JS. Sad, considered how much money these bootcamps costed.

I'm looking to. There are a lot of small agencies around, not every company is like Google or Facebook when you need first-class honours in Computer Science to qualify as a lackey.

It's doing well, perhaps less so than JS but it'll still be a part of webdev for at least five more years.

PHP is shit, not as shit as it used to be, but still pretty shit. That being said it's still very popular, Laravel is a pretty comfy framework and you definitely should go for that course.

>I think you can get free access to Yahoo's currency API
Not anymore.

financial-hacker.com/bye-yahoo-and-thank-you-for-the-fish/

>'grid-area' wants coordinates in y/x format.
fucking why,
would x/y be too sensible for something that's CSS?

Read "the well grounded Rubyist" by black, it's a good read and will give you a solid foundation.

Honestly, you'll love Ruby, it's pretty much a mixture of Python and JavaScript with some cool gadgets.

has anyone used this before? Is it good?
modernizr.com/

I'm making a chat app with firebase.

How should I store the messages?
Unique keys or by converting an array firebase -style?

what will you build?

I have PHP interview today I need some tips guys.
And I am new in PHP,
but I have background Javascript, C# C++ HTML&CSS

post here the aftermath of the interview

What do you mean?

How did you get an interview for a PHP job when you are new to PHP?

Thanks for the input guys.

I guess I won't obsess about what's considered cutting edge and focus on shit that could land me a job.

You're wasting your and interviewers time. I hate people like you.

I'm self-taught and pretty old for the market (31) and I just landed this job

and do they know, that you are new to PHP.
How did that conversation go?

I wrote a wall of text about this some threads ago, but here's the summary: start applying right now, to EVERY junior position that asks for your main language. Ignore the years of exp bullshit, if you know the language apply. Hopefully you'll get some personal interviews and after that some technical ones. Whether you're way out of your league or not, that's their problem, not yours. You will learn so much from these interviews; not just about what to say in an interview, but about what the market actually considers hireable, about things you should know but don't, about things you didn't even know existed.

Does Ruby have an agreed-upon IDE, or do people just use vim or whatever?

what are you using right now?
vscode or any other good editor should be able to handle any common web-language just fine, with the advantage, that you don't need to switch between various IDEs for specific languages.

why?
I have PHP interview today
Yes they want junior developer
WTF why?
Yes they know, I just use PHP with Wordpress
I am new, but I build some project and display in git

Hello /wdg/!

Is there any way to run a css/js animation while resources are loading -
but only once at most - WITHOUT cookies or server side scripting for the current session?

e.g.: animation on very first load while images and css is loading but not animation on soft reload, forwards, backwards. if the page was closed or fully reloaded the animation may play again.

I can't get this to work. Is there any way, maybe by abusing the absence of a cached file or something like this?

I also tried a css animation in a within and a "counter" animation in the main stylesheet with an !important flag. This seems to work, but not reliably?!

Loaders are really boring to look at.
Maybe just some placeholders instead for the images, while they load in? Does it take that long?

Whats with the rpc meme? Isnt It an old things? Why come back now?

You can use local storage instead of cookies, but preloaders in general are shit. If your website needs them it means you should optimize it more.

this book is for Ruby2.2, the current version is 2.5. There's not a huge difference, is there?

but what you will do with ruby there?

Are any web dev courses on udemy worth it? Today is the last day of sale.

>Today is the last day of sale.
Mate, Udemy courses are always on sale. God help those who buy the courses at full price.

What are some things you would like to know about Node.js, /wdg/? I'm attending a meetup and would like to ask some questions to the group. I don't know much about Node and perhaps some of you guys don't know a lot either but you are interested about it.

The page is already optimized. The homepage comes in at ~340kb/desktop and ~140kb/mobile - including all resources. Quite well in my opinion. But I want the best SEO for my customer and I know that Google is an asshole. Google actually recommends to load the 5.8kb css deferred because it blocks rendering. Normally, you should never encounter the loader on this page.

The thing is:mobile speeds suck in his country. also - for legal reasons - my customer cannot use technology that stores information on a users device.

Ruby on Rails backend stuff, APIs

interesting, but what technical info could a node meetup group tell one, that you couldn't easily google as well?

This, just open Udemy in private window and buy whatever you want.

I didn't know that. But still is any of them worthwhile?

My problem is, like I said, I've done just the basic courses of codecademy and I'm just started the back end section on Udemy's course, so I'm fucking green.

My friend actually told me that people that are probably more green than me get jobs, so I just don't know where's the breaking point, the moment I say "Yeah, I know my shit enough".

But I'm pretty confident, I graps the logic behind things and I've always been a fast learner.

>so I'm fucking green

which is exactly why you should be doing interviews, in my opinion. Nothing better than a real-world technical interview to show you exactly where you are, and maybe where you need to go. Don't take this as a job hunt just yet, just take it as part of the learning process. Use these interviews as guidelines to figure out what you should be studying.

Just apply to companies on the other end of the country (if you're american) or in other countries other than your own (if you're european) if you don't want to look bad in front of companies that you'd eventually like to apply for real.

What legal reasons? You don't even "need" to put a warning on your site if you use local/session storage, unlike with cookies.

Just need to build side projects to add to portfolio, how do you guys get ideas for projects? I'm unsure of what to try to build.

Mostly using html, css (mostly bootstrap), react, node, would like to try using redux

A shopping cart app maybe? Stuff like adding and removing things from the cart, list of products that you can sort by name and price, etc. You already know react so you can use it, learn a bit of redux to manage the apps state and you're good to go.

Colt Steele's webdev bootcamps are considered by many to be fairly good.

I just wait and search and download them in torrent ou private tracker

I think I get what you want to tell me.

In order to really understand what I know and what I need to know I have to get in touch with reality.

That's my biggest doubt, "what they will ask me to do?".

I about 60% and I'm really liking it.

I could expand more if anyone is interested.

I have no fucking clue what legal reasons. I guess he wants to minimize warnings and terms of use while complying with the law.

The customer told me, in a very non technical way, that I "must not store information on the users device" and also not on the server (except for logs...). I interpreted that as "requests only" so everything that the browser does by itself when pointing to the source (without dynamic JS injection of course - but my customer would not even know that).

Technically sessionStorage is temporary only but it also stores information that is not requested.

This is tricky. I would not like to rely on this.

That is why I am asking for anything cache related. Because it is already there, like an image that gets requested on the first load. But I have no fucking clue.

Sorry for the incomplete description of the problem.

Is there any way?

what do you want to store?
>cache
guess you could load a resource via JS and differentiate between a 200 and 304 response if you really had to.
But why?

>That's my biggest doubt, "what they will ask me to do?".

Also, this varies greatly from company to company. I spent two months applying to every junior backend dev position available, and the coding challenges they'd send me were so different in requirements and difficulty. A lot of them sent me hackerrank or codility challenges, some wanted me to do django apps, other pandas stuff, some just wanted django rest framework, it was all over the place. Some I could ace, others I was barely able to finish the challenge. Some were time-limited (2hrs, 6hrs), others gave me a week to do the challenge.

Just get out there. If you fail miserably, so what? Are they gonna laugh at you? You're just another user trying to get a job.

someone wants something similar to cars.com, basically whats the best way of setting up a web app with a database ? preferably free/cheap?

Haven't been in the loop for a while, worked with Azure/C# and Php/Free hosting. What new memes are out there worth trying out? Heroku ?

"""""serverless""""" apps using Firebase/Firestore

I don't want to store anything. In fact "I must not".

I just want to play an animation only if the load time is high - because of a shitty mobile connection which I was told would happen a lot - but ONLY ONCE (until the window is closed).

The page is already optimized in almost every way, it is very small (by todays standards) 340kb/desktop and 140kb/mobile and simple and does use less js than most pages in the late 90ies. It has big picturues which are required.

The typical use of the page is hitting it once only. That is why it has to be fast. There is only one chance. I am quite happy with the result already. I just want to SEO as much as possible.

If I make a browser extension for Chrome it will work on Firefox and vice versa, am I right? They are using the same standard now if I understand correctly.

damn thanks for this, the guy wants iphone/android app as well but i aint got a mac unfortunately...

Webdev bootcamp is pretty decent, it's good if you're completely new but uses a few outdated things.

Git a web developer job is pretty decent one that I did after the bootcamp, teaches most of the more advanced things like file structure, naming, doing your own CSS/JS and setting up things like webpack/gulp

For $10 I'd say they're both worth it, if you're not specifically aiming for nodeJS things then maybe try one of the free Ruby/rails tutorials first as a lot of them include the basics of html/css/js anyway

kek

>if i make a android app it will work on iOS

Then what was the point of nuking FF extensions few weeks ago?

are there any "Sup Forums stats" sites that show a graph of posts per hour? would be interesting to see how much legacy captcha deprecation has affected it

yeah, but if you're unlucky there might be some small incompatibility that probably won't take long to fix

like when i last checked, chrome.runtime.lastError was undefined in chrome when there isn't an error but it's null in firefox (so don't explicitly check it for undefined but just pretend it's a boolean)

if you make one for firefox using browser. apis which use promises instead of callbacks, you'll want this to use it in chrome: github.com/mozilla/webextension-polyfill (i heard firefox supporting chrome. which uses callbacks was just a compatibility hack and won't be there long-term)

it's illegal to answer a question you don't really know the answer to

developer.mozilla.org/en-US/Add-ons/WebExtensions/Porting_a_Google_Chrome_extension

(me)
oh, i thought this was /sqt/ and asked my stupid question here

I wrote a php page to validate login information that works perfectly on localhost xampp but always gives an HTTP 500 error when I put it on nginx HTTPS. Has anyone dealt with shit like this before? I'm stuck

different browsers = different implementations

For example in Chrome you want to do X, so you have to do Y and Z
in Firefox , you might need D F and E

small size and fast load time is good, but there is no relation between a loading animation and SEO.
If the data is cached, then the loading animation won't have enough time to play anyway, right?

Or make low-res versions of the images that are inlined and then load the normal-res versions afterwards.

>That is why it has to be fast.
>It has big picturues which are required.
pick one

check permissions in the config file?

FIRST FOR LARAVEL

The 340kb/140kb is with the pictures. I am OK with that. These pictures are huge. Like 2000x500px ...

Actually, I think - I have no definite proof - that Google does SEO based on the so called "first meaningful paint". You can use the "audit" feature in chrome/ium.

It is really stupid: Using inlined animations I can draw something without the external css and get betters results on the audit. But I don't want to draw this every time, rather I'd like to have it only once.

>140kb is with the pictures.
oh what.. don't add a loading animation for 140kB.

I mean if you really have to, then I would probably inline the loader-animation in the html and bundle all other assets together in one single JS output bundle, which then hides the loader once it's fully loaded.

and don't take pageSpeedInsights too seriously.
Googles own page doesn't even score that high.
It actually encourages bad practice I would say, if you believe it, that *any* asset loading should be deferred, just to satisfy its weird speed requirements.
Google lighthouse audit from the dev tools can be useful though.

My customer is in a country where GPRS speeds are still quite common in rural areas.

I don't believe in preloading any resource that is deferreable. However, using the technique on at least one resource - even if your page is small like mine - will take your score to new highs - and I strongly believe that it changes search results.

I totally agree that deferring 5.8kb of css is stupid, but Google says it is better.

However, I don't seem to get an answer for my question which was "animation only once without cookies/storage?" so it does not seem to be possible. I have not found anything useful for cache abuses either. Does not seem possible with js.

Turns out I don't have permissions to write to /var/lib/php/session/*. I was playing with permissions, couldn't get it fixed. Even said fuck it and chmod 777 it and still gives me permission denied. PHP 5.4.16

Yeah, it's not possible to run an animation only once and never again after reloading without having some way to store the information that it ran once already. I don't know what country your client is from, but I seriously doubt there is a law against using local storage.

I will discuss sessionStorage with him.

localStorage for me is the same as a cookie. It gets saved and stays if not deleted. sessionStorage could be OK as it is not saved at all but it was not included my orignal understanding of his order because it is not a request either.

I would like to thank you anyway.