Post image
Strategy

I need a website for a contest I am running that displays ti…


The site layout would be like the picture below. The top of the site will have the contest rules. Contest is going to be on tik tok and instagram and be a challenge for the funniest/best submission. I want a simple site template that lets you as the website owner just submit the link for a tik tok or instagram video in the back end and formats it so people can just click and play videos easily without being taken to another window. Also needs to be cross platform so it can be used on phones and easy to scroll through by swiping/using the mouse wheel. Anyone know if this is possible or any resources or site designers that could help me?? Of course it would be paid. Thanks in advance

Post image



Source link

Post image
Strategy

I’ve created a royalty-free seamless pattern generator for w…


I posted the first version of it back in March i think, and was told to post again with any updates. Since then I rebuilt it from scratch with typescript, and nuxt.js, added filters so you can make the patterns look painterly, and built an HSL color picker for the colors.

I hope developers will use this to make their websites fast without sacrificing expression. Most of these patterns only weigh in at a few hundred bytes, and i’m actively working on trimming some of the fat. So they’ll barely dent loading times, even if you’re browsing on 2g.

That’s the idea anyway. I’ve attatched some patterns, most I’ve just made so you can get an idea of the kind of thing it can do. Here’s the link https://doodad.dev/pattern-generator

Also, it’s free forever.

Post image
Post image
Post image
Post image
Post image



Source link

Karate Test
Strategy

Karate Framework: Let’s Make API Tests Green Again


I’ve recently talked about a testing framework called Cypress. In this article I will talk about another one: a pretty simple testing framework for REST API Automation called Karate. In order to best describe it, here’s a pretty descriptive excerpt from the official source:

Karate Framework is the only open-source tool to combine API test-automation, mocks and performance-testing into a single, unified framework. The BDD syntax popularized by Cucumber is language-neutral, and easy for even non-programmers. Besides powerful JSON & XML assertions, you can run tests in parallel for speed – which is critical for HTTP API testing.

First, let’s compare Karate test with Cucumber and REST-Assured.

Karate:

Karate Test

Cucumber: + we must implement steps and POJO:

Cucumber Test

Rest-assured:

Rest Assured

Advantage of Karate: BDD in one place (compared with Cucumber + steps + business logic + POJOs). If you need complexity Karate has Javascript support for this.

For pre-conditions use, Karate proposes to use another feature files:

Karate Preconditions

Since Karate is written in Java, it has Java integration.

Calling Java method from API test, like generate uniqueId:

Generate uniqueId

Another advantage of using Karate is its assertion capabilities:

Karate Assertion Capabilities

Schema validation. User friendly formating of response validation. Reusing json as a variable. Karate markers. DDT. Similar to Cucumber, but compared to Cucumber, where variables are static in the table, in Karate we can import a csv file with data. Can be user e.x. in boundary testing of api endpoint.

Boundary TestingBoundary Testing

Parallel execution. Running with Junit5. In the example we run all tests/feature files with tag @regression.

Parallel Execution

Reporting. Allure, Cucumber report. From the box Karate propose the report like next one:

Karate API Test

But also we can easily integrate Cucumber report or also Allure.

In the case of Cucumber Report we can obtain something like:

Karate Framework API Test

Some other cool features of Karate Framework: Json Path, UI step-to-step debug, Integration with CI, Build-in ENV switcher, etc.

Summary: Pros and Cons of using Karate Framework

pros

cons

Integration with java, JS

No ‘find usage’, auto renaming

Json, xml native support

TestNG support deprecated

Powerful assertion capabilities

Has no Auth Schemes out of the box

Parallel execution

 

No programming skills required

 



Source link

Flutter Vs React-Native Vs Xamarin
Strategy

Flutter Vs React-Native Vs Xamarin


Flutter vs Xamarin vs React-Native

The big fight between Flutter, Xamarin and React-native for building cross-platform apps is making the developers weigh their pros and cons to select the right choice for your projects.

Any framework does have its share of pitfalls but at the end of the day, you have to choose the one that best fit your project needs by outweighing the disadvantages to give a better performing application.

Cross-platform mobile app development allows you to build mobile applications for multiple platforms such as iOS and Android with a single technology stack.

Using the same technology stack means that instead of creating multiple versions of your app, each written using the dedicated native language for each platform, you can write your code once and deploy it on several platforms at once. Having a single shared codebase allows you to maintain the same look, feel, and experience across all platforms.

By using this method of development, one can cut the development cost and time drastically to half by saving the resources for separate teams requirements. Additionally, it allows you to expand your market reach without any added effort.

Let’s have a closer look at the three most popular cross-platform mobile app development frameworks available today: Flutter, React Native, and Xamarin.

Flutter

flutter

Flutter is an open-source, cross-platform mobile application development framework created by Google in 2017. It’s the youngest framework among these three and in a lesser time has garnered a substantial amount of attention that today it has become one of the most popular frameworks among front-end devs. Also, it is the best performing application too.

