Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Stories

    The best stories related to our favorite topics from all over the Internet. Find links to the best news, blog posts and stories related to Leadership, Management, Design, Requirements, Development, Operations, Test, Security and Atlassian to mention some topics. Stories is a curated section where any story is welcome as long as it fit the categories and are considered useful and interesting to the community.

    What’s Next: WebStorm 2022.1 Roadmap

    blog.jetbrains.com - 2021 was pretty intense. We went through three major and a few minor releases, organized our first JavaScript Day, took part in several conferences (one of them was even offline!), and published lots of new content. We also welcomed 2 new members to our team – there are now 19 of us. If you want to learn more about what we’ve been up to, check out this blog post series.
    Before we dive into our plans for the next release, we’d like to give a big shout-out to all of our Early Access Program users. Thank you for sharing your feedback! It really helps us improve the product. As usual, we rewarded the most active EAPers with free one-year product licenses.
    Let’s take a look at some of the biggest things we have planned for WebStorm 2022.1, which is scheduled for release the end of March:
    Remote development. With WebStorm 2021.3, we introduced a beta version of our new remote development workflow, JetBrains Gateway. You can already give it a try! In this release cycle, we’re going to fix some issues with it and make the functionality available out of the box. Quality improvements. We plan to introduce some performance optimizations for the GraphQL plugin and keep up with the GraphQL specification updates. Additionally, we’re going to add support for page navigation in Next.js projects (WEB-48593), address the problem with npm/yarn not being recognized when Volta is used, and fix several issues with the webpack integration, including WEB-31023. Running commands from Markdown files. We’re going to release a new feature we’ve been working on for a while – IDEA-257243. This will let you run commands directly from your README files by clicking on the Run icon next to them, similarly to how you would run single tests in WebStorm. JavaScript and TypeScript support in Fleet. We’re going to dedicate some time to improving the JavaScript and TypeScript support in Fleet, a new IDE by JetBrains. If you haven’t heard of it, you can read about it in this blog post. That’s about it. We can’t guarantee that all these improvements will be included, but we’ll do our best to make it happen. Stay tuned for information about the upcoming start of the Early Access Program for 2022.1!
    The WebStorm team

    WHMCS 8.4 Now Available in General Availability

    blog.whmcs.com - We are pleased to announce the release of WHMCS 8.4 to General Availability.

    This marks the end of pre-production testing, and WHMCS 8.4 is now the recommended version for all new installations and updates.

    WHMCS 8.4 features a new faster checkout experience for WordPress Hosting, access to SSL Certificate Site Seal Code within the WHMCS Client Area, the ability to create and manage Email Aliases with OpenXchange, improvements to the automatic updater and more.

    For more information about all of the new features in WHMCS 8.4, visit the What's New in WHMCS 8.4 Microsite.

    Getting the Update
    Automatic Update You can update to the latest version of WHMCS using the Automatic Updater. Simply navigate to
    Utilities > Update WHMCS to begin the update process.
    As always, a download is also being made available for those who wish to install or upgrade manually. You can download WHMCS 8.4
    from our downloads page.
    Thank you for continuing to support and use WHMCS and we hope you enjoy the latest version!
    Liked this article? Share it

    Composition-Based Design System In Figma

    smashingmagazine.com - Composition-Based Design System In Figma
    Aleksandra Nagornaia 2022-01-03T13:00:00+00:00 2022-01-03T15:05:19+00:00 Working as a designer on a design system for a large product has taught me how precious the time you spend on a single task/component is. Things advance fast, and I try to keep up making it work for both designers and developers. It is no easy task.
    I’ve noticed that a good chunk of team members’ productivity goes into endless conversations such as:
    These types of conversations are very repetitive, and even when a decision is made, they don’t feel like time with the team is well spent. There are so many questions to be answered.
    What do you optimize for? Is it for consistency, scalability, creativity or maintainability? You can optimize for so many things — and choosing only one often sacrifices another.
    It’s difficult to define a set of rules that would put an end to these meetings in the future. What topped this problem up was one interface element that stood out due to its huge reusability and variations: list item.
    Four list items: all same, but different. (Large preview) If the Title-Subtitle list item is a component, then:
    Is the image (chevron) indicating a new component or a variant of one? What if it’s not a navigation chevron at the end but an (info) icon instead? What if it has a leading image in front? What if it has a switch? Aaand at the same time, they share states (selected, pressed, disabled, and so on). Try to get the team iOS, Android and designers in a call to make a decision on it. 🤯
    Thankfully, I’ve been surrounded by people that are open to collaboration across teams. After teaming up with developers, I started recognizing developer terms and patterns in the designer tool.
    At the same time, Figma has been peeking over developers’ shoulders for layout building tools (like auto-layout, variants with properties, constraints, and so on), so now it allows designers to approach component building closer to how things look in code.
    Observing developers in how they build and think about the components gives you a perspective on its structure. Soaking those patterns allowed me to build the components with almost the same rules in Figma (looking at you, min and max-width/height setting).
    Introducing “Composition” For Design Systems: Composable Content And Containers
    Let’s take a look at this list item component:
    We always have a background that (in our case) could change depending on its state: primary, secondary, accent (plus its custom interaction and animation). (Large preview) The way we had them in our project was just a collection of all the possible list items, i.e. with a large icon, small icon, subtitle, toggle, trailing text, and so on. They were all separately defined with their backgrounds and named numerically (starting from list item 1 to 8).
    So, we had no semantics in place defining our list items in a more meaningful way, as well as no optimized way of maintaining updates to the defined background styling and layout. What started happening was that new inconsistent states started appearing in some files:
    A choice-list item would have a tinted background in one design file (indicating selection), but just a checkmark on the right side in another; The paddings would be different across design files. Reasonably, the backgrounds of list items should stay consistent throughout all screens and be flexible to fit different content inside. So, how do we enforce that through a design system across all teams?
    There are a couple of ways, so let’s get a bit technical here. One approach is Variation.
    More after jump! Continue reading below ↓
    Meet Smashing Email Newsletter with useful tips on front-end, design & UX. Subscribe and get “Smart Interface Design Checklists” — a free PDF deck with 150+ questions to ask yourself when designing and building almost anything.
    Once a week. Useful tips on front-end & UX. Trusted by 190.000 friendly folks.

    First, define all list items that exist in the interface and identify their variants:
    (Large preview) Then, add all the defined list items states (secondary, accent, and so on) as variants per each list item. This will double each original component/variant per state and you’ll be able to account for all possible states that a list item might have.
    Example: One-sided List item has 3 original variants. If they have 2 additional states, we add them to each variant — 9 variants in total. (Large preview) This is how we first thought to approach the problem, but you can clearly see the issues with it: bloating the number of variants that need to be maintained where you have an unnecessary repetition of background and other elements.
    Now, imagine this. Let’s try changing the following:
    Secondary background (grey) to have a different color/corner radius; Or font style of the Title; Or spacing between Title and Subtitle; Or image size. You would have to go to every variant (32 in total in our case) and update each one manually in order to align these changes. 😨 This becomes a quite inefficient way to maintain these components, lightly speaking.
    Let’s then move on to a better approach: Composition.
    We’ll start with composing a container 🔴. Here we define the background styling and padding (can also include corner radius, shadows, and so on), and nest the instance of a Generic content placeholder 🔷 that will allow us to swap it with any other component.
    Container basically defines the background look and a placeholder area for any content to be hosted in. (Large preview) Our list items will have a few Enhancing elements 🔶 in them, such as s checkmark, navigation chevron, switch or button. Since they might apply to any defined background and to all generic content, we would need to compose another container for those elements.
    The container defines the element and its location with paddings; Same placeholder instance is nested inside again for content. Notice how these don’t have neither background color nor padding, these come from what they’ll be nested in. (Large preview) Next, let’s define the list items content ⚫️ (e.g. Multiline list item) that your interface has without background (only text and images):
    This one can be easily split into multiple components with less variants and nothing would change in our approach. (Large preview) Now, in order for us to assemble the needed list item, we need to think from the ground up (Z-axis first):
    Take the container 🔴 and select a needed state; Swap the placeholder 🔷 inside with the list item content ⚫️ you defined >> ☑️ Or if you have an enhancing element in a list item (like a switch, button, and so on): Swap the placeholder 🔷 with the element container 🔶, Then swap inside the placeholder 🔷 with a list item content ⚫️ >> ☑️. In the end, it is not only that we align design and development approaches by using composition, but in addition, it would be the most optimized way to build such components in design and code for consistency and maintainability. Now our design component has become almost like a pseudo code for developers.
    Talking about code…
    Let’s see how things look like in development. Here is some code and a rendered iOS preview for a few SwiftUI composition components:
    (Large preview) Some of these combinations are silly, but they do showcase the power of the approach. Notice how the switch (toggle) component is actually native/system for iOS and how it plugs into our composition with our custom components completely seamlessly, both in code and visually.
    This is because modern front-end frameworks such as SwiftU for iOS and Jetpack Compose for Android (no kidding it literally has “Compose” in its name 😉) rely on the same composition approach that we are describing — and what Figma now allows, too.
    Why Even Build Composable Components?
    Well, there are at least five good reasons why we’d want to build composable components:
    Consistency Error-Proof Design Absolute Flexibility Reduces Variants Better Teamwork 1. Consistency
    By putting all the background patterns in one place to be reused, we ensure that those background states are represented consistently across the features and teams, as a single source of truth. When these states are not really defined, you get visually different designs for these states across the screens — the more designers on the team, the more inconsistencies there will be.
    2. Error-Proof Design
    We completely eliminate an opportunity for a designer to misuse the states, mistaken the paddings, introduce something that already exists, etc. Unless you detach the instance…
    3. Absolute Flexibility
    Do you need to nest some other component inside your list item? Voilà! We don’t need to limit a list item to host specific content only. You can put any content inside. Let’s see how we can put the contents that we used for list items into a card container absolutely seamlessly.
    Usually, consistency is achieved at the expense of flexibility, but not in this case.
    4. Reduces Variants
    There is no longer a need to include list item states in every list item component. You have it defined in one place and reused as a container, same for the elements that list item can host, like switches, buttons, icons, and so on. Helps for maintainability and scalability of the components.
    (Large preview) Now scale this to a whole design system. You can see why I consider the variation approach unmaintainable.
    5. Brings The Teams Together
    Building components in design the same as in code removes the friction in documentation and specs, as well as allows sharing the same process and language between designers and developers.
    And guess what, this can be applied to many other components that share a similar composable structure. The most obvious components that we put as candidates for this upgrade are:
    cards: reusing backgrounds like active, highlighted, disabled, custom bottom sheets: reusing container and putting any content inside. (Large preview) When To Use It And When Not?
    You can probably already see that this structure optimizes consistent reuse and maintainability the most, but don’t go overboard with it. Here is a general rule of when you can go with composition:
    This rule leaves a lot of room for interpretation because slices can be seen differently by different people, but that’s fine because it demonstrates the flexibility and power of this approach where you have multiple ways to achieve your goal.
    Not only you want to reuse the generic content because it contains quite a bit of logic (icon colors, IBAN formatting), but also there are other possibilities of generic content for the Radio group and Choice list components. (Large preview) Background here looks reusable but actually reacts to the input state, which creates coupling between the text field and the background, meaning they are not agnostic of each other. (Large preview) Managing The Power
    If you decide to embrace the composable structure in your design system, I would recommend splitting your components into layers of hierarchy in Figma:
    These compose on the Z-axis and only define: styling: background color, corner radius, shadow, and so on. general layout: paddings, the position of the content. Enhancing-elements containers
    Containers that might include additional elements like chevron, switch, button, icon, etc. Content
    Components that are actual generic content implementations. They are the final node of the composition tree. (Large preview) You can see how you now have the power to compose anything. And just like lego pieces, your components are capable of infinite combinations that might actually be silly in practice, like in the example below.
    (Large preview) So, you might decide that you want to limit the usage combinations of your composable components. As in the example of combining checkmark and switch, we clearly don’t want to nest both of these elements in one list item, so what we can do instead is to couple enhancing-container with applicable container-backgrounds as a new component.
    In the Navigation list item, you couple container-background (with 2 variants, default and pressed) with enhancing-container (chevron). That way, you define all of the possible variations of this component. Also, even though you can still put any content inside, you cannot use another state (like highlighted) or add other elements like toggles to it.
    (Large preview) Final Notes
    So far, my team and I have adopted composable components for cards and list items for both mobile platforms, iOS and Android — and we love it.
    Developers and designers quickly grew very fond of this approach. Although the component building is becoming more complex, everyone sees that it makes our design system more elaborate and elegant.
    Generally, if you leave it to live only in a design system without syncing it in code, it will already be beneficial enough. You do need to put effort into building it, but then it pays off well with less maintenance — just as much as it does for design systems.
    This article was written in collaboration with my iOS developer husband. Thank you, Petar Kanev.
    (vf, yk, il)

    An advanced guide to setting colors in CSS

    blog.logrocket.com - Color is one of the first things you learn to apply as a web developer when learning CSS, but once you learn the basics, how often do you revisit it?
    With advanced techniques, applying colors with CSS can provide more functionality and depth to projects. In this post, we’ll explore all the common and more advanced ways of applying colors with CSS including some of the exciting methods that will hopefully be widely adopted within CSS soon.
    Basic color syntax in CSS
    We can’t talk about applying colors in CSS without covering the basics that everyone starts their journey in CSS with: keywords and HEX.
    Often the first way new developers learn to apply colors with CSS is using the predefined list of color keywords in CSS. These are a series of words that equate to color that apply to elements:
    .SomeElement { color: blue; background-color: black; } There’s a fair amount of predefined words you can use. If you’re interested in seeing them, you can check out this section on the MDN page on color.
    HEX values
    At a certain point in your CSS journey, it’s natural for a developer to outgrow the predefined words available in CSS and need something more powerful. Often, the next step on the CSS color journey is understanding hexadecimal values, also known as HEX values.
    HEX values are great because they are supported by every major browser and offer more flexibility and customizability than what’s offered by the standalone keywords.
    However, the one major downside to HEX values is that they are not easily readable or understandable. For example, could you guess what color #ff8c00 is? That’s right, it’s a bright orange color…
    Other than being difficult to understand, they can also be hard to work with. Without using a color picker or a guide of some sort, making HEX values darker or lighter is difficult without fully comprehending how the HEX numerical system works.
    And, even if you do have those aids, it’s not as simple or intuitive as just adjusting a single parameter.
    Here are some other examples of colors in HEX:
    .SomeElement { color: #ffffff; /* White */ background-color:#ff8c00; /* Orange-y color from before */ } Understanding RGB and HSL
    Now that we’ve covered the basics of defining color on the web, let’s take a look at two more advanced but more flexible and useable alternatives: RGB and HSL.
    Red, green, and blue, or RGB, gives us access to the same colors as HEX but in a much more readable and user-friendly format. We define the color by using an rgb() function in CSS, which we will see in a moment when we look at some examples.
    By using the three parameters passed to the function, we can create colors; however, note that the colors are additive, meaning the more red, green, and blue we add, the lighter the overall color will be.
    If we set all three values as high as they go (to 255), then we will end up with white; if we set all three to 0, then we get black:
    background-color: rgb(255,255,255); /* White */ Working with RGB is a lot more logical than HEX while still providing the same colorspace to work within. Here are some examples showing HEX followed by the same RGB value to illustrate this:
    /* Dark Red */ #a60000; rgb(166,0,0); /* Light Blue */ #046cdb rgb(4, 108, 219);
    Although it may not be immediately clear what the RGB yields, it’s a lot more readable than HEX. RGB is a lot better than HEX when it comes to making small changes to a color.
    For example, if you wanted to add more red to a HEX color, would you know what to change and what to change it to? But, with RGB, you can just increment the red value by one or two to achieve this.
    Although RGB is nice and a step in the right direction from HEX, it still has its pitfalls when it comes to the question, “Can you make this 30% darker for me?”
    Taking one of the RGB values from above, try to make one of those colors 30 percent darker without an aid. While you’ll probably do it faster than you would with HEX, it’s still far from ideal because RGB values don’t directly map to the lightness of the value.
    To make the color darker, you would need to experiment with all three values to achieve the desired outcome. But, this is where the wonderful hue, saturation, and lightness (HSL) comes in.
    As a developer, HSL is a dream because it provides a more logical method for handling colors and manipulating them because it uses parameters to adjust the color properties.
    However, there is a bit of a steeper learning curve when using HSL because, unlike RGB where we deal with colors we already know (red, blue, and green), HSL requires us to learn some color science like the hue and saturation of colors.
    Let’s now take a look at defining colors in HSL with its three main parameters to get a better understanding of how this color scheme works.
    The hue parameter represents the position on the color wheel, ranging from 0 to 360deg The saturation parameter represents how saturated a color is, ranging from 0 to 100% The lightness parameter represents how light a color is, ranging from 0 to 100% Note that if you set the lightness to 0, regardless of the other parameters, you get black, and if you set it to 100%, you get white.
    Below is a diagram that shows the HSL color space and how you can manipulate it using the three parameters outlined above.

    Here are the same colors that we defined previously with HEX and RGB, but now with their corresponding HSL values:
    /* Dark Red */ #a60000; rgb(166,0,0); hsl(0°, 100%, 33%); /* Light Blue */ #046cdb rgb(4, 108, 219); hsl(211°, 96%, 44%);
    Once you understand the color science behind HSL and can manipulate its three properties, using HSL becomes a lot more flexible than RGB.
    With HSL you can easily change the lightness of the color without online tools assistance. For example, imagine you have a button on a form that has a disabled state. With HSL, you can make the disabled state darker by simply decreasing the lightness parameter to achieve the effect.
    On the other hand, with RGB, you would need to either need to experiment with the values or use an online tool to help, neither being an efficient process.
    Using the alpha channel with HSL and RGB
    A final note to mention in regards to HSL and RGB is that you can now pass an optional fourth parameter to control the alpha channel; in layman’s terms, we’re controlling the transparency of the color. Here are some examples using that:
    hsl(211° 96% 44% / .5); /* 50% opacity */ hsl(0° 100% 33% / .25); /* 25% opacity */ rgb(166 0 0 / 0.7); /* 70% opacity */ rgb(4 108 219 / 0.3); /* 30% opacity */ The keen-eyed among you may also notice something different about the above syntax: that’s right, no commas. Thanks to CSS Color Module Level 4, you can now use spaces to separate values and pass an optional fourth parameter preceded with a / to control the alpha channel.
    Using advanced color spaces
    With the most common methods of defining colors in CSS covered, let’s take a look at some of the more experimental ways of defining color that is quite possibly the future of defining color in CSS.
    These are currently considered experimental because of their limited browser support at the time of writing this post.
    Hue, whiteness, and blackness (HWB) is similar to HSL. The hue parameter can be set anywhere from 0 to 360deg, but, unlike HSL, we can control the saturation and the lightness by controlling the amount of white or black added into the original hue we selected.
    Try mixing HWB colors through the CodePen below. Note that HWB can only be seen in the Safari browser or the Firefox Developer browser:
    See the Pen
    HWB Color Playground by Coner Murphy (@conermurphy)
    on CodePen.

    But, why use HWB instead of something like HSL, which arguably provides more granular controls because it allows you to adjust the saturation of the color? Well, the reason HWB was designed was to be more intuitive for humans to use and faster to compute than other methods.
    With HWB, if you want a lighter color, add white; if you want a darker color, add black. It doesn’t get simpler than that.
    Here are our examples from before but with HWB added:
    /* Dark Red */ #a60000; rgb(166 0 0); hsl(0 100% 33%); hwb(0 0% 35%); /* Light Blue */ #046cdb rgb(4 108 219); hsl(211 96% 44%); hwb(211 2% 14%);
    Both LAB and LCH (which we’ll come to in a moment), are defined as device-independent colors, meaning that no matter where you apply the color coordinates, you get the same color output.
    If you took a LAB value and applied it across different mediums, from a website, to digital art, to something physically printed, the color would remain the same. This uniformity is one of the key benefits of the LAB and LCH color spaces.
    To use LAB, there are three parameters you need to pass in: L, A, and B.
    The lightness (L) parameter, similar to others discussed in this article, accepts a percentage between 0 and 100 with 0% as black and 100% as white.
    However, different from the other methods we’ve covered, LAB uses the a-axis (A) and b-axis (B) parameters to define color.
    The a parameter represents how far along the a-axis in the LAB colorspace you want to go between green and red. Similarly, the b parameter represents how far along the b-axis in the LAB colorspace you want to go between blue and yellow.
    Conceptually, LAB is one of the harder color spaces to grasp since it moves through space rather than linear numbers. So, here is a visual representation of the colorspace to show how the values work together to create a color.

    Also, here is another pen to show the LAB colorspace in use, but can only be seen in a Safari browser.
    See the Pen
    LAB Color Playground by Coner Murphy (@conermurphy)
    on CodePen.

    Here are our examples from before but with LAB added:
    /* Dark Red */ #a60000; rgb(166 0 0); hsl(0 100% 33%); hwb(0 0% 35%); lab(34% 58 48); /* Light Blue */ #046cdb rgb(4 108 219); hsl(211 96% 44%); hwb(211 2% 14%); lab(46% 17 -63); If you are using Safari, you can view the LAB color rendered in the CodePen below.
    See the Pen
    CSS Colour Values by Coner Murphy (@conermurphy)
    on CodePen.

    The final colorspace and method for defining color in CSS we will look at is lightness, chroma, and hue (LCH).
    Once again, similar to the other color functions that use a lightness value, the lightness parameter accepts a percentage between 0 and 100, with 0% as black and 100% as white.
    However, LCH introduces chroma, which indicates the amount of color we want to use; conceptually it is similar to saturation in HSL, but chroma is theoretically limitless.
    Before getting too excited, however, while chroma is theoretically limitless, there is, unfortunately, a limit on the colors our browsers and monitors can display. So, beyond a certain point (around 230), the value you choose is unlikely to make any noticeable difference to the user.
    And finally, as with HSL, the hue can be expressed from 0 to 360 with the value selected driven from the position on the color wheel.
    Why do we need advanced color spaces?
    At this point, you may be rightfully asking why do we need color spaces in CSS like LAB and LCH; what’s wrong with HSL? With the introduction of LAB and LCH, developers can now access the entire spectrum of colors humans can perceive, while HSL (or the others) cannot.
    The flipside to this however is the issues with syntax and support. The syntax for LAB and LCH are less intuitive and currently have very little browser support (Safari only), so you need to give a fallback value in another more widely supported method for the time being.
    But, once the syntax has more support in other browsers, both LAB and LCH are powerful options for specifying colors in CSS.
    As with LAB, LCH is also another tricky color space to grasp, so here is another diagram showing the LCH color space and how the parameters influence the color we get.

    Using the alpha channel in HWB, LAB, and LCH
    Finally, as with the other color function in CSS, hwb(), lab(), and lch() can take a fourth optional parameter to control the alpha channel:
    hwb(0 0% 35% / .5); lab(34% 58 48 / .24); lch(34% 75 39 / .9); Here are our examples from before but with LCH added:
    /* Dark Red */ #a60000; rgb(166 0 0); hsl(0 100% 33%); hwb(0 0% 35%); lab(34% 58 48); lch(34% 75 39); /* Light Blue */ #046cdb rgb(4 108 219); hsl(211 96% 44%); hwb(211 2% 14%); lab(46% 17 -63); lch(46% 65 285); If you are using Safari, you can view the LCH color rendered in the CodePen below.
    See the Pen
    CSS Colour Values by Coner Murphy (@conermurphy)
    on CodePen.

    Browser support
    The four methods for defining colors we looked at first (keywords, HEX, RGB, and HSL) are all widely supported across the major browsers, so you don’t need to worry about using them and wondering if they will work or not.
    But, the methods for defining colors we looked at in the latter half of the article (HWB, LAB, and LCH) are still in the early days of support, so if you use them, define a fallback value in one of the four mentioned above to be safe.
    If you’re curious to check out the browser support for the individual methods below are the links to each page on caniuse:
    HEX RGB HSL HWB LAB LCH Conclusion
    So, that’s it! In this article, we covered every way you can set colors in CSS including some of the new and exciting methods yet to become widely supported in CSS as well as why and how to use each method for your next project.
    I hope you found this article on setting colors in CSS helpful. If you did, please consider following me over on Twitter, where I post helpful and actionable tips and content on the JavaScript ecosystem and web development as a whole. Or if Twitter isn’t your thing, visit my blog for more of my content.
    The post An advanced guide to setting colors in CSS appeared first on LogRocket Blog.

    Design System Accessibility: Check What You Need to Know

    uxpin.com - An accessible design system makes it easier for designers to create products that don’t discriminate users with disabilities. Design a system that is accessible in the first place, test it with available tools, and audit it from time to time to ensure it fits the standards. Let’s see how. Design system accessibility is the first The post Design System Accessibility: Check What You Need to Know appeared first on Studio by UXPin.

    Using the Width Tool in Illustrator

    creativepro.com - Learn how to make your strokes taper, bulge, and undulate with this unique tool. The post Using the Width Tool in Illustrator first appeared on CreativePro Network.

    How to Create a Mysterious Forest Scene with Adobe Photoshop

    photoshoptutorials.ws - In this tutorial, I'll show you how to create a mysterious forest scene. We will start by adding a forest and constructing the staircase. Later, we will add the pagoda, the entrance, and the bird. To change the color and lighting of the entire scene, we will apply several adjustment layers. Next, we will import […]

    The 8 Best Marketing Frameworks You Need to Know

    blog.hubspot.com - Marketing is a unique animal. With a combination of creativity, analytical thinking, taking data into consideration, and project management, a modern-day marketer must possess a great number of skills and have quite a few tools at their disposal.
    Sure, you can delegate some of the work, but it also means you’re responsible for getting multiple people on the same page…some of which work in different states.
    Rather than allowing your frustration to build, you can utilize tools that will make your job easier. More specifically, marketing frameworks. In this piece, we’ll discuss what a marketing strategy framework is, the benefits of utilizing one, the best marketing models out there, and how to decide which is best for you.

    You can think of it like this: you wouldn’t dream of approaching your marketing with a “throw spaghetti at the wall and see what sticks” attitude because it would be a disaster for your organization.
    Instead, you'll likely spend days, weeks, and maybe even months identifying your target audience, where they spend time and determining the perfect way to reach them and communicate the benefits of your product or service in a marketing plan.
    Your marketing strategy framework takes this all a step further and, as mentioned above, ensures your marketing plan is successful because you’ll share content with your audiences at the right time in the most relevant channels that are more likely to drive results.
    The Benefits of a Marketing Framework
    A Marketing Framework does more than just keep you focused on the task at hand. As your company grows and your team grows along with it, you must find a way to communicate with every member of the marketing department, no matter where they work or what tasks they are responsible for.
    Creating a marketing framework is the best way to ensure that everyone knows what they need to do and how they need to do it. Additional benefits of utilizing a marketing framework include:
    Creating a home for templates, guides, tools, and assets that all marketers in your organization will need to access. Establishing and communicating approved verbiage for the organization. Improving marketing which then improves the growth and bottom line of the company. Allows the team to compare different strategies and determine the best route. Clearly communicate who is responsible for what and make it easier to transfer people from one role to another. Save time by limiting “redos” - areas that are often susceptible to errors and therefore must be reworked. In addition, your framework will help you predict your customer’s behavior and the revenue you can expect to see. As a result, it will help your team function more efficiently and produce more effectively.
    The Best Marketing Frameworks
    Marketing has probably been around since prehistoric days when entrepreneurial cavemen designed state-of-the-art spears and tried to sell them to their less “handy” counterparts.
    Okay, that might not be true, but marketing has been a necessary aspect of business for a long time, and, over that time, savvy marketers have designed models and frameworks to make their (and your) job easier. Let’s take a look at some traditional models as well as some newer frameworks.
    Traditional Marketing Models
    1. 7Ps Marketing Mix
    This widely used model considers the stages of business strategy, beginning at conception and taking it to evaluation. The Ps stand for:
    Product: What’s being sold? Prince: How much does it cost? Place: Where will the product be sold? Promotion: How will you communicate with your audience? People: Who is involved in the production, promotion, and distribution? Process: How will you deliver it to the customer? Physical Evidence: How will you prove to customers that your business exists? When you utilize the 7P model, you’ll have the opportunity to analyze and optimize every aspect of your company and your strategy to improve your business.

    Image Source
    2. STP Marketing Model
    The SPT model is a top-down approach that focuses on how a company addresses customers and helps deliver personalized (and relevant) messages to audiences.
    STP stands for segmentation (dividing your audience into different sections), targeting (who will be the most receptive to your product), and positioning (how do you make your product the most appealing to that audience), and has helped many companies shift to utilizing social media to deliver content.

    Image Source
    3. Porter’s Five Forces
    While most marketing frameworks focus on the product itself and the audience, Porter’s Five Forces looks at the outside influences that can affect profitability. These include:
    Supplier Power, how many other suppliers exist, what makes them different, and how much their product costs. Buyer Power, which is the customer’s ability to influence decisions made by the company. Threat of Substitution, which is how your product compares to others on the market. Threat of New Entry, which is any barriers you might experience when entering the market. Competitive Rivalry, which is any other outside forces that affect how your product compares to the competition. This model will help determine just how competitive your business environment is.

    Image Source
    Now, let’s look at some of the newer models to hit the marketing scene. While they may not have been around as long as the more traditional models, they take into account the current marketing climate and often focus on start-ups.
    Modern Marketing Models
    4. Pirate Metrics or “AARRR!”
    No, you don’t have to don an eye patch or adopt a parrot to use this framework. Developed by serial Startup Founder Dave McClure, Pirate Metrics allows you to see how a customer may travel on their buying journey and what areas you need to improve. AARRR stands for:
    Acquisition: Where are prospects finding you? Facebook ads, blog content, a paid search, etc. Activation: What step did a prospect take once they arrived at your website? Depending on the business, this could include signing up for an account, downloading a free giveaway in exchange for their email, filling out a profile, etc. Retention: Once they’ve left your site, do prospects or customers come back? How often? Revenue: How do you earn money from your customers? Consider reviewing metrics such as conversion rates, shopping cart size, and the LTV or customer lifetime value. Referral: When customers are happy, they tell other people, and you end up with more customers. This lowers your CAC or customer acquisition cost because your loyal customers will attract new prospects for you.
    Image Source
    5. Lean Analytics Stages
    Developed by Alistair Croll and Ben Yoskovitz, the Lean Analytics Stage framework combines aspects of many different models and is ideal for improving startup growth. There are five pillars to this model:
    1. Empathy
    During the product development stage, you’ll spend most of your time listening to customers, empathizing with their challenges, and taking in as much feedback as they are willing to provide. Once you have identified a problem you can solve to create your minimum viable product (MVP), you can then move on to the next stage.
    2. Stickiness
    Focus on engagement and retention as you work to create something that yields return customers. When you’ve got an engaged base and a low attrition rate, you can continue to stage three.
    3. Virality
    Before you try to attract customers through heavy advertising spending, focus on your existing customers. As your organic growth rates improve, you can move to stage four.
    4. Revenue
    Without money, you’ll be out of business quickly. Pay attention to your customer acquisition cost metrics to make sure your customers spend more money than they cost to acquire. Once you’ve reached your revenue goals, you can move to the final stage.
    5. Scale
    You’ve got explicit knowledge of your product and your market. Now, it’s time to increase the revenue from your current market and potentially enter into new markets.
    Image Source
    6. The Hook Model
    No, it has nothing to do with the Pirate Metrics we discussed earlier, but it does compliment the stickiness and virality we discussed during Lean Analytics.
    The Hook Model was developed by Nir Eyal, author of Hooked: How to Build Habit-Forming Products. He believes that our most purchased and utilized products achieve that status because they become a part of habitual behaviors. As marketers, we can tap into that by understanding the cycle:
    Trigger: The beginning of the cycle is often an external trigger like a push notification. However, as the cycle continues, negative internal emotions become triggers as we attempt to lessen these negative emotions with an action. Action: The easier you make things to do, the more likely a person will do it. Habit-forming products make taking action painless and straightforward. Variable Reward: The anticipation of reward is a strong motivator. Variability increases anticipation, making prospects and customers more likely to take an action that warrants a reward. Investment: Creating an investment or “buy-in” for your customers makes it more difficult for them to step away from your product or service.
    Image Source
    7. The ICE Score
    Sean Ellis, the Father of Growth Marketing, teaches the ICE score, a simple and quick way to evaluate potential channels for growth.
    Rather than implementing a complex system, Ellis suggests asking three questions:
    1. What will the impact of this move be if it works?
    2. How confident am I that this plan will work?
    3. How much time, money, and effort will be necessary to put this into action?
    Asking yourself and your team these questions is one of the fastest ways to evaluate an idea and determine if you should move forward.
    8. STEPPS
    Developed by Jonah Burger, the author of Contagious: Why Things Catch On, STEPPS is a formula to create contagious content that has people talking and sharing.
    Social Currency: Invite your customers to feel more like insiders. Humans are programmed to care what others think of them. This taps into that need to be seen positively by others and encourages conversation around your product. Triggers: Frequently remind people of your product utilizing triggers and they’ll talk about it more. Emotion: Highly emotional content is more likely to go viral. Taking that one step further, high arousal emotions like anger will be shared more often than low arousal emotions like sadness. Public: When you make something public, you encourage people to talk about it and share it. Practical Value: Provide value in the form of useful content, and people will be more likely to share it. Stories: We are biologically wired to see the world through narrative. Creative stories that are easy to relate to and easy to remember, and they’ll also be easy to share. Image Source
    Selecting the Best Marketing Framework for Your Business
    While there are a variety of models available to you, they are not all created equal. There are a number of factors that will influence which framework is best for you and your organization.
    In order to determine which framework to choose, you’ll want to examine the following aspects of your business:
    What are the top priorities of the business? What is the role of marketing within the organization? How is success defined and measured within the marketing? What is the marketing department capable of, and what improvements would you like to make? Where would you like to see the most impact due to marketing efforts and what’s the easiest way to ensure that impact? Over To You
    Marketing is a difficult role no matter your product or service. You are in essence responsible for telling the world that your company has the cure to what ails them. Without you, the most amazing product or service ever created will never reach the hands of the people who need it.
    As challenging as it is, there are tools you can utilize to take some of the difficulty out of your responsibilities. A marketing framework will help you stay the course, keep your team in the know and on the right path, and will ultimately help you better achieve your desired goals. Create a marketing framework today and make tomorrow easier.


    7 Ways to Optimize Your Facebook Strategy for Leads and Conversions

    socialmediaexaminer.com - Want to use your company’s Facebook page for more than just building awareness? Wondering how to turn your followers into actual customers? In this article, you’ll discover seven tricks to optimize your Facebook strategy to drive revenue across both organic and paid campaigns. #1: Restrict Each Organic and Paid Post to 1 Goal and 1 […]
    The post 7 Ways to Optimize Your Facebook Strategy for Leads and Conversions appeared first on Social Media Examiner | Social Media Marketing.

    Discord mulipurpose bot

    github.com - A Multipurpose bot with many Commands made using Pycord

    If you want to contribute, join the Support server and raise a pull request
    Categories 📑
    ✅ Tic tac toe with buttons ✅ Music ✅ Moderation ✅ Info Coming soon! giveaway ✅ fun ✅ Paginator ✅ Meme Coming soon! search

    What's New in Confluence Cloud – January 2022 Edition

    community.atlassian.com - Happy January, Community!
    Can you believe it's already 2022?! We can't 😆 ! Luckily, your team can kick off the new year strong with a brand new Confluence Home, best practices for project collaboration, and other exciting enhancements. Read on for the latest updates.
    Welcome to the new Confluence Home 🏠
    Catch up on relevant activity, quickly jump back into to your work, and discover what’s happening around you with the new and improved Confluence home. See it in action.

    Relevant help articles in just one click 👩‍💻
    Quickly get your questions answered with our new In Product Help component! Click on the "?" help menu to try it out. Learn more.
    7 shiny, new Confluence features 🌟
    Enter a new era of interactive, simultaneous collaboration. Confluence now lets your team draft, polish, and present, all in one place – even when your team isn’t. Read all about it.

    5 steps to master project collaboration 📝
    Is your team planning a campaign, launching a product, or innovating for a brighter tomorrow? Check out our new guide for best practices and easy-to-follow visuals. See the guide.

    Customize your work with Confluence apps 📱
    Did you know that the Atlassian marketplace has over 1,000 Confluence apps? It’s never been easier to customize your pages to fit your team’s needs. Show me.

    Thanks for reading! As always, please share your feedback in the comments and subscribe to the whats-new RSS feed to stay up to date on the latest.

    The Case Against UX Testing

    webdesignerdepot.com - Picture a dark office, blinds drawn. Picture a UX designer smoking a cigar. See the light filtered through the smoke whipped to fog by a spinning ceiling fan. Watch as the UX designer sits at a desk and considers the website. The UX designer has devised a series of tests to determine if a green […] The post The Case Against UX Testing first appeared on Webdesigner Depot.

    BigPicture modules explained. A “sequence” of modules matches your workflow

    bigpicture.one - BigPicture has nine distinctive modules plus the Overview “umbrella” module on top of them. Users can disable/enable individual modules on a per-initiative (e.g. project) basis. Let’s have a closer look at all 10 modules. Good news! Both BigPicture and BigPicture Enterprise boast the very same set of ten project portfolio management modules. Both apps let you turn on and off modules for each initiative (project) separately. For example, you are free to enable just Scope, Gantt, Resources, Risks, and Calendar modules for a classic project, and hide the rest. For an agile team – on the other hand – you could have Roadmap, Board, Teams, and Reports modules turned on, while the others might be off for simplicity. A hybrid project could have a selection or even all of the modules active. Take a look at figure 2. Can you notice how the Classic Project has a set of modules, unlike the one of the Less Requirement Area? This is how we got to the edge BigPicture Enterprise has: it is out-of-the-box compatible with SAFe, LeSS, hybrid management, etc. BigPicture Enterprise arrives with preset SAFe ARTs, LeSS Requirement Areas, Hybrid Projects, and others. For instance, the SAFe ART “template” has […]
    Artykuł BigPicture modules explained. A “sequence” of modules matches your workflow pochodzi z serwisu BigPicture.one.

    Why is Cognitive Diversity important? How to promote it?

    scrum.org - Did you join the meeting to find out the solutions, but no one has a new idea? Your Scrum Team has NO innovative ideas to solve the customer problems in many Sprints? Nowadays, innovations, new values are the key to success. Customers always want more of what they had and look for the news overate ideas. Therefore, the organization can't continue bringing new value to customers, can't be led, and gives the space for those who have the innovation to lead the market.
    We can't have innovation just by saying. The innovations depend on many factors, must be nurtured, and have the know-how to nurture. In recent years and until now, my work associated with supporting and building high-performance innovation teams by applying Scrum. I found that three main factors influence how to make a high-performance team. With these three main elements, the team can create innovation by enabling these individuals to collaborate and perform effectively.
    Cognitive diversity Cultural intelligence (CQ) Psychological safety  
    Cognitive diversity: The key to innovation is diversification within the team.
    Cognitive diversity means people with a different mindset and skill set. They have other ways to approach the problems. It means you get more perspectives on the table.
    Individuals with the same opinion and knowledge will often have the same solution; they are good to solve problems that already have an answer or for less complex tasks that don't require a lot of creativity. Group of like-mind can quickly build on their experience and ability in their area of knowledge to solve problems, process their work in groups or individually (as this group will often be roughly equally skilled for a given Specific issue). So, if a problem you already know how to solve, this team will execute and solve it quickly according to specific instructions or plans.
    But when you need a groundbreaking idea for a problem, no one knows the answer or knows how to do it? To deal with a complex issue where best practices no longer exist, you will need individuals with different views, different skills/knowledge. The answer is no longer within the existing experience of the group or an individual in the group. It requires a combination of individuals with different perspectives and skills. With different thinking, these individuals will create a more holistic view, more different initiatives together. Because they have many other areas of knowledge, perspectives, and experiences, there will be analysis, separation, and a broader and more diverse view of a problem they need to solve. From there, they will have more opportunities to create innovation than a group of like-minded and same-knowledgeable people.
    In short, cognitive diversity is a source of innovation. But cognitive diversity can't be alone; it needs cultural intelligence and psychological safety support.
    Cultural intelligence (CQ)
    Intelligence today is divided into many different kinds; Christopher Earley and Soon Ang introduced the concept of "Cultural Intelligence" in the 2003 book of the same name.
    If you walk into a new company, you will feel overwhelmed. Simply because you are a rookie to the culture of the new workplace, and it will take a few weeks for you to get used to it. The difference between people with high CQ will be easy to see: They are easier to accept differences, more confident, take less time to integrate. People with high CQ are more likely to link each other's differences to form the group's strengths than people with lower CQ. In other words, the group of high CQ has high inclusion. 
    To build a cognitively diverse team, you'll need individuals who link group differences. In other words, you will need individuals with high CQ.
    Psychological safety
    An individual in the team will feel ashamed if their opinion is laughed at or underestimated. It may lead to the individual not wanting to share the opinion anymore. To me, these groups desperately need a safe and fertile ground where openness and mutual respect can be nurtured, thereby building trust among members. They will freely contribute, share views, collaborate to solve problems and create innovative products. Having a team that is always psychologically comfortable, sharing thoughts without feeling judged will support more diverse ideas.
    Do you want to share new ideas if the organization penalizes terrible ideas? What if an organization calls for creativity but doesn't accept mistakes? You also will not dare to try or experience new things because you fear that your mistakes will be reprimanded by the other. But, in an environment that seeks creativity, experience and mistakes are essential to learning from mistakes and creating innovation. In the era of V.U.C.A, learning is necessary than knowing.
    Organizations and leaders should understand that new ideas always require breakthroughs, risks, and experimentation; learning experiences help the team inspect and adapt to innovate. So, having the right mindset about the importance of mistakes, of learning culture is essential (Read more: How Does Scrum Help you Realize the Value of failure?), and having the right way to create a safe space for the team to be self-managed to learn, to grow, and to innovate to reach to the shared goal is very important.
    If we ignore this last angle, no matter how much a group of individuals with cognitive diversity, high CQ, and how much they want to create innovation, it will fall apart in the blink of an eye when faced with problems, scare, unsafe. Therefore, most of my work to enable the potential of people and team is to help them understand and grow the value of Cognitive Diversity, the CQ, and support them to apply the Scrum Framework to enable the learning culture and safe environment to achieve the shared goal.
    If you want to read this blog in Vietnamese, click here.

    What ITSM Help Do You Need in 2022?

    itsm.tools - As we kick off 2022 it's time for you - our readers - to let us know which topics you need the most help with in the year ahead, by completing our quick one-question poll. Vote here.

    Using Smart Objects in Photoshop

    creativepro.com - Learn how using Smart Objects is the key to working nondestructively in Photoshop. The post Using Smart Objects in Photoshop first appeared on CreativePro Network.

    How to Protect Your Phone from Pegasus and Other APTs

    darkreading.com - Amnesty International reports that Pegasus, the "legal surveillance software" from Israeli company NSO Group which has been used to surveil human rights activists, journalists, and lawyers around the world, has been found on 37 devices belonging to 35 journalists in El Salvador as late as last November. Over the past few months, I received a lot of questions from concerned users worldwide about how to protect their mobile devices from Pegasus and other similar tools and malware. First, let me warn you that no list of defense techniques can ever be exhaustive. Additionally, as attackers change their modus operandi, defense techniques need to adapt. We should start by saying that Pegasus is a toolkit sold to nation-states at relatively high prices. The cost of a full deployment may easily reach millions of dollars. Similarly, other advanced persistent threat (APT) mobile malware may be deployed through zero-click zero-day exploits. These are also extremely expensive — as an example, Zerodium, an exploit brokerage firm, pays up to $2.5 million USD for an Android zero-click infection chain with persistence. From the start, we come to an important conclusion — nation-state sponsored cyberespionage is a vastly resource-intensive endeavor. When a threat actor can afford to spend millions, tens of millions, or even hundreds of millions of dollars on their offensive programs, it is very unlikely that a target will be able to avoid getting infected. To put it bluntly: It’s not a question of whether you get infected, it’s just a matter of time and resources before you get infected. Now for the good news — exploit development and offensive cyberwarfare are often more of an art than an exact science. Exploits need to be tuned for specific OS versions and hardware, and they can be easily thwarted by new OSes, new mitigation techniques, or even small random events. With that in mind, avoiding infection also comes down to making things more expensive and difficult for the attackers. Although we may not always be able to prevent the successful exploitation and infection of our mobile device, we can try to make it as hard as possible for the attackers. How do we do this in practice? Here’s a simple checklist: On Apple iOS Devices Reboot daily. According to research from Amnesty and CitizenLab, the Pegasus infection chain often relies on zero-click zero days with no persistence, so regular reboot helps clean the device. If the device is rebooted daily, the attackers will have to re-infect it over and over again. Over time, this increases the chances of detection; a crash or artifacts could be logged that give away the nature of the stealthy infection. This is not just theory, it’s practice — we analyzed a case in which a mobile device was targeted through a zero-click exploit (likely FORCEDENTRY). The device owner rebooted their device regularly and did so in the 24 hours following the attack. The attackers tried to target them a few more times but eventually gave up after getting kicked a few times through reboots. Disable iMessage. iMessage is built into iOS and is enabled by default, making it an attractive exploitation vector. Because it’s enabled by default, it is a top delivery mechanism for zero-click chains. For many years, iMessage exploits were in high demand, with top payouts at exploit brokerage companies. "During the last few months, we have observed an increase in the number of iOS exploits, mostly Safari and iMessage chains, being developed and sold by researchers from all around the world. The zero-day market is so flooded by iOS exploits that we've recently started refusing some (of) them," Zerodium's founder Chaouki Bekrar wrote back in 2019 to Wired. We realize this may be very difficult for some (more later), but if Pegasus and other high-end APT mobile malware is in your threat model, this is a tradeoff worth taking. Disable Facetime. Same as above. Keep the mobile device up to date. Install the latest iOS patches as soon as they come out. Not all attackers can afford zero-click zero days; many of the iOS exploit kits we are seeing target already patched vulnerabilities. Nevertheless, many people run older phones and postpone updates for various reasons. If you want to be ahead of (some) nation-state hackers, update as soon as possible and teach yourself not to need emojis to install the patches. Don't ever click on links received via SMS messages. This is simple advice, yet effective. To save the cost of zero-click chains, many hackers rely on one-click exploits. These arrive in the form of a message — sometimes by SMS, but also via other messengers or even email. If you receive an interesting SMS (or any other message) with a link, open it on a desktop computer, preferably using TOR Browser or a secure non-persistent OS such as Tails. Browse the Internet with an alternate browser such as Firefox Focus. Despite the fact that all browsers on iOS pretty much use the same WebKit rendering engine, some exploits do not work well (see LightRighter / TwoSailJunk) on some alternate browsers. Source: Costin Raiu, Kaspersky GReAT User agent strings on iOS from Chrome: Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/96.0.4664.53 Mobile/15E148 Safari/604.1 User agent strings on iOS from Firefox Focus: Mozilla/5.0 (iPhone; CPU iPhone OS 15_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) FxiOS/39 Mobile/15E148 Version/15.0 Always use a VPN that masks your traffic. Some exploits are delivered through GSM operator MitM attacks, when browsing HTTP sites or by DNS hijack. Using a VPN to mask the traffic makes it difficult for your GSM operator to target you directly over the Internet. It also complicates the targeting process if the attackers have control over your data stream, such as while in roaming. Do note that not all VPNs are the same, and not every VPN is fine to use. Without favoring any specific VPN, here’s a few things to consider when purchasing a VPN subscription:“Purchasing” means just that — no “free” VPNsLook for services that accept payment with cryptocurrenciesLook for services that do not require you to provide any registration infoTry to avoid VPN apps — instead, use open source tools such as WireGuard and OpenVPN and VPN profilesAvoid new VPN services and look for established services that have been around for some time Install a security application that checks and warns if the device is jailbroken. Frustrated from getting kicked over and over, the attackers will eventually deploy a persistence mechanism and jailbreak your device in the process. This is where the chance of catching them increases tenfold, and we can take advantage of the fact that the device is jailbroken. Make iTunes backups once per month. This allows you to diagnose and find infections later, through the use of the wonderful MVT package from Amnesty. Trigger sysdiags often and save them to external backups. Forensics artifacts can help you determine at a later time if you have been targeted. Triggering a sysdiag depends on the phone model — for instance, on some iPhones, you do this by pressing VOL Up + Down + Power at the same time. You may need to play with this a couple of times until the phone buzzes. Once the sysdiag is created, it will appear in diagnostics: Source: Costin Raiu, Kaspersky GReAT On Android Devices Reboot daily. Persistence on latest Android versions is difficult; many APTs and exploit sellers avoid any persistence whatsoever! Keep your phone up to date. Install all the latest patches. Don't ever click on links received in SMS messages. Browse the internet with an alternate browser. Again, try using Firefox Focus instead of Chrome. Always use a VPN that masks your traffic. Some exploits are delivered through GSM operator MitM attacks, when browsing HTTP sites or by DNS hijack. Install a security suite that scans for malware and checks and warns if the device is jailbroken. At a more sophisticated level, always check your network traffic using live IOCs. A good setup might include a Wireguard always-on VPN to a server under your control that uses pi-hole to filter out bad stuff and logs all the traffic for further inspection. Bro, This Makes No Sense! Life Without iMessage Is Green and Emoji-less. Source: Costin Raiu, Kaspersky GReAT Ah yes, I hear you — been there myself. Talking to my friend Ryan Naraine yesterday, he said, “iMessage and FaceTime — these are the reasons why people use iPhones!” and for sure, he’s right. I myself have been an iPhone user since 2008, and I think iMessage and FaceTime were two of the greatest things Apple added to this ecosystem. When I realized that these are also some of the most exploited features that let nation-states spy on your phone, I tried to escape the iMessage Hotel California. The hardest thing? Getting the family to stop using it too. Surprising as it may sound, this was one of the most difficult things in this whole security saga. At first, I tried to switch everyone to Telegram. This didn’t go too well. Then, Signal got better, implementing video calls and group calling. In time, more and more friends started moving onto Signal. And this worked well with my family, too. I’m not saying you should do the same. Perhaps you can keep those apps enabled and live happily and malware free — truth be told, Apple greatly improved the security sandbox around iMessage with BlastDoor in iOS 14. Nevertheless, the FORCEDENTRY exploit NSO used to deliver Pegasus bypassed BlastDoor, and of course, no security feature is ever 100% hack-proof. So, what is the best of both worlds, you may ask? Some people, including myself, have multiple iPhones — one where iMessage is disabled, and a “honeypot” iPhone where iMessage is enabled. Both are associated with the same Apple ID and phone number. If someone decides to target me this way, there’s a good chance they will end up in the honeypot phone. Keep in mind that I weighed the costs and benefits for my own situation. I have experienced these kinds of attacks, and I therefore know I could be a target again. To avoid this higher level of risk, I will take more effort and make more sacrifices of features I find both useful and fun. If you are taking actions that might make a nation-state notice you and consider you an enemy, you might want to lock down your phone as much as possible. Otherwise, maybe just set up a honeypot.

    Getting Started in Web 3.0 as a UX Designer

    uxplanet.org - It starts with Web 1.0, where the internet was nothing but a set of links and an exclusive group of people responsible for creating all the content. After you have a decent understanding of the blockchain from a design perspective, you can start to get a feel for the current ecosystem.

    What is the role of a Senior Product Designer?

    bootcamp.uxdesign.cc - As a product designer, you are the lead in the discovery and development of new products. You are the voice of an idea and are a valuable… Continue reading on Bootcamp »

    The big influx: How entry-level designers are reshaping our industry

    uxdesign.cc - The certificate offered by Google is just one of the many new education offerings we’ve seen emerge over the past few years. With the shift to remote work, it’s risky for employers to hire early-career designers since they’re not receiving the standard in-person training and guidance.

    Free React Course for 2022

    freecodecamp.org - React is still one of the most popular JavaScript libraries for building user interfaces. If you are a front-end developer, it is super helpful to know React.
    We just published a brand-new, 12-hour React course on the freeCodeCamp.org YouTube channel. In this course, you will React by building eight real-world projects and solving 140+ coding challenges.
    Bob Ziroll teaches this course. Bob is the Head of Education at Scrimba and his previous React course is one of the most popular React courses on YouTube.
    Here are the projects you will build:
    React facts site
    Your very first React app will be a static site about React! This gives you an intro to the basic principles of the library.
    React facts site.Solo project: Digital business card
    You'll wrap up the first section by completing your first Solo Project - a digital business card.
    Digital business card.AirBnB Experiences clone
    You'll take your React skills to the next level by creating an AirBnB Experiences clone.
    AirBnb Experiences clone.Solo project: Travel journal
    Your second Solo Project is a travel journal.
    Travel journal.Meme generator
    In section 3, Bob guides you through building his classic meme generator, updated with the newest React features.
    Meme generator.Notes app
    You'll get to know even more features of React by building this handy notes app.
    Notes app.Tenzies game
    Your first React game will be the popular dice game, Tenzies.
    Tenzies game.Solo Project: Quizzical
    To finish up the course, you'll build a fun quiz app to consolidate everything you've learned.
    Quizzical.Here are the topics you will learn about in this comprehensive course:
    Local setup Why React? JSX ReactDOM.render() Custom components Organizing components Reusable components JS inside JSX Props Destructuring props Rendering arrays Mapping components Key prop Passing objects as props Spreading objects as props Props vs state useState useState array destructuring Changing state Complex state Refactoring state Passing state as props Local state Unified state Conditional rendering React forms Forms input Forms state object Submitting forms in React Making API calls useEffect Async functions inside useEffect Local storage with React Lazy state initialization Watch the full course below or on the freeCodeCamp.org YouTube channel (12-hour watch).

    Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

    The Best Grit, Grain & Grunge Textures (Free & Premium Packs)

    blog.spoongraphics.co.uk - Gritty, grainy, grungy textures are my favourite type of design asset for roughing up your clean digital artwork to give it an old, worn, and distressed appearance. Because grungy textures are sourced from real dirty surfaces, there’s an infinite supply of resources, each one with its own unique style. In today’s roundup post I collate […] The post The Best Grit, Grain & Grunge Textures (Free & Premium Packs) appeared first on Spoon Graphics.

    Corona management made easy with Jira

    community.atlassian.com - New rules to contain the corona pandemic have been in effect in Germany since November 24, 2021. These changes affect, among other things, the working environment. Employers have to offer their employees home office again, if possible, and those who want to go to the office have to comply with one of the three required statuses: vaccinated, recovered or tested, which is in German: "Genesen", "Geimpft", "Getestet" - that’s where the "3G" are coming from.
    What do the new corona rules mean?
    All workers must have their status proof with them when entering their workplace. The only exception is if tests are offered in the workplace, and you can be tested there directly. The employer is responsible for compliance with the rules and must check the evidence of his employees. It should be noted that rapid tests are currently only valid for 24 hours and PCR tests for 48 hours.
    Here, the employers have to deal with an enormous amount of administrative work, because some evidence from employees has to be queried on a daily basis, but at the same time organized in accordance with data protection regulations and deleted after 6 months at the latest.
    Review statuses and gather key information with Jira
    With the help of the Atlassian ecosystem, we can present you a flexible solution that greatly simplifies your administrative work and makes your organization effective. Read now how Jira makes your life easier and reduces the effort enormously.
    Set up a new Jira project
    For a clear organization, we recommend creating a new project for the 3G certificates in your active Jira instance, preferably a Kanban board. You must of course note that for data protection reasons, not everyone may have access to this project. You can use “Permission Schemes” for this, for example. A Kanban board is the easiest way to organize yourself, with different columns in the form of status. You can see the status immediately at a glance and can be individually named. For example: “Open”, “Tested”, “Vaccinated”, “Recovered” and “Expired”. Here you can decide for yourself what best suits your requirements.
    In our example, the tickets are on the Kanban board for your employees. Each employee has their own ticket in your project. You could use the names of the employees as the ticket title. For example, if you have previously worked with Excel, you have the option of importing this list to create tickets. So you don’t have to manually create every employee, but Jira takes care of it for you by working with your existing data. One or more additional fields should be added to the tickets to record the type and expiry date of the 3G credentials. Evidence in the form of a vaccination certificate, proof of recovery or test result can be added as an attachment to the respective ticket. In this way, you have all the information organized centrally and ready to hand whenever you need it. The respective expiry date is entered in the new field. You can flexibly adjust when the information has to be deleted from the project. In this case, it would be 6 months to comply with the current regulations.
    Now you have a way to organize everything practically, but you still have no automatic help with the daily reminder of due documents. When all the tickets you require have been created, the next step is to focus on automations. We have a special trick for you for this!
    Use automations to make work easier!
    Automations take on repetitive work that is easily forgotten in everyday life, but is absolutely necessary in order to correctly map and carry out a process. Jira Automations works for you here, and you can devote yourself to the content without having to think about setting clicks and data. And that’s exactly what we want to achieve at this point: So that you don’t have to check each individual expiry date of the evidence in the form of tickets, you should configure an automation for this.
    The automation requirements should be as follows: It should check the list of tickets daily for their expiration dates. If the expiry date has not yet been reached, the ticket can remain in the respective status. Once the expiry date has been reached, a new ticket should automatically be created and given the status “open”. The old ticket is then moved to the “Expired” status. So you only have to check the tickets with the status “Open” on a daily basis and request and attach new evidence. As soon as you have attached a proof to the ticket, you can move it back to the corresponding status.
    Your benefits at a glance
    Automatic creation of tickets through import options
    Immediate status overview using the Kanban board
    Reliable reminders of expired evidence
    Access restriction to protect personal data
    Systematic documentation to make it easy to find evidence
    Automatic deletion after 6 months
    As you can see, a wide variety of scenarios can be implemented and individually customized with Jira. The solution described here is of course only one of many options that Jira offers you to deal efficiently with such new requirements.

    An introduction to build servers and Continuous Integration

    octopus.com - When you're developing and deploying software, one of the first things to figure out is how to take your code and deploy your working application to a production environment where people can interact with your software.
    Most development teams understand the importance of version control to coordinate code commits, and build servers to compile and package their software, but Continuous Integration (CI) is a big topic. Over the next few months, we’re going into detail about Continuous Integration and how two of the most popular build servers, Jenkins and GitHub Actions, can help with your CI processes.
    Why build servers are important
    Build servers have 3 main purposes:
    Compiling committed code from your repository many times a day Running automatic tests to validate code Creating deployable packages and handing off to a deployment tool, like Octopus Deploy Without a build server you're slowed down by complicated, manual processes and the needless time constraints they introduce. For example, without a build server:
    Your team will likely need to commit code before a daily deadline or during change windows After that deadline passes, no one can commit again until someone manually creates and tests a build If there are problems with the code, the deadlines and manual processes further delay the fixes Without a build server, the team battles unnecessary hurdles that could be eliminated with automation. A build server will repeat these tasks for you throughout the day, and without those human-caused delays.
    But CI doesn’t just mean less time spent on manual tasks or the death of arbitrary deadlines, either. By automatically taking these steps many times a day, you fix problems sooner and your results become more predictable. Build servers ultimately help you deploy through your pipeline with more confidence.
    What is Jenkins?
    Jenkins is the most popular CI platform on the market. Open-source and free to use, you can run Jenkins standalone on most operating systems to automate the building and testing of your code.
    One of Jenkins biggest benefits is its flexibility. It's a scalable platform, meaning you can expand its capabilities as your team or project needs grow. And thanks to its huge community, there are over 1800 plugins, making it easy to integrate with countless industry tools.
    That means Jenkins is flexible enough to cover your CI needs and you can tailor it for other automation purposes too.
    What is GitHub Actions?
    GitHub Actions is one of the newer CI platforms. It removes the need for a separate build server by using repository events to trigger automation workflows on virtual ‘runners’.
    If you're using GitHub as your code repository, the good news is that you already have access - GitHub Actions is included in your existing repos.
    Where’s the catch? While public repositories can use GitHub Actions for free, it’s pay-as-you-go for everyone else, billed per minute for the time workflows take to run. All users get free monthly minutes, though, and you’re only charged if you exceed the number allowed by your plan.
    Like Jenkins, GitHub also has an actions marketplace brimming with community-created apps and workflows to help with Continuous Integration and more.
    What's next?
    Over the coming weeks, we'll share guides for Jenkins and GitHub Actions, some bespoke tools we've created, and more.
    In the meantime, if you're not already using Octopus Deploy, you can sign up for a free trial.
    You can also check out some of our previous posts on build servers, CI, and some of the ideas we’ll approach in this series:
    Octopus vs. build servers Integration 101: Octopus and build servers Java CI/CD: Octopus, Jenkins, Java, Kubernetes, and the DevOps lifecycle (series) The ten pillars of pragmatic deployments Follow our series about Continuous Integration
    We're focusing on Continuous Integration and build servers for the first few months of this year. We’ll include a summary of the blog posts in our monthly newsletter. Sign up to follow along.
    Happy deployments!
  • Create New...