Post image

Hey, are there steps in making a design magnet mockup for th…

Post image

Hi, this is Dani22A. I made this NYC design illustration as a design magnet to put on the fridge in a photo. But I’m not making a real one, just a 3D mockup if that makes sense to put on my Behance. I looked for tutorials but there aren’t any what I’m looking for. I look up for mockups for design magnets but I have to pay and I don’t want to pay for something that’s small. Got any advice or pointers?

Source link


I’m working on a project these days, but some elements load …

I'm working on a project these days, but some elements load slowly

I have 3 sections, but the second and the last one take their height from JQuery $(window).height(), but what is important to note is that we have this condition:

if($(window).width() < 1024){
if($(window).width() >= 1024){

As you can see, the second and the last section have different sizes if we use different devices. But when you open the web page you can see their content that is shown maybe for 0.5 seconds over the header (the first section)! after 0.5 seconds we have no problem, but this makes me sad… I minified the CSS and JS file, but only the speed of disappearing the content of the 2nd section and the last from section 1 was decreased 🙁

you can see the design of my page:

What should I do????????

submitted by /u/Septic-Sina

Source link


A/B Testing Instant.Page With Netlify and Speedcurve – Web P…

I’ve wanted to give a proper try out on my site for a while now. It’s a pretty clever approach. The script watches for when someone hovers over a link and then, when they do, uses the prefetch resource hint to get started fetching that page before the click event even occurs. I like the idea, in theory, quite a bit. I also like the implementation. The script is tiny (1.1kb with Brotli) and not overly aggressive by default—you can tell it to prefetch all visible links in the viewport, but that’s not the default behavior.

I wanted to know the actual impact, though. How well would the approach work when put out there in the real-world?

It was a great excuse for running a split test. By serving one version of the site with in place to some traffic, and a site without it to another, I could compare the performance of them both over the same timespan and see how it shakes out.

It turns out, between Netlify and SpeedCurve, this didn’t require much work.

Netlify supports branch-bases split testing, so first up was implementing on a separate branch. I downloaded the latest version so that I could self-host (there’s no reason to incur the separate connection cost) and dropped it into my page on a separate branch (very creatively called “instant-page”) and pushed to GitHub.

With the separate branch ready, I was able set up a split test in Netlify by selecting the master branch and the instant-page branch, and allocating the traffic that should go to each. I went with 50% each because I’m boring.

I still needed a way to distinguish between sessions with and sessions without it. That’s where SpeedCurve’s addData method comes into play. With it, I can add a custom data variable (again, creatively called “instantpage”) that either equals “yes” if you were on the version with or “no” if you weren’t.

<script>LUX.addData('instantpage', 'yes');</script>

I could have added the snippet to both branches, but it felt a bit sloppy to update my master branch to track the lack of something that only existed in a different branch. Once again, Netlify has a nice answer for that.

Netlify has a feature called Snippet Injection that lets you inject a snippet of code either just before the closing body tag or just before the closing head tag. Their snippet injection feature supports Liquid templating and also exposes any environmental variables, including one that indicates which branch you happen to be on. During the build process, that snippet (and any associated Liquid syntax) gets generated and added to the resulting code.

This let me check the branch being built and inject the appropriate addData without having to touch either branch’s source:

{% if BRANCH == "instant-page" %}
<script>LUX.addData('instantpage', 'yes');</script>
{% else %}
<script>LUX.addData('instantpage', 'no');</script>
{% endif %}

Then, in SpeedCurve, I had to setup the new data variable (using type “Other”) so that I could filter my performance data based on its value.

All that was left was to see if the split testing was actually working. It would have only taken moments in SpeedCurve to see live traffic come through, but I’m an impatient person.

Netlify sets a cookie for split tests (nf_ab) to ensure that all sessions that land on a version of the test stay with that version as long as that cookie persists. The cookie is a random floating point between 0 and 1. Since I have a 50% split, that means that a value between 0.0 and 0.5 is going to result in one version, and a value between 0.5 and 1.0 is going to get the other.

I loaded the page, checked to see if was loading—it wasn’t which meant I was on the master branch. Then I toggled the cookie’s value in Chrome’s Dev Tools (under the Application Panel > Cookies) and reloaded. Sure enough, there was—the split test was working.

And that was it. Without spending much time at all, I was able to get a split test up and running so I could see the impact was having.

It’s early, so the results aren’t exactly conclusive. It looks like at the median most metrics have been improving a little. At the 95th percentile, a few have gotten a hair slower.

It’s not enough yet to really make a concrete decision—the test hasn’t been running very long at all so there hasn’t been much time to iron out anomalies and all that.

It’s also worth noting that even if the results do look good, just because it does or doesn’t make an impact on my site doesn’t mean it won’t have a different impact elsewhere. My site has a short session length, typically, and very lightweight pages: putting this on a larger commercial site would inevitably yield much different results. That’s one of the reasons why it’s so critical to test potential improvements as you roll them out so you can gauge the impact in your own situations.

There are other potential adjustments I could make to try to squeeze a bit more of a boost out of the approach— provides several options to fine-tune when exactly the next page gets prefetched and I’m pretty keen to play around with those. What gets me excited, though, is knowing how quickly I could get those experiments set up and start collecting data.

Source link

How I Used Brotli to Get Even Smaller CSS and JavaScript Fil...

How I Used Brotli to Get Even Smaller CSS and JavaScript Fil…

The HBO sitcom Silicon Valley hilariously followed Pied Piper, a team of developers with startup dreams to create a compression algorithm so powerful that high-quality streaming and file storage concerns would become a thing of the past.

In the show, Google is portrayed by the fictional company Hooli, which is after Pied Piper’s intellectual property. The funny thing is that, while being far from a startup, Google does indeed have a powerful compression engine in real life called Brotli

This article is about my experience using Brotli at production scale. Despite being really expensive and a truly unfeasible method for on-the-fly compression, Brotli is actually very economical and saves cost on many fronts, especially when compared with gzip or lower compression levels of Brotli (which we’ll get into).

Brotli’s beginning…

In 2015, Google published a blog post announcing Brotli and released its source code on GitHub. The pair of developers who created Brotli also created Google’s Zopfli compression two years earlier. But where Zopfli leveraged existing compression techniques, Brotli was written from the ground-up and squarely focused on text compression to benefit static web assets, like HTML, CSS, JavaScript and even web fonts.

At that time, I was working as a freelance website performance consultant. I was really excited for the 20-26% improvement Brotli promised over Zopfli. Zopfli in itself is a dense implementation of the deflate compressor compared with zlib’s standard implementation, so the claim of up to 26% was quite impressive. And what’s zlib? It’s essentially the same as gzip.

So what we’re looking at is the next generation of Zopfli, which is an offshoot of zlib, which is essentially gzip.

A story of disappointment

It took a few months for major CDN players to support Brotli, but meanwhile it was seeing widespread adoption in tools, services, browsers and servers. However, the 26% dense compression that Brotli promised was never reflected in production. Some CDNs set a lower compression level internally while others supported Brotli at origin so that they only support it if it was enabled manually at the origin.

Server support for Brotli was pretty good, but to achieve high compression levels, it required rolling your own pre-compression code or using a server module to do it for you — which is not always an option, especially in the case of shared hosting services.

This was really disappointing for me. I wanted to compress every last possible byte for my clients’ websites in a drive to make them faster, but using pre-compression and allowing clients to update files on demand simultaneously was not always easy.

Taking matters into my own hands

I started building my own performance optimization service for my clients.

I had several tricks that could significantly speed up websites. The service categorized all the optimizations in three groups consisting of several “Content,” “Delivery,” and “Cache” optimizations. I had Brotli in mind for the content optimization part of the service for compressible resources.

Like other compression formats, Brotli comes in different levels of power. Brotli’s max level is exactly like the max volume of the guitar amps in This is Spinal Tap: it goes to 11.

Brotli:11, or Brotli compression level 11, can offer significant reduction in the size of compressible files, but has a substantial trade-off: it is painfully slow and not feasible for on demand compression the same way gzip is capable of doing it. It costs significantly more in terms of CPU time.

In my benchmarks, Brotli:11 takes several hundred milliseconds to compress a single minified jQuery file. So, the only way to offer Brotli:11 to my clients was to use it for pre-compression, leaving me to figure out a way to cache files at the server level. Luckily we already had that in place. The only problem was the fear that Brotli could kill all our processing resources.

Maybe that’s why Pied Piper had to continue rigging its servers for more power.

I put my fears aside and built Brotli:11 as a configurable server option. This way, clients could decide whether enabling it was worth the computing cost.

It’s slow, but gradually pays off

Among several other optimizations, the service for my clients also offers geographic content delivery; in other words, it has a built-in CDN.

Of the several tricks I tried when taking matters into my own hands, one was to combine public CDN (or open-source CDN) and private CDN on a single host so that websites can enjoy the benefits of shared browser cache of public resources without incurring separate DNS lookup and connection cost for that public host. I wanted to avoid this extra connection cost because it has significant impact for mobile users. Also, combining more and more resources on a single host can help get the most of HTTP/2 features, like multiplexing.

I enabled the public CDN and turned on Brotli:11 pre-compression for all compressible resources, including CSS, JavaScript, SVG, and TTF, among other types of files. The overhead of compression did indeed increase on first request of each resource — but after that, everything seemed to run smoothly. Brotli has over 90% browser support and pretty much all the requests hitting my service now use Brotli.

I was happy. Clients were happy. But I didn’t have numbers. I started analyzing the impact of enabling this high density compression on public resources. For this, I recorded file transfer sizes of several popular libraries — including jQuery, Bootstrap, React, and other frameworks — that used common compression methods implemented by other CDNs and found that Brotli:11 compression was saving around 21% compared to other compression formats.

It’s important to note that some of the other public CDNs I compared were already using Brotli, but at lower compression levels. So, the 21% extra compression was really satisfying for me. This number is based on a very small subset of libraries but is not incorrect by a big margin as I was seeing this much gain on all of the websites that I tested.

Here is a graphical representation of the savings.

Vertical bar chart. Compares jQuery, Bootstrap, D3.js, Ant Design, Senamtic UI, Font Awesome, React, Three.js, Bulma and Vue before and after Brotli compression. Brotli compression is always smaller.

You can see the raw data below..Note that the savings for CSS is much more prominent than what JavaScript gets.

Library Original Avg. of Common Compression (A) Brotli:11 (B) (A) / (B) – 1
Ant Design 1,938.99 KB 438.24 KB 362.82 KB 20.79%
Bootstrap 152.11 KB 24.20 KB 17.30 KB 39.88%
Bulma 186.13 KB 23.40 KB 19.30 KB 21.24%
D3.js 236.82 KB 74.51 KB 65.75 KB 13.32%
Font Awesome 1,104.04 KB 422.56 KB 331.12 KB 27.62%
jQuery 86.08 KB 30.31 KB 27.65 KB 9.62%
React 105.47 KB 33.33 KB 30.28 KB 10.07%
Semantic UI 613.78 KB 91.93 KB 78.25 KB 17.48%
three.js 562.75 KB 134.01 KB 114.44 KB 17.10%
Vue.js 91.48 KB 33.17 KB 30.58 KB 8.47%

The results are great, which is what I expected. But what about the overall impact of using Brotli:11 at scale? Turns out that using Brotli:11 for all public resources reduces cost all around:

  • The smaller file sizes are expected to result in lower TLS overhead. That said, it is not easily measurable, nor is it significant for my service because modern CPUs are very fast at encryption. Still, I believe there is some tiny and repeated saving on account of encryption for every request as smaller files encrypt faster.
  • It reduces the bandwidth cost. The 21% savings I got across the board is the case in point. And, remember, savings are not a one-time thing. Each request counts as cost, so the 21% savings is repeated time and again, creating a snowball savings for the cost of bandwidth. 
  • We only cache hot files in memory at edge servers. Due to the widespread browser support for Brotli, these hot files are mostly encoded by Brotli and their small size lets us fit more of them in available memory.
  • Visitors, especially those on mobile devices, enjoy reduced data transfer. This results in less battery use and savings on data charges. That’s a huge win that gets passed on to the users of our clients!

This is all so good. The cost we save per request is not significant, but considering we have a near zero cache miss rate for public resources, we can easily amortize the initial high cost of compression in next several hundred requests. After that,  we’re looking at a lifetime benefit of reduced overhead.

It doesn’t end there

With the mix of public and private CDNs that we introduced as part of our performance optimization service, we wanted to make sure that clients could set lower compression levels for resources that frequently change over time (like custom CSS and JavaScript) on the private CDN and automatically switch to the public CDN for open-source resources that change less often and have pre-configured Brotli:11. This way, our clients can still get a high compression ratio on resources that change less often while still enjoying good compression ratios with instant purge and updates for compressible resources.

This all is done smoothly and seamlessly using our integration tools. The added benefit of this approach for clients is that the bandwidth on the public CDN is totally free with unprecedented performance levels.

Try it yourself!

Testing on a common website, using aggressive compression can easily shave around 50 KB off the page load. If you want to play with the free public CDN and enjoy smaller CSS and JavaScript, you are welcome to use our PageCDN service. Here are some of the most used libraries for your use:

<!-- jQuery 3.5.0 -->
<script src="" crossorigin="anonymous" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" ></script>

<!-- FontAwesome 5.13.0 -->
<link href="" rel="stylesheet" crossorigin="anonymous" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" >

<!-- Ionicons 4.6.3 -->
<link href="" rel="stylesheet" crossorigin="anonymous" integrity="sha256-UUDuVsOnvDZHzqNIznkKeDGtWZ/Bw9ZlW+26xqKLV7c=" >

<!-- Bootstrap 4.4.1 -->
<link href="" rel="stylesheet" crossorigin="anonymous" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" >

<!-- React 16.13.1 -->
<script src="" crossorigin="anonymous" integrity="sha256-yUhvEmYVhZ/GGshIQKArLvySDSh6cdmdcIx0spR3UP4=" ></script>

<!-- Vue 2.6.11 -->
<script src="" crossorigin="anonymous" integrity="sha256-ngFW3UnAN0Tnm76mDuu7uUtYEcG3G5H1+zioJw3t+68=" ></script>

Our PHP library automatic switches between private and public CDN if you need it to. The same feature is implemented seamlessly in our WordPress plugin that automatically loads public resources over Public CDN. Both of these tools allow full access to the free public CDN. Libraries for JavaScript, Python. and Ruby are not yet available. If you contribute any such library to our Public CDN, I will be happy to list it in our docs.

Additionally, you can use our search tool to immediately find a corresponding resource on the public CDN by supplying a URL of a resource on your website. If none of these tools work for you, then you can check the relevant library page and pick the URLs you want.

Looking toward the future

We started by hosting only the most popular libraries in order to prevent malware spread. However, things are changing rapidly and we add new libraries as our users suggest them to us. You are welcome to suggest your favorite ones, too. If you still want to link to a public or private Github repo that is not yet available on our public CDN, you can use our private CDN to connect to a repo and import all new releases as they appear on GitHub and then apply your own aggressive optimizations before delivery.

What do you think?

Everything we covered here is solely based on my personal experience working with Brotli compression at CDN scale. It just happens to be an introduction to my public CDN as well. We are still a small service and our client websites are only in the hundreds. Still, at this scale the aggressive compression seems to pay off.

I achieved high quality results for my clients and now you can use this free service for your websites as well. And, if you like it, please leave feedback at my email and recommend it to others.

Source link

Top 5 Gantt Chart Libraries for Vue.js

Top 5 Gantt Chart Libraries for Vue.js

Nowadays, the software market offers a variety of ready-made planning and scheduling tools for projects of any complexity level, but these solutions may include excessive functionalities or lack some necessary features. That is why many companies prefer to invest in the development of web-based custom solutions. And it is not surprising, as there is a large and constantly growing number of advanced JavaScript libraries and frameworks allowing web developers to build a feature-packed app that will precisely cover all the needs of any given project. 

In this article, we will consider the top 5 Gantt libraries for Vue-based applications. A Gantt chart is arguably one of the most popular tools for managing projects in various industries, while Vue.js is a lightweight and easy-to-use JavaScript framework that has gained remarkable popularity since its launch in 2014. During the review of selected Gantt libraries, we will pay special attention to the following aspects: key functional capabilities, documentation completeness, availability of demo materials, and license options.


DHTMLX Gantt is a comprehensive JavaScript library that has been widely used by web developers during the last decade for implementing Gantt chart functionality in project management apps. Using this fully configurable Gantt component, developers can provide an effective solution for managing tasks and their dependencies in projects based on popular frameworks and different server-side technologies. 

Thanks to high-performance rates of this lightning-fast library, it is possible to work comfortably with Gantt charts containing tens of thousands of tasks. End-users can easily modify all task details and determine task priority via a user-friendly UI with the help of drag-n-drop and inline editing. Being fully customizable this Gantt component provides a robust API that enables you to change the look and feel of specific elements or the whole Gantt chart. 

Need more functionality for your project? Here is a solution – the PRO edition with extra features. You can stick to the project deadline with the critical path method, achieve more balanced resource allocation via resource load diagrams and histograms, and optimize the use of resources by combining several working calendars. More options for manipulating project tasks: divide a big task into several subtasks, apply task constraints, or even auto-schedule the whole project.

There is flexible time formatting in DHTMLX Gantt: any format for task duration (including decimals) and on-the-fly conversion of time units (from days to hours, from hours to minutes, etc.). In addition, you can utilize formats for MS Project (e.g. 1F+2d) to set dependencies between tasks.

On top of all that, DHTMLX provides a sophisticated Node.js module that allows using advanced algorithms of its Gantt component on the server-side. This module enables Gantt to perform scheduling analysis and automatically update its schedule when project tasks are changed from various sources or by multiple users at the same time.

Visit the DHTMLX GitHub page to download the demo of the Gantt chart component for Vue. The practical implementation of DHTMLX Gantt in Vue-based applications is significantly simplified by the availability of end-to-end documentation including a step-by-step guide. The DHTMLX team also provides a video tutorial on the matter. 

Depending on the needs of a given project (available features, updates, customer support), DHTMLX offers a free version of its Gantt component under GNU GPL v2 license and commercial licensing options with prices ranging from $699 to $2999. All in all, DHTMLX Gantt is the real deal for developers who are looking for products with an optimal price/quality ratio.

Bryntum Gantt

For more than a decade, the Swedish company Bryntum has been developing quality JavaScript solutions for Ext JS, dev tools, and UI components, including a performant and multifunctional Bryntum Gantt chart. The Gantt component is written in ES 2020 with the help of advanced web technologies. Therefore, this tool can be seamlessly integrated into any project management app based on Vue.js or other popular frameworks.

The product offers a wide range of features aimed to facilitate and improve the process of handling project tasks, including drag-and-drop support, various types of task constraints and dependencies, resource allocation, and much more. The rich graphical UI, various customization options, and limitless styling possibilities of the Bryntum Gantt chart guarantee that it can be visually adjusted to the requirements of any project. Some other useful additions such as critical path, project lines, baselines, progress line, task labels, help to properly track the project advancement without missing any important event. 

But one of the most peculiar features of this Gantt component is its impressive performance. This is achieved thanks to the use of the reactive computational engine named Chronograph. This technology powers Gantt’s business logic, ensuring high rendering speed and support of complex projects with any number of tasks. Besides, the engine also provides fast asynchronous rescheduling after the introduction of any adjustments to the project.

The documentation provided by Bryntum will give web developers basic info on how to use Bryntum Gantt with Vue. To see how Bryntum Gantt works in practice, check this nice live demo

Bryntum Gantt is an advanced tool with a rich feature set, but companies or individual developers interested in buying this product can be discouraged by its expensiveness, as prices even for non-commercial use start at $1,300 per developer. If a high price is not a problem, check out this page to learn more details about available license options and prices.

Gantt Chart Hyper Library

DlhSoft has developed Gantt Chart Hyper Library using pure JavaScript, that is why this feature-packed component is easily compatible with popular JS frameworks, such as Vue. The library allows you to easily add good-looking and interactive Gantt charts with draggable bars, customizable grid columns, and dependency lines in Vue-based apps.

Using this DlhSoft product developers can implement a variety of helpful features such as auto-scheduling, critical path, baselines, resource leveling to optimize the work with project data in the Gantt chart. The appearance of all elements displayed on the Gantt chart timeline (tasks, milestones, etc.) is customizable with the help of CSS classes and custom templates. Developers can also make use of numerous configuration options to arrange timeline duration and zoom level, working and nonworking time, scales, etc. Grid cell editors are available to change date and time formats or picking behaviors. This Gantt component remains performant and highly responsive even when the project includes thousands of tasks. And the best thing is, Gantt Chart Hyper Library can be integrated with other components such as load charts, PERT charts, network diagrams to help you manage projects more efficiently.

If you want to learn more about the functionality of this Gantt component, check out this demo. When it comes to the implementation of the DlhSoft Gantt library in a Vue app, developers can make use of this helpful Vue tutorial.

If you decide that this Gantt component is the right solution for your project, then you can consider several licenses with different pricing options varying from $358 to $3,795.

Vue Gantt Chart by Syncfusion

Developed by Syncfusion, this Vue Gantt chart has become a nice addition to any Vue-based project management app. It enables developers to provide a well-structured visualization of project tasks scheduled over time, introduce necessary updates, and monitor all stages of the project implementation. Using the intuitive Gantt UI, it is possible to conveniently handle tasks and their dependencies, as well as resources involved in the project via editing, dragging, and resizing.

All project tasks can be scheduled manually or automatically using the corresponding mode. The Vue Gantt Chart also allows using unscheduled tasks that have not received start/end dates during the planning stage, but if necessary, they can be scheduled properly at any point when the project is underway. Developers can also implement event or data markers, holidays, tooltips, autofocus on specific tasks to make the Gantt timeline more informative and comprehensible. Baselines and critical path are also available to enhance analytical capabilities for the project team. The look and feel of taskbars can be easily customized with the help of templates for a better view of the project data. Simple and flexible APIs of the product allow developers to easily modify even the most complex Gantt Chart functionalities.

The documentation dedicated to the Syncfusion Gantt component allows web developers to learn how to create a Gantt chart and apply its features in web apps. All docs include code snippets and previews. If you want to get a deeper insight into the functional capabilities of the Gantt component, check out these demos

Syncfusion Vue Gantt is only available in the JS package together with 60+ UI components at a price starting from 995$ per developer.


The gantt-schedule-timeline-calendar (GSTC) is an all-in-one JavaScript component written in TypeScript. GSTC allows developers to enrich Vue-based apps not only with a Gantt chart functionality for planning and managing tasks, but also, as its name implies, with other useful tools: schedule for the reservation system, a timeline for organizing events, or calendar for different usage scenarios. It can be easily integrated with the most popular JavaScript frameworks and third-party libraries.

This product can hardly impress you with a wide variety of available functional capabilities, as its standard feature set is pretty basic. It supports tree-like structures, moveable/resizable items, selectable items, rows and grid cells, resizable list columns, etc. Seems like not that much at first sight, right? However, GSTC is extremely extensible and its basic functionality can be expanded with the help of custom plugins. The technology is highly configurable, meaning you can quickly rearrange its structure in a number of ways when the need arises. Moreover, it is also possible to style all HTML elements. Plus, GSTC provides decent performance even with large data sets.

Check out the page of the GSTC Vue version on GitHub to learn how it can be easily added to your app. 

GSTC is available under the AGPL-3.0 license, so your project must be AGPL-3.0 compatible to use this component.

Source link

Post image

Options to develop a “report builder” similar to MailChimp t…

Hey all.

I’ve used Mail Chimp for the first time today, I really like the “builder” functionality, where you have a side bar menu with “blocks” of specific items you can include in your e-mail, and than drag and drop these to the main page, where you will have the content blocks, you can change the order, each block has some specific options and etc.

I find the feature pretty cool, something like this:

Post image

I wanted to implement something similar using Vue.JS, but have no idea on where to start. I’ve seen some apps/codes that use drag/drop features implemented in VueJS. But I can’t get my head around on how to build upon it: how make different “content blocks” (right side menu, what will be dragged), and how to make the main screen work like a “canvas” where you can move blocks around, and edit them on the go.

Any ideas would be much appreciated.

Thanks a lot!

Source link