• 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

Copons

Member
git keeps track of renames automatically, whether you use "git mv" or just "git add/rm" a file around your repository - assuming you haven't changed it too much during the rename from one revision to the next. But you'll need to specify "git log --follow <file>" in order to get its whole history from before the rename.

Oh gosh, sorry for answering like a year later, I'm so rude!

I ended up trashing the branch and starting from scratch on a fresh one, with one commit for
Code:
git mv
and then separate commits for all the changes.
It's still treated as a rm/add, but the blame works great, and that's what matters.

Thanks!
 

xxracerxx

Don't worry, I'll vouch for them.
Friendly or accurate? I still get a lot of confusion with clients who expect me to be a designer, though I'm a developer only these days. I can still do some limited design but I'm bad at it and shouldn't sell it to anybody. So, usually when I sit down with them I tell them I'm a developer, and I don't do design, so they should consider hiring a designer, etc.

If you do both, I'd put Web Design & Developer. Web Developer, IMO, should just be a developer. To me it just seems more accurate.

Cheers, I do both so why not make it simpler for people to realize that.
 

kevm3

Member
That front end apocalypse talk is overdone. BASIC front-end work is simple, but if you're doing complex things with a framework such as angular 2, things can get complex quicky. That, coupled with the extremely fast manner in which the front-end world moves can make it quite difficult as well.
 

Lister

Banned
That front end apocalypse talk is overdone. BASIC front-end work is simple, but if you're doing complex things with a framework such as angular 2, things can get complex quicky. That, coupled with the extremely fast manner in which the front-end world moves can make it quite difficult as well.

Agreed. I don't see someone without extensive experience designing and implementing a complex intranet business solution for even small company, nevermind enterprise. These things usually take teams of experienced devs to create, extend and maintain. And experienced project managers too.
 

Kalnos

Banned
That front end apocalypse talk is overdone. BASIC front-end work is simple, but if you're doing complex things with a framework such as angular 2, things can get complex quicky. That, coupled with the extremely fast manner in which the front-end world moves can make it quite difficult as well.

Not to mention all the QA automation stuff needed on the frontend nowadays.
 

Copons

Member
That front end apocalypse talk is overdone. BASIC front-end work is simple, but if you're doing complex things with a framework such as angular 2, things can get complex quicky. That, coupled with the extremely fast manner in which the front-end world moves can make it quite difficult as well.

Way overdone.

I had an almost 10 years background in web development (design + PHP / WordPress oriented) before jumping on the JS bandwagon.
In the last 2 years or so I filled my knowledge gaps and learned Angular and then React/Redux, with everything that surrounds it (Node, Webpack, etc.).
I scored an awesome React job with basically zero real-life React experience, and I believe I managed to pass its super-harsh trial exactly thanks to my experience.
I'm not the GOAT dev, but it's handy to have been there since when IE6 was the browser to target.

My cousin: 5 years older than me, started coding younger than me, did more university than me, lots of back-end, sysops and high level consulting jobs.
He got bored and asked me some directions to jump into the front-end world.
After a couple of weeks he calls me desperate, he had no idea of how absurd and complex front-end had become.

I mean, of course if he had more motivation and whatnot, he's plenty good to tackle this other side too.
But his reaction was what made me realize that all those countless of posts give us a certain bias regarding our job. Front-end is cool, there's more people talking about it, and it all seems super easy to do.
"Webpack + hot reload + isomorphic react + redux + eslint + yarn in 5 simple steps!", yeah right, except then when you try it there is literally the 0% of probability it's gonna work for you.
But I'm (barely :D ) able to understand what's going on and find a fix or a workaround, while anyone else coming from other programming fields, or even from a non-IT background, they'll have an absurdly hard time to get in.

So, tl;dr this job is not only not saturated yet, but it's becoming more complicated every day raising the entry barrier and steepening the learning curve.
 

Somnid

Member
Apple has decided they want to make a new 3D graphics API for the web: https://webkit.org/blog/7380/next-generation-3d-graphics-on-the-web/

I'm not sure how to feel about Apple's possible intentions, but I think the goals (better alignment with web apis, low-level GPU access, general compute capabilities) are at least worthwhile. I've been hearing a bunch of people think it should be Vulkan-based but I'm not sure I agree with that either, mainly because writing graphics for the web is very different than writing it from C++. At the very least, their proposal looks a little more sensible than current WebGL in terms of understandability.
 

