/wdg/ - Web Development General

Regular OP here, sorry for missing the last couple threads dying.

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 resources
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)

>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

>PHP resources
pastebin.com/gfBPg24A

Attached: wdg_fbi_cybersquad.jpg (1280x720, 405K)

Other urls found in this thread:

api.nasa.gov/
snack.expo.io/
git.io/vb4SL)
github.com/facebook/react-native/issues/21075
jsfiddle.net/zgsr3buy/1/
php.net/manual/en/function.chown.php
php.net/manual/en/function.chmod.php
lukesmith.xyz/
kylerank.in/)
github.com/iRaul/awesome-portfolios
w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll2
developer.mozilla.org/en-US/docs/Web/Events
developer.mozilla.org/en-US/docs/Web/API/EventListener
stackoverflow.com/questions/24217087/how-to-determine-scroll-direction-without-actually-scrolling
jsfiddle.net/4pojabgn/
developer.mozilla.org/en-US/docs/Web/API/WheelEvent
developer.mozilla.org/en-US/docs/Web/Events/wheel
github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js#L2847
twitter.com/SFWRedditImages

Weed dude. Head to Texas if you're wanting to get out of there.

Asking this again incase anyone knows.

Anyone know if the bootstrap 4 documentation is available as a PDF anywhere? I've looked but can't find anything.

There is a github project that has it in html files but that isn't what I wan't, I want it as a PDF.

WHAT THE FUCK DO I BUILD NOW?

What have you built already?

>a class should have a single responsibility
something that's easy to say, but impossible to implement. if you take this to the extreme you'll have 1 million classes. a lot of concepts like this are written by academics and it never goes anywhere.
for example design by contract in java was all the rage in java books 20 years ago, you never hear of it today.

I made a Twitter mass-tweet and mass-retweet app with LAMP stack. You add the API keys for your twitter accounts and you could to tweet/retweet via multiple accounts at the same time. Twitter fucked it up by changing their API though (now you need to apply for access and they review each request).
What do I build now? I want to do something with another free API

>t, I want it as a PDF.
then take the HTML page and convert it to PDF

Alright, honestly idk im trying to find out what to do too as I'm pretty new to all of this, but i just found out NASA has an api api.nasa.gov/ so maybe something with that?

send your selfies to NASA because you're a star.

Ah, not bad, thanks.
What paid services can you think of that does not have an open source alternative?
Might go that route instead of working with an API. But it might have to be something somewhat simple to build since I won't have many hours a week to work on it.

Asked this a couple days ago and I still don't know what to do after trying and trying

>react
>react-native-elements
I installed so many dependencies and I'm still getting an error where TouchableHighlight is an unexpected token in Avatar.js. I can even import TouchableHighlight to my own application and react-native-elements components still won't work because of this error.

post a jsfiddle of the snippet of code that's giving you a hard time so that others can help.

>a jsfiddle
not him, but doubt you can test react-native (a native mobile app) in jsfiddle lol

don't know man, I have some react-native apps... but never used the module you spoke of. link to the npm/github page of the module

Is there any way to get rid of the semi-colons from automatically generated imports in vscode?

Attached: Screenshot 2019-01-22 at 04.14.10.png (1144x558, 120K)

seeing as jsfiddle is ill-advised,try this:
snack.expo.io/

Ah I just realize I didn't specify the actual line of code that was triggering the error.
import { SearchBar } from 'react-native-elements'
It's the SearchBar element, but it can be other elemts too and it's the same issue.

open a issue on the GitHub

seems to work fine, you are doing something wrong...

I don't know why vscode devs like semicolons this much. They do provide the option to switch the quotes to double/single

Attached: Screenshot 2019-01-22 at 04.39.33.png (1764x386, 386K)

