Archive

Archive for October, 2015

Sponsor: Learn Web Design with Treehouse

October 26th, 2015 No comments

Treehouse is structured, inexpensive, modern training to for learning how to be a web designer and developer. I love how they allow you learn in ways that match what you want to do. Wanna learn to build a game for iOS? They have a project you can do. Want to learn Ruby? That’s a topic you can dig into. Want to learn what you need to become a web designer? That’s a track.

Their Code Challenge Engine allows you to write code and be helped, in real time, with feedback on what you are doing right and wrong.

They have helped over 162,000 students around the world learn web and mobile development skills either to literally get a job in the field, learn something they need to tackle a project, or freshen up their existing skills.

Direct Link to ArticlePermalink


Sponsor: Learn Web Design with Treehouse is a post from CSS-Tricks

Categories: Designing, Others Tags:

ES6 Overview in 350 Bullet Points

October 26th, 2015 No comments

Nicolas Bevacqua summarises everything ES6 with an invaluable list of each new feature and links to find more info about them:

My ES6 in Depth series consists of 24 articles covering most syntax changes and features coming in ES6. This article aims to summarize all of those, providing you with practical insight into most of ES6, so that you can quickly get started. I’ve also linked to the articles in ES6 in Depth so that you can easily go deeper on any topic you’re interested in.

Direct Link to ArticlePermalink


ES6 Overview in 350 Bullet Points is a post from CSS-Tricks

Categories: Designing, Others Tags:

Blokk Font simulates text for Mockups & Wireframes

October 26th, 2015 No comments
blk

Most designers know about Lorem Ipsum but that’s not always best for lo-fi wireframes. UI design often does need typography to fill in the gaps, however the typographic choices can put the brakes on an otherwise smooth creative process.

Instead consider trying BLOKK font for your next project. This is a free open source typeface that simulates rectangles for sentences. It’ll give the homogeneous appearance of neat lines and paragraphs with pixel-perfect spacing.

You can find a free download link on the Blokk Font website, or check out the GitHub repo for a Bower install method.

Blokk is perfect for any mockup program because it should be installed as a system font. Photoshop, Sketch, Illustrator, GIMP, anything that you use will recognize Blokk Font.

If you have the time then download a copy and install for yourself. It’ll really save time during those initial mockup phases on both personal & commercial projects.

Read More at Blokk Font simulates text for Mockups & Wireframes

Categories: Designing, Others Tags:

Dealing With Loud And Silent Burnout

October 26th, 2015 No comments

Many of us struggle silently with mental health problems and many more are affected by them, either directly or indirectly. It’s {Geek} Mental Help Week and we would like to help raise awareness with a couple of articles exploring these issues. – Ed.

We’ve all experienced that burnout moment. It’s that moment when we’ve got nothing left to give but keep trying anyway, when we’re left without much more than a shell to live in and motions to go through.

Dealing With Loud And Silent Burnout

We’re fried and broken and wish desperately for our work to make sense, for our energy to come back, for things to be fun and as they were. In such moments all we want is for our work to feel like our work and not like torture.

The post Dealing With Loud And Silent Burnout appeared first on Smashing Magazine.

Categories: Others Tags:

Working with writers: what designers need to know

October 26th, 2015 No comments

Writers don’t want designers to hate us, but we ‘get it’.

Designers see us as defensive babies — that’s fair. You assume we’re only killing time until we sell our manuscript — also fair. But be nice, or we’ll name a character after you and make them a massive jerk.

We need to be comrades. When we work in unison, magic happens and projects reach a whole other level. When we work against each other, it’s a hateful experience, and the job becomes the child of a loveless marriage.

In an effort to unite designers and writers around the world, here are a few things that you should know about your wordsmith:

You have magic powers we don’t understand

Seriously. How the hell do you do anything that you do? Your skills are insane. We can’t do those things, and struggle to understand them. We control our laptops with a small trackpad at the bottom. You have a magic pen mouse thing that confuses and scares us.

Copywriters don’t know the first thing about graphic design. We have no clue how long it takes to code an image map. We might say something like ‘Maybe make that word pink,’ but we don’t actually know if that is a good idea. — one humble writer.

Bear with our ignorance. We’re coachable. If we ever ask you a stupid question, or a have a stupid idea, be patient. Try to teach us, so you only have to have this conversation once.

