Chat Nov. 17 — Post-Processors

 First, look up SASS and LESS. These are pre-processors. What do they do?

SASS and LESS are CSS pre-processors, meaning they extend the CSS language with features that don’t exist, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.

What are some of the “dark side” aspects of pre-processors, according to the author? Sass has a dark side. Its potential malevolence tends to manifest when it’s wielded without attention or deep understanding.

  • Pre-processors have a way of keeping us at arm’s length from the CSS we’re building.
  • It’s a burden to keep up on what’s evolving in CSS itself along with the tricks we can pull off specific to our pre-processor.
  • Overzealous use of the @extendfeature in Sass can create bloated stylesheet files bobbing in a swamp of repeated rules.
  • Immoderate nesting can lead to abstruse, overlong, and unintentionally over specific selectors.

What are the names of some post-processors that are out there?

autoprefixer–  takes CSS and adds appropriate vendor prefixes to make it work in as many browsers as possible.

 

What do post-processors do?

  • feed on actual CSS.
  • they can act like polyfills, letting you write to-spec CSS that will work someday and transforming it into something that will work in browsers today.
  • Many post-processors do only one specific thing. (i.e. polyfill for remunits, autogenerate inline image data.

What are the potential benefits of post-processors?

You don’t have to learn another language or another platform. You use actual CSS first.

Chat-Nov 10 — The Artist Date

What are the “rules” of The Artist Date?

  • You have to go alone.
  • It can’t involve chores
  • It must be a minimum oftwo hours
  • You need to go on at least one Date a week.

Why do you think the rules seek to get us out of our comfort zone?By immersing yourself in new and different situations you’re filling your creative well with inspiration and fresh ideas.

Which rules might be hard to accomplish and why are they worth accomplishing even though they might be difficult?

  • It can involve chores (like grocery shopping). I’m a notorious multi-tasker so not trying to get other things done (to take advantage of the time) is hard for me to do.
  • Unplugging-The author says, “We need to get out there and experience the world without distraction.” This can be difficult when phones and other devices are often an extension of ourselves.

Propose five things that you can do for your own Artist Dates. How might they help you to grow as a web developer, as a person?

    • Going to an art museum or an art opening. I often find inspiration from seeing the work of other creative people.
    • Going for a run
    • Doing yoga
    • Knitting
    • Spending a couple of hours in the design section at Barnes & Noble. I used to do this a lot.

How do you feel about the concept of integrating some “play” into your life? Will you do it? Why or why not? Yes. If you ever watch children play you can see how there imagination can take them anywhere and be anything. Sadly this gets lost as we grow into adults. Playing like you did when you were a child can certainly open up the world of imagination where anything is possible and can certainly help you see things in a different way.

Chat Oct 27 — CSS Shapes 101

  1. What will the CSS Shapes specification allow us to do on our websites? Word Wrap! It provides web designers with a new way to change how the content flows inside and around arbitrarily complex shapes

    Discuss how we can and when we can start using brand new capabilities like this. What do we need to be careful of? If you apply that line of CSS to your element, the shape won’t be applied to it unless two conditions are met:

    The element must be floated. Future levels of CSS Shapes may allow us to define shapes on non-floated elements, but not yet.

    The element must have intrinsic dimensions.The height and width set on an element will be used to establish a coordinate system on that element.

  2. How can we get started?
    Currently Shapes is supported only in Webkit Nightly and Chrome Canary, Module Level 1 (allows content to flow around a shape)

    In order to use CSS Shapes in Chrome Canary today, you have to enable the experimental features flag.

    You can apply a shape to an element using one of the Shapes properties
    shape-outside:

circle()
ellipse()
inset()
polygon()

  1. What are some good suggestions, tools, and concepts that you’d like to remember when you decide to include this technology in a web design in the future?
  • Shapes property can be combined with Clipping and Masking, CSS Filters, and Compositing and Blending features.
  • Since shapes is not supported in all browsers, it is important to check which browsers support it and set up an alternate layout for non-supported browsers. A good tool to use is “canisuse.com”.
  • The best thing to do is to start experimenting with it and see what happens.
  1. Find another good article about this topic that you can share with us at the chat and explain why the article is worth looking at. http://www.html5rocks.com/en/tutorials/shapes/getting-started/

Chat 10-20 — SVG (Scalable Vector Graphics)

What are three situations where using SVG is advantageous over other methods? Explain why SVG is better in those situations.

  • SVG files are small and compress well. Anything that can help reduce loading time is always the best choice.
  • Vector files can be enlarged without losing crispness (unlike .gif or .jpg). This is ideal because one small image can be used in multiple place throughout a site at various sizes by changing the CSS.
  • SVG files look great on retina displays an obvious choice for 3-D animation.

Why would you want to optimize your SVG from Adobe Illustrator? Actually you wouldn’t necessarily optimize from illustrator because illustrator adds a lot of code to the file. Once saved from Illustrator, you can use an online SVG optimizer tool to clean up the file.

What are some other nuts and bolts you learned from the reading you’d like to make note of in your blog so that you can remember them when you try to implement SVG in the future?

  • Another clever progressive enhancement flavored technique for using SVG as background-image is by using it in conjunction with multiple backgrounds.
  • You can grab the SVG code right from Illustrator and drop it right into an HTML document. The SVG image will show up just the same as if you put it in an img.
  • SVG has fancy filters such as blurring.

Here’s a great article from Smashing Magazine on SVG filters.:

The Art Of The SVG Filter And Why It Is Awesome

Oct. 6 Chat — What Web Designers Can Learn from Video Games

What are two concepts that you can apply to your web design work in the future from the first article? Explain/give examples.

In order for a site to have a good/positive user experience, it should be attractive and/or easy for the audience to relate to as well address the user directly. The goal is to build an “ongoing relationship” and in order to do so, users must be engaged for longer periods of time. This means, “applying these relationship building type elements to every tiny detail of your online presence, from the calls to action, to microcopy, to 404 pages, and to each confirmation email.”

I probably would never have equated a video game experience with e-commerce but in terms of creating an experience, they aren’t that different. Both aim to create an environment that immerses the shopper/player and keeps them wanting to come back for more such as:

  • Provide the user meaningful options so they can choose the best way to accomplish their goal (i.e. wish lists, save items in cart for later, recently viewed items, related items).
  • Guide the user, give feedback on choices (tips, show related items, easy 1-click checkout).

 

What are two concepts that you can apply to your web design work in the future from the second article? Explain/give examples.

It doesn’t matter if you own a single or multi-product site, if you understand the context as to why people are making their decisions, you can apply that to so many areas of your business. This could range from where you feature your brand and how you position it, to adding new products or features to the existing offering.

Like in a gaming, the user (consumer) has to identify somehow with the site’s persona (character). If they can make that connection, i.e. imagine themselves in a better suit than the boss, then you’re more than halfway to the sale so to speak.

What insights do you have about this topic? Consumer behavior (user behavior) is fascinating. If you know what you’re doing, and understand the user (consumer) you can influence their behavior and they don’t even know that it’s happening.

Here is an interesting article on consumer behavior: 10 Ways to Convert More Customers Using Psychology

Sept. 29 Chat — WordPress Security

  • What are three things the article suggests that are not listed on the ftwebdesign.com Reference How-To’s page?
    • Use a reliable hosting company.
    • Stay up to date.
    • Installs as few plugins as possible. @ step authentication.
  • What was the most beneficial or interesting link you clicked on that the author provided? Login Lockdown
  • What are three things you learned about WP security that you didn’t know before and why are they important for you, going forward?
  • Employ two-step authentication
  • Choose a custom table prefix
  • Add salts to wp-config

Sept. 15 Chat— Need a Job? Add Fake Projects to Your Portfolio

What are the three best takeaways for you from this article?

  • Including an icon set
  • Improving the ux of a mobile site
  • Place an emphasis on process – don’t just focus on your ideas and execution. Use this time to go through the processes involved.
  • Considering everything from research to user personas to briefs and wireframes. These are the types of deliverables that really make your work stand out, and showcase the life cycle of your project.

What was the most beneficial or interesting link you clicked on that the author provided?

Dribble- great site for great ideas and inspiration

Chat Sept. 8–How Adding Schema to Your Site Helps SEO

What was the best link that the author provided and what did you learn when you went there?  There were many great links in the article but the one I found most helpful/informative is
A Beginner’s Guide to Content Strategy for the Web: 10 Things You Need to Know.  While having a content strategy might seem like something obvious, it is also something that can easily be overlooked, especially by an inexperienced developer. In marketing, you learn the importance of tailoring your message to your audience so to must you match the writing style of your content to the audience’s literacy level.  The bottomline, keep the language simple and clear in order to keep your audience engaged. Finally, break content into small chucks so it can flow easily into different presentations and be used in flexible layouts.

What did the author do to make sure this post got shared on social media a lot? The author talks about including schema markup in conjunction with social media tags to make content shareable and optimized. The author included a side-bar with “share content” social media buttons with schema markup with counters. And why does that matter? Ping-backs to your site can help improve page ranking.

How do you include schema in a web page? Schema has to be added manually to each page, which the author says can be a big pain. It’s best to add schema when you are still in the planning stages. Do you think this tool (http://schema-creator.org/) would make it easier? Yes, because you fill out the form for the type of schema that you want to create and produces the code.

How does the author say you can test if your schema is working correctly? use Google’s Structured Data Testing Tool to check that everything is working correctly.

What’s the best takeaway for you from this article? Including schema microdata in your HTML code can help search engine crawlers interpret the content of your pages more effectively.

8/25 Chat — Getting a Job as a Front End Web Developer

Provide a couple examples of things in the article that either surprised you or that you agree with. Explain why these things surprised you or made you say “I agree!”

“Credibility isn’t purchased through tuition, it’s proven through effort and delivery.” This statement doesn’t surprise me but it is intriguing and definitely is good to know. It makes sense that in the tech industry, a person’s ability to build, is how you are measured not by the diploma.

“Depending on local cost of living you can easily make six figures as a mid/senior-level web developer.” The fact that you can make 6 figures as a mid-level developer makes me hopeful because mid-level graphic designers (print) don’t make that much.

What in the article encouraged you? T
he most encouraging thing I got out of the article is that it’s never too late to learn and that learning isn’t linear. It’s important to know some basics but you don’t have to know everything. There are many sources online for learning but the best way to learn is to give yourself little projects and practice.

What made you nervous?
Learn real JS. You will not regret it. It will make you a better developer.”

Learning Javascript makes me anxious more than nervous. I agree that it’s important and it makes you all the more marketable but I barely know php and just now have an intermediate level of understanding of HTML & CSS. Learning a programming language seems daunting.

What’s the best takeaway from the article for you personally? That’s the barriers to entering this field are relatively low. If you can build it, whatever it is, you can design your own career.

Chat: May 19 — Review Past and Plan the Future!

What have you accomplished during 2014/2015 as far as web goals go? 
My biggest accomplishment this year has been finally understanding WordPress. This happened after I completed the Themeshaper tutorial followed by Mortesen’s WordPress Underscores course on Lynda.com. I now understand what all the files in a WordPress theme mean and what their function is.

I was able to what I learned and expand on it to design a theme for the company where I work. In the process of designing the theme, I pushed my CSS and HTML5 skills beyond anything I had tried before, including using advanced pseudo selectors nth-of-type and nth-of-child.

I even went so far as to try so javascript and PHP. My PHP skills are still very beginner but I understand it a lot more and know enough to troubleshoot.

I recently finished a second site for work which I involved a UX design, front and backend development. The original site was poorly designed with no regard for user experience. So I began looking at the original site through the eyes of the user. I came up with a concept that I hard coded in HTML5 and then converted to PHP. Using myPHPadmin and with the help of another Lynda tutorial, I successfully created and connected a database to the site.

Lastly, I finally feel as if I’ve mastered “mobile-first”! Both sites referenced above are fully responsive and don’t break.

What are some personal goals you have for yourself this summer? I plan to update my personal website. I also plan to convert a website I designed last summer into WordPress and finally, I plan to dive into PHP a lot more. There are some tutorials that I would like to review and/or do again. I think this time they will make more sense.

What are some professional goals you have for yourself this summer? I’d like to continue to study UX and perhaps join a users group to learn best practices as well a do some networking be it virtual or in person.