/wdg/ - Web Development General

your browser dev tools

Hi Jow Forums, I'm looking for some advice on approach so for those of you more experienced with front-end javascript and design I'd appreciate your feedback.

I want to create a portfolio similar to the homepage of this site: agence-me.com/us/ There are a lot of moving parts but my focus right now is to get the general structure but leave room for animations and customization later.

I'm thinking of using:
>Bulma CSS Framework
>Take Fonts and some color hints from the site
>Try and replicate the vertical sliding menu from source code
>Use VueJS for loading animations
>Try and learn Adobe AE (much later)

How do I start?

>using all these frameworks
>doesnt know where to start
yikes...

Learn JS before you learn anything else. Get good at JS before you even think about react. Stop trying to put the cart before the horse.

if you love boilerplate, go

Install React dev tools for your browser and start going through stuff in that. Consider tracing stuff or writing out events to console.

>... What
>I was putting -l
>Why putting -l in a post mean that I'm not knowing what I'm doing?
>Why shouldn't it work for you and not me?

Because obviously user, I know what I'm doing when I put a - in my post.

It's the old joke in IT:
>clueness luser goes to tech support and complains that their laptop doesn't work
>I rebooted it and it still won't work
>tech support reboots the laptop, it works
>well you can't just hit the reset button without knowing what you're doing and expect that it will just magically work

Obviously, if you know what you're doing when you hit the reset button then it will magically work.

what do you guys use for css/js animations

what kind

text, svg/shapes, and elements like changing a hamburger icon into an X or movements between those 3 dots you would have on a slider

That might be the most terrible reference to this old joke ever. Are you high?

>turn off javascript on my browser
>site is completely unusable

javascript is fucking cancer forcing developers to either make 2 completely different site layouts presenting the exact same content, or shoehorning everyone to use an anti-privacy technology.

When and how will this be solved?

Attached: 1353423401877.jpg (370x370, 25K)

>turn off javascript on my browser
hey here's a novel idea
how about don't?

you're just doing it wrong.

sorry bud.

I like NOTY for notifications, that's all I know

>he fell for the Stallman meme

To reiterate what everybody else said - get a handle on Javascript first before you do anything. Look up ES6 syntax as well if you're looking at getting into react - you'll need to know how to use it.

Regarding what react is actually good for, if you're familiar with the MVC model, React is the V - the view part. It's a super easy way to handle complex UI's. That being said, if you're still trying to get a handle on vanilla JS, don't even think about touching it yet.

>he uses sites that require js xD

non-dev here
how safe is to use a nulled wordpress plugin from piratebay?
anyone here did it?

>nulled
not really safe.
I know the ins and outs of WordPress and PHP quite well so a few years ago I would take nulled themes and remove the malicious scripts.
So, if you know WP and PHP well, I guess you could risk it, otherwise, don't. It's not worth it.

where do the malicious scripts usually reside? do they follow any pattern, any way to recognize them?

Why are you here then? Jow Forums uses js.
Are you only pretending to be retarded to get yous? Damn.
>xD

But that's completely wrong.
I guess you take some bloatware react+backbone+handlebars+modernizer+jquery+angular shitshow website as examples in your mind to make yourself comfortable with the idea that js is 100% shit but you're wrong.
I dislike js too, framework more, but don't disregard a whole programming language cause you've seen bad practice.
Or maybe you're a retard who can't into js?
I guess we'll never know.

It's never safe to get content from torrents, especially code.
no pattern, you'll have to read the damn thing mate.

I'm out of the loop as I haven't been dealing with nulled wp themes for a few years but it would vary, sometimes it's just a simple script in the functions.php file, sometimes it's scattered across multiple files, even have a directory buried deep within other directories.

For peace of mind, you shouldn't use one but that's just my two cents.

This is the most basic security checklist:
wpstuffs.com/detect-malicious-code-wordpress-themes-plugins/

but I honestly wouldn't solely count on it.

Are you doing this for yourself or for a client?

Anyone used the DigitalOcean free $100 credit offer? Or used DO free credit in general?
Can I register, use all my credit on like 20 months on the cheapest droplet, and then remove my credit card? Or will removing the card somehow terminate my droplets or something?

>mfw finally switching from shared hosting to VPS

Attached: 1534891923542.png (800x845, 206K)

Javascript can expose your real IP to websites, even if under a proxy, so it is a technology that has to go or be reshaped

Attached: 1360724853266.gif (320x454, 1.93M)