And please don’t look down on the little sketches we make when we’re trying to show you what we’re imagining. We know they suck. Just wave your magic pen mouse and make it better.

We’re sorry we leave at 5pm while you’re still working

We truly are sorry. We wish we could help you. But as outlined above, we can’t do your job. Letting us help you with design is like letting a 5-year-old help you paint the house. You’d have to work very hard to undo our damage.

Also, staying after 5pm really cuts into naptime. And then there’s the crankiness.

Kidding aside, your work is often more time consuming. It’s estimated that a designer can design a website in 20 hours, if they work uninterrupted (try to imagine not being interrupted) and everything runs perfectly. If writers had the same circumstances, our work would likely be done in under 10. So you’re almost always going to have more on your plate.

We would love to help, any way we can. When you’re slammed on a big project, let us know if there is any way we can lighten your load. Feel free to give us any grunt work you think we can handle.

We share a lot of frustrations (mainly the client)

Writers and designers can often bond over the fact that people try to ruin our work.

We can imagine how frustrating it is when a client suggests that you wedge a logo into your work. And you can imagine how frustrating it is when they ask us to add buzzwords like “Omni-channel” to ours. We’re both given the always-vague feedback of, “Make it pop”. We’re also both asked to “whip something together” by people who have no idea how long our work should take.

We don’t love that your work usually comes first

There’s a polarization of opinions about what’s more important: the design or the copy? Should the copy be written to fit the design, or vice versa? Both sides have merit, but design-first typically wins out in most agencies.

You are also most likely getting paid more than us, with more opportunity for freelance. This may lead to a bit of professional jealously, even though we fully acknowledge the earning potential of your magic powers.

Again, stay patient with us. Let us pout now and then. We’ll get over it.

Get your writer involved in the creative process, as early as possible. Let them in, even if they’re not supposed to start working on the copy just yet. Show them what you’re working on, and where you want to go. This gets our juices going early, helping us turn out better copy to go with your amazing design.

People will try to turn us against each other

Account managers or sales staff can be sneaky, in an agency setting. They may get you to try to convince us to reel in a deadline, or vice versa. This can’t happen.

It may be subtle. It could be an email that says “Hey, Jan said the grape juice ad will take 3 days to design. Can we speed this up?” Or they may outright ask us to convince the other to re-shift our priorities. No matter what form it takes, it’s a simple case of asking Dad when Mom says, “No”.

We’re a team. We need to form a unified front against these attacks. We need to always extend the professional courtesy of respecting the each other’s deadlines and timeframes.

we need to have each other’s backs when people…ask for too much

This isn’t to say we won’t re-arrange deadlines to help you. That’s just a case of the artists sticking together and helping each other out. But we need to have each other’s backs when people outside of creative ask for too much.

It sounds cliquish, but this is how great work gets done.

We want to work with you again in another life

We won’t be together forever, but we want to be together again.

If one of us leaves the company, we need to stay in touch — on e-mail, Facebook, LinkedIn or whatever. Writers love having a network of talented creative people. And we want to refer you.

This means we want to drop your name if a freelance client needs a designer. We would also love to help you get your next job. Of course, we also want you to return the favor. Hopefully we have impressed you enough to keep our name in the front of your mind.

It’s important that we stay in touch after our paths go different ways. So let’s stay on each other’s radar.

This is far from a complete list. Writers need a lot of understanding. But do your best to learn and understand our creative intricacies and we will do our best to bring out the best in your work.

87 Photorealistic PSD Mockups for your Designs – only $17!

Source

Categories: Designing, Others Tags:

iSwift converts Objective-C code over to Swift

October 26th, 2015 No comments
Untitled-2

Apple’s creation of iOS forced mobile developers to learn the Objective-C programming language which is a superset of C. It’s a fairly verbose language but has been used in OS X development for years.

Recently Apple came out with a replacement language named Swift. It follows a similar base like Objective-C but it’s truly a language all its own.

This means that many instances with Objective-C code will not compile accurately with Swift. Naturally this has caused an issue with developers that would prefer to write their code in Obj-C.

Now there’s an application called iSwift that automates the conversion process. You’ll be able to pass in blocks of Objective-C code and pop out readable & verified Swift code. This will save iOS developers a whole lot of time and stress in the long run.