diaspora

Member
Anyone else encounter an issue in React where a link would automatically be triggered/clicked upon rendering? Because there's one that does this and only one and I can't for the life of my get why this one in particular has an issue.
 
Anyone else encounter an issue in React where a link would automatically be triggered/clicked upon rendering? Because there's one that does this and only one and I can't for the life of my get why this one in particular has an issue.

Make sure you don't call functions in your render method.

This would be called on every render:
Code:
render() {
  return (<button onClick={someCallback('hi!')} />);
}

If you step out of JSX for a sec it'll become clear why:
Code:
function render() {
  return React.createElement('button', { onClick: someCallback('Hi!') });
}

This renders safely, and only triggers when the user actually clicks:
Code:
render() {
  return (<button onClick={() => someCallback('hi!')} />);
}

But you probably shouldn't create functions within your render function, because it'll create a new one each time, giving the garbage collector some busy work. This is preferred:
Code:
clickHandler = () => someCallback('hi!');

render() {
  return (<button onClick={clickHandler} />);
}
 
Went for an interview for a trainee position with an online retail company and am amazed at the amount of back end shit needed to make an online store work. Web dev seems to be 'easy' when making very basic things that work but in a professional setting you definitely need to learn a lot of techniques. Also I spoke to a guy working on the front-end there and he said that a lot of behind the scenes stuff goes on even if the website doesn't seem to change much from day to day. I can kind of see why there's 'apocalypse' talk coming from some people because this stuff isn't well known by outsiders. Learnt a lot about this career path that day even if I don't succeed in getting the job. I'm glad to know this apocalypse stuff is false. Will look at the Viking Code School materials, looks to be very useful.
 

diaspora

Member
Make sure you don't call functions in your render method.

This would be called on every render:
Code:
render() {
  return (<button onClick={someCallback('hi!')} />);
}

If you step out of JSX for a sec it'll become clear why:
Code:
function render() {
  return React.createElement('button', { onClick: someCallback('Hi!') });
}

This renders safely, and only triggers when the user actually clicks:
Code:
render() {
  return (<button onClick={() => someCallback('hi!')} />);
}

But you probably shouldn't create functions within your render function, because it'll create a new one each time, giving the garbage collector some busy work. This is preferred:
Code:
clickHandler = () => someCallback('hi!');

render() {
  return (<button onClick={clickHandler} />);
}
I was already doing the latter. I also was rendering other a tags that didn't have this problem which why I was so perplexed. Putting the link in a span fixed it.
 

JesseZao

Member
Anyone else encounter an issue in React where a link would automatically be triggered/clicked upon rendering? Because there's one that does this and only one and I can't for the life of my get why this one in particular has an issue.

The issue is you need to give onClick a function, not a function result.

Code:
onClick={yourFunction()} // will execute on render
Vs
onClick={yourFunction} // will execute on click event

// Of course, make sure your function this is bound to the component
 

diaspora

Member
The issue is you need to give onClick a function, not a function result.

Code:
onClick={yourFunction()} // will execute on render
Vs
onClick={yourFunction} // will execute on click event

// Of course, make sure your function this is bound to the component

But I did this:

Code:
clickHandler = () => someCallback('hi!');

<a onClick={clickHandler}>stuff</a>
 

grmlin

Member
I have a really weird problem, maybe someone of you had to deal with something like this in the past.


On my Windows 10 machine in both IE 11 and Edge, the page breaks because there are some characters in the HTML before the doctype and after the body.
These characters vary and the ones added at the top seem to be unicode strings.

- If I curl the page I can't find any of this, and it's only happening on this machine. (I think)
- If I open the page with chrome/firefox, nada


To make things even more strange, this only happens on a staging/live server, but not with my local setup.



Any ideas?
 
I have a really weird problem, maybe someone of you had to deal with something like this in the past.


On my Windows 10 machine in both IE 11 and Edge, the page breaks because there are some characters in the HTML before the doctype and after the body.
These characters vary and the ones added at the top seem to be unicode strings.

- If I curl the page I can't find any of this, and it's only happening on this machine. (I think)
- If I open the page with chrome/firefox, nada


To make things even more strange, this only happens on a staging/live server, but not with my local setup.



Any ideas?

Sounds like a Byte order mark character. Try opening the file in Notepad++ and see what it says under Encoding.
 