The thing is that I'm not even trying to implement it in my application yet. If I comment the import, then it works. If it's there then I get the Unexpected token pointing at TouchableHighlight in Avatar.js (Remember I'm importing SearchBar not Avatar)

I looked in the code for Avatar.js and TouchableHighlight is importing from the correct library. I can import this from the library in my own application and it will import.

It worked for me on the website, so it might be something related to a dependency issue.

post the screenshot of the debug log

...or create a new react-native project and install react-native elements to test it there.

If it works, then migrate your code to the new react-native-project folder lol

Ah I see that pretty much every element from react-native is an unexpected token for react-native-element now. I also see something about babel.
Add @babel/plugin-proposal-class-properties (git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
I saw a stackexchange thread a while ago that said something about babel but I skipped it. Can't find it anymore, but I'm just prototyping at the moment and using materializecss so I might just use something with that. I don't want to hijack web dev general with my problem anyways, but thanks for staying with me.

well, I'm using typescript version of react-native, so never run into this..

but maybe this can help
github.com/facebook/react-native/issues/21075

Do it for me

Hey all, quick question, I'm generating a list, I have some files, and the names are different based on the supported language and difficulty i.e 'primary-care-en-advanced' 'nurse-care-es' etc...
trying to figure out how to organize the files by supported type and diffivulty
in a database
I was thinking a column for a json string { language: 'en', difficulty: 'advanced' }
any other ideas?
should I just depend on the filename?

Thanks!

Attached: 752c3628.png (292x200, 15K)

If you're storing something in a database that didn't start out as json, from a system you don't control, in a json field, you're doing it wrong. You know the data you're working with. Give your data structure according to your knowledge. You're going to have to structure the data according to what data you're expecting to get, and how the data is going to be queried. Does it make sense to have a language table and a difficulty table, where whatever data set you're working with would have a foreign key to each of those tables? Would it make sense to have some further breakdown, where you'd start with the first part of the name (like "primary-care"), and a bridge table with a key to that row's ID, a foreign key to the language table, a foreign key to the difficulty, and a file path so you could use the combination of all 3 to get the file path, or get the file paths for any combination of those things (say, all file paths for English language, advanced)?

Separate tables for the difficulties and language then I can use that to build a file path, I like the idea, appreciated man!

configure your beautifier to remove semicolons during its format step on save

anyone got a clue here?
jsfiddle.net/zgsr3buy/1/

What are some cool things to do in javascript for my Portfolio?

I know React

>Is there any workaround [...]
Nope. Position fixed could work, and if you remove overflow:hidden it would work. But absolute and hidden won't work.
I'd wager there's a way to do what you want without absolute positioning and/or overflow hidden, but what do I know.

I have a folder located in /var/www/html directory, I have already changed the permission to access it, for both apache (coz, that's what whoami output) and my user acc. I am able to edit files and also access them on web but when I upload a file (in my case a video) through simple input it uploads the file to folder but it is not accessible.
I have already tried changing the folder permissions for both users like showed bellow, but that did not solved my prob:
chmod -R 775 /var/www/html/[folder]

In your upload script, change the ownership / permissions of the uploaded file appropriately

what is the next hot javascript meme?
is it still going to be react?

Does anyone have a good, minimal and most importantly, up to date boilerplate for React + TypeScript?
I tried configuring my own but honestly there is so many things to think about (babel, styles, webpack etc.) that I don't know where to start.

Is it possible your cgi server/mod_whatever is running as a different user than your webserver? Because that's the only scenario I can think of where that should happen.

isn't that what create-react-app is supposed to be?

Meant for

it is hosted locally via LAMP. cgi server says they are running under root@localhost SERVER_ADMIN

to make it clear, the content is successfully uploaded to server, but it is being locked, I do not have permission to open it unless I am root and therefore those files can not be displayed on the web

the stuff that needs to be displayed on web needs to go public anyway
set them to 777, whats the problem

>777

Attached: ycidWO8.jpg (243x300, 22K)

I have already done that, it just rewrites those locked files in folder, but again when I upload a new file it uploads it locked - not accessible

...

It is just a simple script just to check if it werks, which it does on windows..
..sorry for not writing it here I do not have access to internet on pc

Attached: received_383343405762650.jpg (2000x1500, 143K)

As I said, change the permissions and/or ownership of the uploaded file in your script.

It goes straight to the same folder where the code is. What do you mean??

I can't fucking explain this shit in Hindi, for fuck's sake. I've said it twice now, and I'll try a third time:
AFTER YOU UPLOAD A FILE,
CHANGE THE PERMISSION AND/OR OWNERSHIP PROPERTIES ON THAT FILE.

How the fk am I supposed to do that, it's written in php. With my undergrad knowledge I am not able to make a script which would change permission on the file. That's why I am asking here.
Thanks for pajeet reference, user. You did very well

>How the fk am I supposed to do that
Why the fuck are you asking me that, when the answer to that question is LITERALLY one google search away? Why aren't you googling this shit? Why are you asking us? What the fuck.
php.net/manual/en/function.chown.php
php.net/manual/en/function.chmod.php

>i've tried nothing and i'm out of ideas

Attached: 1493496429293.jpg (1920x2004, 116K)

Oh shit nigga, you know react but still don't have a portfolio done? lmao

I got a job without react tho. Do your research better, man.

I'm working on my personal resume site/blog and I'm looking for some minimalist site inspiration. By minimalist I mean limited to little JS bloat and mostly static HTML pages (similar to lukesmith.xyz/ or kylerank.in/)

I'm mostly designing my site to be a place where people can find my contact info/resume and a personal blogging site so I can share my retarded ideas with the Internet. I'm currently using Jekyll to generate the site.

Is there any way to differentiate a scroll up from a scroll down, using js, besides by measuring the page's displacement?

there is this github.com/iRaul/awesome-portfolios
many of them are overdesigned to such a degree, that it degrades usability imo, but some of them are quite nice.

Don't think so. Checking against the previous known scroll offset should do the trick like you said.

Nigga, ok. Build something yourself, and don't follow a tutorial

The thing is, I wanted to disable scroll and use the mouse keys/arrows to move an object around the screen. If I disable scrolling, I can't measure through offset

>NASA API
>oh cool, I should try building something in React with this
>"The component below demonstrates how to make an AJAX call in componentDidMount"
>wut
>doesn't even know where to begin in React
Man, fuck React.

That doesn't make sense. You want to check for up/down scroll, but also have no scrolling?

scroll-less website, animations of new conteng fading in and out triggered by scroll event

I wanna check for a scroll event, prevent the page from scrolling and instead use the event to trigger something else.
Thing is, I want the scroll up event and the scroll down event to behave differently

>prevent the page from scrolling
you don't need this, since you'll have all your content contained in the page's width and height

Maybe its bcs I'm a beginner but I can not wrap my head around how someone would build something themselves, like where do you start? How do you go about it? It just seems overwhelming.

some stuff will happen, then scrolling will resume.
as far as it's done, it's "working" but, as I said, both scrolls do the same thing which isn't really ideal

you pick random separate pieces from stack overflow and make them work together, top lel, no srsly, you'll have to build a lot of shit first to reach the point of being able to build shit autonomously

thank you for saying that. I always felt like a "fraud" when I did that.

Sounds like you are trying to force yourself to come up with some random ideas, that you don't actually like or care about in reality.
If you have something that you actually find interesting and want to build, then you won't have that problem guaranteed.
you could look at the fullpage.js source, if that's the kind of thing you are trying to achieve

that's how I built a mini CMS

idk what a fullpage.js is, I'm somewhat new to this whole webdev thing.
how does that help me with differentiating scroll up/down?

see how they did it, copy it, but my guess is there must be an onscroll event and it must return something

I might have posted this in the wrong thread previously, so I'll repost here, hoping you understand.
I recently have applied for a remote job and then, after reviewing my resume and shit, recruiter contacted me asking for a code sample. The job is a PHP/mysql developer, I know their product relies heavily on REST. What are some smart ideas I can implement and send it as a code sample? I am exhausted on this searching for a job marathon and I'm out of ideas. Could /wdg/ help me out here, please?

I just found this googleing, up your google game bro
w3schools.com/jsref/tryit.asp?filename=tryjsref_onscroll2
extra bonus:
developer.mozilla.org/en-US/docs/Web/Events

developer.mozilla.org/en-US/docs/Web/API/EventListener

>Sounds like you are trying to force yourself to come up with some random ideas, that you don't actually like or care about in reality.
>If you have something that you actually find interesting and want to build, then you won't have that problem guaranteed
Based and redpilled

well "bro", this solution is just using document.body.scrollTop aka measuring the offset, which is the thing I don't wanna use. This solution is the only thing that shows up when I google the problem, I find it funny how you think you're some kind of genius for finding this

Please scrap that nigger pic OP and use the real one, thanks.

Attached: cianiggers.jpg (1280x702, 131K)

there's also a whole list of events, some might be related to your question. You're right, sorry, but your sarcasm was a bit over the top.

How do people maintain a consistent visual identity across multiple platforms?

see if this is what you wanted:
stackoverflow.com/questions/24217087/how-to-determine-scroll-direction-without-actually-scrolling

that's the designer's work, it requires a whole fucking manual and many user cases, if new user cases are added they must be added to the manual, it includes things like corporative colors, accent colors, font colors, secondary colors, primary colors, different iterations of the logo, different sizes, etc.

What if it's an one man operation? Should I just commission the design?

If design isn't your strength then it might be your best bet. Once that said make sure you are comission it to a designer who actually has experience with doing this in particular, and also make sure to provide him with the confirmed user cases and potential user cases.

The answer is literally in the fullpage.js source (and also on MDN).
You aren't going to make it if you can't look that up.

Example:
jsfiddle.net/4pojabgn/

Docs:
developer.mozilla.org/en-US/docs/Web/API/WheelEvent
developer.mozilla.org/en-US/docs/Web/Events/wheel
github.com/alvarotrigo/fullPage.js/blob/master/src/fullpage.js#L2847

Alright, thanks.

make sure to show us the result, I fucking love me some web design

I'm trying to make a blog site where one user has the ability to create blog posts and each post can be anonymously commented on. I don't do any web dev so in my research I've found bootstrap and some random api called NicEdit to allow the blog posting user to add images and links and such.
My concern is implementing a way for the main user to create posts without it being vulnerable to any attacks. I feel like if I have a webpage on the server that's the form for posting the blogs, someone will be able to access it and even if I password protect it I don't know enough about web development to be confident that no one can gain access and make beligerant posts.
My idea would be to have a javascript program that can be run off the web server, and add blog info to the JSON file holding the blog posts. But since JS is a front end language, I think I would need something like node.js to modify backend files from off the server.
My problem could be solved by going about the whole build differently, so any ideas are welcome

> I don't do any web dev
Check the roadmap and maybe the video in the OP.
It's good if you have a goal to work towards, but I'd put that aside for a few weeks at least, while you get the fundamentals done.

Attached: developingatincrediblyhighspeeds.png (824x553, 130K)

It's an ugly ass auditing/inspection system that suffers from every evil that a small company without a professional designer can come with. From having an original version in Delphi, to having two different web versions in ASP.NET WebForms. It's ugly as sin, it has terrible UX and it's a pain in the ass to maintain.

I wanted to do something uniform that I could deploy with the same UX and visual identity across all platforms. The problem is that I'm the only one on this project and I don't really have time to innovate or be creative. It has to be something lightweight that I'm able to customize for the multitude of clients that use this software.

Right now I'm just trying to find something that is consistent, lightweight and not ugly.

make sure to let your designer know that you want the design to be lightweight as well, so he doesn't overload it with gradients, shadows and things of the sort

JSON.stringify(array of strings) is being sent/received by my Go backend as:
["["John", "Sam", ...]"]
i.e. the inside array is actually just a string and the names aren't individual strings like they should be.
Why is this happening and how can I fix it, either in Go or JS?

i dont get it
>JSON.stringify([`["John", "Sam", ...]`])
'["[\\"John\\", \\"Sam\\", ...]"]'

why use bootstrap if css grids exist

Is the AWS Developer Certificate worth doing?

why use cars if motorbikes exist

Post the actual code section where you stringify and send the JSON and also log what the JSON is just before you send it.
How is anyone supposed to help you with that little info?
is that your code?

>is that your code?
i'm not the OP no
i just don't understand his problem

cos bootstrap make your site compatible with old browsers while grid doesn't

depends. are you a nihilist?

>CSS frameworks are only for responsive elements
I imagine something like that is happening. You don't just get another array out of nowhere.

Attached: w.jpg (824x553, 170K)