-
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
Daffy Duck
Member
I was thinking of rebuilding an age old booking system built in PHP with a lot of excess code in a modern framework as a project.
You see that's exactly what I thought.
Ding ding ding, that's an important concept right here. Lots and lots of publicly-available website do not require cutting-edge front-end frameworks. I wish agencies around here understood that, I know many of them that are only selling blog-like websites, editorial or marketing stuff, but want to hire front-end engineers because of the buzzwords. If they got one they wouldn't know what to do with them.
Daffy Duck
Member
I use a pretty simple web components library (that I actually created exactly for these type of pages). They work with completely server side generated HTML while enhancing the page with fancy js I can write in a more or less modern way.
The world of real client side single page applications is pretty rough. You'll need experienced developers for it. I saw many projects suffer a lot by newcomers jumping on a hype train.
The world of real client side single page applications is pretty rough. You'll need experienced developers for it. I saw many projects suffer a lot by newcomers jumping on a hype train.
The Albatross
Member
The Angular guy will say Angular, React guy React etc. pp.
Meteor is a completely different beast, as it's a solution for both frontend and backend. I loved it back when it was fresh, but never really sticked to it.
We use Laravel with React+Redux, and we love it. You should try them all, and, most important, you forgot the new star, Vue, in your list
Meteor has some really neat functionality extendable from the Meteor community, but like you I started with Meteor and then never really picked it up for a real project. Meteor always felt like a solution in search of a problem, to me. Like, for any videos on getting started with Meteor, in the "Benefits of Meteor" section of every beginner video, I've never felt like what those are problems I run into in my app.
How it natively used local data stores was really cool, though, it's just always been sort of like a parlour trick for me... Like "Oh you can unplug the internet and your app still works, and then when you plug it in it picks right back up!" Like, that's neat but ... I've never had that as a requirement for a real project.
Guys I have a problem with bootstrap, I want to make a sticky navbar (which bootstrap has many ways of doing) but not one that is the width of the window, but one that is the width of a parent container. (See image for mockup)
I have been trying this for a couple days to no avail, I was trying not to use JS/jQuery to solve this problem but it seems inevitable...
--> I tried placing the nav markup within the container for the right side, (with class navbar-fixed-top) but the width just took up the whole window.
--> Then with the nav markup still in the container I changed the
parent position:relative and the nav position:absolute.
After that the width of the nav matched the parent container but it did not still even with the navbar-fixed-top class.
--> Possible solution: Use Jquery to query the right side columns to get width, set fixed navbar with same width. (But I feel like this cannot be done with out JS)
Heres the boilerplate
Code:
[IMG]https://i.imgur.com/44Pe0Tm.jpg[/IMG]--> I tried placing the nav markup within the container for the right side, (with class navbar-fixed-top) but the width just took up the whole window.
--> Then with the nav markup still in the container I changed the
parent position:relative and the nav position:absolute.
After that the width of the nav matched the parent container but it did not still even with the navbar-fixed-top class.
--> Possible solution: Use Jquery to query the right side columns to get width, set fixed navbar with same width. (But I feel like this cannot be done with out JS)
Heres the boilerplate
Code:
<div class="container">
<div class="row page">
<div class="col-sm-6 col-sm-push-6">
<nav class=" nav navbar-default navbar-fixed-top" >
<div class="container-fluid ">
<div class="navbar-header">
<button type="button" class="navbar-toggle menubtn" data-toggle="collapse" data-target="#top_bar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="top_bar">
<ul class="nav navbar-nav slideDown">
<li class="nav-item my_list_item"><a href="#">Contact</a></li>
<li class="nav-item my_list_item"><a href="#">Pricing</a></li>
<li class="nav-item my_list_item"><a href="#">Sign in</a></li>
<li class="nav-item my_list_item"><a class="get_started"href="#">Test</a></li>
</ul>
</div>
</div>
</nav>
<div> SOME CONTENT</div>
<div class="col-sm-6 col-sm-pull-6 passwordFig">
<div>Some Content</div>
</div>
</div><!-- End of row -->
</div> <!-- End of container -->PetriP-TNT
Member
Instead of using the Bootstrap's class, you can just set `position: fixed` to the nav element and add margin-top for the content so the navbar doesn't hide the content in the column.
This worked along with some js to change the width, ty!
PetriP-TNT
Member
You can see the variables here:
http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-started.html
basically you'll either need ACCESS_KEY_ID and SECRET_ACCESS_KEY, or `C:/Users/<your_name>/.aws/credentials` file and `AWS_PROFILE` env variable, where credentials-file looks like
Code:
[default]
aws_access_key_id=foobarbiz
aws_secret_access_key=bizbosbuz
region=us_west_1
[your-aws-beanstalk-thing]
aws_access_key_id=dingdong
aws_secret_access_key=pingpong
region=us_west_1where you can select the profile with `AWS_PROFILE=your-aws-beanstalk-thing
So, I'm currently building a create-react-app, well, app, and my project manager isn't really interested in it outside of me learning how to use React, which I guess is fine, but now I'm pretty much done with all the app logic and features except for two (very crucial) points:
- The database is just two .json files I can't write to
- There is no user authentication
Since I very very much doubt my manager will get involved at any point (these were meant to be his part of the slack), I'm now looking into doing these part on my own.
So, what are the best solutions to these two issues within the create-react-app environment? I've read some things about Express.js (which I have not understood :3) and Auth0, is that what's being used for modern webapps?
- The database is just two .json files I can't write to
- There is no user authentication
Since I very very much doubt my manager will get involved at any point (these were meant to be his part of the slack), I'm now looking into doing these part on my own.
So, what are the best solutions to these two issues within the create-react-app environment? I've read some things about Express.js (which I have not understood :3) and Auth0, is that what's being used for modern webapps?
I highly recommend not to mess with security related stuff alone like authentication if you don't have a clue. Because you will be the one that's responsible if anything goes wrong.
Anyway, you'll need some sort of back end. There a zillion options to build one. What languages are you good in? PHP? JS? Something else?
Maybe one of the API cloud services out there is an option, but I don't have experience with any of these.
Anyway, you'll need some sort of back end. There a zillion options to build one. What languages are you good in? PHP? JS? Something else?
Maybe one of the API cloud services out there is an option, but I don't have experience with any of these.
I'm a UI developer, I'm competent with JS in that list and that's about it. As for auth stuff, yes I am clearly out of my depth, but also left to my own device so I don't really have much of a choice there... I'm ok with using third party middlemen if that works, I do have some experience setting up preset email users for an ember.js blog using Firebase...
PetriP-TNT
Member
Just use Auth0 if you can. It's cheap and provides an easy and safe way of integrating authentication for your app.
Bony Manifesto
Member
I'd look into Firebase. It's a (relatively) simple one-stop-shop for all your backend needs, and as long as it's a small project, it should fit comfortably within the free tier.
Edit: Oh haha, you mentioned Firebase in your follow-up! I'd definitely try it out if you're already familiar with it.
Alright, trying it now, but that'll still leave the backend part of my issue to solve...
Yes, actually when I pitched the app, I offered to do it with Firebase as I was curious about the differences between the (serviceable but poorly documented IMO) ember integration and the React way of doing it. My manager said "no, Firebase is shit". I... Ok then :/
The Albatross
Member
Firebase isn't shit...? It's great.
Maybe he, uh, doesn't know what Firebase is.
Maybe he, uh, doesn't know what Firebase is.
Gabotron ES
Member
So guys any idea why this responsive menu is only half working, it works fine on mobile but on my laptop screen I can't select the dropdown options.
fiddle: http://jsfiddle.net/p1mrtuex/9/
Here is the css:
And the html:
fiddle: http://jsfiddle.net/p1mrtuex/9/
Here is the css:
Code:
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin:0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
padding: 0 30px;
float: left;
font-size:20px;
line-height: 60px;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content:"";
display:table;
clear:both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
float: right;
padding:0;
margin:0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display:inline-block;
float: left;
background-color: #254441;
}
/* Styling the links */
nav a {
display:block;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
}
nav ul li ul li:hover { background: #000000; }
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display:inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width:170px;
float:none;
display:list-item;
position: relative;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top:-60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left:170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after { content: ' +'; }
li > a:only-child:after { content: ''; }
/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding:14px 20px;
color:#FFF;
font-size:17px;
text-decoration:none;
border:none;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a{
padding:14px 20px;
color:#FFF;
font-size:17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position:static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
@media all and (max-width : 330px) {
nav ul li {
display:block;
width: 94%;
}
}And the html:
Code:
<nav>
<div id="logo">Your Logo here</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li><a href="#">Home</a></li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">WordPress +</label>
<a href="#">WordPress</a>
<input type="checkbox" id="drop-1"/>
<ul>
<li><a href="#">Themes and stuff</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Web Design +</label>
<a href="#">Web Design</a>
<input type="checkbox" id="drop-2"/>
<ul>
<li><a href="#">Resources</a></li>
<li><a href="#">Links</a></li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">Tutorials +</label>
<a href="#">Tutorials</a>
<input type="checkbox" id="drop-3"/>
<ul>
<li><a href="#">HTML/CSS</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">Other</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">Inspiration</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>You've created a space between the <li> you're hovering to trigger the dropdown and said dropdown, so when you're trying to reach the dropdown, your pointer moves out of the "hovered" space therefore closing the subnav.
Change the CSS for the nav ul ul rule from top:60px to top: 100% and you'll see it work.
Change the CSS for the nav ul ul rule from top:60px to top: 100% and you'll see it work.
Gabotron ES
Member
Thanks man, there is no space between menu and the dropdowns BUT I can't still selct any of the dropdown options. I am out of ideas x(
Gabotron ES
Member
Still nothing, and I copied the exact same fiddle.
here i the whole html, I'm a newbie so the css style is in this same file.
https://pastebin.com/uqxXJJzy
This is driving me crazy
OminoMichelin
Member
Hey everyone, anyone here with experience in localizing wordpress websites? How would you do it? I tried using Loco translate but it seems that it can only translate theme/plugin/admin elements.
I guess one solution would be to make a second-level website in a different language, but it's seems overkill for the project I'm working on.
I guess one solution would be to make a second-level website in a different language, but it's seems overkill for the project I'm working on.
Years ago I used Polylang for a couple of mid-sized projects.
Don't remember much about it though, except that it did its job.
The Albatross
Member
I've used:
WPML (WordPress MultiLingual) https://wpml.org/
Smartling + WPMultiSite/WP Network: https://www.smartling.com/
Smartling is a very expensive translation service (tens of thousands and hundreds of thousands of dollars) that uses WPMultiSite/Network to handle translations with a translation API and thousands of translators around the world. It's a strong option for major brands who have a lot of money to sink into good translations. This is probably not the right approach as its primary focus major corporations who need to translate into a lot of languages.
WPML is a solid foundation for what it sounds like your'e doing. It does kind of do what you're suggesting in a way. When you create a page/post/etc (anything in the WP dashboard really) in WP, it basically allows you to make a duplicate of that page as the 'translated' version. It has some workflow features in place to finalize and approved translated content, and then you add a dropdown/language switcher to your website that uses a cookie that keeps a user on the right language option. I forget if there's support for subdomains or subdirectories for languages, but I think WPML uses subdirectories by default.
So let's say you have an English language page called "My Sister is a Potato," and the link is website.com/my-sister-is-a-potato/. You've decided you want to translate this page into German.
In WPML, you've checked off German as an option, and after creating your page in English, there's a check/option to create a German language page for that. WPML creates a new page fo ryou, but it's almost like a symlink to your original page, and then you put in the title... website.com/meine-schwester-ist-eine-kartofel/ and you provide the content. Those two pages are connected to one antoher, so if the visitor has the German cookie in their browser, if they go to the my-sister-is-a-potato link, it'll automatically take them to /de/meine-schwester-ist-eine-kartofel page. I *think* that WPML also does canonical URLs in the header and other good practices for SEO, but I don't think it's cutting edge in that regard. FWIW, I don't think a lot of translation plugins are cutting edge for SEO and translations (there's a lot that can go into it... I'm a developer for a multi-national corp, and while we're not using WP at all, translations is an important aspect of our website and there's some universal best practices for translating content and SEO). From what I remember, for any page that isn't translated, it keeps a user on the /de/ sub-directory but just displays the English language / non-translated page. So it's not like your site breaks or 404s if you haven't translated a specific page (like, say, all of your "About" pages are translated, but your blog is in English).
WPML is a good, popular translation system for WordPress. It probably requires more work upfront than an automated translation service, but it's free and very well known and has a strong community.
For plugins and themes it uses string translation, which is fine, but many plugins and most themes are probably set up wrong so you might need to do some manual work there for strings that are hardcoded into the theme or plugin.
OminoMichelin
Member
Thank you both for the suggestions.
To be clear, I would be the one translating (Italian -> english), since the website is very small (<10 pages). I will try the free option (Polylang) first, and see how it goes.
anyone use aws/etc for development? i've been doing it for years, but i've been doing it all in windows environments.
right now i'm working on a project with a lot of linux dependencies where a linux based dev environment would be great- but anything beyond ssh'ing into a linux aws instance seems horrible! i've tried VNC and XRDP. VNC was slow as hell and XRDP (rdp'ing from windows) was buggy- crashing the xrdp service when attempting to connect. talked to a co-worker who has been coding on linux and he's using... VIM... as his editor.. via SSH...
anyone found success with aws linux development?
right now i'm working on a project with a lot of linux dependencies where a linux based dev environment would be great- but anything beyond ssh'ing into a linux aws instance seems horrible! i've tried VNC and XRDP. VNC was slow as hell and XRDP (rdp'ing from windows) was buggy- crashing the xrdp service when attempting to connect. talked to a co-worker who has been coding on linux and he's using... VIM... as his editor.. via SSH...
anyone found success with aws linux development?
PetriP-TNT
Member
Have you tried Docker?
thequickandthedead
Member
I'm primarily a software dev but I've got a decent amount of experience with JavaScript/CSS. I was wondering what my options were if I wanted to host a Java program online? For example I wanted a web form whose inputs would be sent to and processed by my program and have the results displayed on a separate webpage.
docker is a big part of our operation and is something we consider in all aspects, including our dev environments. that said, it is a big part of the hangup in setting up dev environments remotely (re: nested virtualization).
we have a requirement of working on remote machines -- we can't install anything on the local box. so we can't have say HyperV or VirtualBox running a linux vm with docker spinning up containers.
i have landed on a potential solution which is to use Guacamole for rdp'ing, but in addition to the extra effort for setting up Guac, i don't even know how it will perform.
right now, i'm leaning heavily towards eliminating linux desktop experience from the equation. i have better solutions when that happens.
Daffy Duck
Member
Am I right in thinking that it would be futile to build a bespoke shopping cart from scratch as opposed to using something pre built?
What cart systems do you guys for ecommerce solutions? If it makes a different the payment gateway I need to integrate is handepay.
The system I need to implement is a booking system for coach tours, they have something in WordPress that they hate hence the enquiry about changing.
What cart systems do you guys for ecommerce solutions? If it makes a different the payment gateway I need to integrate is handepay.
The system I need to implement is a booking system for coach tours, they have something in WordPress that they hate hence the enquiry about changing.
OminoMichelin
Member
What do they use currently?
Daffy Duck
Member
They use the built in cart system that is with the theme they bought.
The Albatross
Member
I don't have any experience building Java web applications, but it should be fairly similar to other programming languages like Ruby or JavaScript, where you can have your application in a web-accessible VM (hosted by say Amazon Web Services, Google Cloud Platform, Microsoft Azure, etc), and then create a RESTful API in Java that communicates with your application. The front end can be whatever you want (HTML/CSS/JS), and when somebody submits form data, it hits your API, which then routes that data over to your hosted Java application, and your application does something with it.
THere are a handful of tutorials online creating RESTful APIs using Java or in the java world: http://www.vogella.com/tutorials/REST/article.html
And if you have JS experience, there's no reason why you couldn't create your RESTful API in JavaScript and have a small JS application send the form data over to your java app, I'm just not sure what data format the java app expects.
IF you look into it and build something let us know what you build, interested in the technique you take in the end.
I completely agree with using a prebuilt shop/cart... There's a lot of work that goes into that.
My WordPress clients have used WooCommerce and most have been happy with it. A client MANY years ago used Shopp and it sucked.
For non WP ecommerce suites, Magento is really popular and has a ton of resources online, but I've never used/developed with it
The Albatross
Member
Just joined in on a freelance project where the team has not been confident in the main developer and their work... And I've been brought in to try to help get it finished.
Just joined in on a freelance project where the team has not been confident in the main developer and their work... And I've been brought in to try to help get it finished.
Better prepare for the worst. If my experiences are any indication 'not confident in their work' is probably putting it mildly.
Just joined in on a freelance project where the team has not been confident in the main developer and their work... And I've been brought in to try to help get it finished.
Is the main developer still there? If they get defensive then things can get ugly.
The Albatross
Member
Yep... I'm preparing for it. She's not respondent, has these insane excuses... Like going back through the slack logs, there'd be days of silence from her and then these really complex excuses, followed up by promises of like "I'm pushing the latest build tonight!" and then the client would ask the nex tmorning where the build is, followed by 24 hours of silence, and then she'd finally check in and be like "Oh that's so weird I pushed i but my network must have gone out when I was deploying so it was never put up there."
I think she's probably a good developer, but it's been 4 days since I jumped on and I still haven't gotten access to the repository. LAst night, she told me she'd set me up with access and.. well.. that was 12 hours ago..
Truth is, I just want to come in, finish off the requirements that the client needs, and get paid. Don't care about anything else. But yeah the main developer is still on the project. It's always weird, but the project manager seems pretty competent and sounds like he'll be able to mitigate any issues. I've worked with plenty of developers to think it'll be fine, but it ain't ideal.
I'm about to start studying again.
I'd like to learn a JS framework, these are the ones most companies are asking for:
Angular
Vue
React
Ember
Which would be the best one to begin with?
EDIT: I see my question has been handled above, nevermind! Thanks for the previous replies.
I'd like to learn a JS framework, these are the ones most companies are asking for:
Angular
Vue
React
Ember
Which would be the best one to begin with?
EDIT: I see my question has been handled above, nevermind! Thanks for the previous replies.
The Albatross
Member
Probably not Ember. Of those four, it's the least in demand.
If I were to rank them for some sort of job in demand-ness, personal preference, and hotness matrix... I'd rank them:
1. React
2. Vue
3. Angular
...
9. Ember
Now, personally I've liked Vue more than React, but React has squared off a much larger portion of the market than Vue, and if you're being interviewed for a position with a heavy focus on Vue, you need to know your shit because they've chosen Vue for a reason. Angular has a lot of demand, but it's fallen out of popularity at least as like "the hot JS library" of the moment. React isn't the hot framework that it was a year ago or 18 months ago, but it's hit a sweet spot of still being hot, still being in demand, and still being very practical and worth learning.
Ember, I just don't see anybody looking for Ember development specifically anymore. MAybe that'll tick up, but Ember has kinda followed Meteor (or maybe Meteor has followed Ember), both pretty near JS application frameworks, but they just never captured the zeitgeist like React and Angular did (and that Vue is trying to capture).
If I were to rank them for some sort of job in demand-ness, personal preference, and hotness matrix... I'd rank them:
1. React
2. Vue
3. Angular
...
9. Ember
Now, personally I've liked Vue more than React, but React has squared off a much larger portion of the market than Vue, and if you're being interviewed for a position with a heavy focus on Vue, you need to know your shit because they've chosen Vue for a reason. Angular has a lot of demand, but it's fallen out of popularity at least as like "the hot JS library" of the moment. React isn't the hot framework that it was a year ago or 18 months ago, but it's hit a sweet spot of still being hot, still being in demand, and still being very practical and worth learning.
Ember, I just don't see anybody looking for Ember development specifically anymore. MAybe that'll tick up, but Ember has kinda followed Meteor (or maybe Meteor has followed Ember), both pretty near JS application frameworks, but they just never captured the zeitgeist like React and Angular did (and that Vue is trying to capture).
Ok, I'll go for React to begin with then. It was a toss-up between that and Angular mostly.
Thanks!
Oh boy, I'm implementing a service worker library that will eventually be expected to be used by 20+ teams in my organization. Also I get to make a presentation about it at an internal dev conference in December. Exciting and terrifying. Even if I don't cause the inevitable caching issue that will bring down the site, I'll probably be on the hook for it.
And redux. Don't forget Redux if you go for React. React + Redux is just awesome.
What I wouldn't do is trying to master multiple frameworks of that size. They can be really overwhelming at times.
Isn't Zeplin just a pimped viewer for Sketch files?
Gabotron ES
Member
Any good vue.js tutorials for a begginer, I have been using jquery for a long time and I'd like to move to vue.js for more maintanable code