Anybody using Shadow DOM in production, using webcomponents.js polyfill? Got a project at work where we're pulling in a large JavaScript component into an app, and we want to keep the CSS scope local in both instances. Shadow DOM seems the right approach, but we have to serve up a fairly wide array of modern browsers.
 

grmlin

Member
The browser support is pretty terrible. Afaik real scoped and encapsulated CSS will take some more years?

I would never use it in something that may need IE support.


Polyfills for custom elements are fine though. Maybe you can get around it with a JS implementation of CSS. Never used one myself.
 

Somnid

Member
Anybody using Shadow DOM in production, using webcomponents.js polyfill? Got a project at work where we're pulling in a large JavaScript component into an app, and we want to keep the CSS scope local in both instances. Shadow DOM seems the right approach, but we have to serve up a fairly wide array of modern browsers.

I agree that support is kinda spotty, dunno that I'd try it in production yet unless the browser support was very clear. Depending on what you have available to you, you could just prefix the CSS selectors with something or seamless iframe the component.
 

grmlin

Member
I don't think the issue is polluting the namespace with components css, that can be handled with BEM and the like.

The bigger problem is, that you would like to start your component without any influences from outside. CSS imho should have had a `reset-all` directive or something from the beginning...
 

Daffy Duck

Member
How would I go about troubleshooting a troublesome Wordpress site?

I've done pretty much most of the basics of shutting down plugins rolling back Wordpress base versions etc to see if I can identify the cause and the site is still performing badly, I've increased server resources to see if it that helped and it hasn't.

AFAIK everything was working fine until last week when the site had to be updated due to the rest api exploit since then sometimes the site works fine and other times it crawls and sometimes fails to load, I'm at my wits end now as to what's causing the problem.

Where should I be going next with it?
 

imBask

Banned
How would I go about troubleshooting a troublesome Wordpress site?

I've done pretty much most of the basics of shutting down plugins rolling back Wordpress base versions etc to see if I can identify the cause and the site is still performing badly, I've increased server resources to see if it that helped and it hasn't.

AFAIK everything was working fine until last week when the site had to be updated due to the rest api exploit since then sometimes the site works fine and other times it crawls and sometimes fails to load, I'm at my wits end now as to what's causing the problem.

Where should I be going next with it?

where is your website hosted? because that sounds like a normal experience on a GoDaddy server :lol
 

Daffy Duck

Member
It's hosted on a cloud server with Tagadab, it's the only site on the server and was a dual core machine with 1Gb ram and 35 Gb disk space, that's been beefed up to 4 cores, 4Gb ram and 75Gb disk space....yet problems persist
 

Cptkrush

Member
Hey guys, I have a question regarding a wordpress site I'm building for a customer at work. Basically he has a weekly lawn service that he wants people to sign up for exclusively online. He also wants the customer to be able to change account information such as their credit card on file. I've never handled anything like this before, but what would be the best free option for me to implement that would give him this functionality?

The guy seems to be really ignorant of personal security because he initially just wanted a form that took credit card numbers and showed them directly to him so he could manually change them, and we just straight up said nah to that haha.

Thanks for any help guys.
 

midramble

Pizza, Bourbon, and Thanos
Ok... so I'm starting to get into front end. Looks like I'm looking into react. I have a good amount of previous JS and Java experience and I'm just now diving into the libraries I didn't know existed for easier design. Did most of my work through direct JS, CSS, and normal artifacts. So I guess I'm just now learning to do this stuff right.

