What's Going on Lately with Microsoft.NET?

Microsoft's.NET is the programming framework created by Microsoft for developers to easily create applications and web services. A programmer can choose from a selection of codes in the library of the .NET framework that can be utilized without having to write it.

Microsoft decided to open source most of the .NET framework last year and it has been keeping the promise in the latest version of the .NET framework which is in the news for open source and cross platform features.

The latest release contains the RC2 of the.NET Core run-time and libraries. The programmer requires having these files simply in his folder to run an application. Programmers who are comfortable with run-time will be able to move ahead with their projects until ASP.NET Core tools are completed.

Many developers are facing compatibility issues of existing projects with the new update. Hence, Microsoft has decided to provide guidance to developers who are facing compatibility issues with the .NET framework programming model. They have also advised programmers to target the new platform when running new projects and to upgrade old projects to new framework only if necessary.

Compatibility issues are reduced by running on the newer platform by leaving the targeted .NET framework version unchanged for an app. The newer versions of the platform are better to work on because any compatibility issues in the older versions in the subsequent release of the 4.x releases. It is also advisable to upgrade to the latest version from any previous versions of the .NET framework.

It is suggested that the developer run the app on any of the .NET framework on which he thinks the app will run. The programmer should make use of API Portability Analyzer and .NET Framework Compatibility Analyzers to find out problems areas in his app. With the help of these compatibility switches, the developer will be able to leave out the features of the app that are causing a problem while upgrading to the latest version of the .NET framework.

Developers should also need to test applications if it is built with newer compilers. A slight change in the C# and the Visual Basic compilers that cannot be fixed but do not trouble in run-time. Developers must be intentional while building apps because of the change in the compilers.

The release of the RC2 is an exciting step in the information technology industry as it is a significant step forward for Microsoft’s cross-platform.NET. This plays a crucial role in the company’s plan for Windows Server 2016 to roll out. Smaller and faster .NET applications will fit the micro-services and containers. The Exchange Server 2016 messaging server is still not supported with the Windows Server 2016, Microsoft’s latest emerging product still in the preview stage. Windows Server 2016 is said to be released later this year and that’s when it will support the Exchange Server 2016.

For Windows, users and developers need to migrate to the latest version of the latest framework which is open source and works cross-platform will now run with lesser compatibility issues with your applications once you have updated to the latest version of the framework.

Hopefully this post has been helpful in identifying some of the benefits of using .NET. If Extra Nerds can help you and your business with any such services, be sure to contact us for a quote!

Posted on May 20, 2016 and filed under Microsoft .NET.

Nerdy Newsletter: November, 2015

Client Highlight: King Family Farm

King Family Farm officially began in 2002, though the founders have been involved in agriculture their entire lives. Both JB & Charlene have ancestors from southeastern Ohio who were involved in agriculture, some since the 1800s, so their roots run deeply. Still, they felt the effects of a fluctuating market. Through innovation, however, they persevered and became successful. As their business continued to grow, they contacted Extra Nerds to modernize their website, including the addition of e-commerce capabilities. We're so glad to see a local business grow and succeed and we're proud to be a part of it in our own small way.

Meet a Nerd

nick.png

Nick Bauer, our Design Nerd, has over 13 years of experience in the design field ranging on work for small businesses to work on billion dollar brands for Procter & Gamble. He is a ‘Jack of All Trades’ Designer who works in various medias on and off the computer. Nick has a Bachelors of Fine Arts degree from Miami University and lives just north of Cincinnati with his wife and daughter, where he sits as a board member on the City of Sculpture for Hamilton, Ohio.

When he's not working hard being a Nerd, he's creating metal sculptures or furniture and playing indoor soccer. It's great to have such a talented and diverse designer on our team!

Become a Nerd

Extra Nerds is always looking for folks to add to our team. Do you have interest in becoming a part-time developer with a background in .NET and SQL Server? Our preference is for someone with knowledge of MVC, Entity Framework, and WebAPI. Javascript and CSS experience is a plus. Check out our website and if you're interested in joining our team then give Sid McFarland a call at 740-249-2200.

Extra Rewards

Be sure to take advantage of the Extra Nerds Referral Program. For every person or company you refer to Extra Nerds, you receive 1 FREE hour of development from one of our specialists. Not a bad deal, right? Spread the love!