its for a client
I guess I better stay away from this crap then
yikes

For php how wanna learn or level up their skills in PHP.

Read :
- phptherightway.com/
- phpbestpractices.org/
- airpair.com/php/posts/best-practices-for-modern-php-development
- phpcheatsheets.com/
- owasp.org/index.php/PHP_Security_Cheat_Sheet

- Weekly Mailing list :
- phpweekly.com/

Youtube Tutorials :
- youtube.com/user/phpacademy
- youtube.com/user/thenewboston
- youtube.com/user/businessgeek
- youtube.com/user/LevelUpTuts

Paid Videos :
- teamtreehouse.com/library/php-standards-and-best-practices
- pluralsight.com/search?q=php
- lynda.com/search?q=php
- code.tutsplus.com/categories/php/courses
- laracasts.com/

PHP Standers :
- php-fig.org/psr/psr-1 ( Basic Coding Standard )
- php-fig.org/psr/psr-2 ( Coding Style Guide )
- php-fig.org/psr/psr-3 ( Logger Interface )
- php-fig.org/psr/psr-4 ( Autoloading Standard )
- php-fig.org/psr/psr-6 ( Caching Interface )
- php-fig.org/psr/psr-7 ( HTTP Message Interface )
- php-fig.org/psr/psr-11 ( Container Interface )
- php-fig.org/psr/psr-13 ( Hypermedia Links )
- php-fig.org/psr/psr-15 ( HTTP Handlers )
- php-fig.org/psr/psr-16 ( Simple Cache )
- php-fig.org/psr/psr-17 ( HTTP Factories )

PHP A SHIT

- PHP TOOLS -

Dependency Manager :
- Composer : getcomposer.org

Frameworks :
- Symfony : github.com/symfony/symfony
- Zend : github.com/zendframework/zendframework
- Zend Expressive : github.com/zendframework/zend-expressive
- Laravel : github.com/laravel/laravel
- Swoole : github.com/easy-swoole/easyswoole/

Dependecy Injection :
- The League Container : github.com/thephpleague/container
- Illuminate Container : github.com/illuminate/container
- Symfony DI : github.com/symfony/dependency-injection

HTTP :
- Symfony Http Foundation : github.com/symfony/http-foundation
- Symfony Kernel : github.com/symfony/http-kernel
- Zend Diactoros : github.com/zendframework/zend-diactoros
- Zend Http : github.com/zendframework/zend-http

Routing :
- Symfony Routing : github.com/symfony/routing
- Zend Routing : github.com/zendframework/zend-router

Validation :
- Symfony Validator : github.com/symfony/validator
- Zend Validator : github.com/zendframework/zend-validator

Form :
- Zend Form : github.com/zendframework/zend-form
- Symfony Form : github.com/symfony/form

Database :
- Doctrine ORM : github.com/doctrine/doctrine2
- Doctrine DBAL ( Database Abstract Layer ) : github.com/doctrine/dbal
- Illuminate Database : github.com/illuminate/database
- Zend Database : github.com/zendframework/zend-db

Mail :
- SwiftMailer : github.com/swiftmailer/swiftmailer
- ZendMail : github.com/zendframework/zend-mail

Template Engines :
- Twig : github.com/twigphp/Twig
- Symfony Templates : github.com/symfony/templating
- Zend View : github.com/zendframework/zend-view

Command Line :
- Symfony Console : github.com/symfony/console
- Silly : github.com/mnapoli/silly
- Zend Console : github.com/zendframework/zend-console

IDE :
- PhpStorm : jetbrains.com/phpstorm/ ( recommended )
- Sublime Text : sublimetext.com/

Testing :
- PhpUnit : phpunit.de/ ( recommended )
- Codeception : codeception.com/
- Behat : docs.behat.org/en/v2.5/
- PhpSpec : phpspec.net/en/latest/

Other :
- ReactPHP : github.com/reactphp
- PHP Swoole : github.com/swoole/swoole-src/ ( recommended )
- KrakenPHP : github.com/kraken-php/framework
- The Symfony Components : symfony.com/components ( recommended )
- The PHP League Components : thephpleague.com/ ( recommended )
- PHP Cache : php-cache.com/en/latest/ ( recommended )
- Monolog : github.com/Seldaek/monolog ( recommended )

>php a shit

can you explain why do you think the modern php is shit ?

So I made a wordpress blog to show employers that yes I can use wordpress. Other than the basic filler and such I added a poll for people to vote for favorite beers (its a beer review site). What are other features I could add to make my wordpress site look more impressive?