Flutter Advantages

  • Complete development ecosystem: Flutter offers APIs, pre-built widgets, CLI tools, and pretty much all the tools needed for cross-platform mobile app development.
  • Customizable: While it offers an extensive library of pre-built widgets, you can also create your own or customize pre-existing ones.
  • Reliability: Developed and supported by Google
  • Hot reload: Allows developers to fix bugs faster through faster code implementation
  • Free: Open-source platform

Flutter Disadvantages

Flutter poses a few challenges, especially being a new framework:

  • Large app size: Flutter apps can be quite large compared to other frameworks that can force developers to reduce the number of libraries and packages used, compress images, and even steer away from using animation altogether in favor of reducing their app’s size.
  • Native APIs: Flutter does not expose many native APIs for you to use. That is why, for many purposes, you will need third-party packages, which means that you will have to depend on the ecosystem.

However, you can always write your native code that accesses the required feature, and Flutter will give you a bridge to use that feature from within your Dart code.

Apps Built Using Flutter

  • Google AdWords
  • Google Greentea
  • Alibaba
  • AppTree
  • Reflectly
  • Hookle
  • Topline
  • Birch Finance
  • OfflinePal
  • Hamilton (musical)
  • BetaBubs

Flutter Development Tools

  • Flutter development language
  • Dart
  • Flutter IDEs:
    • Android Studio
    • IntelliJ Idea
    • Visual Studio Code
  • Flutter tools:
    1. Flutter SDK
    2. DevTools
    3. Hot Reload
  • Flutter packages:
  • Dart Packages

    React Native 

    React Native is an open-source, cross-platform mobile app development framework created by Facebook in 2015. It enables users to use JavaScript and React along with native platform capabilities to build mobile apps.

    React Native Advantages

    Some of the pros of React Native:

    • User Interface: Implements native UI components, allowing apps to look like native apps, and therefore providing a high-quality user interface.
    • Ready-made components: Offers a vast library of UI components, allowing for faster development time.
    • Access to native functionalities: Like camera, accelerometer, etc.
    • Platform-specific code: Allows you to further optimize your separate native apps by using native code.
    • Hot reload: Allows developers to apply changes to the apps right away without having to recompile the apps.
    • Reliability: Developed and supported by Facebook.
    • Free: Open-source platform.

    React-Native Disadvantages

    • Navigation: Navigation built in React Native is not seamless and not comparable to native navigation.
    • Complex UI: React Native struggles with building complex animation and transitions.

    React Native Development Tools

    • React Native development language
    • JavaScript
    • React Native IDEs:
    • Atom
    • Nuclide
    • Visual Studio Code
    • React Native tools:

    -Expo

    -Redux

    -Ignite

    -Flow

    -Reduxsauce

    -ESLint

    -React Navigation

    • React-Native UI components:

    -NativeBase

    -Snowflake

    • React Native testing tools:

    -Enzyme

    -Reactotron

    bloomburg

    Apps Built Using React Native

    • Facebook
    • Facebook Analytics
    • Facebook Ads Manager
    • Instagram
    • Uber Eats
    • Tesla
    • Skype
    • Pinterest
    • SoundCloud Pulse
    • Walmart
    • Bloomberg
    • Discord
    • Myntra
    • Gyroscope
    • Chop
    • Vogue
    • Artsy
    • F8

    Xamarin

    xamarin

    Xamarin is an open-source, cross-platform mobile app development framework that was founded in 2011, making it the oldest of the three.

    Xamarin Advantages

    Xamarin cross-platform mobile app development pros include:

    • Performance: Xamarin apps are known for having almost native-like performance levels.
    • Complete development ecosystem: C#, .Net, and Microsoft Visual Studio with Xamarin are all you need to build mobile apps with Xamarin, making it one of the most complete cross-platform mobile app development frameworks out there.
    • Seamless user experience: Xamarin.Forms allow to take advantage of standard interface elements by providing a library of templates so that you can reuse your code across different platforms. You can also use Xamarin.iOS and Xamarin.Android for manual customization, if needed.
    • Free: For small teams

    Xamarin Disadvantages

    • Updates delay: Whenever new platform features or updates roll out, there is usually a delay until these changes are reflected in the Xamarin tools, which may cause issues with your app.
    • Large app size: Xamarin apps can add around 5 megabytes for releases and 20 megabytes for debug builds, making them larger than native apps. This is primarily due to the libraries used to translate C# calls into native calls.
    • Heavy graphics: Xamarin is great for apps with a simple UI. However, building complex applications or mobile games with Xamarin might not be the best thing to do as you will have to spend a lot of time writing platform-specific code, which defeats the purpose of using it.
    • Platform-specific code: You might need to re-write some parts of the UI in your app in native code. That means that you will need some knowledge in native programming languages such as Kotlin or Java for Android, and Swift or Objective-C for iOS.

    Xamarin Development Tools

    • Xamarin development language

    -C#

    -Visual Studio

    -XCode

    -NuGet

    -Xamarin Inspector

    -Prism

    -MFractor

    -Resharper

    -NUnit

    -xUnit.net

    -Visual Studio Unit Testing Framework

    Xamarin

    Apps Built Using Xamarin

    • Skulls of the Shogun
    • SuperGiant Games
    • Storyo
    • Insightly
    • FreshDirect
    • The World Bank
    • Just Giving
    • Olo
    • Thermo Fisher Scientific
    • APX

    Main Points of Comparison Between Flutter, React Native and Xamarin Frameworks

    flutter vs RN vs Xamarin

    1. Performance

    Whenever studying about the near-native app performances the React Native and Xamarin Frameworks happens to meet the design expectations, while Flutter’s performance is excellent because of its Dart code compiled above the C library making it closer to native code. It results in enhancing the speed of interactions and displays a high level of performance. Benchmarking cross-platform apps performances is highly indiscernible since there are plenty of factors that influence it including devices, code, app, and features added.

    2. Popularity

    There are around 1.6 million of Xamarin developers participating worldwide making it the topmost popular cross-platform framework. The successive popularity ranking goes to the React Native Framework with its steady increase in the user base over the years. However, Flutter is definitely user friendly and amongst the most preferred framework with 75.4% users, React Native engaging up to 62.5% while Xamarin posing only 48.3% users.

    3. Development Languages

    Especially for all cross-platform app developers, it is inevitable and rather difficult to avoid the steep learning curve and to fast gain awareness towards the possibilities of a development language and to work in that environment.

    The Xamarin Framework permits the substantial usage of C# and F# programming across .NET platforms to develop native codes easily.

    When choosing the React Native framework it offers developers the chance to write scripting codes using JavaScript and then build React Native Apps. Although, one drawback of using the JavaScript is that it requires some amount of additional work to be done while building the cross-platform features. (This confirms some specific APIs getting inaccessible and needing the help of React Native apps to proxy it further for an errorless transition)

    Flutter is completely a different development environment that makes use of Dart programming mainly because it is supported by Google Network.

     4. Components

    Working in the Hybrid App Development, building an adaptive component is severely difficult and, in most cases, you may have to build the components all by yourself that might respond to a variety of mobiles and tablets. React native has only the partly adaptive components for designing buttons and text boxes in a mobile app.

    The next advance thing is the introduction of widgets features by the Flutter Framework that vastly consist of library of components. Neither do the widgets respond adaptive during the cross-platform app development and are considered to be inefficient. One of the basic reasons to it is the widgets inability to function at real-time across android and iOS platforms since they lack fully compatible components.

    Xamarin Framework has a massive component library that attributes on majority like a native UI component that is cross-functional across mobile platforms. This allows Xamarin forms to be compiled and run above all types of platform-specific UI layouts.

    5. Code Reuse

    Code reuse is the most important factor accentuating app developers into building Android and iOS Apps. It is highly inquisitive to comprehend the code reusability of each framework to select it for the mobile app development environment.

    React Native empowers ‘write the code once and ship it anywhere’ policy despite its inherent differences shown in embracing multiple platforms. Moreover, code reusability is a cumbersome process of keeping in mind with the current platform that you had worked and then recollect the required set of components.

    Flutter provides a maximum reusable codebase that can be effectively utilized for developing a unique UI Widget allowing the reusability of already defined logic. It is best suited for cross platforms that offer consistency in the User Experiences.

    Xamarin is at the top of the list with 96% of the codebase being made reusable particularly when leveraging the Xamarin Forms, Components and C# programming.

    6. Pricing 

    Basically, all the three cross-platform frameworks are free to access except with Xamarin distributed only to limited number of developers and small companies. The Visual Studio Enterprise comes at an annual subscription of $499 to $2,999 depending on the license procured per desktop systems.

    7. Support and Ecosystem

    Finally, developers favors the cross-platform frameworks that possess a bigger community base represented by forums, documentation, and tutorials. React Native offers sufficient learning materials, developers and designers for documentation purposes and provides help.

    Flutter has just begun to form the community base with google offering reliable support for promoting it towards cross-platform app development. It is expected to grow exponentially and build into a stronger ecosystem.

    Xamarin has a massive community Base and Microsoft is delegating free tutorials for sequentially learning the Xamarin Framework.

     Conclusion

    • Flutter has provenly provided excellent app performance, whereas React-Native and Xamarin perform well in other attributes One basic aspect of cross-platform mobile app development is that there is no one size fits all design. Flutter, React Native and Xamarin Frameworks are competent at building efficient mobile apps.
    • Flutter offers faster app development. Though Xamarin and React Native also perform better, but when compared with Flutter, it is a bit slower. The speed of the app mainly depends on the functions, features, development process, and other terms.
    • Eventually, it all depends on the specific needs and preferences of that particular project that govern the selection of a particular cross-platform framework.
    • It is quite tricky to select one cross-platform framework over the other and this can be clearly understood by evaluating the number of drawbacks to weigh up against the proven advantages while building and using apps.



    Source link

    web worker
    Strategy

    How to Use Web Workers for Non-Blocking User Interface?


    The best about working with Angular is that they support web workers. When you’re dealing with CPU intensive computations, web workers are of great help.

    They put these complex processes into a separate thread to avoid the involvement of the main thread in the explicit background processes and maintain an effortless operation of the user interface.

    web worker

    Source

    Processes like encryptions of data and resizing of images involve the main thread, which on the other hand, freezes the user interface. In such cases, the users find it annoying to use the application. Web workers put these complex processes into a separate thread to avoid the involvement of the main thread in the explicit background processes and maintain an effortless operation of the user interface. 

    Here are some of the types of use case/apps for using web workers: 

    • Complex calculations 
    • Real-time content formatting
    • Progressive web app
    • Extensive data update on a database 
    • Image filtering

    3 Common Issues That Applications Struggle With and How Web Workers Convert Them Into a Success

    These three common problems include resizing of images, Ray tracing, and encryptions of data. What do these three cases have in common? All these operations have heavy computations to perform by CPU in fractions of seconds in the background. Configuring your app component to web workers makes it trouble-free and frees up the user interface. 

    Let’s understand in detail each case:

    Use Case 1: 

    Consider resizing an image on your Angular application. Although it’s not a big task, it requires multiple calculative operations to be performed in a fraction of seconds. For instance, calling the resize method and passing the objects referring to the Javascript Image Manipulation Program along with the height and width parameters. Consequently, these complex computations involving the main thread of application freeze the user interface.

    Here’s where web workers come into the picture. It distributes the computations across separate threads, reducing the burden of the main thread. This process does not block the UI but further continues the process in the background without hindering the user experience.

    Use Case 2: 

    Ray tracing is a rendering technique that uses a heavy intensive CPU mathematical computation. It traces the light as pixels to generate an image and stimulates the lighting effects like reflection, refraction, and many others. All these computations involve multiple threads to operate, and this leads to the blocking of the user interface. To keep the user interface running effortlessly, we need a separate thread that only works for ray tracing. The very common example of Ray tracing is it being used in gaming applications.

    Web workers split the image rendering between several workers and also between CPUs as required. Having said that, the background processes become light weighted and do not block the user interface. Though Web workers are not commonly used, they perform the important functions in massive computations development. 

    Use Case 3: 

    Let’s take an example of banking transactions and other financial transactions that require a high level of secure encryptions. Though these transactions are managed easily with the sleek user interface. Despite executing hundreds of transactions simultaneously, it provides a completely polished UI interaction.

    To perform the end-to-end encryptions for sensitive data, we need some concrete business logic that justifies the time, coding efforts, and user experience. It becomes time-consuming and adds more complexity for larger projects with giant data.

    Web workers manage these processes since they are the backbone of performing CPU intensive operations. They free the main thread and continue the process in the background. It is much advantageous when you want to perform such complex computations. Web workers do their job here to solely process the calculations for encrypting the data and run the algorithms.

    Having discussed these use cases, you might have understood the idea of using web workers in different cases of complex computations. From resizing of an image to computer gaming applications, all that involve complex programming yet a mandatory non-blocking UI experience. With the advent of real-time applications and more intelligent software web apps, the availability of Web workers like technology is a boon to the programming world. You can do as many complex processes as you want to by separating the processes into a different thread and still maintain a smooth operation of the user interface.



    Source link

    Strategy

    On fixed elements and backgrounds


    I thought this was going to be a short-ish note on fixed positioning and jank, but as with almost everything I write, it grew into a long-ish post about containing blocks, rendering and scroll performance.

    The original point of writing this was to remind myself that whenever I want to fix the position of anything on a web page, performance considerations must be top-of-mind. It wasn’t like I didn’t know, I just wasn’t actively thinking about it.

    *cue look of disapproval from webperf folk everywhere* ಠ_ಠ

    But then it spiralled off into other things, so I’m moving the conclusions up to the top, and if anyone is interested in the whys, you can read on after that.

    TL:DR the practical bits

    If you have a fixed element on your page, which means it doesn’t move when you scroll, you might realise that it no longer acts fixed if you apply a CSS filter on its nearest ancestor.

    Go ahead, try it on the Codepen.

    See the Pen Fixed positioning and CSS filters by Chen Hui Jing (@huijing)
    on CodePen.

    This is because applying a filter on the fixed element’s immediate parent makes it becoming the containing block instead of the viewport. I encountered this when I was trying to archive v1 of my website.

    I wanted to keep everything exactly the same but with a grey-scale filter applied so it would look, well you know, archived. The website has a un-performant dark mode toggle that is an immediate child of the body element.

    It was positioned in the bottom left corner of the viewport with position: fixed. I thought the most efficient one-line fix was to apply filter: grayscale(1); on the body element, but that unfixed my toggle.

    In the end I applied the filter to the header, main and footer separately so the toggle wasn’t affected by this. This is not a bug, it’s a legitimate feature, please read on if you want to know more.

    Also, if you plan to have fixed backgrounds on your site, try using a pseudo-element to house the image instead of using background-attachment: fixed for better scrolling performance.

    I was dealing with a more than 3-year-old procrastination series of blog posts, which I decided to move into a site of its own. Because a new site means a new layout and design to build. Yes, I’m still procrastinating the actual writing part.

    Anyway, I wanted some fixed decorative elements on the site to fill up excess space on either side of the text for large viewport widths. If you came across and remember Chris Ruppel‘s article on the will-change property, this will look familiar.

    Instead of doing something like this:

    main {
      background: url('/some-beautiful-image.png') no-repeat center center;
      background-attachment: fixed;
      background-size: cover;
    }
    

    Do something like this:

    main::before {
      content: '';
      position: fixed;
      width: 100%;
      height: 100%;
      background: url('/some-beautiful-image.png') no-repeat center center;
      background-attachment: fixed;
      background-size: cover;
      will-change: transform;
      z-index: -1;
    }
    

    Paul Lewis explained in Using Chrome DevTools to profile the jsconf.eu site (somewhere around the 2.30 mark) that background-attachment: fixed causes a paint operation whenever you scroll.

    The solution brings the background image in question into its own layer, so when the main content is being scrolled, it does not have to constantly be repainted.

    will-change should not be rampantly used all over your site though. Refer to Sara Soueidan‘s Everything You Need to Know About the CSS will-change Property.

    You can stop here and go do something more useful with your life at this point. Everything after here is my rabbit-hole research. You have been warned.

    The containing block

    Oh, you’re still here? Okay then, let’s talk a bit about how fixed positioning works in the context of browser rendering. Boxes are always positioned relative to a containing block. If there isn’t one explicitly defined, that containing block is the viewport.

    Understanding how the containing block works is very useful when it comes to troubleshooting your CSS positioning woes. A recommended resource for this is Layout and the containing block on the MDN web docs.

    A box’s position property determines what it’s containing block will be. static (which is the default value), relative and sticky uses the nearest ancestor element’s content box. This ancestor must be either a block container, or has established a formatting context.

    absolute uses the nearest ancestor element’s padding box. This ancestor must have a position value of anything other than static. If you’ve ever wondered why people toss in a position: relative on a parent element to “trap” a child element within itself.

    Now, we come to fixed. A fixed box usually uses the viewport as its containing block. Common use-case for this is sticky headers or footers, where we usually slap on position: fixed on those elements and call it a day.

    However, there are situations where the containing block is the nearest ancestor’s padding box. This only occurs when the ancestor fulfils any of the following conditions:

    1. A transform or perspective value other than none
    2. A will-change value of transform or perspective
    3. A filter value other than none
    4. A will-change value of filter (only for Firefox)
    5. A contain value of paint

    To better understand why, let’s segue into some browser internals. Just superficially. Because I’m as far away from being a browser engineer as I am from living on the moon. 🌓

    Browser rendering

    My favourite explanation of how a CSS engine works is by Lin Clark in Inside a super fast CSS engine: Quantum CSS (aka Stylo), so do check that out. Generally, all CSS engines go through the process of parse → style → layout → paint → composite & render.

    Steps every CSS engines take

    For a really in-depth look into how browser internals work, I recommend Tali Garsiel‘s How Browsers Work: Behind the scenes of modern web browsers.

    Other than the DOM tree, browsers also construct a render tree, which represents where elements should go on a page based on information like width, height and position, and how it should look. Every CSS property value is calculated for every element in the document.

    Layout involves the computation of position and size of all the boxes. Paint renders the boxes (with all their visual styles) as pixels on your screen. This can happen on multiple layers. Composite mushes the layers together, applies compositor-only styles then renders it all on the screen.

    Keep in mind this is a very simplified description. I don’t think “mush” is a technical term.

    Have you ever heard folks say there are certain CSS properties that are “safe” to animate, and others that are not? If you haven’t, please refer to High Performance Animations.

    The TL:DR of that article is that if you have to animate something, use either transform or opacity wherever possible. These are the compositor-only properties. Everything else is more expensive. Think of the above diagram as those toddler toy stacking ring things.

    Stacking wooden toy thingy

    Rendering is more or less sequential, so when I say expensive, think about how you would replace one of these rings. If compositing happens again, that’s all the browser has to do. But as you go earlier in the sequence, the browser has to do more work.

    Effort required

    So properties like position, display, and even font-size will trigger layout. Properties like color or background-position will trigger paint. As of time of writing, only transforms and opacity are fully handled by the compositor. You can check the full list at http://goo.gl/lPVJY6.

    Having work being handled by the compositor helps performance because modern browsers have two threads of execution, main and compositor. Layout and paint is done on the main thread while the compositing and rendering is done on the compositor thread, by the GPU.

    The main thread is very busy. It has a lot of stuff to calculate. But it’s pretty good at that, much power, all compute. GPUs aren’t that great at quick computation, but they are great at drawing stuff.

    Drawing pixels to the screen? No problem. Drawing the same bitmap of pixels to the screen repeatedly? Piece of cake. Transforming that same bitmap of pixels into different positions, rotations or scale? Easy-peasy-lemon-squeezy.

    By now, some of you might be like, omg when is she gonna get to the point??

    We-ll… the point was covered at the beginning of this post.

    So let’s talk about scrolling!

    Have you wondered what happens when you scroll a page? Doesn’t it feel like there are magical elves rotating a long ream of content, like those player piano things?

    Vintage player piano

    As Paul Lewis explains in Avoiding Unnecessary Paints, every time you scroll up or down a browser, content needs to be repainted before it appears on screen. And paint work will affect performance.

    I did the opposite of burying the lede earlier, so you would have realised (if had read the first part) why background-attachment: fixed performs much worse than if you moved the background image to its own layer and fixed that instead. Minimal repainting. That’s what it does.

    That being said, I’m not sure how much browser have since improved and optimised the rendering process and if that has made some of these techniques obsolete? I’d like to think they still help, because we have yet to see any radical changes in the rendering process.

    Would love for someone to tell me more about rendering performance in today’s latest browsers. *hint, hint*

    Wrapping up

    I think I should stop here for now. I’ve already read through the design document for GPU accelerated compositing in Chrome and probably need to extricate myself from this rabbit hole. Don’t worry, I find rendering most fascinating and will definitely revisit this again.

    References





    Source link

    MVB architecture
    Strategy

    Android Architecture: Rethinking MVP in Android


    Today we will talk about Android Architecture and will rethink the use of MVP in Android. When we talk about software architecture, in Apiumhub we always have in mind the following objectives:

    • Improve testability, expressiveness and reusability.
    • Reduce mocking / stubbing, linkage and development costs.

    Establishing these objectives, we prioritize the different solutions that follow 4 rules of the simple design, which are mentioned by descending priority:

    • Write code that passes the tests
    • Code reveals intentions
    • Eliminates duplicity
    • An architecture with the minimum number of elements

    With these two pillars in mind, we can begin to consider what architecture would benefit us when developing mobile applications.

    Rethinking MVP in Android 

    (M)VB – Model-View-Backend

    Before starting to evaluate the most used architectures in the industry and discuss our approach, we would like to emphasize that one of the most important thing to take into account when developing is pragmatism.

    This, applied to the world of architecture, means that we must be aware at all times of what kind of product we are developing and what are the requirements. In that way, if, for example, we have an application that queries data from a server and that shows it on screen, without having a database, complex transformations on this data, concatenated calls, reusable components, etc … the simplest thing would be to use an architecture that uses the least number of layers and components, that read from the server and paint on the screen ; a Model-View-Backend architecture.

    MVB architecture 

    MVP – Model-View-Presenter

    When we talk about mobile architecture, the starting point is usually the MVP pattern. A few years ago and before the arrival of the MVVM, MVP in Android was the industry standard for building the application layer of our application.

    MPV architecture

    MVP in Android was born as a result of the need to solve the problem that constituted having Activities that were God Objects, where all the logic of the application reside, the network calls, the storage in BD / shared preferences, etc.

    We do not want to delve much into the details of this architecture, as it is quite popular and known to all, so we will only discuss the MVP in Android advantages and disadvantages:

    MVP in Android Advantages:

    • Decoupled view of the other components
    • Presentation logic unit-wise
    • Reusable views and presenters

    MVP in Android Disadvantages:

    • Bidirectional coupling. The presenter knows the view and the view knows the presenter. In addition, the presenter has dependencies with the services.
    • When this coupling exists, to test the presenter, we have to mock the services and the view.
    • A presenter has dependencies with N services, which complicates the testing of it since each service that we add implies more mocking in the tests.
    • There is a tendency to store intermediate states in the presenter (for example, the state of a form), which leads to difficulties when testing this presenter since we have to configure these states to cover all possible cases.

    MVPBinder

    As we have seen in the classic MVP, the biggest disadvantage of the classic MVP is the increase of the difficulty to test a presenter as it grows; that is why we decided to evolve it until we can decouple it from services. 

    MVPBinder architecture

    For this, we created a class “Binder”, which is a subclass of the presenter that allows us to link service events with a response in the view, and thus avoid having dependencies with the services in the presenter, so that to test it we do not have to mock the same ones. An example of a Binder class would look like this:

    The bindSearch method is defined in the presenter and is defined as:

    Likewise, the onGetRepositoryListNext and onGetRepositoryListError methods are also defined in the presenter and are these:

    Adopting this architecture, these are the advantages and disadvantages that we find:

    Advantages

    • Decoupling between the presenter and the services. What facilitates the reusability of the presenter.
    • It is not necessary to mock/stubbear the service. What facilitates the testing of the presenter.

    Disadvantages

    • We continue to maintain a dependency between the view and the presenter, so we have to mock the view to test the presenter (although we only do verifications and do not define behavior for it).
    • If we have more than one service, our Binder will have those N services as a dependency and may grow indefinitely.
    • There is still a presenter in which we can store intermediate states, which complicates the testing of it.

    MVB – Model-View-Binder

    After the adoption of the presenter with the binder, we realized that the same investment of dependencies that we made between the presenter and the services could be done between the presenter and the view (s). 

    In this way, we would have a completely decoupled view of the presenter, as well as a presenter decoupled from both the view and the services. The sole responsibility of this presenter (from here on we will call him Binder) will be to link the events that issue the view with calls to the service, and the events that the service issues with the methods of the view. A Binder of these characteristics would be like this:

    In this way, we could have N binders where each one links a view-service pair, so that we could have, for example, a Binder that links the events of the view that we want to track in an analytical service with a service that does the same and have another Binder to obtain data from that same view. In this way, the Binder to track events (along with the interfaces of the view and the service) would be reusable in all the views that we want and we will eliminate code duplication.

    The events that a view/service emits as well as the information it receives would be defined in an interface such that:

    This architecture makes it much easier for us to test our presentation layer, since it completely eliminates the dependencies with views and services (the only dependency is on the Binder, and testing it would be redundant, since it is little more than a configuration file) and for both eliminates the need to mock them.

    It doesn’t only eliminate the mocking, but the way to test both our services and our views is to verify that, for an event of entry X, a certain value is emitted through the output event Y. In this way we have a Unified form to test a large part of our application, no matter how complex the services or the views are.

    In addition, we eliminate the temptation to have intermediate states in intermediate layers (like a Presenter or a ViewModel), since we can only store them in the view (information that concerns only the view), or we will have to take it to the outer layers of our application (for example a cache in memory) and access them through a repository.

    Thanks to this architecture, we solve the problems that we saw in the previous ones, having only one disadvantage: the complexity of the services has increased with respect to the previous ones; disadvantage that we mitigate intensively testing our services.

    Next Steps

    • We are working on a DSL that defines input and output events and, through adapters, we can work with RxJava, Corrutinas/canales, etc…
    • Delegates that allow us to define these events and their entry and exit points
    • (Perhaps) An annotation system that allows us to bind these events without the need to write us the corresponding code

    Side note: Many of the code used to write this article can be found on this repository. 



    Source link

    Post image
    Strategy

    Rapid Prototyping with Utility-First CSS : webdev


    I am the co-founder of Flexiple and Remote Tools. In this post, I describe why I chose to use a utility-first CSS framework to build my website’s UI in a fast, robust and low-maintenance way.

    Product Briefing

    We are building an exclusive remote work focussed community, The Remote Clan. The sudden remoteness situation due to COVID-19 works strongly in our favour and hence, we preponed our launch to May 2020.

    Over the past 1.5 years, we’ve worked hard to build an audience at Remote Tools and have a solid base of 4000 newsletter subscribers, 20,000 monthly visits, 2 seasons of podcast & 25 stories. The community will be built on top of this and hence, can’t just be a simple MVP.

    The exact brief looks like this –

    • It’s a community website. Focus has to be on content posts and user profiles.

    • UI is critical. No one’s going to be hooked onto the community unless they like the look and feel of the website. Micro interactions are an absolute must.

    • Standard forum UIs are a no-no. Need to stand out from traditional forum websites like Tribe.

    • Need the website up and running in < 2 weeks. Build only that’s most essential.

    Why Utility-First CSS

    1. Rapid prototyping without worrying upfront about abstraction

    I figured that utility classes are extremely handy when doing rapid prototyping, especially in the initial stages of app development.

    My first priority is always to rapidly build custom UI elements on the page without having to worry about building CSS components from the word go. The latter approach often leads to premature abstraction i.e. building a component for a certain use-case and ending up never using it.

    2. Extracting components when I need to

    Once I am done adding these utility classes to multiple elements across pages and if I see a common set of utilities used, I can always extract them like this primary button on my website –

    .btn-primary { @apply font-bold py-2 px-4 border rounded border-azure-radiance-500 hover:border-silver-500 bg-azure-radiance-500 hover:bg-silver-500 transition duration-300 ease-in-out transform hover:-translate-y-1 hover:scale-105;}

    3. Customization to the core

    A couple of days into building the website, I realize that the shades of gray across the pages are a little too dark.

    I have an entirely new palette for gray and all I have to do is override the gray default in Tailwind.

    theme: {extend: {colors: {'gray': {100: '#F9F9F9',200: '#F0F0F0',300: '#E7E7E7',400: '#D6D6D6',500: '#C4C4C4',600: '#B0B0B0',700: '#767676',800: '#585858',900: '#3B3B3B',}}}}

    It’s not just colors. I can practically override or extend any default in Tailwind, be it margins, padding, font, you name it.

    4. Easily responsive

    Tailwind provides four breakpoints (sm, md, lg, xl) and I like the fact that the breakpoints are mobile-first by default. So, unprefixed utility classes take effect on all screens while prefixed ones apply only at specified breakpoints and above.

    For example, this code is for pages with a right sidebar –

    <div class="w-full sm:w-1/4 sm:order-2"><div class="sm:mt-16 mt-4"><%= render "shared/right_sidebar" %></div></div><div class="w-full sm:w-3/4 sm:order-1">..</div>

    So, each of the divs occupy full width on all screens except 640px and above (sm) where the sidebar occupies 25% and the main content takes up the rest.

    Post image

    Desktop View

    Mobile View

    5. No need to name classes except for extracted components

    One thing that always irritates me whenever I look back at the code for Flexiple is the naming of classes. Names like ‘dont-take-our-word_text-content‘ and ‘u-margin-bottom-big‘ should be deemed inventions.

    Tailwind’s naming convention is intuitive. More than that, I don’t have to scratch my head to come up with tons of new names.

    How’s this different from inline styles?

    This is something that bothered me at first. Using inline styles is a taboo and I was worried if I am ending up doing the same here.

    But there’s a stark difference between the two. Inline styles allow you to do pretty much anything you want. On the other hand, Tailwind provides you a design system with constraints and all you are doing is choosing styles from that constrained design system.

    Atomic classes, no matter how atomic they are, will always remain a finite list.

    P.S: Originally published here.



    Source link

    Post image
    Strategy

    Spring Boot & ReactJS – 404 page not found : webdev


    I’ve been building a Web application with Spring Boot and React and I have problems with default 404 Whitelabel page (from spring-boot).

    Currently, setup in React is that I try to intercept HTTP response status codes on API calls, I have it handled for 401/403/>500, works perfectly.

    Depending on status code React would render a specific component.

    I’ve tried to do the same for 404 status code, but for some reason status code never reaches React, apparently Spring just renders Whitelabel page, not even reaching React (assumption).

    There are a lot of answers on Google how to disable Whitelabel pages, the first one that comes up is — server.error.whitelabel.enabled: false —

    So I’ve added it to my application.yml file (alongside with some other that “google” has suggested — spring.autoconfigure.exclude: org.springframework.boot.autoconfigure.web.servlet.error.ErrorMvcAutoConfiguration, spring.mvc.throw-exception-if-no-handler-found: true).

    After I did that, I no longer receive Whitelabel page, but instead, I receive
    some other 404 not found page.

    Post image

    page on wrong url after removing Whitelabel page

    One solution that I’ve found on google is this (https://medium.com/@amithkumarg/custom-404-error-page-in-react-app-with-hashrouting-and-spring-boot-71ee2ca5550d)
    it is very close to what I want to achieve, it’s just that we have a different approach on the front-end side.

    His last line has got me thinking that 404 never reaches react and that is
    Internally, this is how the paths will be resolved:
    http://localhost:8080/badpath >>> 404.html >>> ClientRedirect >>> http://localhost:8080/#404 >>> NotFound Page

    I have the same setup in development, back-end is running on 8080 port and front-end on 3000 port (not sure if that is important considering that in production they run on the same port)

    But this 404.html page is what got me thinking that 404 never reaches react, I have no custom HTML in my spring project so there is no redirect, and I would like to keep it that way.

    So finally my question is How can I intercept 404 status code so I can render notFoundComponent? Or I believe that there is a better solution (because there always is), so I would like to hear it.



    Source link

    Post image
    Strategy

    Instagram Graph API and accessing the insights of other crea…


    I’m looking to build a basic influencer discovery tool (like upfluence and similar products).

    I noticed that upfluence has a huge database of influencers and seems to have all of the data available for instagram users via this Instagram Graph API endpoint

    https://developers.facebook.com/docs/instagram-api/reference/user/insights

    Things like location/city breakdown of their followers, gender, etc

    Post image

    upfluence

    Now, I’ve been combing through the docs (just starting), and I have not read anything that explicitly says you can only access your own data (or data from creators who have given you some level of permission) BUT I’ve read a bunch of discussions online (stackoverflow, etc) that seem to indicate you can only access your own data.

    So, I’m of course planning to mess around with the API to answer this question myself but thought I’d also pose the question here for now.

    There are dozens of influencer discovery tools who seem to be accessing this information, and I can’t imagine that they’re scraping it (e.g. how do you get a creator’s audience gender and location breakdown by scraping the html of a creator page). I feel like they must have access to this stuff via the instagram Graph API.

    Has anyone here delved into this?



    Source link