Posted on November 6, 2015 and filed under Nerd Newsletters.

Using Microsoft’s Entity Framework: Part 6 of 6

Reduced Development Time

In the first blog in this series, we provided a comprehensive introduction to Microsoft's Entity Framework. Going forward, we addressed the creation of custom web applications, and creating a data access layer. In the next post, we went into identifying a couple of the more common EF issues and how to troubleshoot them while the most recent installation taught us about creating a scaleable application. For our final post, we’ll talk about how EF can actually reduce development time.

The beauty of Entity Framework is the way that it reduces development time when you launch a new project. It has done a great deal of the preliminary work for you by reducing the time required to write the data access layer. Not only that, but you can save time down the road when revisions or modifications must be made.

If you have dealt with systems that degrade over time, the results being slow and inaccurate, you realize how the handling of data can make or break a system. The Entity Framework allows developers to manipulate conceptual objects, such as products, messages, etc. This mapping ability allows developers to store data efficiently. Working between a database and code can be time consuming and can provide yet another area for errors. However, Entity Framework has taken that part of the work and prepared it in advance.

Not only does this system make programming easier and faster, but it allows for portability since changes in the database software require a mere change in the mapping software interface rather than in the code itself. By steering clear from a database model and using objects instead, you can design a system conceptually, thereby saving time and gaining flexibility. By layering your software, you can use business logic throughout the model so that each layer of code performs its own function, thus separating the needs and concerns along the way. This approach, with separation built in, creates a defined method of organizing or modeling the system according to the needs.

SQL is a time stealer that takes energy and time and hides it away, never to be found again. While many developers have grown to understand SQL deeply and are very comfortable with it, there are others who may not have a thorough understanding when it comes to using SQL for complicated scenarios. A little mistake or a line of code that is not optimized can create issues that cause problems down the road. Not only that, but troubleshooting can be difficult. These issues can come up even for experienced developers.

When one has new developers, the use of Entity Framework would be much more time effective and less susceptible to mistakes. By using the higher level language, you can write a query and allow the Entity Framework to generate the ideal SQL commands quickly and accurately. Not only is the work done for you, but it is easier to document and read the code. This not only saves you money and time now, but can save a great deal of effort down the road when modifications are necessary. Imagine being able to go into a layer of code and merely make the changes necessary there without delving into the data interface layer.

By moving away from database-first systems, you can lean on a higher-level tool that can allow you to grow and expand to more complex application scenarios without 'reinventing the wheel' every time you take a step in a new or expanded direction.

Posted on October 23, 2015 and filed under Using Entity Framework.

Using Microsoft’s Entity Framework: Part 5 of 6

Creating a Scaleable Application

In the first blog in this series, we provided a comprehensive introduction to Microsoft's Entity Framework. Going forward, we addressed the creation of custom web applications. The third outlined creating a data access layer and the fourth was really helpful in identifying a couple of the more common EF issues and how to troubleshoot them.

So, now that you have some understanding of how Entity Framework actually works, you are ready for the next step in understanding why this is such a positive solution for your business. So how does Entity Framework allow developers to create a more robust and scalable application? Without getting too technical, an example is probably the best way to show you just how useful this can be.

Generally, when you are using a database there is a great deal of tedium involved in constantly adding new information, making sure it falls into the right categories and writing the particular language to keep things up to date. As we’ve discussed, Entity Framework is an open source framework provided by Microsoft that does a great deal of the busy work for you.

Let us take a moment to look at an example that may be used by a school. The school is the domain in which everything is stored within the database. As students rarely make a career out of going to high school, the database is constantly changing and each student has their own particular attributes that need to be tracked. These attributes can vary from GPA to days missed to the type of classes they are taking. To keep this information updated traditionally, a great deal of language would need to be updated each time to create an accurate database. With Entity Framework, the attributes are added to each student and the framework does the busy work to make put them in the right areas of the database.

This allows you to create classes with different connection with much more ease and at a faster rate. While the code generator in the framework may not be as robust as what will be written by an engineer, once the groundwork is done, Entity can handle the rest with ease.