I hate wordpress by the way. Only reason I am doing this is that a lot of people at interviews ask if I know anything about it presumably because their sites were built using it by some retard.

Why am I surprised at these responses...there's always been an underlying zealot/purist mentality on Jow Forums that overemphasizes meaningless obsessive work. 99% of people don't give a shit what you use to build a website as long as it serves the purpose... web dev isn't my core competency and hacking something together to attract clients is perfectly fine by me. I don't have unlimited time to learn everything properly and I already solved my own problem so I hope you enjoyed reading my rant

see

This playlist on how to build a wordpress theme from scratch is pretty good. Learnt a lot and just adapted parts of it to make my own theme.

youtube.com/watch?v=ViZLtFIcSfo&list=PLriKzYyLb28kpEnFFi9_vJWPf5-_7d3rX&index=1

Transitions are NUTS

jsbin.com/zalutasixa/edit?css,js,output

>wordpress

Attached: 1416249411171.gif (177x150, 1.74M)

Ebic m8

neat code
[spoiler]noob here[/spoiler]

Let's say you have a static site that does some JS calculations and not much else, how much hardware would you need to scale it to a few million users a day? Is there a way to calculate this? Or should one just throw this on AWS or heroku and wait to see how much the bill is. (Seriously how do I calculate aws prices)

Hey I'm a noob too, always will be a noob.

Anybody here know how to make an element that is created through JS have a transition, preferably a fade-in?

jsbin.com/runegigodu/edit?css,js,output

I'd like .box to fade in.

noob again here, trying to help, what you want is to display the item at opacity 0% and animate to opacity 100% within x seconds, hope that helped

what does the document.body.appendChild(box); do?

Appends box to the element as a child node. Adds it into the page

got it

why would you do on===true rather than just putting "on" in the condition??

the if statement evaluates it for you right?

what's the advantage of using the wordpress rest api over the conventional way? I want to start making sites for small business around my area and I think I might prefer using and expanding my react skills if it's an option

Yes but the important part of writing code is making it as readable as you can to other human beings since the computer interprets every programming language in the same exact way regardless (machine code). So 'on === true' is a bigger clue of what the condition is than 'on', which is actually checking if 'on' exists and not if it equals true.

interesting

is there another way to do this where you could make two variables one where on= always true and off= always false and use them in the logic?

please don't use wordpress;
if wanna do rest api in php, use zend expressive, way much faster and better code.

you can also use zend expressive with swoole php which gives you way much better performance than NodeJS.

zend expressive : github.com/zendframework/zend-expressive
zend expressive + swoole : github.com/zendframework/zend-expressive-swoole/
read : framework.zend.com/blog/2018-03-21-expressive-swoole.html

PS : swoole only works on linux , so you can develop your application using php built-in server for testing, and when you move it to a server, you can add swoole. ( to do that, you need to build the application using the expressive skeleton : github.com/zendframework/zend-expressive-skeleton )

Not that user but thanks, that's quite interesting as a matter of fact.

> work for a small business
> writing internal tools for team to use
> most of our bugs result from our team typing GARBAGE into input boxes
> white space everywhere, intermixed capital and lowercase letters
> typos, misspellings, letters in number only fields

I weep for my s

Depends. Some companies ask for daily progress at the end of the day. Some ask even for hourly. Very few don't ask at all, as long as you complete your task.

If it's a daily thing, it's fine. Depending on the time of year and how many projects they have on, you'll work anywhere from 1-2 hours (yes, seriously) to 9-10 hours a day. Make sure you ask for extra if go overtime tho.

i meant you can develop on windows without swoole.

i forgot to mention that swoole also provides async support, coroutine and much more.

you can also use the templating engine of your choice ( twig, plates, zend view .. ) , which mean you can also use ReactJS on the front-end.

i think i heard them mentioned they are starting to do daily standups.....good or bad?

Is web development gonna be replaced by AI robots by the time I finish college?

>by the time you finish college

Attached: 1480919033723.jpg (808x499, 79K)

hey, thanks for the response, I will definitely look into this,

good because you are new so you an absorb a lot of info, but after a few months they become pointless

you are welcome.

if anyone has a question about Php, or how to do something in particular, i'm here to answer.

Will you lurk often in these threads?
It would be nice to have an experienced php dev to ask questions.
Also, what do you think of Phalcon?

I'm learning react by writing a simple blog and I'm wondering how to go about storing the webpage content.
Let's say that I have a contact / about me type page. Should I have that content hard-coded into the jsx files or should it be fetched from a database, like other content, such as new blog posts?
I'm leaning towards having all the content in a database.

how do I stay safe from MySQL injections drop tables etc, what should my basic security set up be ike?

React, huh, what it is it good for?

For a start, parameterize your queries. stackoverflow.com/questions/60174/how-can-i-prevent-sql-injection-in-php

jsbin.com/zalutasixa/edit?css,js,output

dont even need the on variable and can use replace instead of add & remove

/Gallery?mode=tag/{tag}
or
/Gallery?mode=tag&tag={tag}

the js code looks exactly the same??

/gallery/tag/ss

use prepared statments.
if you are using mysql database or mariaDB, use the Mysqli class.
but i would recommand using PDO, so you can switch between databases without changing any code.

if you wanna do something more secure, use a Database Abstract Layer such as Doctrine DBAL, Illuminate Database or Zend DB.

Mysqli : https:://secure.php.net/manual/en/book.mysqli.php
PDO ( Php Data Object ) : secure.php.net/manual/en/book.pdo.php
Doctrine DBAL : doctrine-project.org/projects/dbal.html
Zend DB : zendframework.github.io/zend-db/
Illuminate Database : github.com/illuminate/database

correct link: jsbin.com/natibewoli/edit?html,js,output

Would make sense to have a separate api for each 'mode'
/gallery/getByTags?tag=whatever&tag=idk

even when
/gallery?mode=tag
is still valid and used?

the api is already separated, this is just the client-side url to control some page initialization

see more examples at the php manual : secure.php.net/manual/en/mysqli.prepare.php

Attached: sql-injection-you-shall-not-pass.jpg (400x400, 82K)

thanks senpai

maybe /gallery?tag=

hmm i like that, though it would mean two different urls for what is basically the same version of a web page. all the {tag} does is open a dropdown and autoscroll to it on page load, within the tag view.

oh i know, ill just have /gallery?tag to refer to the viewing mode, then go from there based on whether or not it has a value.
Thanks for the bounce, mates

Which computer science subjects should I study if I want to become a good developer? I've already read a textbook on algorithms and data structures.

thats pretty much it for basics. next pick up a book on the specific technology you want to work with, then go from there

Any good elegant looking UI kits for bootstrap?

>bootstrap
>current year

Or for whatever, I just mentioned bootstrap because I already set it up and have the basic layout with its classes, and it's still the most popular so I figured there's more UI kits out there for what I need.

>be me
>be trying to get a job in web dev for years, never have enough experience for entry level
>land a job with a company that'll look tremendous on a resume
>get hired to redesign their website
>they give me a graphic design project
>fffffuuuuuuuuuu but do it anyway
>they give me the web project login info
>it's for a WordPress site
>think oh OK no big deal its entry level they did ask me about CMS stuff in the interview
>they're tech department created a custom theme
>I'm required to adhere to their strict "branding" policy.
>my login credentials don't give me admin access
>their IT department rightfully hasn't given me access to any of the server stuff so can't upload media and can't write any custom css/php

What the fuck am I even doing here? I can basically only change the content of the site. Any media will have to get sent to IT to upload and the branding policy is so strict that it has to look like every other departments site.

Im going to ride it out because it looks so good on the resume but how do I change the site enough to make my bosses think they got their monies worth and how do I list this job on resume to make it look like I wasn't just doing graphic design and pissing in the sink for fun? I'm going to focus on UX stuff so their site is at least easier to navigate but what else?

Attached: lXD42QszQwiysc3t_aaiHvEqeqcZsaPj_IBTHyhr7mQ.jpg (750x910, 64K)

>hasn't given me access to any of the server stuff
should they ? i think that's the right thing todo.

also , you don't have to work for a company to get experience, learn by yourself, create projects, try to build tools and put them for free on github, that's how you gain experience.

Choice quote m8, literally drag your mouse one word over.

Attached: IMG_20180114_200337.jpg (1097x1920, 212K)

Have you heard of input validation.

>but how do I change the site enough to make my bosses think they got their monies worth
How about you do what you were told to do and give them their money's worth by making sure that they get what they wanted?

In javascript, you got an array: ['foo', 'bar']
and a dictionary/map/object
{
'abc': 'def',
'foo': 1,
'bar': 2,
'baz': 3
}

How do you retrieve the subset of key/value pairs (or just values) from the dictionary/map/object, using the array?
i.e. the result should be