The iSwift program can be downloaded for free as a trial, but ultimately costs $14 USD for a full license.

If you want to try it out then grab a copy to install or use the online playground to test it out in your browser.

Interested visitors can stay up-to-date with iSwift on Facebook or by following the official Twitter account @iswiftapp.

Read More at iSwift converts Objective-C code over to Swift

Categories: Designing, Others Tags:

Free UX Design E-book written by UX Specialist Tal Florentin

October 26th, 2015 No comments
00

The designer & developer Tal Florentin has been working in the web for over 18 years. He has about two decades worth of experience and is prominently known as the author of the UX Hero comic series.

Recently he put out a free e-book titled You’re Designing It All Wrong!. It’s meant to be a guide for designers who want to better understand screen design concepts as they pertain to the user.

The e-book is packed with information learned on the job from Tal’s 100+ various projects crafting user experiences for more than 3,000+ screens.

You’ll learn everything from the basics of user experience design to psychology and how it affects typical user behaviors. Various topics include:

  • Design & Aesthetics
  • Psychology & Behavior
  • Eye Tracking Research
  • Decision Making
  • Business & Strategy

It’s a book that offers deeper insight into design beyond just typical aesthetics. The idea is to help designers, developers, and business owners understand how design can influence user behavior which can ultimately lead to success(or failure).

And did I mention it’s 100% completely free?

To download a copy visit the e-book landing page on Webydo and sign up for a free copy.

You can also follow Tal & updates on his work via his Twitter account @TalFlorentinUX.

Read More at Free UX Design E-book written by UX Specialist Tal Florentin

Categories: Designing, Others Tags:

20 Code Snippets for Interactive Buttons

October 26th, 2015 No comments
blobs button

Can you imagine a website without buttons? I bet you can’t. And it is not surprising since these tiny, mostly rectangular-shaped objects much like navigation or copyright information are one of the fundamental details of any UI. Not only do they make links look more weighty, appealing and pushy, but they also help to increase conversion rates and make user experience handier and more intuitive. These CTAs (aka Call-to-Action) have the power to win over potential clients and give a boost to your business.

It is vital to pay particular attention to shape, coloring, space, typography, and of course, the behavior of a button to open up its possibilities. While the first four characteristics as a rule rely on the general theme, the last one varies depending on the goal that you need to achieve. For example, you can insert a spinner to brighten up seconds of waiting; or, you can assign some eye-catching effects that will grab the attention right away. Adding a bit of a dynamic maximizes the impact. Today’s collection includes 20 code snippets for engaging and attractive effects that were created to enrich buttons and make the user experience more enjoyable.

Blobs Button

Creator: Nikolay Talanov

Particle Button Made With Canvas and HTML5

particle button
Creator: Ignacio Correia

Gelatin Over Button Effect with Sass

gelatin over button effect
Creator: François Lesenne

3D Paper Button Effects

3d paper button
Creator: Ashley Nolan

CSS Only “Material Design” Animated Buttons

material design button effect
Creator: Jon Brennecke

3d Button Effect

3d button
Creator: drus unlimited

Close Button Effects

close button ui
Creator: Jonas Badalic

A Bunch of Funky CSS3 Toggle Buttons

funky toggle buttons
Creator: Ashley Nolan

Pure CSS Button Effects

pure css button effects
Creator: Overly Engineered

Hover Effect

elegant hover effect
Creator: Deep

Jelly Button

jelly button
Creator: ayamflow

Button Hover States

button hover effects
Creator: James Power

Gaming Button With Hover Effect

hover over effect
Creator: kaigth

Share Button

share button
Creator: Vincent Durand

Flipside

flipside
Creator: Hakim El Hattab

Particle Button

button with particle animation
Creator: Timo Hausmann

CSS3 Button Examples

ecommerce buttons
Creator: Volusion Services

Inspiration for Button Styles and Effects

series of button effects
Creator: Mary Lou

Creative Button Styles

creative buttons
Creator: Mary Lou

Animated 3D Buttons

creative 3d buttons
Creator: Zachary Minner

(dpe)

Categories: Others Tags:

Running a .NET app against a Postgres database in Docker