In addition Entity offers T4-like template code generation. With predefined templates that can generate code in C# or Visual Basic for the model that can support persistence aware and persistence ignorant entities. It also supports validation framework for entity property values validation MVC Controller and views, Data Annotations metadata classes and a wide variety of other technical aspects that in short, makes life easier for everyone involved in a project.

You will also have the option to update to and from database with wizards that allow you to synchronize with ORM models in any direction automatically. A wide variety of mapping is supported as well, from entity to table, table splitting and complex types just to name a few. Unlike EDM designer Entity does not require manual XML code editing regardless of how complex it may be.

While this is a very high level overview of what is on the table when it comes to incorporating Entity Framework into your business, it is paramount to understand that this was designed to make a developer’s job much easier. It succeeds at that in spades and the fine folks here at Extra Nerds will be happy to discuss how we can help with your next project.

Stop back next week for our sixth and final installation in this series which will tell us how Entity Framework reduces development time.

Posted on October 16, 2015 and filed under Using Entity Framework.

Using Microsoft’s Entity Framework: Part 4 of 6

How to Troubleshoot Common Issues

Continuing from the first parts of the series when we provided an introduction, a follow up on creating web applications, and a third on creating a data access layer, this fourth installment will be detailing the troubleshooting of common problems that may be encountered during the Entity Framework process. This will help those who are constantly encountering issues from the Microsoft program, a process that is often very frustrating and in some cases, difficult. Here is a basic guide which some may find to be helpful.

Troubleshooting Tips

There are various things that can go awry when using Entity Framework. Rather than going through all of them, I will address the most common problems and remedies. Below are what I found to be the most consistent problems, as well as the highest source of complaints for those using Entity Framework.

Cannot Connect to a Database. For those who have gotten this error message, chances are you were unaware on how to handle it. That’s alright as clear instructions for dealing with these cases have not been readily available. So, how do you troubleshoot this problem? First, look into the connection settings that you have tied with the framework. Once you have found the connection hotspot, you will be able to tell the exceptions connectivity. Once a connection is found, it is recommended that you run a “debugger” to find the full source of the problem. After you have run the debugger, though absent of an exact code or configuration, the Entity Framework will most likely actively try to connect to a local SQL Server Express database that should be available. Through a quick configuration test, you can find the source of the problem, which 99% of the time is related to the absence of LocalDb. Install LocalDb and, once installed, choose to connect to this, rather than the SQL Server Express, and you should find that these connection problems are removed.

Cannot Attach to Deleted MDF File. Another common problem for those using Entity Framework is the inability to attach to a deleted MDF File. When those using SQL LocalDb delete files, the process is only completed when they use Object Explorer in Visual Studio, or in other cases, SQL Server Management Studio. The reason for this error is simple: the database of the file is still tied to LocalDb. Luckily, the solution is just as simple as the problem. You simply need to go to Object Explorer, find the file then delete it from this location. SQL servers should then recreate the files that were once deleted so that you can attach any additional information.

In Conclusion

These are certainly not the only problems that you could encounter, but they are generally the most common. For any other problems, just know that they are usually rooted in the database or in the connection of the files. Of course, other methods do exist to fix these problems, but for now these are the most simple and painless.

In our next post in this series, we’ll outline how Entity Framework allows developers to create more robust and scaleable applications so stay tuned!

Posted on October 9, 2015 and filed under Using Entity Framework.

Using Microsoft’s Entity Framework: Part 3 of 6

How to Create a Data Access Layer

As we mentioned in the introductory blog in this series as well as the post on creating custom web applications, Entity Framework (EF) is an object-relational framework (ORM) that is Microsoft's recommended data access technology usually on new .NET applications development. Basically, it allows the developer to work easily with relational data using domain-specific objects and without hard code database access. With my experience in building .NET applications, I'll be showing you how to create a data access layer using Entity Framework.

To create the entity data model (EDM) or the conceptual model for the entities of your domain, EF provides three models including model first, database first and code first. With the code first and model first approaches, it's assumed that a database schema is created based on the model you also need not have an existing database as you create your application. This is because database administrators (DBAs) are responsible for designing and maintaining database within enterprise environments and not the developers. In this post, we take a look at the database first option where the entity data model becomes a virtual reflection of the database or any of its subsets.

CREATE TABLE [dbo].[Department] (
[DepartmentId] INT IDENTITY (1, 1) NOT NULL,
[Name] VARCHAR (50) NULL,
PRIMARY KEY CLUSTERED ([DepartmentId] ASC)
);

CREATE TABLE [dbo].[Employee] (
[EmployeeId] INT IDENTITY (1, 1) NOT NULL,
[DepartmentId] INT NOT NULL,
[FirstName] VARCHAR (20) NOT NULL,
[LastName] VARCHAR (20) NOT NULL,
[Email] VARCHAR (50) NULL,
PRIMARY KEY CLUSTERED ([EmployeeId] ASC),
CONSTRAINT [FK_Employee_Department] FOREIGN KEY ([DepartmentId])
REFERENCES [dbo].[Department] ([DepartmentId])
);

The N-tier architecture

Normally, large enterprise applications will require more than one database to store their data and a data access layer (DAL) to read the databases. Repositories may also exist to communicate with DAL, business layer for logic, classes for business domain, service layer for displaying the business layer to the clients and finally a user interface such as ASP.NET application which I normally use in my case or a WPF desktop application.

Creating Data access layer (DAL)

1. Start by creating a new C# class library example (Mm.DataAccessLayer) and add an ADO.NET Entity Data Model. This is how I like to start off. In the Entity Data Model wizard, choose "Generate from database". The wizard allows you to connect the database selecting the Department and the Employees to be included in the model.

2. In order to separate entity classes from EMDX which is vital separation is of importance, add a new class library (Mm.DomainModel) using visual studio, my favorite to the solution.

3. Open the File Explorer and move the Model.tt file to your new project. folder.

4. Include Model.tt file back in Visual Studio in the created project by clicking   
"Include In Project" option on the "Show All Files" icon.

5. Delete Model.tt file from DAL project.

6. In the Model.tt template file, set the inputFile variable to point to an explicit path
where to find the model.

As Follows: const string inputFile = @"../Mm.DataAccessLayer/Model.edmx";

Right-click on your Model.tt template and choose the "Run Custom Tool" to regenerate and reflect the latest changes to that model.

7. As you well know, the context by default expects the entity classes included in the same namespace. For their new namespace you need to add a using statement to your Model.Context.tt template file of your DAL project.

using System;
using System.Data.Entity;
using System.Data.Entity.Infrastructure;
using Mm.DomainModel; <!-- Added -->
<#
if (container.FunctionImports.Any())
{
#>
using System.Data.Objects;
using System.Data.Objects.DataClasses;
using System.Linq;
<#
}
#>

8. All you need now is to add a reference from your DAL project to the domain model project and compile it.

Hopefully this post has been helpful to you in creating a data access layer. The next installment in the Microsoft Entity Framework series will concentrate on troubleshooting common problems.

Posted on October 2, 2015 and filed under Using Entity Framework.

CSS Best Practices and Tips By Toptal Developers

We at Extra Nerds believe that it is important to support folks like us, with similar philosophies, in the industry and, to that end, here’s our first guest blog post by Toptal Developers.    

CSS Best Practices and Tips

This resource contains a collection of best CSS practices and CSS tips provided by our Toptal network members. As such, this page will be updated on a regular basis to include additional information and cover emerging CSS techniques. This is a community driven project, so you are encouraged to contribute as well, and we are counting on your feedback.

Cascading Style Sheets (CSS) can be described as a style sheet language written in a markup language. It is used for defining the look and formatting elements of Web documents such as the layout, colors, and fonts. The CSS specifications are maintained by the World Wide Web Consortium (W3C). Even though every browser supports CSS, there are many inconsistencies in the supported specification version. Some browsers even have their own implementation of the specification and have proprietary (vendor) prefixes. Supporting all modern browsers is a daunting task, not to mention when developers need to support old and legacy browsers. All these problems cause a lot of trouble for developers, and it is hard for them to write CSS code that will render consistently across all browsers. That’s why we want our top CSS developers and engineers to share their knowledge and offer their best tips to achieve those tasks more easily.

How to Improve CSS Performance

There is a lot you can do to ensure good CSS performance and reduce page loading times. Here are some tips and techniques you can start implementing today.

A browser needs to go through every single DOM element to find what it is looking for. Take this example:

.home-page .header-main .nav-main ul 

The browser will begin by looking for every ul element, then every .nav-main inside of a ul, then every .header-main inside of that, and then every .home-page inside of that. Only when the search is done are styles applied. We can be far more efficient than that and write a specific selector, like this:

.nav-list 

Now the browser simply needs to find the .nav-list element and apply the styles to it. We have kept specificity low and avoided unnecessary nesting. Simple, yet efficient.

Naming classes can be tough, but you can use some of the well known tricks for that. For instance, in our .nav-list element, you can use the .component-descendant-descendant naming:

.nav-list-item

The .nav-list-item would be the list item in the navigation. Alternatively, you can use the BEM naming methodology, already covered in our CSS tips.

Another piece of advice for keeping low specificity is to avoid IDs and use classes. The big benefit of using classes is that you can reuse your styles and help keep your style sheets DRY (Don’t Repeat Yourself), which will also reduce the file size.

How to Write Modular CSS Code

Code duplication is one of the most important issues that originate from coding in plain CSS. In order to contest that, preprocessors come with very strong function, mixin or extend implementations. In this tip we are going to introduce @include and @extend, and discuss how they can be used efficiently in SCSS.

Creating Mixins with @include and @mixin

By utilizing the @include implementation, you can create mixin functions with parameters. For example, a display block centered container with max-width could be implemented as follows:

// Create a max-width container
@mixin maxWidthContainer($width : 1024px) {
        display: block;
        max-width: $width;
        margin: 0 auto;
}

The mixin declared above can be called with the following command: @include maxWidthContainer();. Since the default value for a $width parameter is set to 1024px, generated CSS will look like this:

display: block;
max-width: 1024px;
margin: 0 auto;

Extending Classes with @extend

The @extend can be used to share CSS properties from one class to another. For example, the following button style declarations in SCSS:

.button {
        color: black;
        background: white;
        border: 1px solid gray;
}
.button--warning {
        @extend .button;
        color: red;
        background: orange;
}
.button--disabled {
        @extend .button;
        color: white;
        background: gray;
}

Will result in the following CSS:

.button, .button--warning, .button--disabled {
        color: black;
        background: white;
        border: 1px solid gray;
}
.button--warning {
        color: red;
        background: orange;
}
.button--disabled {
        color: white;
        background: gray;
}

Please notice how the button modifiers (.button--warning and .button--disabled) are stacked in the initial declaration of .button.

Efficient Usage of @include and @extend

Mixin declaration is the most useful function that preprocessors have to offer. @include can be used for anything from adding animations to responsive breakpoints. Any piece of code that is repeated multiple times should be applied into a mixin which will effectively make your code more readable and easily maintainable.

On the other hand, @extend has to be used very carefully and sparsely. While initially it seems to pose plenty of advantages, in its use there are a few disadvantages:

  • You can not extend from within a media query
  • It does not accept any parameters

Both @include and @extend are very strong directives which can make CSS development with the aid of preprocessors way more productive as well as fun.

In addition to these CSS topics, the rest of the blog series includes discussions on Using Stylus to Easily Decouple Semantic Markup from CSS Stylesheets; How CSS Namespacing Can Aid Front-End Development; How to Write Maintainable CSS Declarations; How to Customize an HTML File Input; What is a Block, Element, Modifier Approach; and How to Write Consistent CSS.

Posted on September 30, 2015 and filed under CSS Tips and Tricks.

Using Microsoft’s Entity Framework: Part 2 of 6

Creating Custom Web Applications

In the first installment in this series, we just showed the basics in order to provide an informational foundation on Microsoft’s Entity Framework. Since that post was some time ago, let's review and also talk about why .NET and Entity Framework is ideal for creating custom web applications.

If you’re a business owner who aims to use the power of IT to grow your firm, you always want to find tools that can help you to achieve the best results. To that end, let’s talk about .NET and Entity Frameworks, some of the best technologies which are ideal for the creation of custom web applications. It is surprising that there are IT directors who still do not use these tools despite the fantastic value that they hold. In fact, you will be baffled at how quickly you can use them to overcome some of the challenges that have been hindering the growth of your organization.

Entity Framework explained

Commonly referred to as EF, Entity Framework is an incredibly useful object relationship mapper that enables .NET developers to work on data through the use of domain specific objects. The primary goal of EF is to make it easy for developers to focus more on the domain of the business as opposed to the writing of database plumbing codes. These connections include things such as data tables, commands, datasets, and links. By doing this, an IT technician will find it easier to overcome most of the challenges associated with this job.

How it actually works

For many years, web developers used other options such as ADO.NET to create utility libraries. Although this was successful, some found it difficult to pull vital data from the database without having to write data access codes that were both repetitive and confusing. With time, the entire process became boring to most experts and so they had to look for alternatives. The fact that EF is the preferred data access layer for Microsoft means that working with it can flawlessly move a project forward so it can easily get rid of the repetitive procedures.

Installing and using Entity Framework

To use EF, you will have to, of course, install it first. The best part is that even with the fantastic benefits that it brings, installing it is quite an easy process. Although there are other ways of installing it, the most effective one is to download and install it from Nuget. It is as easy as right-clicking on the preferences in your project and following the prompts. Once you find the Nuget packages, everything else will be simple. An alternative of doing this is using a package manager console. You can then go ahead to create a model of an existing database depending on the particular project that you want to work on ad how you want to do it. We reviewed this process in depth in our first installation when discussing how to get started.

Undeniably, .NET and Entity Framework are technologies that are really worth the investment. Regardless of the nature of your business, there is no doubt that success will come much easier once you have these technologies in place. To discuss your next potential project, and how to use technology to increase your profits while reducing your daily workload, just contact Extra Nerds today. And stop back next week when we discuss how to create a data access layer using Entity Framework.

Posted on September 25, 2015 and filed under Using Entity Framework.

CSS Tips and Tricks: Part 6 of 6

CSS Typography and Font Styling

Nerds. We always strive to stay on par with the ever-evolving computing technology at a pace which many can't withstand. Now it is an exciting time to familiarize ourselves with the modern CSS tips and tricks that are available and at our disposal. After years of what felt like same old techniques for the same old browsers, we are finally seeing browser implementation with HTML 5, CSS 3, and other technologies, which give developers cool new tools and tricks in their designs.

We’ve looked closely at display:none; CSS3, using CSS Syntax for web design, some basic tips and tricks, and vertical content alignment.  Now, in our sixth and final post in this series, let’s wrap this up by gaining an understanding of modern CSS typography and font styling.

In this guide, we are going to put the primary focus on the design trends and styles which characterize the modern CSS-based layouts, as well as the broad underlying concepts that you need to comprehend, in creating the most successful CSS layouts.

Modern CSS: Underlying Concepts

Typically, a modern CSS-based website is progressively enhanced, modular, efficient, and adaptive to diverse users.

Progressively enhanced. This means creating a solid page with the appropriate markups for the content and adding the advanced stylish to the page for the browsers that can handle it. The result is the creation of web pages that are usable by all browsers, but do not look identical in all browsers. This concept brings about more robust pages, happier users, reduced development time as well as reduced development time, and more fun.    

Modular. The modern day modular pages are no longer collections of static pages. Pieces of content and design components are reused throughout a website and even shared between the websites. This makes the pages adaptable in different places depending on the use and type of the information which they contain. Use of modular CSS has benefits such as smaller file sizes, reduced development time, reduced maintenance time, easier maintenance for others, and more consistent design and flexibility.

Efficient. The modern based CSS websites should be both efficient for you to develop and efficient for the server and browser to display to the users.

Adaptive to diverse users. The modern web pages that are powered by CSS should be able to accommodate the diverse range of browsers, devices, font sizes, screen resolutions, and the assistive technologies. This concept is growing quickly as web users are becoming increasingly diverse.

Modern CSS: Design Trends, Tricks, and Tips

There are six main trends that are helping designers create outstanding CSS effects. These include box model, floated columns, sizing using ems, image replacement, floated navigation, and sprites.

Box Model. At the center of modern web applications development is the box model. You may know your margins and padding, but that which happens when elements start to interact with each other is a different scenario. A good box model involves understanding the difference between quirk mode and strict mode. In fact, you need to have an understanding of the box model, Tantek's box model hack, quirks mode and strict mode, and activating the correct layout mode by the use of doctype declaration.

Floated Columns. Floating concepts is what has opened the doors to replace the table-based layouts. A developer should learn how to float and how to clear floats so that content that follows appears correctly. Understanding this trick requires prior knowledge of floatorial, clearing floats, faux columns, and creating liquid faux columns.

Sizing using Ems. When it comes to sizing using ems, we put into consideration the fonts and layouts. By use of fonts, we allow to resize the text using specified pixels. Layouts allow more flexibility. Styling elements by use of ems allow containers of content to grow along with text and maintain the consistency of design.

Image Replacement. Any boring text elements do not excite neither the developer nor the user. Users want graphical flairs along with gradients and glass effects. Image replacement tricks allow us to replace the existing content-rich and SE0 friendly text with stylish images or flash files with embedded fonts.

Floated Navigation. If you have the mastery of floating columns, the other tricky part that you need is the mastery of using floated navigation. You need to have an understanding of listamatic and sliding doors.

Sprites. Just like the video games, packing multiple images into one single image has become a popular technique in the modern CSS. This reduces the number of requests a browser has to make while at the same time improving the time that is required to download all files from your server.

Hopefully you’ve gained some useful knowledge from reading our CSS Tips and Tricks series.  Our next series will build on our Microsoft's Entity Framework blog.

Posted on September 18, 2015 .

CSS Tips and Tricks: Part 5 of 6

Vertical Content Alignment

In our introductory blog in this CSS series, we demonstrated display;none and its uses. The second installation provided an overview of CSS3, while the third discussed CSS Syntax. The fourth added a few more general tips and tricks to the arsenal, helping readers take full advantage of CSS and each one of its updates. Now, let’s get specific and talk more in depth about vertical content alignment, which can be a challenging element to working with CSS.

Cascading Style Sheets (CSS) are normally used to make a document more presentable where a style sheet language is used so that it defines the look and formatting usually written in markup language. In most cases, you will find that CSS is used to style a variety of web pages as well as user interfaces that are written in HTML, XHTML and any other sort of XML document. You can simply learn some simple CSS tricks that will equip you with necessary CSS skills, thus ensuring that you are successful in producing a quality content page.

There are quite a number of CSS tricks that we can use to keep our websites cool and attractive. These tricks will help you to improve the quality of your web design since they are easy to implement while also being user-friendly. Below are some important tricks that you can use to align your content vertically, in order to ensure that the quality level of your website is high and, ultimately presentable at a glance.

Absolute positioning. One of the most important tricks that we will feature is the absolute positioning CSS trick for content alignment. In your document, you will realize that you have two <div>, one of them will be the container while the other will be the child element which simply refers to the content. You will be required to start with the container element where you will position it to be relative while the child element is positioned to absolute. This will allow you to freely place it across the container thus allowing you to proceed on easily. So that you will achieve aligning it vertically, you can shift the position of the child element from the top in that it lays half way the height of the container. Then pull it up by half of the width of the child element, thus ensuring that your alignment is fantastic.

Use of CSS3 Transform. This Cascading Style Sheet trick has always made it easy for you to put any of your content at the center. For example, if we have similar HTML structures as the preceding method whereby we have one parent and one element having a — 50% from the top. The use of CSS transform will ensure that there is also a translation of — 50%. For more detailed information on CSS3, please refer to our second CSS blog post on that very topic.

Padding. Another CSS trick that we can use to form illusion in vertical alignment is the use of padding. It is a simple step in that will require you to set the top and the bottom part equal to each other. This trick will be effective if you do not adjust your container in a fixed width, but simply set your width to auto.

Use Line Height. The line-height property will be effective if you want to align a text vertically when you have only one line of element within a container. You will be required to set the value of line-height to a value that is nearly the same as that of the container height.

These are some of the surefire CSS tricks that you can use to align your content vertically thus achieving a high-quality web content. Contact Extra Nerds for these tricks and be sure that you will succeed in your next web designing project.

Hopefully you have learned some helpful hints on CSS in this blog series. Stop back next week for our final installation which will help us to understand modern CSS typography and font styling.

Posted on September 11, 2015 and filed under CSS Tips and Tricks.