Using the brightness() CSS Filter to generically highlight C...
Strategy

Using the brightness() CSS Filter to generically highlight C…


So it seems I have to pay better attention to CSS standards as I just realized that you can quite easily use CSS Filters to apply useful effects for generic control behaviors. Sure, I remember filter merely from the old, evil IE6 days to handle things like shadows and opacity, but it looks like the filter properties have migrated into the CSS mainstream with two now widely used and accepted filter operations that have quite a few useful filters available.

The two filter properties are:

There are a number of filter functions available:

  • blur()
  • brightness()
  • contrast()
  • drop-shadow()
  • grayscale()
  • hue-rotate()
  • invert()
  • opacity()
  • saturate()
  • sepia()

A few of these are very useful as generic tools – especially brightness() and grayscale().

Filter and Brightness

I recently ran discovered the brightness() filter, which I didn’t realize existed, but which is very, very useful for a number of generic operations.

It’s so useful because it allows you to generically change the color of an element, without having to specify a specific color value. Instead you can vary the brightness (or perhaps also the hue or saturation if you want to get more fancy) and basically affect he behavior of the element. That makes it quite useful for generic things like a ‘button’ control or other highlightable element.

Note: brightness() affects both the element foreground and background when using filter.

brightness() Filter for Generic Highlighting

I can’t tell you how many times over the years I’ve implemented a custom ‘button’ like CSS implementation. Over the years I’ve used images, backgrounds, gradients and opacity to effectively ‘highlight’ a control. All that works of course, but the problem with most of these approaches is that one way or the other you’re hard coding a color value, image or gradient. Which means every type of button needs it’s own highlight configuration and if you’re doing any sort of theming the buttons need to be overridden for each theme to work typically.

The brightness() filter offers a potentially simpler alternative by simply boosting the color brightness of either or both foreground and background colors. Because brightness() works off the existing base color values, using a modifier style like :hover, you don’t have to explicitly provide a new color, but rather just provide a generic brightness adjustment value.

What this means is that you can apply the button behavior to just about any content, regardless of what color it is which is great.

For example, this is what I use for turning FontAwesome icons into using button-like behavior:

<style>
  .toolbar { 
      padding: 5px;
      background: #f5f5f5;
  }
  .fa-button {
      padding: 0.5em 0.5em;
      background: #e0e0e0;  
      border-radius: 3px;                    
  }           
  .fa-button.dark {
      background: #555;                      
  }
  .fa-button:hover {
      cursor: pointer;
      border-radius: 3px;                    
      filter: brightness(120%);                    
  }            
  .fa-button.disabled {
      filter: grayscale(100%);
  }
</style>

<div style="padding: 5px; background: #eee;" class="mt-3">
  <a href="#"><i class="fas fa-plus-circle fa-button text-success"></i></a>
  <a href="#"><i class="fas fa-minus-circle fa-button text-warning"></i></a>
  <a href="#"><i class="fas fa-times-circle fa-button text-danger"></i></a>

  <a href="#"class="ml-1"><i class="fas fa-plus-circle fa-button  dark text-success"></i></a>
  <a href="#"><i class="fas fa-minus-circle fa-button dark text-warning"></i></a>
  <a href="#"><i class="fas fa-times-circle fa-button dark text-danger"></i></a> 
  
                  
  <a href="#" class="ml-1" title="this button is disabled (b&w filter)"><i class="fas fa-plus-circle fa-button text-danger disabled"></i></a>
<a href="#" title="this button is disabled (b&w filter)"><i class="fas fa-times-circle fa-button  text-danger disabled"></i></a>
<a href="#" title="this button is disabled (b&w filter)"><i class="fas fa-minus-circle fa-button text-danger disabled"></i></a>
</div>

Here’s what that looks like:


sample on CodePen

No matter which color is applied to the icon – the highlighting just works!

If you’ve been paying attention to CSS standards this is probably not news to you, but I didn’t know that this was something you could do. In fact I didn’t realize that there are so many useful filters available including filters to blur, gray scale and a few other things that are useful for things like disabling buttons.