October 25th, 2015 No comments
PancakeProwler

Some days/weeks/time ago, I did a presentation at MeasureUP called “Docker For People Who Think Docker Is This Weird Linux Thing That Doesn’t Impact Me”. The slides for that presentation can be found here and the sample application here.

Using the sample app with PostgreSQL

The sample application is just a plain ol’ .NET application. It is meant to showcase different ways of doing things. One of those things is data access. You can configure the app to access the data from SQL storage, Azure table storage, or in-memory. By default, it uses the in-memory option so you can clone the app and launch it immediately just to see how it works.

Quick summary: Calgary, Alberta hosts an annual event called the Calgary Stampede. One of the highlights of the 10-ish day event is the pancake breakfast, whereby dozens/hundreds of businesses offer up pancakes to people who want to eat like the pioneers did, assuming the pioneers had pancake grills the size of an Olympic swimming pool.

The sample app gives you a way to enter these pancake breakfast events and each day, will show that day’s breakfasts on a map. There’s also a recipe section to share pancake recipes but we won’t be using that here.

To work with Docker we need to set the app up to use a data access mechanism that will work on Docker. The sample app supports Postgres so that will be our database of choice. Our first step is to get the app up and running locally with Postgres without Docker. So, assuming you have Postgres installed, find the ContainerBuilder.cs file in the PancakeProwler.Web project. In this file, comment out the following near the top of the file:

// Uncomment for InMemory Storage
builder.RegisterAssemblyTypes(typeof(Data.InMemory.Repositories.RecipeRepository).Assembly)
       .AsImplementedInterfaces()
       .SingleInstance();

And uncomment the following later on:

// Uncomment for PostgreSQL storage
builder.RegisterAssemblyTypes(typeof(PancakeProwler.Data.Postgres.IPostgresRepository).Assembly)
    .AsImplementedInterfaces().InstancePerRequest().PropertiesAutowired();

This configures the application to use Postgres. You’ll also need to do a couple of more tasks:

  • Create a user in Postgres
  • Create a Pancakes database in Postgres
  • Update the Postgres connection string in the web project’s web.config to match the username and database you created

The first two steps can be accomplished with the following script in Postgres:

CREATE DATABASE "Pancakes";

CREATE USER "Matt" WITH PASSWORD 'moo';

GRANT ALL PRIVILEGES ON DATABASE "Pancakes" TO "Matt";

Save this to a file. Change the username/password if you like but be aware that the sample app has these values hard-wired into the connection string. Then execute the following from the command line:

psql -U postgres -a -f "C:pathtosqlfile.sql"

At this point, you can launch the application and create events that will show up on the map. If you changed the username and/or password, you’ll need to update the Postgres connection string first.

You might have noticed that you didn’t create any tables yet but the app still works. The sample is helpful in this regard because all you need is a database. If the tables aren’t there yet, they will be created the first time you launch the app.

Note: recipes rely on having a search provider configured. We won’t cover that here but I hope to come back to it in the future.

Next, we’ll switching things up so you can run this against Postgres running in a Docker container.

Switching to Docker

I’m going to give away the ending here and say that there is no magic. Literally, all we’re doing in this section is installing Postgres on another “machine” and connecting to it. The commands to execute this are just a little less click-y and more type-y.

The first step, of course, is installing Docker. At the time of writing, this means installing Docker Machine.

With Docker Machine installed, launch the Docker Quickstart Terminal and wait until you see an ASCII whale:

Docker Machine

If this is your first time running Docker, just know that a lightweight Linux virtual machine has been launched in VirtualBox on your machine. Check your Start screen and you’ll see VirtualBox if you want to investigate it but the docker-machine command will let you interact with it for many things. For example:

docker-machine ip default

This will give you the IP address of the default virtual machine, which is the one created when you first launched the Docker terminal. Make a note of this IP address and update the Postgres connection string in your web.config to point to it. You can leave the username and password the same:

<add name="Postgres" connectionString="server=192.168.99.100;user id=Matt;password=moo;database=Pancakes" providerName="Npgsql" />

Now we’re ready to launch the container:

docker run --name my-postgres -e POSTGRES_PASSWORD=moo -p 5432:5432 -d postgres`

Breaking this down:

docker run Runs a docker container from an image
--name my-postgres The name we give the container to make it easier for us to work with. If you leave this off, Docker will assign a relatively easy-to-remember name like “floral-academy” or “crazy-einstein”. You also get a less easy-to-remember identifier which works just as well but is…less…easy-to-remember
-e POSTGRES_PASSWORD=moo The -e flag passes an environment variable to the container. In this case, we’re setting the password of the default postgres user
-p 5432:5432 Publishes a port from the container to the host. Postgres runs on port 5432 by default so we publish this port so we can interact with Postgres directly from the host
-d Run the container in the background. Without this, the command will sit there waiting for you to kill it manually
postgres The name of the image you are creating the container from. We’re using the official postgres image from Docker Hub.

If this is the first time you’ve launched Postgres in Docker, it will take a few seconds at least, possibly even a few minutes. It’s downloading the Postgres image from Docker Hub and storing it locally. This happens only the first time for a particular image. Every subsequent postgres container you create will use this local image.

Now we have a Postgres container running. Just like with the local version, we need to create a user and a database. We can use the same script as above and a similar command:

psql -h 192.168.99.100 -U postgres -a -f "C:pathtosqlfile.sql"

The only difference is the addition of -h 192.168.99.100. You should use whatever IP address you got above from the docker-machine ip default command here. For me, the IP address was 192.168.99.100.

With the database and user created, and your web.config updated, we’ll need to stop the application in Visual Studio and re-run it. The reason for this is that the application won’t recognize that we’ve changed database so we need to “reboot” it to trigger the process for creating the initial table structure.

Once the application has been restarted, you can now create pancake breakfast events and they will be stored in your Docker container rather than locally. You can even launch pgAdmin (the Postgres admin tool) and connect to the database in your Docker container and work with it like you would any other remote database.

Next steps

From here, where you go is up to you. The sample application can be configured to use Elastic Searchfor the recipes. You could start an Elastic Search container and configure the app to search against that container. The principle is the same as with Postgres. Make sure you open both ports 9200 and 9300 and update the ElasticSearchBaseUri entry in web.config. The command I used in the presentation was:

docker run --name elastic -p 9200:9200 -p 9300:9300 -d elasticsearch

I also highly recommend Nigel Poulton’s Docker Deep Dive course on Pluralsight. You’ll need access to Linux either natively or in a VM but it’s a great course.

There are also a number of posts right here on Western Devs, including an intro to Docker for OSX, tips on running Docker on Windows 10, and a summary or two on a discussion we had on it internally.

Other than that, Docker is great for experimentation. Postgres and Elastic Search are both available pre-configured in Docker on Azure. If you have access to Azure, you could spin up a Linux VM with either of them and try to use that with your application. Or look into Docker Compose and try to create a container with both.

For my part, I’m hoping to convert the sample application to ASP.NET 5 and see if I can get it running in a Windows Server Container. I’ve been saying that for a couple of months but I’m putting it on the internet in an effort to make it true.

Categories: Others, Programming Tags:

Create 3D Shapes in CSS with Tridiv Editor

October 25th, 2015 No comments
00-tridiv-logo

Online dev tools are growing rapidly with a larger audience of new and experienced developers. One such area is code generation with more specific code generators focusing on particulars like CSS3 prefixes or animated effects.

But another emerging area is 3D rendering based solely in HTML/CSS. The new site Tridiv lets you create abstract shapes with nothing more than HTML and CSS code.

It’s a completely free webapp that works like a typical IDE/GUI combo. With custom settings and moveable features you’re able to create anything you can possibly imagine.

The classic NES console is a really cool example.

Note that CSS3 has come a long way, but there’s still a ways to go. Detailed rendering is still not as easy as you might think.

Also browser support is rather shoddy and will take time for greater adaption. This places CSS shapes in the “experimental” category of development techniques. They’re still really cool and fun to make, but perhaps not the best solutions for live production-ready websites.

You can use Tridiv for free with almost any modern web browser(this excludes Firefox and Internet Explorer). Hopefully support will be added in the future to reach a broader audience of developers.

If you have any questions or suggestions about Tridiv you can send a message via e-mail or directly on Twitter @TridivApp.

Read More at Create 3D Shapes in CSS with Tridiv Editor

Categories: Designing, Others Tags: