-
Hey, guest user. Hope you're enjoying NeoGAF! Have you considered registering for an account? Come join us and add your take to the daily discourse.
Web Design and Development |OT| Pixel perfect is dead, long live responsive design
- Thread starter gutshot
- Start date
The Albatross
Member
This Udemy course is very good:
https://www.udemy.com/the-complete-react-web-app-developer-course/learn/v4/overview
You can find coupons for $10 Udemy courses, they're all over the place, and at the end of the year they always do a bunch of $2 or $3 courses.
But also check this post like 10 posts ago by Petrip
http://www.neogaf.com/forum/showpost.php?p=218305622&postcount=3782
JeTmAn81
Member
In what context do you want to create a React application? I've found some decent tutorials for using it with .NET MVC. I've recently been working on integrating TypeScript with React as well.
Thanks for the links and honestly I wanted to do something simple like a to-do app to get my feet wet. And I heard of typescript but never even tried it before, I know 2.0 just released too.
this article sums up my feeling towards web development at the moment. https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f#.wz4hz5rr1
hmm yea his ratings does look better than the one linked above.
HarryHengst
Member
A package manager for a package manager. Sounds like web dev yes. :lol
This is actually quite cool.
I'm trying it on a random pet project of mine, and it... just works. Like, I just had to replace "npm" with "yarn" and that's it.
At work, on a huge OSS project, dev ops noticed something like a 30s saving on initial build time (edit: which is like 30% off), so they're looking into converting the whole thing to Yarn.
It's not. You use it instead of npm and yarn uses the NPM servers if you want to.
Everybody who did a huge project with many developers knows why Facebook build this.
I need help with JSLint.
I want to integrate it into more of my projects however, it seems to be too strict and leaves me with a bunch of errors ranging from a whole bunch of stuff -- most of it coming from preferred spacing, having too many characters in one line, etc. From what I can tell from the errors, it just seems to be syntax it doesn't prefer (eg a space fro curly brackets).
Is there a way to get around this or a good resource to learn more of these practices so I can write better Javascript?
I want to integrate it into more of my projects however, it seems to be too strict and leaves me with a bunch of errors ranging from a whole bunch of stuff -- most of it coming from preferred spacing, having too many characters in one line, etc. From what I can tell from the errors, it just seems to be syntax it doesn't prefer (eg a space fro curly brackets).
Is there a way to get around this or a good resource to learn more of these practices so I can write better Javascript?
First, you should use eslint instead
It's a modern linter that works with nearly all JS-variants (ES6, React...) if you need that.Anyway, you can adjust the linter settings to match your own style. Normally you can do that
- globally for the project
- for a file
- for a line
JSLint works on a "per file" basis I think. It has been a while that I used it.
Personally, I use the airbnb eslint settings and overwrite some things I don't like.
https://github.com/airbnb/javascript
the .eslintrc file looks something like this then
Code:
{
"parser": "babel-eslint",
"extends": "airbnb",
"ecmaVersion": 6,
"parserOptions": {
"ecmaFeatures": {
"classes": true,
"jsx": true,
"experimentalObjectRestSpread": true
}
},
"env": {
"browser": true,
"node": true,
"commonjs": true,
"es6": true
},
"globals": {
"Modernizr": true,
"MediaElement": true
},
"rules": {
"max-len": [
"error",
120
],
"react/jsx-filename-extension": [
1,
{
"extensions": [
".js",
".jsx"
]
}
],
"react/prefer-es6-class": [
2,
"never"
],
"require-yield": 2,
"yield-star-spacing": [
2,
"after"
],
"no-underscore-dangle": 0,
"no-constant-condition": [
"error",
{
"checkLoops": false
}
]
},
"plugins": [
"class-property"
]
}runningjoke
Member
If you have eslint installed globally you can run eslint --fix to automatically fix a lot of warnings
JSLint is Douglas Crockford's opinion about what JS should be. I actually like it because it's so strict and makes you think about your code but if youre looking for something a little more flexible try ESLint or JSHint. They all basically do the same thing but the other two can be tweaked to fit your needs.
PetriP-TNT
Member
And if you have `eslint` installed as a dependency, you can run ./node_modules/.bin/eslint --fix
Daffy Duck
Member
Scratch that. Pinpointed the issue, appears to be the Cookie code that only triggers on the live server.
Ratings and based on my first hand experience taking his lessons he does a great job breaking down the method behind the madness when you're actually building the react we apps. It might be good to go in with a basic understanding of node though.
Daffy Duck, you deleted your question, but anyway: (as I already looked into it)
I don't know what you are doing on this site, but you are including jQuery twice.
If you get jquery plugin errors telling you, the plugin is not available, but you are sure that you included it, it's not bound to the jQuery instance you use ==> there must be another jQuery instance.
Have a look at the network tab of the dev tools, you'll see that you have two jQuery's.
I don't know what you are doing on this site, but you are including jQuery twice.
If you get jquery plugin errors telling you, the plugin is not available, but you are sure that you included it, it's not bound to the jQuery instance you use ==> there must be another jQuery instance.
Have a look at the network tab of the dev tools, you'll see that you have two jQuery's.
Daffy Duck
Member
Thanks for taking the time to look grmlin!
It was the cookie code being placed before the rest of the jQuery calls, so what was happening was the Cookie JS was getting the Google backup version of 1.7.1, I moved things around and it works now.
Thanks again for looking.
It was the cookie code being placed before the rest of the jQuery calls, so what was happening was the Cookie JS was getting the Google backup version of 1.7.1, I moved things around and it works now.
Thanks again for looking.
No problem, I just immediately had an idea, because I had a similar problem recently. One node module required a pretty old version of jQuery so that I got 2 jQueries plus a jQuery plugin that was lost in that other package
Wolf Akela
Member
I've got a question not necessarily web dev.
Our current setup is that we have a Live and Development branch and the names speak for themselves. Generally the only changes we do to Live are bugfixes then we merge them to Development.
However we just had this scenario. We deployed a bug fix to Live which involved adding a static method call using dynamic class names:
$foo is Foo class. We merged this change up to Development.
However, in Development, we were doing changes as well. Essentially we removed bar() and created new methods from it. Obviously usages of bar() was checked beforehand, but that's only in Development branch.
After the merge from Live to Development, we now have calls to bar() that no longer exist. There won't be any merge conflicts. Thankfully we caught this in Development by pure accident. If we had merged Development to Live, the bug would have went live.
What are your suggestions to avoid this scenario? It's not always possible to communicate which methods or class names are modified/removed between everyone. Regular PHP lints won't work because of dynamic class naming.
Our current setup is that we have a Live and Development branch and the names speak for themselves. Generally the only changes we do to Live are bugfixes then we merge them to Development.
However we just had this scenario. We deployed a bug fix to Live which involved adding a static method call using dynamic class names:
Code:
$foo::bar();$foo is Foo class. We merged this change up to Development.
However, in Development, we were doing changes as well. Essentially we removed bar() and created new methods from it. Obviously usages of bar() was checked beforehand, but that's only in Development branch.
After the merge from Live to Development, we now have calls to bar() that no longer exist. There won't be any merge conflicts. Thankfully we caught this in Development by pure accident. If we had merged Development to Live, the bug would have went live.
What are your suggestions to avoid this scenario? It's not always possible to communicate which methods or class names are modified/removed between everyone. Regular PHP lints won't work because of dynamic class naming.
Use a workflow like git flow, as you already do in some regards, (https://www.atlassian.com/git/tutorials/comparing-workflows/), hotfix your releases and apply the changes to the current state of development.
The older the release, the more you'll have to merge. I don't think you can avoid all problems with a merge automatisms and will always run into problems solved manually sooner or later.
Ya i don't really know much about node.
PetriP-TNT
Member
At work today we created this ad-hoc guide on how to create and deploy a NodeJS, Express backed microservice inside a Docker container in 30 minutes:
https://github.com/motleyagency/node-microservice-with-docker-in-30mins
Nothing was planned beforehand, just made up on the go as we came up with ideas.
https://github.com/motleyagency/node-microservice-with-docker-in-30mins
Nothing was planned beforehand, just made up on the go as we came up with ideas.
talisayNon
Member
anyone have a good way to collapse tabs to a dropdown when having a smaller viewport?
victreeb3l
Member
Hey all, I've been messing around with Gulp and ran into some problems with Autoprefixer. For some reason only some properties are getting prefixed.
This is my example:
This is the output:
And this is my gulpfile:
When I paste the same code in the online Autoprefixer tool, the transform and linear gradient properties are also getting prefixed. Any ideas?
This is my example:
Code:
.test {
display: flex;
transform: translate(0, 0);
transition: 2s all;
column-rule: 1px solid #000000;
appearance: none;
background: linear-gradient(to bottom, white, black);
}This is the output:
Code:
.test {
display: -ms-flexbox;
display: flex;
transform: translate(0, 0);
transition: 2s all;
-moz-column-rule: 1px solid #000000;
column-rule: 1px solid #000000;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: linear-gradient(to bottom, white, black);
}And this is my gulpfile:
Code:
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
gulp.task('prefix', function () {
return gulp.src('style.css')
.pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
.pipe(gulp.dest('fixed'));
});When I paste the same code in the online Autoprefixer tool, the transform and linear gradient properties are also getting prefixed. Any ideas?
victreeb3l
Member
Ah ok. I had "last 2 versions" on the gulpfile but I might have accidentally changed something on the online tool so I saw different things. Just tested with both "last 2 versions" and "> 1%" and both the tool and gulp output showing me the same things now. Ok sweet. Thanks!
Lister
Banned
Yeah, especially IE tends to look ugly with Roboto. Hopefully someone chimes in.
Daffy Duck
Member
Here's a question for you (but it might be graphic design related) but here goes:
Social icons (like Twitter and Facebook etc) what do you with regards using these on your sites? I am well aware of the brand guidelines and (IMHO I stick to the default logos as provided) but there a couple of people in my company who think about using totally different ones to fit designs that are being done, for example changing it to black for example to fit in with a design.
Thoughts on that? For me it's a big no no, but I'm interested in getting other opinions as I can sometimes face an uphill battle push my view, despite saying, well how would you feel if someone used our logo in a totally different way?
Social icons (like Twitter and Facebook etc) what do you with regards using these on your sites? I am well aware of the brand guidelines and (IMHO I stick to the default logos as provided) but there a couple of people in my company who think about using totally different ones to fit designs that are being done, for example changing it to black for example to fit in with a design.
Thoughts on that? For me it's a big no no, but I'm interested in getting other opinions as I can sometimes face an uphill battle push my view, despite saying, well how would you feel if someone used our logo in a totally different way?
runningjoke
Member
From a UX perspective, only use official brand colours because if a user wants to share your page they'll be able to find the correct button much faster.
If this really clashes with your own brand guidelines (as in, looks awful) black/white is probably ok.
If this really clashes with your own brand guidelines (as in, looks awful) black/white is probably ok.
imo as long as you aren't changing the logo itself just changing the colours to fit your theme I think that's fine.
It really depends where they are. If you're just putting them at the end of a blog post I'd use them as is but if it was a link in a footer or something I'd probably change it.
The Albatross
Member
At my company, the legal department doesn't allow us to alter social media icons in any way, so we use the official icons from the band. We're sue-weary though so our legal department is really strict with anything.
For my client's sites, I do whatever they want in the design. If they want black circles for social media, I'll do it. I find that social media icons are almost entirely pointless, they get very few clicks, so I don't think twice about them.
Ugh. For the contract I'm on the lead told us to stop using flexbox because of IE10 bugs. Now we need to use js hacks because that's so much better than checking your work. This thing is already a mess of absolute positioning and in several places markup is duplicated because the templates are shared across multiple sites, so if in one case something is on the left and other other on the right they just hide the other instance because they don't know about flex-ordering.
That's what I said, but the rest of the team has never used it so it scares them. It's really frustrating to work on teams where the lead is highly opinionated and you're more experienced than they are. I try not to butt heads because I'm just a contractor and gently suggest things but it's such an uphill battle. They also don't use unit tests because "we don't have strong requirements to test against", yet regressions are extremely common because the code is shared between sites and so you can unwittingly break a site without touching it directly. They won't lock down their shared code versions in the bower configs because "it's too much maintenance to change those for every new update" so stuff happily and automatically propagates to projects it was never tested on and we have to put out fires when they want to push a release because suddenly things are broken.
Lister
Banned
Starting a new project soon. Going to leverage Angular 2, but I'm loking for a straightforward material UI framework.
Any suggestions?
I'm familiar with Angular Material, but 2.0 is still in alpha with lots of components missing. I'm currently leaning Materialize, but there's a lot I don't like, like it's jquery dependency.
How's Material Design Lite?
Any suggestions?
I'm familiar with Angular Material, but 2.0 is still in alpha with lots of components missing. I'm currently leaning Materialize, but there's a lot I don't like, like it's jquery dependency.
How's Material Design Lite?
I went through that struggle with Angular 2 Material about a week ago. Material Design Lite is fine but I think the developers are mostly working on 2.0 so it's in the sunset period from what I understand. I also looked at VueJS as an alternative to Angular 2 but it's a similar situation where 2.0 just came out and none of libraries are supported yet. If you're wiling to wrap Materialize or MDL then those are basically your only options other than making your own implementation of Material Design. I just ended up using React personally.
The Albatross
Member
I used Material Design Lite for a WordPress project and liked it. Was doing work for an Agency and they wanted the WordPress dashboard redone in a material style and self-branded, and this worked well.
There was very little extra that I had to style.
There was very little extra that I had to style.
SuperEpicMan
Banned
Would anyone be able to make any recommendations on hosting providers?
I have 2 sites (one for each side of the business).
The websites will be built with Wordpress.
I would also want to have the option of custom email hosting.
I already have the required domains.
I have 2 sites (one for each side of the business).
The websites will be built with Wordpress.
I would also want to have the option of custom email hosting.
I already have the required domains.
Lister
Banned
Thanks guys. Yeah I think I'm going to go with MDL. Should be interesting!
Digital Ocean - cheap VPS's that are easy to configure.
The Albatross
Member
There thousands of choices. For my small development firm, I host using a small host called WebFaction:
https://www.webfaction.com/
They're independent and good. Prices are clearly stated. Customer service is great, and it's similar to the no bull shit mantra of Hover. They don't try to sell you on upgrades, 3rd party services, and all that jazz, it's just simple, functional, monitored hosting. THey have a clean, functional admin UI if you want to use it, but also have full SSH access even on shared accounts if you prefer to do things that way.
I host about ~15 WordPress sites through my account, about 10 of which are development sites for clients, and the other 5 are production sites for small personal sites and small clients that don't have a need/interest in their own hosting.
They also do email hosting as well.
If you think about signing up with WebFaction feel free to use my affiliate link so I get big time $$$$$$$$$$$$$$$$$$$$$$$$$ (like... $1)
runningjoke
Member
iphones [edit] probably not anymore, seem to remember this from back when.
Also, if you've ever typed #0000 by accident, it'll be transparent soon
I for one always use full hex lower case (#ffffff).
Why?
I DONT KNOW I MAY BE CRAZY and I blame all those linters and their pretension that those things matter :'(
There are things that matter because they lead to bugs (that's why linters are a very good idea for languages like Javascript), and there are things like this. All it does is annoy me.
#0000 may be a bug, #FFF clearly isn't. It's equally good as #ffffff.
And I can't even tell stylelint to accept both, it's one or the other.
PetriP-TNT
Member
DataStream
Member
So how many of you have had to back out of React due to the TOS and what was your choice of replacement?
We have gone with Vue.
We have gone with Vue.
PetriP-TNT
Member
Why did you choose Vue instead of Preact? Or were you not invested in React?