Background Filters with backdrop-filter

Another very useful thing and again new to me is the ability to apply a backdrop-filter. A backdrop filter lets you apply a filter to the content that the affected elements sits on top of in HTML compositional layout.

Effectively – with a little extra effort – you can apply many of these filters to the background only which was previously very difficult to do unless you used absolute positioning and z-index!

This makes it much easier to highlight content that sits on top of background images for example.

<style>
    .image-background-text {                    
        background: url(./images/Icon.png);
        background-repeat: no-repeat;                    
        border: 1px solid #eee;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 256px;
        width: 256px;
    }
    .text-overlay {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);

        height: 256px;
        width: 256px;
        text-align: center;
          
        background: transparent;
        font-size: 70pt;
        font-weight: bold; 
        color: firebrick;
    }
</style>

<div class="image-background-text mt-4">
    <h3 class="text-overlay">Icon</h3>
</div>

which produces this:


sample on CodePen

What makes this work is the backdrop-filter which lets you apply a filter to anything that sits behind the filtered element. This was notoriously difficult to do otherwise, because without the backdrop-filter applying a filter or opacity to a background element would also apply to any child content contained within a parent element.

Note that using backdrop-filter is different than setting filter on the background element, because filter also applies to all contained elements.

If you do this, which seems very similar:

.image-background-text {     
   ...
   filter: blur(10px);
}
.text-overlay {
    /*backdrop-filter: blur(2px);*/
    ...

You get this unsatisfying result:


sample on CodePen

Using backdrop-filter on the top level elements instead of blur on the bottom element, makes that actually work as it applies the filter to any content behind the top element.

It’s still not exactly easy to do these kind of layouts, because you still have to make sure that the content on top completely covers the bottom container in order to ensure a full fill. But it still considerably easier than having to explicitly mess around with relative and absolute positioning layout in the middle of your document.

Backdrop Filter Caveats

To be clear: The backdrop-filter does not apply to the affected element background properties like background, background-image, gradients and so on. Rather it’s applied to any content that sits behind the current element. Only the area that is ‘covered’ by the element with the backdrop-filter gets the filter applied.

As useful as I think that backdrop-filter is, the bad news is that it takes a very recent browser to work. It requires Chromium 76 or later (current is 84).

In the current evergreen, release FireFox version (79) you need to:

  • go to about:config
  • set layout.css.backdrop-filter.enabled to true
  • set gfx.webrender.all to true

which is unfortunate. Couldn’t find anything on plans to integrate that without flags in Firefox. The official status for backdrop-filter is Editor’s Draft.

As of today, here’s the compatibility chart for backdrop-filter (not for filter which works in all browsers):

click to go to updated Compatibility Page

It works in current Chromium browsers. FireFox requires special config flags for now, and it looks like iOS still requires -webkit-backdrop-filter (apparently no longer required in IOS 13). So this feature is pretty new and just making it into evergreen browsers.

Summary

Filters have been around for a long time, but they’ve gotten a bad name, mainly because of the quirks that come from original usage with Internet Explorer. But filters are a legitimate part of the CSS Standard now. They are surprisingly useful especially for generic styling of elements for dynamic hover behaviors which I’ve been using filter for a lot lately to reduce a bunch of redundant hard coded style rules.

backdrop-filter is still a little too bleeding edge in terms of browser support to be used widely, unless you are explicitly targeting browsers that support it today. But since these are mostly aesthetic features you can probably get away with not applying the filters in unsupported browsers for a slightly less visual experience. Nevertheless, backdrop-filter is useful for some cool effects that otherwise are a pain in the ass to achieve via layered content and it looks like it will be available to all everygreen browsers soon.

Resources

Other Posts you might also like



Source link

r/graphic_design - Recent Graduate in Need of Portfolio Critique!
Strategy

Recent Graduate in Need of Portfolio Critique! : graphic_des…


Hi Everyone.

I thought I would post my portfolio here to possibly get feedback from some experienced graphic designers. Recently I have been working on making my portfolio more impressive while job searching. Although, I have been having trouble landing interviews (or any feedback at all ;-;), which leads me to believe my portfolio is far from impressive. I’m hoping someone could point me in the right direction to make changes for it and let me know what needs to be improved.

I am a graphic designer and illustrator. At first, I thought by including illustrations in my design portfolio, it would show companies that I am also capable of illustrating for them – I hoped it would become an asset that would give me a leg up. However, now I feel the major problem with my portfolio is that maybe it has too many illustrative aspects and not enough concrete work from experience with an actual company (I have some personal projects on my portfolio). Please let me know what you think and if I’m headed in the right direction!

Feel free to be as harsh as you would like! If you have any questions I will try to answer them in the comments. I’m really thankful for anyone that takes the time to view my work and provide feedback!

View my portfolio here: www.emilymtyoung.com

r/graphic_design - Recent Graduate in Need of Portfolio Critique!



Source link

article image
Strategy

Implementing the Repository Pattern Using C# and Entity Deve…


Introduction

The Repository Pattern is one of the most popular design patterns used for abstracting how data is eventually persisted in the database or retrieved from the database. The basic objective of the Repository Pattern is to help you decouple the data access and business logic layers of an application. This article talks about how we can implement the repository pattern in C# and take advantage of Entity Developer to talk to the database.

Why Should We Use an ORM?

An ORM is an acronym for Object Relational Mapper – it is used to map your domain objects to the objects in the relational model. In other words, it is used to map data between incompatible type systems. Entity Developer from Devart is an ORM designer tool that lets you design your data access layer visually. It sits on top of ADO.NET and simplifies the way you work with data.

Entity Developer supports ADO.NET Entity Framework, Entity Framework Core, Hibernate, LinqConnect, Telerik Data Access, and LINQ to SQL. You can download a copy of Entity Developer and get started.

Prerequisites 

To be able to work with the code examples demonstrated in this article, you should have the following installed in your system:

  • Visual Studio 2019 Community Edition
  • SQL Server 2019 Developer Edition
  • Entity Developer

You can download Visual Studio 2019 from here: https://visualstudio.microsoft.com/downloads/

You can download SQL Server 2019 Developer Edition from here: https://www.microsoft.com/en-us/sql-server/sql-server-downloads

You can download a copy of Entity Developer (trial version) from here: https://www.devart.com/entitydeveloper/download.html

Create the Database

Now that the ASP.NET Core Web API project has been created in Visual Studio 2019; the next step is to create the database. Note that for the sake of simplicity we’ll use a database with just two tables with simple design in this example.

Launch the SQL Server Management Studio and create a new database called Demo. Next, use the following script to create two tables named Products and Categories inside the Demo database.

Figure 1 shows how these two tables are related.

article image

We’ll use this database in the subsequent sections of this article to store, edit, delete, and retrieve data.

Create a New ASP.NET Core Web API Project

Assuming that the necessary software has been installed in your computer to be able to work with Entity Developer, follow the steps outlined below to create a new ASP.NET Core Web API project.

  1. First off, open the Visual Studio 2019 IDE
  2. Next, click “Create a new project” once the IDE has loaded
  3. Click “Create a new project”
  4. Next, select “ASP.NET Core Web Application”
  5. Click the “Next” button
  6. Specify the project name and location – where it should be stored in your system
  7. Optionally, click the “Place solution and project in the same directory” checkbox.
  8. Next, click the “Create” button
  9. In the “Create a new ASP.NET Core Web Application” dialog window that is shown next, select “API” as the project template.
  10. Select ASP.NET Core 3.1 or later as the version.
  11. You should disable the “Configure for HTTPS” and “Enable Docker Support” options by disabling the respective checkboxes.
  12. Since we’ll not be using authentication in this example, specify authentication as “No Authentication”.
  13. Finally, click on the “Create” button to finish the process.

Create an Entity Data Model

The next thing you should do is create an entity data model. When you create a model in Entity Developer, there are two options to choose from: Database First (this is selected by default) and Model First. In this example, we’ll take advantage of the Database First approach. Remember to select the “Generate from Database” option to generate your model from the database and select the database objects you would want to be a part of your entity data model.

Follow these steps outlined below to create an entity data model in Entity Developer using the database-first approach.

1. Select your project in the Solution Explorer Window

2. Right-click and select Add->New Item

3. Select Devart EF Core Model as the template as shown in Figure 2

article image

4. Specify a name for your entity data model and click Add

5. Specify the connection properties and test the connection

6. Click on the “Next” button to continue.

7. By default, the option “Generate from Database” will be selected. Since we want the model to be created from the database, click on the “Next” button to continue.

8. De-select all options and then specify only the database objects you would like to be a part of the model. Here’s where you should select the Products and Categories tables.

9. In the “Set up naming rules” screen you can optionally specify naming rules for your entities.

10. In the next screen, you can optionally specify the model properties.

11. In the next screen, you can optionally choose the model diagram content.

12. In the next screen, you can optionally specify code generation templates.

13. Specify Repository and Unit of Work as the code generation template as shown in Figure 3.

article image

14. Lastly, click “Finish” to complete the process.

Your ADO.NET Entity Data Model using Entity Developer will be created along with the repository and unit of work classes and interfaces. Here’s how your Entity Data Model would look like.

article image

Generated Classes and Interfaces

Here’s how the Solution Explorer Window would look like – note the generated classes and interfaces.

article image

If you observe the generated classes and interfaces in the Solution Explorer Window, you’ll find three repository interfaces namely IRepository, IProductRepository, and ICategoryRepository, and three repository classes namely EntityFrameworkRepository, ProductRepository, and CategoryRepository. You’ll also observe the Category and Product classes – these are model classes. You’ll also observe the IUnitOfWork interface and the EntityFrameworkUnitOfWork and EntityFrameworkUnitOfWorkFactory classes – these are types used for using the unit of work design pattern. In the sections that follow we’ll examine how we can work with these classes and interfaces.

Using the Repository Classes and Interfaces

There are two approaches to building repositories in an application. These include the following: –

  • Repository per entity type
  • Generic Repository

The easiest approach to implementing the Repository design pattern is to create a repository per business object. The generated repository we used earlier follows this approach. Since we’ve two tables, there are two business classes namely Product and Category, and you would typically have two classes named ProductRepository and CategoryRepository implementing two interfaces IProductRepository and ICategoryRepository respectively.

The following code snippet shows the IRepository, IProductRepository and ICategoryRepository interfaces.

The EntityFrameworkRepository class represents a generic repository and implements the IRepository interface. The ProductRepository class implements the methods declared in the IProductRepository interface and the CategoryRepository class implements the ICategoryRepository interface. Please find these classes below.

You can now take advantage of dependency injection to inject these instances to your controllers. The following code snippet illustrates how you can create instance of the product repository in the ConfigureServices method of the Startup class.

Use the Repository in the Controller Classes

Now that we’ve the repository class ready, let’s create controller classes and examine how we can use these repositories in them. Follow the steps given below to create the Product and Category controller classes in your project.

  1. Select the project in the SolutionExplorer Window
  2. Right-click and click on Add->New Item…
  3. Select the “API Controller with read/write actions” template
  4. Specify a name for your controller class
  5. Click Add to add the new controller to your project

To use the repository instances, we should take advantage of dependency injection to inject an instance of the ProductRepository class as shown in the code snippet given below.

Once the repository instance is available, you can invoke its methods from the action methods in your controller classes to perform CRUD operations against the underlying database.

Use the Generic Repository

The other approach is to use a generic repository – we’ve already looked at it in the earlier section. The generated code contains a generic repository named EntityFrameworkRepository. You should first register an instance of this repository class as a scoped instance so that you can use this instance in all classes in this application.

The following code snippet illustrates how you can create an instance of the generic repository in the ConfigureServices method of the Startup class.

You can now use this generic repository in your controller classes. The following code snippet shows how you can use the generic repository in the controller classes.

Use the UnitOfWork Pattern

Unit Of Pattern can be used to create an abstraction layer between the data access layer and the business logic layer of an application – it helps us implement the repository pattern elegantly. The generated classes contain the IUnitOfWork interface and the EntityFrameworkUnitOfWork class. You can take advantage of these types to use UnitOfWork in your controller or business logic classes.

The following code snippet illustrates how you can take advantage of the unit of work to store a product record in the database.

Summary

The Repository Pattern was first introduced as part of Domain-Driven Design in the year 2004. Since then it has become extremely popular and has been the design pattern of choice for abstracting calls from an application to the underlying database.

Proper use of the Repository pattern improves testability, code extensibility, and maintenance. In this article, we’ve examined how we can build a repository and encapsulate all calls to the database using the Entity Developer ORM tool.



Source link

r/webdev - Best Machine Learning Books for Beginners and Experts in 2020
Strategy

Best Machine Learning Books for Beginners and Experts in 202…


Hey friends, I have curated a list of the best Machine learning books out there to learn Machine Learning in 2020. 

You can view it on my blog – https://thecodingpie.com/post/best-machine-learning-books-for-beginners-and-experts-in-2020/

r/webdev - Best Machine Learning Books for Beginners and Experts in 2020

banner

No matter if you are a beginner in machine learning or already an Intermediate/Expert in this field, there is an awesome book waiting for you!

I hope you will find this book suggestions helpful in your great Machine Learning Journey and beyond. If you think I have forgotten any great book then please let me know. Thank you 😉



Source link

How to Get Handwriting Animation With Irregular SVG Strokes
Strategy

How to Get Handwriting Animation With Irregular SVG Strokes


I wanted to do a handwriting animation for calligraphy fonts — the kind where the words animate like they are being written by an invisible pen. Because calligraphy fonts have uneven stroke widths (they actually aren’t even strokes in terms of SVG), it was near impossible to do this sort of thing with typical path animation techniques. But I found an innovative application of SVG masking to achieve this affect in matter of minutes. 

While researching how to do this, I gathered information from multiple sources. I combined them together and was able to create the final effect.

Let’s make this together!

SVG masking

If the stroke width of all the letters in a word or sentence are even throughout, then Craig Roblewsky has a nice way to animate handwriting. This is a clever technique that animates the SVG stroke-dasharray and stroke-offset attributes.

Calligraphy fonts like we want to animate here have uneven stroke width throughout the letters, hence it will need to be a <path> and animating it in that way will not work. The trick will be to use SVG masking.

Let’s start by figuring out what font we want to use. The one I’ll be using throughout this article is HaveHeartOne, which has a nice brush stroke appearance that is perfect for handwriting.

The idea is to create a <mask> out of same sentence we want to animate, then place it on top of the sentence. In other words, there will be two layers of same sentence. Since the mask sits on top, we’ll make it white so it will hide the original sentence below it. We will animate the mask so the bottom layer is revealed as the animation runs.

Making the layers

The foundation of this trick is that we’re actually going to create two separate layers, one on top of the other:

  1. The bottom layer is the words with the desired font (in my case it is HaveHeartOne).
  2. The top layer is a handcrafted path approximating the words.

Creating the handcrafted path isn’t as hard as you might think. We need a continuous path to animate and reveal the sentence. That means no <text> for this. But, many illustrates apps — including Illustrator — can convert letters to paths:

  1. Select the words.
  2. Open the “Properties” panel and click Create outline.

And, like magic, the letters become outlines with vector points that follow the shape.

Showing the words Marketing Lab in red in Illustrator wrapped in blue vector points.
Imagine drawing all that by hand!

At this point it is very important to give meaningful names to these paths, which are stored as layers. When we expect this to SVG, the app will generate code and it uses those layer names as the IDs and classes.

Showing the Illustrator layers of the letters with proper naming.
Those names are much nicer that what would have been auto-generated.

Notice how individual letters have a fill but no stroke:

Showing the letter M selected in Illustrator with the properties panel open indicating there is no stroke on the shape.

In SVG, we can animate the stroke in the way we want to, so we’re going to need to create that as our second main layer, the mask. We can use the pen tool to trace the letters.

  1. Select the pen tool.
  2. Set the Fill option to “None.”
  3. The stroke width will depend on the font you’re using. I’m setting the Stroke Width option to 5px and setting its color to black.
  4. Start drawing!

My pen tool skills aren’t great, but that’s OK. What’s important isn’t perfection, but that the mask covers the layer below it.

Create a mask for each letters and remember to use good names for the layers. And definitely reuse masks where there are more than one of the same letter — there’s no need to re-draw the same “A” character over and over.

Showing the Marketing Lab letter shapes completely covered by the black outline layers.

Exporting

Next up, we need to export the SVG file. That will likely depend on the application you are using. In Illustrator, you can do that with File → Export → Export as → SVG

SVG options popup will open, below is the preferred setting to export for this example.

Showing the SVG export options in Illustrator.

Now, not all apps will export SVG the same exact way. Some do an excellent job at generating slim, efficient code. Others, not so much. Either way, it’s a good idea to crack open the file in a code editor 

When we’re working with SVG, there are a few tips to consider to help make them as light as possible for the sake of performance:

  1. The fewer points, the lighter the file.
  2. Using a smaller viewBox can help.
  3. There are plenty of tools to optimize SVG even further.

Manually editing the SVG code

Now, not all apps will export SVG the same exact way. Some do an excellent job at generating slim, efficient code. Others, not so much. Either way, it’s a good idea to crack open the file in a code editor and make a few changes.

Some things worth doing:

  1. Give the <svg> element width and height attributes that are set to size the final design.
  2. Use the <title> element. Since we’re working with paths, the words aren’t actually recognized by screen readers. If you need them to be read when in focus, then this will do the trick.
  3. There will likely be group elements (<g>) with the IDs based on the layers that were named in the illustration app. In this specific demo, I have two group elements:  #marketing-lab (the outline) and #marketing-masks (the masks). Move the masks into a <defs> element. This will hide it visually, which is what we want.
  4. There will likely be paths inside of the masks group. If so, go ahead and remove the transform attribute from them.
  5. Wrap each path element in a <mask> and give them a .mask class and an ID that indicates which letter is masked.

For example:

<mask id="mask-marketing-M">
  <path class="mask" id="mask-M" ... />
</mask>

Inside the outline group (which I’ve given an ID of #marketing-lab), apply the mask to the respective character path element by using mask="url(#mask-marketing-M)".

<g id="marketting-lab">
  <path mask="url(#mask-marketing-M)" id="marketting-char-M" d="M427,360, ... " />
</g>

Here’s the code for one character using all the above modifications:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 381 81" class="marketing-lab">
  <title>Marketing Lab</title>
  <defs>
    <g id="marketing-masks">
      <mask id="mask-marketing-M">
        <path class="mask" id="mask-M"
          d="M375.5, ... ,9-10" stroke-linecap="square" stroke-linejoin="bevel" stroke-width="7" />
      </mask>
    </g>
  </defs>
  <g id="marketting-lab">
    <path
      mask="url(#mask-marketing-M)" id="marketting-char-M" 
      d="M427,360.22c-.11.08-.17.14-.17.18H427c0" />
  </g>
</svg>

Finally, we will add CSS for the .mask element that overrides stroke color with white so it is hidden against the document’s background color.

.mask {
  fill: none;
  stroke: #fff;
}

Animation

We’re going to animate the CSS stroke-dasharray property to get the continuous line reveal effect. We can do the animation with either CSS and JavasScript or with Greensock (GSAP). We’ll look at both approaches.

CSS and JavaScript 

It’s fairly straightforward to do this in CSS alone. You can use JavaScript to calculate the path length and then animate it using that returned value. If you do not want to use JavaScript at all, then you can calculate the path length once and hardcode that value into the CSS.

/* Set the stroke-dasharray and stroke-dashoffset */
.mask {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}


/* Animation the stroke-dashoffset to a zero length */
@keyframes strokeOffset {
  to {
    stroke-dashoffset: 0;
  }
}


/* Apply the animation to each mask */
#mask-M {
  animation: strokeOffset 1s linear forwards;
}

JavaScript can help with the counting if you’d prefer to go that route instead:

// Put the masks in an array
const masks = ['M', 'a', 'r', 'k-1', 'k-2', 'e', 't-line-v', 't-line-h', 'i-2', 'i-dot', 'n', 'g', 'lab-l', 'lab-a', 'lab-b']


masks.forEach((mask, index, el) => {
  const id = `#mask-${mask}` // Prepend #mask- to each mask element name
  let path = document.querySelector(id)
  const length = path.getTotalLength() // Calculate the length of a path
  path.style.strokeDasharray = length; // Set the length to stroke-dasharray in the styles
  path.style.strokeDashoffset = length; // Set the length to stroke-dashoffset in the styles
})

GSAP

GSAP has a drawSVG plugin which allows you to progressively reveal (or hide) the stroke of an SVG <path>, <line>, <polyline>, <polygon>, <rect>, or <ellipse>. Under the hood, it’s using the CSS stroke-dashoffset and stroke-dasharray properties. 

Here’s how it works:

  1. Include GSAP and drawSVG scripts in the code.
  2. Hide the graphic initially by using autoAlpha.
  3. Create a timeline.
  4. Set autoAlpha to true for the graphic.
  5. Add all the character path masks IDs to the timeline in proper sequence.
  6. Use drawSVG to animate all characters.


References

  1. Animated Drawing Line in SVG by Jake Archibald
  2. Creating My Logo Animation by Cassie Evans



Source link

Macbook on counter
Strategy

Best of DZone: Refcardz – DZone Web Dev


Whether you’re looking for a full-length introduction to a framework, trying to better understand best-practices around your favorite language, or just need a quick reference for pesky syntax you always forget, look no further than the following Refcardz.

Started in 2008, Refcardz have come to be cornerstone of DZone’s content, giving experts and practitioners an opportunity to share all that they know about popular topics in development with our audience. Enjoy!

Macbook on counter

Getting Started With Git by Matthew McCullough and Kurt Collins: Today, Git is effectively the de-facto standard for software version control, and it is truly an expected tool in every developer’s toolbox. This quick overview demonstrates what a rich and deep DVCS Git truly is, while still being approachable for the newcomer to this collaborative approach to source code and version control. Download this Refcard to learn about the essentials of getting started with Git like cloning existing projects, pushing Git commits to subversion, branching and merging, and more.

Getting Started with Eclipse by Mickael Istria, Ilya Buziuk, Ed Burnette, and Adam Houghton: Eclipse IDE is a cross-platform, multi-purpose, open-source Integrated Development Environment. It is widely used to develop projects in Java, JavaScript, PHP, C++, Scala, and many others. This newly updated Refcard breaks down installing, setting up, and getting started with Eclipse. It also covers productivity tips, creating new projects and files, accessing Source Control Managers, and debugging configurations.

Scrum – The Most Popular Agile Methodology by Dave West, Steve Porter, and Michael James: Scrum is a framework that allows people to productively and creatively deliver products of the highest possible value. With over 70% of Agile teams using Scrum or Scrum hybrid, learn more about its benefits in managing complex product development. This newly updated Refcard explores the details of Scrum, including theory, values, roles, and events. It also includes a sample of a popular approach to deliver Integrated Increments in a scaled environment.

Core Java by Cay Horstmann and Ivan Ivanov: Gives you an overview of key aspects of the Java language and references on the core library, commonly used tools, and Java 8 features.

Foundations of RESTful Architecture by Brian Sletten and Chase Doelling: The Representational State Transfer (REST) architectural style is a worldview that elevates information into a first-class element of architectures. REST allows us to achieve the architectural properties of performance, scalability, generality, simplicity, modifiability, and extensibility. This newly updated Refcard explains main HTTP verbs, describes response codes, and lists libraries and frameworks. It also gives additional resources to further explore each topic.

Core Java Concurrency by Igor Sorokin and Alex Miller: This Refcard will help Java developers working with multi-threaded programs to understand core concurrency concepts and how to apply them. Overview the key aspects of the Java language and get references on the core library.

Design Patterns by Jason McDonald: Learn design patterns quickly with Jason McDonald’s outstanding tutorial on the original 23 Gang of Four design patterns, including class diagrams, explanations, usage info, and real world examples.

web development books on shelf

JQuery Selectors by Bear Bibeault and Yehuda Katz: Introduces jQuery Selectors, which allow you to select and manipulate HTML elements as a group or as a single element in jQuery.

Node.js by Justin Albano and Dave Whiteley: Node.js is a JavaScript runtime that runs on top of Google’s open-source JavaScript engine called V8. Pairing JavaScript’s naturally event-driven, asynchronous coding style with non-blocking I/O libraries makes Node.js fast, lightweight, and efficient. This newly updated Refcard introduces Node, explains how it works, and dives into its architecture. Learn how to install and use Node to its full potential and access a list of the most commonly used APIs.

Continuous Integration by David Posin and Paul Duvall: Reap the full benefits of quality, better testing, and early error detection with proper CI implementation. This newly updated Refcard explains patterns and anti-patterns and the benefits of CI. Using specific examples from the Git Command Line Interface and Git Plugin hooks for Jenkins, it also walks through build management, build configuration, testing, and code quality.

Domain-Driven Design by Aslam Khan and Obi Oberoi: Developers build software to solve real-world problems. But everything from tool choice to the halting problem (to the pointy-haired boss) constrains and shapes the software you create. Learn how to make your code and your problem domain fit beautifully together.

Getting Started With Scala by Hugh McKee, Seth Tisue, Ryan Knight, and Nilanjan Raychaudhuri: Covers creating a new Scala project, a tour of Scala’s features, an introduction to classes and objects within Scala, and much more.

Core Python by Ivan Mushketyk, Naomi Ceder, and Mike Driscoll: Python is an interpreted, dynamically typed language. Python uses indentation to create readable, even beautiful code. With Python’s vast array of built-in libraries, it can handle many jobs without the need for further libraries, allowing you to write useful code almost immediately. But Python’s extensive network of external libraries makes it easy to add functionality based on your needs.

Getting Started With Vaadin 10 by Alejandro Duarte, Matti Tahvonen, and Marko Grönroos: Vaadin makes it quick and simple to create HTML user interfaces using Java. Using a built-in selection of components, themes, data binding, and more, Vaadin is the ideal in web application development frameworks.

Cloud over moon

Understanding Cloud Computing by David Posin and Daniel Rubio: This Refcard will walk you through the basics, from where exactly clouds are located, to deciphering the differences between cloud service types (IaaS, PaaS, SaaS), and the key benefits you can expect to receive.

Lean Software Development by Stefan Thorpe, Curt Hibbs, and Steve Jewett: Many companies have a major opportunity to optimize efficiency and minimize waste in the development of their software using lean software development practices, yet many have simply not discovered the methodology. For those who have attempted to adopt this concept, most discussions and literature don’t provide specific, easy-to-follow practices for implementing lean software development. This Refcard fills the gap by covering a step-by-step approach to carrying out a lean software development process, including best practices to streamline your technology value stream.

Continuous Delivery by Michael Olson and Paul Duvall: Minimize the time it takes to go from idea to usable software. Learn to use agile techniques and automate the entire software delivery system: build, deploy, test, release.

Getting Started With Apache Hadoop by Piotr Krewski and Adam Kawa: Lately, it has become expensive and otherwise impossible for companies to store their data in one system and to analyze it with traditional solutions. Download this Refcard to learn how Apache Hadoop stores and processes large datasets, get a breakdown of the core components of Hadoop, and learn the most popular frameworks for processing data on Hadoop.

Data Warehousing by Roi Avinoam, Alon Brody, and David Haertzen: As a total architecture, data warehousing provides decision-support data that is consistent, integrated, standard, and simply understood. From descriptions to diagrams and integration patterns, this newly updated Refcard walks you through each aspect of data warehousing. Gain a complete understanding of data modeling, infrastructure, relationships, attributes, and speedy history loading and recording with atomic data.



Source link