Seems like everyone is using PS, illustrator, and sketchapp for UI design (I'm used to using gimp for mockups because its free) so I'm trying to research what is best. I've noticed that some of these now have a few pluggins that actually do css (and other markup) and some JS library code generation directly from these apps. This particular feature is what I'm most interested in. My environment is mostly windows, but if push comes to shove I can move.

What are your experiences with these design platforms and particularly which has pretty consistent code generation capabilities? I do mostly work on back end so the more I can automate on front end the better.
 

grmlin

Member
I get most designs from Sketch these days, and I can't be happier that I don't have to deal with Photoshop anymore.

It's a little rough around some edges, but most times it works just fine. Right click to copy css styles is pretty great, too.



That's only for using the designs, I'm not creating these.




For the libraries. Did you look into vue.js? https://vuejs.org
I know different developers with a backend background using it and they all love it. I think the learning curve is not as steep as React's .
 

Maiar_m

Member
Sketch is great and I'm actually sad that none of the companies I work for have designers using it. Symbols are awesome and enforcing design consistency is a godsend for careful integration.
 

Lister

Banned
Sketch is great and I'm actually sad that none of the companies I work for have designers using it. Symbols are awesome and enforcing design consistency is a godsend for careful integration.

Just looked into Sketch... seriously, no windows version? Do they have a web based solution?
 

grmlin

Member
Just looked into Sketch... seriously, no windows version? Do they have a web based solution?

Sadly, no. I'm sure it's the main reason it's not used as much as I would like.

https://www.sketchapp.com/support/faq/
Is Sketch available for Windows or Linux?

Due to the technologies and frameworks exclusive to OS X that Sketch has been built upon, regrettably we will not be considering supporting Sketch on either of these platforms.
 

Kalnos

Banned
I got laid off a month ago and have been pretty bummed out

Just got an offer from an awesome startup today with a $20k pay increase over my last job.... I'm freaking the fuck out rn
 

kodecraft

Member
Closest you will get is with Adobe XD

Which is still in Beta.

I'm on Windows myself, Windows 10 to be exact and I am using Affinity Designer and Affinity Photo. The product is not free but cheaper then Adobe CC.

To be fair though I do have an Adobe CC subscription.
 

midramble

Pizza, Bourbon, and Thanos
looks like I'll tryout sketch then. Though does anyone know of any other mockup applications that have a code generation plugin like sketch?

Would love to be able to speed up my pipeline by drawing in an app, running a plugin that makes rough CSS/html code that I can paste into react.

(In the meantime I have to keep doing some work on my own and posting in the programming thread on backend frontend connection advice. Originally built an app using markup/jsp that talked to tomcat java servlets, and now transitioning the frontend to react while trying to maintain no change in the backend. Wonder if I will still have to use forms or if there is another method. Looking at redux and general flux model stuff now. Its funny how much the landscape changes in just a couple/few years)
 

Haly

One day I realized that sadness is just another word for not enough coffee.
Why is infinite scroll presented as a good feature? Personally, whenever I encounter a site with infinite scroll I inevitably have to start opening new tabs for links in order to maintain the history of my scrolling. If click a link and trigger a refresh, but then go back, I lose the position of my scroll and have to start from the top again.

Do people not browse like this anymore? How are average users browsing such that history-destroying infinite scroll is a viable method of content delivery?
 

Lister

Banned
Why is infinite scroll presented as a good feature? Personally, whenever I encounter a site with infinite scroll I inevitably have to start opening new tabs for links in order to maintain the history of my scrolling. If click a link and trigger a refresh, but then go back, I lose the position of my scroll and have to start from the top again.

Do people not browse like this anymore? How are average users browsing such that history-destroying infinite scroll is a viable method of content delivery?

Optimal solution would be storing your position for when you return, start you at the top, but give you continue form where you eft off button to scroll back down.. I always open links in new tabs anyway ;)
 

Haly

One day I realized that sadness is just another word for not enough coffee.
It's why I'm still using the old version of Reddit's mobile site. They keep trying to push the new site on me... no thanks.

That's what prompted my question as well. Was browsing Reddit on my phone, got an ad for their app with infinite scroll! All I could think was: "why do they say this as if it was a good thing?"
 

Daffy Duck

Member
Question: Would it be considered bad practice if you are running a site in CodeIgniter and within some of the controllers you used standard sql code?

So for example something like:

Code:
$sql = "SELECT something FROM somehwere WHERE name = 'something'";
		$result_something = mysql_query($sql);
		$something_id = mysql_fetch_assoc($result_something);

I mean I know for starters it's not mysqli code, but that's something else.
 

John_B

Member
Daffy, I haven't worked with CodeIgniter before, but it looks like it provides Active Record and Models. Are you familiar with these patterns?

With Active Record you should be able to do something like this:

Code:
$userAge = 25;

$query = $this->db->get_where('users', ['age' => $userAge]);

foreach ($query->result() as $user) {
    echo $user->name;
    echo $user->age;
}
 

Daffy Duck

Member
It's not my code, it's a project we've done but another developer is doing the updates on this project and he's submitted that code to be added and it instantly jumped out at me on the version control software.
 
Top Bottom