Yeah, sure. Just draw a shape on a new layer and then open the Transform menu. You can get the coords for each corner or the exact middle of the shape.
There might be an even easier way to do it, but that works for me.
-
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
Yeah, sure. Just draw a shape on a new layer and then open the Transform menu. You can get the coords for each corner or the exact middle of the shape.
There might be an even easier way to do it, but that works for me.
Handsomejan
Member
exactly like that! i tried to scale the initial shape but well that didn´t worked out
Daffy Duck
Member
Amazing, I will give that a try. Thanks.
I don't really use Illustrator so this is going to be quite basic but here's what I did
1) open the 'Appearance' panel from Window > Appearance
http://i.imgur.com/G8LdcOa.png
2) create a shape and apply a stroke
http://i.imgur.com/HjZq9y9.png
3) now in the Appearance panel click on the stroke layer and in the top menu go to Effect > Path > Offset path
http://i.imgur.com/QSEHfDM.png
4) fiddle around with the settings and then apply and you'll get an offset in the Appearance panel. You can click that to adjust it.
http://i.imgur.com/2LslU8Q.png
Handsomejan
Member
It works! GOD DAMN IT! i fiddled around in illustrator for 2 hours. Thank you mate. If you ever visit germany ill buy you plenty of beers!
The great part about having interviews that don't land you a job is that you get to see what sort of things an employer is looking for, and then work on those skills.
Try to remember the questions they asked, the places you struggled, or if you're feeling bold - contact the hiring manager or whomever you are in contact with, thank them for the interview and ask for honest feedback so you can focus your attention on your gaps.
There are lot of people here who use angular or have used angular, so if you get stuck feel free to ask questions! The only sucky thing is that you probably wont get a reply immediately, so it's probably more useful to ask a bunch of small questions, or really big overarching conceptual questions like - what is dependency injection? What is scope? What are watchers? etc.
In my own web dev news, I got put on as the tech lead of my first project and it's goddamn nerve wracking. It's been really great so far, and it's only been the first week, but holy shit I don't envy the people who have been in this position on previous projects with me, there is a lot thrust on you. I think the big takeaway I've learned from watching them is delegate and trust your teammates - shit falls apart when you take it all upon yourself to handle everything - because that becomes the dependency and in no time your project fails the bus factor.
Right now my big focus is on architecture and build, and trying to get all the non-deliverables out of the way quickly while still implementing them well. This is also an angular 2 project, and I haven't ever been on a real one yet (only done fun apps on my own in ng2/ionic2 so far) and it's always different having to do something like this in a real project environment.
Mind you our stack is kind of bleeding edge bonkers, but it's working for us somehow:
redux (via ng2redux)
immutable.js (kind of the best solution if I am going to be using redux)
postcss
basscss
webpack for module bundling and preprocessing
angular2
typescript (mostly for es2015+ and decorators, I don't think actual typing will be a thing in this project)
and of course some of the core underlying stuff that's new to angular2, like observables (which I am super comfy with so that's nice)
I spent today setting up webpack to handle css loading in a way that lets me still take advantage of angular2s block scoping - but there are still things I need to do here before I'm happy. I also finally got a quick authentication server up and am now in the process of implementing all the linting rules.
I haven't been doing web dev for that long, but holy shit has this field changed. So many fundamental shifts in the last two years.
Thanks for the help. Yeah I'll be sure to ask questions. Def realized I need to write down tech questions after each interview now so I can study them for later.
I'm taking my friend's angular course and it's been incredibly helpful. I thought I didn't know shit but turns out I can actually pick up difficult concepts when they're shown to me in a different way haha. Like I know how to make modules, config routes, and controllers.
Grats! Don't paralyze yourself with all the frontend choices.. they basically all do the same shit anyway. If you found something that works for you guys then fuck yeah.
Trust me, you'll start to realize there are layer to my understanding. Every time I think I 'get' a concept, I realize that there are deeper and deeper wells of understanding that come around in time regarding that concept - so embrace the learning. What you know so far is already more than I new when I started dev... but fuck when I started it was only at angular 0.8.
Yeah I'm trying not to worry too much about the stack! I'm handling it without difficulty, and my team is strong - it's also all fun to learn. The biggest thing about this is that a scrum master took me aside a little while ago and told me that this project has inadvertently become a 'test' for me - in that they needed someone who was strong to lead this project without too much assistance from other senior devs, who are all crazy busy, and my name came up and they think this is a good opportunity for me to work on my leadership skills, as well as give me an opportunity to build an app from the ground up.
My company is great to me, and I know I won't get in trouble or anything if this is too early for me, but I've been upgraded in terms of technical grading (which has a significant part to play when it comes to pay) a couple of times in the last 6 or so months already, which has led to two separate 5 figure raises - I imagine if I do well on this project (only a 10 week engagement) I might be up for another one of those raises sooner than later. But probably would also tip me into 'senior dev' category in the company.
I'm hoping it will boost my resume once I finish the course and the app. Since I almost feel confident enough to add angular to my resume already and I'm only halfway through the course. Also yeah I know that feel about understanding programming. It's why I enjoy the field so much. You're always challenged and you learn something new every day.
Starphoenix
Member
Anybody ever use The Events Calendar for Wordpress? Trying to figure out how to hook the design, but it's not NEARLY as easy or documented as WooCommerce... >_>
Hmm, that doesn't sound so bad. It would basically just be for ordering balloons to be picked up in-store, so we don't want anything complex. On the plus side, no shipping needed.
We're not gonna get a lawyer for the terms and conditions page though. How important is that? Can I just copy/paste some boilerplate?
I've used it before although it has been awhile. What is it that you are trying to do exactly?
Starphoenix
Member
I have a client project that I'm working on for my company, and in particular I need to modify the template for the single event layout. The senior web dev has mentioned before that creating a child template isn't the preferable method for customizing the display since it is harder to maintain, and, as mentioned before, I've hoooked things with WooCommerce before, but I'm having a lot of trouble with this particular plugin.
For example: I need to disable almost all venue information and instead display it under the page title. Another thing is I need to wrap the thumbnail in a .col-6 div while the rest of the content is in another .col-6 div to the left. Not sure how I'm able to achieve that without creating a child template.
I guess that depends on your country.
When I had to do it, I simply asked a lawyer friend who occasionally did lawyer work for my own company. He produced some quick and dirty boilerplate and I just had to write in the name and address of the store owner.
Still, I never read it (terms and conditions, EULAs, poteto potato), but you know, when it comes to handling people's money, even if not directly, sooner or later someone will complain and a terms and conditions page is a good first line of defense.
runningjoke
Member
WOOO! I'm using Redux in my React app now! Used a few shortcuts (still need to define my actions as constants) but I'm getting there. Having all components get their data directly from the store instead of passing it along through all the parent components feels great. My main component is just a render function with 3 children :lol
Oh, I've always used child templates with The Events Calendar and never had a problem with them. How exactly are they harder to maintain than some hooks in functions.php?
Redux is really cool once you got the hang of it. I still hit some walls here and there but overall I love it
StarSketch
Banned
So my dad keeps pushing me to learn programming because it's the thing people are looking for the most in the job market (I think he's mistaken but whatever)
Problem is, he won't tell me what I should learn, and just throws languages at me and I have no idea what is actually useful. I've taken classes on Racket and Visual Basic, languages apparently no one uses.
I'd prefer not getting burned again, so any suggestions? I'm fairly well versed in HTML and I took a class in Java, so don't suggest those.
Problem is, he won't tell me what I should learn, and just throws languages at me and I have no idea what is actually useful. I've taken classes on Racket and Visual Basic, languages apparently no one uses.
I'd prefer not getting burned again, so any suggestions? I'm fairly well versed in HTML and I took a class in Java, so don't suggest those.
What are you looking to be doing? If you're interested in web application development, then I would recommend looking at Javascript/JQuery, C#/ASP.Net/Razor, or php. I haven't looked into AngularJS, but I heard some nice things about that as well.
I just entered the field though, so someone with more experience will probably have a better grasp at where to point you.
I'd just run with Python. Here's a free Udacity course on it:
https://www.udacity.com/course/programming-foundations-with-python--ud036
Python's great because it can be used for so many things (from web development to data science to game scripting), and it's not going away anytime soon. You won't get "burned" by learning it. Once you've taken an intro course, you can focus on where you want to go with it. Data analysis and visualization is probably a good path these days, if you want to pursue a career with it. Even if you don't wind up as a programmer, it's a good ancillary skill to have.
This. Also congrats Kinitari! I'm inspired!
PetriP-TNT
Member
JavaScript is the best one to learn because it's the best language period!
Great to see this topic being so active, it took a while but I guess this thread counts as the one of the very, very, very few community threads that have come alive without existing userbase.
Great to see this topic being so active, it took a while but I guess this thread counts as the one of the very, very, very few community threads that have come alive without existing userbase.
You took a class in Java and you are done with it?
Well, many of us will be biased toward JavaScript in a web dev thread, so I don't blame you at all! I actually had to fight my gut when I chose Python instead of JS -- because I was trying to think of a language that can be most easily useful on its own (e.g., with data analysis/viz). But if you plan on doing web development, JS is obviously the pick.
Well, if you do webdev it would be a good idea to find out, what you prefer to do: building frontend/apps or backends.
Even with node.js javascript isn't the most important language on servers, at least not in my projects.
Anyway, go, learn js. Great language that got immensely buffed over the last years.
Even with node.js javascript isn't the most important language on servers, at least not in my projects.
Anyway, go, learn js. Great language that got immensely buffed over the last years.
Has anyone figured out a good way to animate to height: auto? I'm halfway doing virtual CSS layouts to make this work for a general case. I use getComputedStyle to measure the containing elements but then I have to clone the element's ancestry, add the "open" class and match it against the document's CSS rules and start measuring stuff like padding to get it correctly (this is because a 0 height element with padding and box-sizing still creates space so I need to unset that when it's not "open").
Syphon Filter
Member
Anyone code emails? I use litmus to test them and some mobile devices don't support media queries (i believe iphone 6 is one) so what do I do in that situation? The button looks like it takes the whole screen but the text is not big enough.
After many many times and just as many failures I stopped trying. I use JS now to calculate the height or don't animate the height at all but use a sliding animation on the child.
runningjoke
Member
I used to code emails. Iphone 6 should support media queries, but Gmail apps do not. You should probably make your emails fluid so they are 'mobile first', and then enhance with media queries. Are you doing something like http://labs.actionrocket.co/the-hybrid-coding-approach ?
PetriP-TNT
Member
Semi-related to programming, but for the last few days I have really been thinking how much I love the way NodeJS handles its open source community.
https://medium.com/the-javascript-collection/healthy-open-source-967fa8be7951#.zie2o2ogm
Best thing about this is that it scales from massive OSS projects like Node to things that started as / are one man projects that want to grow or get some attention.
https://medium.com/the-javascript-collection/healthy-open-source-967fa8be7951#.zie2o2ogm
Best thing about this is that it scales from massive OSS projects like Node to things that started as / are one man projects that want to grow or get some attention.
Hey guys I really need some help. Iam in my second project with team treehouse. I am suppose to make a responsive layout for 3 devices, they have mockups on how to make them look, with our own creative inputs on them. I have been doing my best for the last 2 weeks but they keep rejecting it. I don't see what Iam doing wrong because I have been using chromed dev tools to test out my responsive layouts on them and they seem fine.
Here is my github where u can download the responsive project files. I would appreciate it if someone could look at it and help me out
https://github.com/dearisjinks
Here is my github where u can download the responsive project files. I would appreciate it if someone could look at it and help me out
https://github.com/dearisjinks
Starphoenix
Member
Have you received any kind of feedback on why your files are being rejected?Hey guys I really need some help. Iam in my second project with team treehouse. I am suppose to make a responsive layout for 3 devices, they have mockups on how to make them look, with our own creative inputs on them. I have been doing my best for the last 2 weeks but they keep rejecting it. I don't see what Iam doing wrong because I have been using chromed dev tools to test out my responsive layouts on them and they seem fine.
Here is my github where u can download the responsive project files. I would appreciate it if someone could look at it and help me out
https://github.com/dearisjinks
I'm getting a horizontal scrollbar on Chrome 48. That could be one reason to reject your work.
And yea they said that my layouts are not responding right from the media queries and that my widths need fixing. I fix that yesterday and everything looks good to me
How can I prevent that?
PetriP-TNT
Member
Hey guys I really need some help. Iam in my second project with team treehouse. I am suppose to make a responsive layout for 3 devices, they have mockups on how to make them look, with our own creative inputs on them. I have been doing my best for the last 2 weeks but they keep rejecting it. I don't see what Iam doing wrong because I have been using chromed dev tools to test out my responsive layouts on them and they seem fine.
Here is my github where u can download the responsive project files. I would appreciate it if someone could look at it and help me out
https://github.com/dearisjinks
Some quick feedback on the responsive-project one (from ~5 minute look so treat it like you feel like):
- The layout overflows from couple of points because of the paddings / margins and 100% width. Easy fix for this is to change the "box-sizing" value to "border-box" instead of the (crappy) default "content-box" (see: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing)
Code:
* {
box-sizing: border-box;
}- For the grid system for itself: you have classes like "row1", "row2" when you most likely should just have utility classes like which make the box a certain size (so that for example foo-33 means 33% and you can fit three of them inside a row). For inspiration, see something like Bootstraps grid (http://getbootstrap.com/css/#grid) or any other css grid
- As a general style guide, try to keep the style of your code consistent: keep indendations, line breaks etc. the same
- For the CSS itself:
- Don't create separate media queries for every class at every size. Instead, first make a layout for one size (if mobile first, start with the smallest) and override the values as needed. For example say you want items that stack on top of each other on smaller than 1000px screens, but side by side on screens above that breakpoint:
Code:
HTML:
<div class="foo">foo</div>
<div class="foo">foo</div>
CSS:
.foo {
width: 100%;
}
@media (min-width: 1000px) {
.foo {
width: 50%;
}
}- Keep your media queries at minimum and always write them close to the classes you are overriding. This reduces the chances of writing unmaintainable CSS by a hundred fold. See the example above again.
- For more neater CSS, check out how to use other selectors than just descendent (div p for example) selectors (https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors)
- Most of the style issues come more apparent when you stop clumping the media queries in one place, but for extra cleanliness, try to write the CSS properties in the same order always
Thanks! That's a lot to try out out but we haven't gone over bootstrap yet just strictly html and Css is used in this project. So basically you are saying to simplify my media queries so I dont repeat myself and get confused. Ok I will go and try to apply those things when I get home. Otherwise do you think it's still pretty good for a beginner ?
PetriP-TNT
Member
Yup, it does at least work so (sans the overflowing which is easily fixed) it is good for beginner. Many things are not obvious for beginners nor advanced folks with CSS and best way to learn is write lots of it (or look how others like Bootstrap does it).
Oh yeah I forgot, instead of pixels try using relative units for fonts and such (rem). Google mdn rem for more info, Id put a link but I am on my phone
Starphoenix
Member
Speaking of CSS for advanced users, I've just learned within the past month about pointer-events. That stuff is magic when working with pseudo-elements overlaying an interactive element like a jQuery carousel.
ZackieChan
Member
Any mobile app devs in here? I have a quick question. I'm reworking my website privacy policy questionnaire (that clients fill out before I draft their privacy policy) into one specifically for mobile apps. Are the following topics still relevant for apps?
Do you collect the user's IP address?
Does your app use cookies?
Does your app use clear gifs/tracking pixels?
Just wondering if this stuff is still used in mobile apps, or is it web-only. Thanks in advance!
Do you collect the user's IP address?
Does your app use cookies?
Does your app use clear gifs/tracking pixels?
Just wondering if this stuff is still used in mobile apps, or is it web-only. Thanks in advance!
They certainly could, especially since many apps are glorified websites anyway.
ZackieChan
Member
Cool, thanks. I'll keep the questions in. I just don't want to embarrass myself by asking dumb questions
PetriP-TNT
Member
edit: wrong tab
Complete beginner question here, but as someone that hasn't done a huge amount of web design, what's the best way to centre 3 divs on a page?
Basically this:
https://jsfiddle.net/a4e6wauh/
But with all three divs right in the middle of the page.
Basically this:
https://jsfiddle.net/a4e6wauh/
But with all three divs right in the middle of the page.
Try one of these solutions: https://css-tricks.com/centering-css-complete-guide/
In your case you might wrap the 3 divs in another div that you center, and then spread out the divs on the inside.
In your case you might wrap the 3 divs in another div that you center, and then spread out the divs on the inside.
Thanks so much! This one is basically exactly what I'm looking for:
https://jsfiddle.net/ksmgkn71/
I was using a different method previously but it was pretty ugly. This is a far better solution for me.
Keep in mind flexbox has some bugs and issues (particularly with IE11). If you're self-learning, it doesn't hurt to look over the other techniques. If you have no need for cross browser compatability whatsoever, flexbox is great.