#sass scss

[wobinbug]

Wheezing over "ass: command not found," bro, lmfao, what happened?? 😭💀💀

[vis97c]

The best complement for your postcss workflow. Specially if you are already using "postcss-sort-media-queries".

[worldgoit]

Tailwind CSS: Leveraging !important with @apply

In the realm of modern web development, styling plays a pivotal role in creating visually appealing and user-friendly websites. Tailwind CSS has emerged as a powerful utility-first framework, streamlining the process of designing web interfaces. One of the lesser-known but incredibly useful features of Tailwind CSS is the !important directive when used in conjunction with @apply. In this article, we will delve into the intricacies of using !important with @apply in Tailwind CSS, exploring its benefits, use cases, and potential caveats. Origin Source : https://worldgoit.com/archives/posts/software-development/tailwind-css-leveraging-important-with-apply/

Table of Contents

- Understanding Tailwind CSS - The Role of !important in CSS - Introduction to @apply in Tailwind CSS - The Magic of !important with @apply - Use Cases for !important with @apply - Customizing Third-Party Components - Handling Responsive Design Quandaries - Overriding Theme Styles Safely - Best Practices for Using !important and @apply - Potential Drawbacks and Considerations - Boosting Performance while Using !important - Embracing a Hybrid Approach: When to Use !important vs. Utility Classes - Future Compatibility and Updates - Incorporating !important with @apply: Step-by-Step Tutorial - Common Mistakes to Avoid - Troubleshooting Unexpected Behavior - Overcoming Specificity Challenges - Conclusion: Amplify Your Tailwind CSS Workflow with !important and @apply

1. Understanding Tailwind CSS

Tailwind CSS is a utility-first CSS framework that provides pre-designed utility classes, enabling developers to swiftly create custom and responsive designs. Unlike traditional frameworks, Tailwind CSS doesn't impose a specific design philosophy, allowing for a flexible and personalized approach to styling.

2. The Role of !important in CSS

The !important declaration in CSS is used to give a particular style rule the highest priority, ensuring that it overrides other styles even if they have higher specificity. It's often employed when you need to forcefully apply a style that shouldn't be easily overridden.

3. Introduction to @apply in Tailwind CSS

The @apply directive is a key feature of Tailwind CSS that enables developers to create reusable utility classes, thereby promoting a more modular and organized stylesheet. It allows you to define custom utility classes by grouping existing classes, improving code readability and reducing redundancy.

4. The Magic of !important with @apply

Combining !important with @apply in Tailwind CSS brings a new level of control to your styles. This combination allows you to ensure that your custom utility classes take precedence over other conflicting styles, without sacrificing the benefits of a utility-first approach.

important

5. Use Cases for !important with @apply

5.1 Customizing Third-Party Components When integrating third-party components into your Tailwind CSS project, achieving a cohesive look can be challenging. By judiciously using !important with @apply, you can harmonize component styles with your project's design language. If you want to use !important with @apply in Tailwindcss, use #{!important} @apply !important Read the full article

[wobinbug]

I loooove SCSS, my only major bummer at uni so far is they don't let me use it 🥹

Nesting's just the tip of the iceberg, once you get used to using the programmatic features, it's so hard to go back 😂

After learning SCSS, using CSS feels completely off to me.

Why doesn't CSS by default comes with nested rules? Or at least update the stylesheet so it can do so now?

Working on my old projects and I couldn't be bothered to turn the CSS to SCSS - keep getting errors because I tried to nest but converting everything to SCSS right now is more of a bother.

[fromdevcom]

Ruby is one of the most popular programming languages in the digital world. One of the reasons for the popularity of Ruby is its characteristic nature of reusability through codes wrapped in the form of gems. It is easy to add functionalities in Ruby through packaged libraries and this is one of the nicest things about Ruby development. Recently there has been a release of Rail 5 and there are many useful and popular Ruby Rails available for your usage. This article will briefly and specifically talk about few useful and popular gems that can save you a lot of time re-inventing. As a beginner at ruby programming, you may also find these ruby books handy for learning. Ruby Libraries For Authentication Authlogic This is a clean, unobtrusive and simple Ruby authentication solution that supports both Rails 3 and 4. A new type of model was introduced through Authlogic. The solution program has the option to logout or destroys the session. CanCan All permissions in this Ruby Rails is defined in a single location called the Ability class. This is not duplicated across views database queries and controllers. You can install it as a plugin. OmniAuth It is a standardized multi-provider authentication tool for web applications that is flexible and powerful and allows the developer to create strategies, which are released individually as RubyGems. Devise It is a flexible authentication solution for Rails that is based on Warden. This solution is Rack based and is a complete MVC solution based in Rail engines. Through this, the user can log in to multiple models. File Processing and Upload Utility Libraries in Ruby CarrierWave It offers extremely flexible and a simple way for uploading files from Ruby applications. Rack based web applications like Ruby on Rails is the best on which it works. Paperclip The main aim to create this is to make it an easy file attachment library for Active Record. It now works on Ruby version that is equal or higher than 1.9.2 and Rails version higher than or equal to 3.0. This is required only when the user is using Ruby on Rails. FasterCSV It was built with the intension that it serves as the replacement of the standard CSV library of Ruby. It is significantly fast compared to CSV at the same, it is a Pure Ruby library. Spreadsheet As the name suggests, this library is designed to read and write Spreadsheet Document. It is compatible with only Microsoft Excel spreadsheet as of version 0.6.0. User Interface Libraries in Ruby Kaminari This is a scope and engine based Ruby solution. This is a sophisticated paginator for modern web application frameworks or ORMs. This application offers users the choice of customization too. Haml This is an HTML abstraction markup language that is based on a primary principle, which says that markup is necessary to be beautiful. It has the ability to simplify yet accelerate the creation of template down to veritable haiku. Sass This is an extension of CSS3 and it makes CSS fun. This has the ability to add nested rules, mixins, selector inheritance, variables and many others. It has two syntaxes – main syntax SCSS and superset of CSS3’s syntax. Mustache The views in Mustache are broken into two parts – Ruby class and HTML template. It is inspired by et and ctemplate. It is a framework-agnostic way of rendering logic-free views. Compass It is an open-source CSS Authoring framework and it uses Sass, which is an extension of CSS3. It has the best reusable patterns on the web. Compass mixins ease out the use of CSS3 and create good typographic rhythm. Hirb It offers mini view framework for console applications and uses the same in order to improve the ripl’s or rib’s default inspect output. It offers reusable views of two helper classes – Table and Tree. Unit Testing and Automation Libraries in Ruby Shoulda This gem is a meta gem that has two dependencies – shoulda context and shoulda matchers. This can be used in different tests and uses case combinations. Factory Girl This is a fixture replacement that has a straightforward definition syntax.

It can support multiple build strategies like saved and unsaved instances, stubbed objects and attribute hashes. It also supports multiple factories of same classes. Capybara This helps you testing the web applications through simulation of real users interacting with your app. It comes with Rack and has built in Selenium and Test support. The external gem supports the WebKit. Capistrano Capistrano works with the Ruby Rails that are higher or equal to the version 1.9. This rail supports JRuby and C-Ruby or YARV. It can create different stages in the capfile. Delayed Job It is a direct extraction from Shopify in which the job table performs a wide array of core tasks, which includes sending of massive newsletters, image resizing, http downloads and many others. Resque This is a Redis-backed library used for creating background jobs. It places those jobs on multiple queues and processes them later. The latest version is 2.0, which has a master branch. Nano Test It has the framework that has a very minimal testing and is perfect plugin for those who love DIY. Picture / Image Processing Libraries in Ruby Rmagick The new release version of this Ruby Rail is 2.13.2. This is Ruby Gem has the ability to add bundles of Gemfile and you can install the application directly. Smusher There is no need of image libraries and everything can be done through the interwebs. The file is less in size, offers 97% saving, faster downloads and less bandwidth makes the users happy to use it. XML Parsing and Processing Libraries in Ruby Nokogiri It is an XML Reader, SAX and HTML parser. Its ability to search documents through CSS3 and XPath selectors is one of its key features. It can also build XML/HTML. Gyoku The main function of this Ruby gem is to translate the Hashes into XML. It is available through Rubygems and can be directly installed or by adding it to the gem file. Feedjira.com It is a Ruby library that is designed to fetch and parse the feeds very quickly. The recent release version is 1.0 and it is a Ruby gem application. JSON Parsing and Processing Libraries in Ruby JSON It is regarded as the low fat alternate to XML and a pure Ruby variant. This is useful if you want to store data in a disk or transmit the same over a network, rather than to use as a verbose markup language. JSON – Stream It is a JSON parser that is based on a finite state machine. It is more like an XML SAX parser and can generate events during parsing. Document or object graphs are not required for it to be fully buffered in memory. YAJL C Bindings It is a C binding to YAJL JSON parsing and generation library. It can directly conduct JSON parsing as well as encode to and from IO stream like socket or file and String. It offers API compatibility and is a basic HTTP client. Domain Specific Language Libraries in Ruby Formtastic It is a Rails FormBuilder DSL that has some other goodies. This makes it easier to create beautiful and semantically rich HTML forms in your Rails application that are accessible and syntactically awesome. Jbuilder It offers you a simple DSL enabling you to declare JSON structures that can beat massaging giant hash structures. It proved to be helpful during the generation process that is overloaded with loops and conditionals. Thor It is like a tool kit that is used for building powerful command line interface. Apart from Rails, it can also be used in Vagrant, Bundler and many others. Build and Dependency Management Libraries in Ruby Bundler This unique software ensures that same code runs in every machine by Ruby applications. It aesthetically manages all gems upon which the application depends on. If you give the names of the gems, it can automatically download them. RAKE It is a program that resembles Make program built for Ruby. The dependencies and tasks in this program are specified in standard Ruby syntax and there are no XML files to edit. Compression Libraries in Ruby Jammit This is an asset packaging library for Rails that has industrial strength.

It has the capacity to provide compression and concatenation of both CSS and JavaScript. The available current version is 0.6.5. Payment Processing Libraries in Ruby Active Merchant This is a Ruby Rail that deals with payment processors and credit cards. This application is an extraction from Shopify, which is an e-commerce software solution. It can be used as a Ruby on Rails web application. Concurrency Libraries in Ruby EventMachine It is a lightweight concurrency library for Ruby, which is an event-driven I/O. It uses Reactor patterns like Apache MINA, JBoss Netty, Node.js, Python’s Twisted and many others. Application Servers n Ruby Phusion Passenger It is a lightweight, robust and a fast web application server for Ruby and also supports Python and Node.js. Its C++ core along with watchdog system and zero-capacity architecture makes it fast. It has hybrid-evented multi-process and multi-threaded design. Configuration Management Libraries in Ruby Chef It is a configuration management tool that is designed in such a way that it can automate your entire infrastructure. By learning and using Chef, you can administer IT infrastructure from your workstation like your desktop or laptop. RConfig It is a complete solution as far as Ruby configuration management is concerned and manages the configurations that are available in Ruby applications, bridging gaps between kay/value based property files and XML/YAML. MVC Framework Related Libraries Thinking Sphinx It is a library that connects ActiveRecords to the Sphinx full-text search tools. Though it can closely integrate with Rails, it can also function with other Ruby web frameworks. The currently available version is 3.1.1. Will Paginate This is basically a collection of extensions suitable for the database layers that enable paginated queries and view helpers for frameworks that offer pagination links. It helps in combining view helpers and CSS styling. Squeel This is the best tool that users can use to write Active Records queries using fewer strings with more Ruby. It makes the Arel awesomeness accessible that lie beneath Active Records. HasScope This tool enables users to create controller filters with ease based on the resources that are named 'scopes'. Users can use the named scopes as filters by declaring them on the controllers. Security Related Libraries in Ruby Rack::SslEnforcer This is a simple Rack middleware that can enforce SSL connections. The cookies are by default marked as secure entities by the 0.2.0 version of Rack::SslEnforcer. It works with various versions of Ruby, Ruby-head, and REE. Ngrok It has the capacity to create tunnels from the public internet that it can port to a local machine. Through this tunnel, it captures all internet or HTTP traffic information. Developer Help, Debugging and Tuning Libraries Bullet Bullet gem is designed in such a way that it increases the performance of applications. It does that by reducing the number of queries that it makes. It can support ActiveRecord as well as Mongoid. Debugger It is a fork of Ruby debug that works only on 1.9.2 and 1.9.3. It can be easily installed for rvm or rbenv Rubies. It can support Rubies that are 1.9.x and doesn't support Rubies that are higher or equal to 2.0. Rack Mini Profiler This is a type of middleware that has the feature of displaying speed badge for every HTML page and helps in database profiling. It is designed in such a way that it can work in both production and development. Quiet Assets It supports Ruby on Rail versions that are higher or equal to version 3.1. It turns off the pipeline log of the Rails asset and suppresses the messages in the development log. Request Log Analyzer This is a simple command line tool that can analyze the request log files in different formats like Apache or Amazon S3 and prepare a performance report. The aim of this is to find the best actions for optimization. Rails Footnotes It enables easy debugging for your application by displaying footnotes like request parameters, filter chain, queries, routes, cookies, sessions and much more.

It can directly open files in the editor. MethodProfiler It is one of the best tools that captures performance information of the methods in the process and creates a report that allows identifying slow methods. RDoc This is the program for Ruby projects that produces command line documentation and HTML. It includes ri and rdoc tools and displays documentation from the command line. Static Code Analysis Libraries in Ruby Flay This tool analyzes the code for structural similarities and can report differences at any level of the code. It has the capacity to offer both conservative and liberal pruning options. Rails Best Practices It is a code metric tool that can check the quality of the rail codes. It supports ORM/ODMs like Mongomapper, Mongoid, and ActiveRecord. It also supports template engines like ERB, HAML, SLIM and RABL. Reek It is code smell detection for Ruby. It can examine Ruby modules, methods and classes. Reek also helps in reporting any kind of code smells that it can find. SimpleCov It is a code coverage analysis tool for Ruby applications. Built-in coverage library of Ruby is used to capture the code coverage data. Database Utility Libraries in Ruby Lol DBA It is a small package of different rake tasks, which can scan the application models and display it in the form of column lists that can be indexed. It also has the ability to generate .sql migration script. Other Useful Libraries in Ruby Better Errors If a user wants to replace a standard error page with a much better and useful error page, Better Errors is the solution for that. It can also be used outside Rails as a Rack middleware in any Rack app. Annotate It helps the user to add comments by summarizing the present schema to the top or bottom of the ActiveRecords model, fixture files, Tests and Specs, Object Daddy exemplars and others. MailCatcher From the name itself, it can be understood that it catches mails and serves them. It runs on a very simple SMTP server that catches any message and sends it to be displayed on a web interface. Pry If there is any powerful alternative to the standard IRB shell for Ruby, then it is Pry. It offers both source code and documentation browsing. Two of the main features of Pry are syntax highlighting and gist integration. RailRoady The Rail 3/4 model like Mongoid, ActiveRecord, and Datamapper can be generated by RailRoady. It can also generate Controller UML diagrams in the form of cross-platform .svg files and also in DOT language format. Zeus It can preload the Rails app, which enables the normal development tasks like a server, generate and console, the specs/test takes less than a second. In general, it is language-agnostic application checkpointer used for non-multithreaded applications. Ransack It is basically a rewrite of MetaSearch. Though it supports most of the features as MetaSearch the underlying implementation is different. It enables creating both simple and advanced search forms against the application models. FriendlyId It is basically regarded as the “Swiss Army bulldozer” as it can slug and permalink plugins for Active Record. It allows users to create pretty URLs and work with different numeric IDs in the form of human-friendly strings. Settingslogic It is basically a simple configuration or setting solution that uses YAML file that is ERB enabled. It can work with Sinatra, Rails or any kind of Ruby projects. Graph and Chart in Ruby Chartkick With the help of this, you can create beautiful Javascript charts using just one line of Ruby. It works with Sinatra, Rails and most of the browsers including IE6. Gruff Graphs It is a library that enables you to create beautiful graphs like a line graph, bar graph, area graph and much more. It enables you to create your feature branches in the program and push the changes to the branches. Active Record It consists M in the MVC or Model-View-Controller paradigm. It helps in facilitating the creation and use of various business objects the data for which it requires persistent storage to a database.

Log4r It is a comprehensive flexible logging library that is written in Ruby in order to be used in Ruby programs. It has hierarchical logging system used for any number of levels and also has YAML and XML configuration. Prawn It is a pure Ruby PDF generation library. It offers vector drawing support that includes polygons, lines, ellipses, and curves. It also offers JPG and PNG image embedding with flexible scaling option. Origami It is a Ruby framework meant for editing PDF files. It supports advance PDF features like encryption, digital signature, forms, annotation, Flash and much more. Breadcrumbs It is a simple Ruby on Rails plugin that is required for creating and managing a breadcrumb navigation for Rails project. It requires Rails 3 or 4 to run. Crummy The simple way to add breadcrumbs to the Rails application is by using Crummy. The user just needs to add the dependency to the gem file. Whenever It is a Ruby gem that offers a clear syntax, which enables you to write and deploy cron jobs. It can directly installed in the gem file or with a bundler in it. Spree It is an open source e-commerce solution that is built using Ruby on Rails. It consists of many different gems maintained in a single repository and documented in a single set of online documentation. Capistrano It supports JRuby and C-Ruby/YARV. It can be installed through a particular command in the gem file of the application and it can post that bundle that needs to be executed. Attr Encrypted It generates attr_accessors that can transparently encrypt and decrypt attributes. Though it can be used with any class but using with Datamapper, ActiveRecord or Sequel give it some extra features. Refinery It is a Ruby on Rails CMS and supports Rails 3.2 and 4.1. The new version 2.1.4 has the ability to make many core functions optional like visual editor, authentication, and the dashboard. Gosu It is game development library for Ruby. It supports only 2D games and apart from Ruby, it also supports C++ language. It is available for Windows, Linux, and Mac OS X. We have seen here quite a few Ruby libraries that have one or the other benefits for Ruby applications. However, it is our experience and knowledge base that help us choosing the best one among the lot. Moreover, it is always recommended to choose the one that has the highest utility for programs and applications you are using.

[hawiatservice]

شركة هويات ترشح لك: أفضل لغات البرمجة وتصميم المواقع الحديثة لواجهات احترافية وتجربة مستخدم مميزة

أفضل لغات برمجة وتصميم المواقع الحديثة لواجهات احترافية

في "شركة هويات"، نؤمن إن التصميم الناجح يبدأ من تجربة المستخدم وينتهي بانطباع بصري لا يُنسى. وعشان كذا، اختيار التقنيات الصحيحة في برمجة وتصميم المواقع صار عنصر أساسي لأي مشروع رقمي ناجح.

📌 إذا كنت مطور، مصمم، أو صاحب مشروع، هذي قائمة بأهم لغات وأطر العمل اللي نستخدمها ونرشحها لبناء مواقع تفاعلية وواجهات عصرية:

1️⃣ HTML5 اللبنة الأساسية لبناء أي موقع. هيكل الصفحة، العناصر، والعناوين… كلها تبدأ من هنا.

✅ مدعومة بالكامل وسريعة في الأداء.

2️⃣ CSS3 + Flexbox/Grid تضبط مظهر الموقع بالكامل. من الألوان إلى تخطيط العناصر على الشاشة.

🖌️ باستخدام CSS Grid وFlexbox، نوصل لتصميم مرن ومتجاوب مع كل الشاشات.

3️⃣ JavaScript اللي يخلي الموقع "يتنفس". أي حركة أو تفاعل في الموقع مبني على JavaScript.

🧠 أساسي لأي تجربة مستخدم ديناميكية.

4️⃣ React.js مكتبة رائدة من فيسبوك، نستخدمها في شركة هويات لتطوير واجهات تفاعلية وسريعة الاستجابة.

⚡️ تضمن أداء عالي وتجربة مستخدم سلسة.

5️⃣ Vue.js خيار ذكي لبناء واجهات تفاعلية بسهولة، خصوصًا للمشاريع المتوسطة والصغيرة.

🌱 مثالي للفرق اللي تبغى تبدأ بسرعة.

6️⃣ Tailwind CSS إطار تصميم حديث ومفضل عند مصممينا في هويات.

💨 يوفر مرونة وسرعة في تصميم الواجهات بدون التضحية بالجمال أو الأداء.

7️⃣ Next.js أداة قوية تعتمد على React وتضيف ميزات مهمة مثل تحسين SEO وسرعة التحميل.

🌍 نستخدمها في المواقع اللي تتطلب تجربة مستخدم ممتازة وأداء عالي.

8️⃣ SASS/SCSS تسهل كتابة CSS بطريقة منظمة وقابلة للتطوير.

نستخدمها في المشاريع الكبيرة اللي تحتاج إلى صيانة على المدى الطويل.

خلاصة شركة هويات: في مشاريعنا، نعتمد غالبًا على المزيج التالي لبناء مواقع متميزة:

HTML5 + Tailwind CSS + JavaScript + React أو Vue + Next.js

لأننا نعرف إن:

واجهة جميلة + تجربة استخدام مريحة = موقع يحقق أهدافك ويخلي الزائر يرجع.

—

في "شركة هويات"، ما نستخدم مجرد أدوات، إحنا نصمم تجربة متكاملة. لو تفكر تطور موقعك أو تبدأ مشروع جديد، تواصل معنا وخلنا نشتغل على تحويل فكرتك إلى واقع بصري وتجربة تفاعلية تليق بعلامتك التجارية.

[tutorialwithexample]

Unlock the Power of Sass: A Beginner-Friendly Tutorial

Welcome to our "Sass Tutorial for Beginners"! If you're just starting with web design or looking to refine your CSS skills, Sass (Syntactically Awesome Stylesheets) is a great tool to explore. Sass extends CSS, adding features like variables, nesting, and mixins, making your stylesheets more efficient and maintainable.

Why Sass? Sass helps you write cleaner and more organized code. It allows you to use variables for colors and fonts, making updates easy. Nesting lets you structure your CSS more logically, mirroring your HTML's structure. Mixins are reusable pieces of code, perfect for functions like gradients or button styles.

Getting Started with Sass To begin, you'll need a preprocessor to compile Sass into CSS. You can install a Sass compiler through Node.js or use tools like CodeKit or Prepros. Once set up, you can start writing in .scss files.

Basic Features to Explore

Variables: Store common values like colors or fonts for easy reuse.

Nesting: Keep your styles neat and mimic your HTML's hierarchy.

Mixins: Reuse styles and avoid repetitive code.

Sass makes CSS more powerful and easier to manage, especially for larger projects. Ready to dive in? Check out more details and examples in our comprehensive guide at Tutorial and Example. Happy coding!

[mesba1971]

Metronic HTML Template: Elevate Your Best Web Design Game

Are you looking for a reliable admin dashboard template to power your next project? Look no further than Metronic Html Template! This powerful tool is designed to help you create beautiful and intuitive admin interfaces that will impress your clients and users alike.

In this review, we’ll take a closer look at what makes Metronic Html Template such a great choice for developers and businesses alike. We’ll explore its features, functionality, and compatibility with popular frameworks like Tailwind, Bootstrap, React, Vue, Angular, Asp.Net & Laravel. So, let’s dive in!

Features

Metronic Html Template comes loaded with a wealth of features that make it an excellent choice for developers and businesses alike. Some of its standout features include:

– High Resolution: Metronic Html Template is optimized for high-resolution displays, so your dashboard will look crisp and clear on any device. – Responsive Layout: The template is designed to be fully responsive, so your dashboard will look great on any screen size.

– Well Documented: Metronic Html Template comes with comprehensive documentation to help you get up and running quickly.

– Compatible Browsers: The template is compatible with all popular web browsers, including Firefox, Safari, Opera, Chrome, and Edge.

– Compatible With: Metronic Html Template is compatible with Angular 13.x.x, AngularJS, ReactJS, Bootstrap 5.x, Bootstrap 4.x, and other popular frameworks.

– Admin Dashboard Template: Metronic Html Template is designed specifically for use as an admin dashboard template, so you can be sure it has all the features you need to create a powerful and intuitive dashboard.

– Admin Themes: The template comes with a range of pre-built themes to help you get started quickly.

– PHP Files: Metronic Html Template comes with all the PHP files you need to get started quickly.

– HTML Files: The template comes with a range of pre-built HTML files, so you can get started quickly.

– CSS Files: Metronic Html Template comes with a range of pre-built CSS files to help you customize your dashboard.

– Sass Files: The template includes Sass files for advanced customization.

– SCSS Files: The template includes SCSS files for advanced customization.

– JS Files: Metronic Html Template includes a range of pre-built JavaScript files to help you get started quickly.

Compatibility

Metronic Html Template is compatible with a wide range of popular frameworks and platforms, including:

– Tailwind – Bootstrap – React – Vue – Angular – Asp.Net & Laravel

This makes it an excellent choice for developers who want a flexible and versatile tool that can be used with a variety of different frameworks and platforms.

12 Advanced Apps For Real-world Demands

Complete CRUD solution with managable datatables, advance form controls, wizards flows and interactive modals for any project requirements you can imagine

Metronic UI Kit Develop Design Fast

Create cohesive user interfaces for single or multiple projects without having to start from scratch. Metronic UI Kit is helpful for designers who are just starting out or who are working on projects with tight deadlines.

Company made it! Smart & Low-cost!

One stop solution that boosts your projects’ design and development at shortest amount of time and at ridiculously low cost. In the past 10 years, hundreds of thousands of web apps successfully launched by Metronic that are used by hundreds of millions of end users everyday

Pricing

Metronic Html Template is available for purchase on ThemeForest for just $49. This includes a Regular License, which allows you to use the template in a single end product that is not charged for. If you need to use the template in a product that will be sold to end users, you can purchase an Extended License for $969.

If you purchase the Regular License, you’ll receive quality checking by Envato, future updates, and six months of support from keenthemes. You can also extend your support to 12 months for an additional fee.

Reviews

Mr. Levan Dvalishvili Chief (Software Architect) at solarspace.io said Hands down the most developer friendly package that I have worked with.. A+++++

platform we tried out Metronic. I can not overestimate the impact Metronic has had. Its accelerated development 3x and reduced QA issues by 50%. If you add up the reduced need for design time/resources, the increase in dev speed and the reduction in QA, it’s probably saved us $100,000 on this project alone, and I plan to use it for all platforms moving forward. The flexibility of the design has also allowed us to put out a better looking & working platform and reduced my headaches by 90%. Thank you KeenThemes! Jonathan Bartlett, Metronic Customer

Metronic is an incredible template. Even with purchasing an extended license, the cost savings is immeasurable. The code & CSS is well organized and while it is feature rich, it is not bloated. It was quickly integrated into our relatively complex product and had ready-made UX for our many use cases. Where we needed to extend functionality, this system made it incredibly easy. A tremendous job by the Metronic team.  Fatica, Metronic Customer

Conclusion

In conclusion, Metronic Html Template is an excellent choice for developers and businesses alike. It comes loaded with features, is compatible with a wide range of popular frameworks and platforms, and is available at an affordable price. Whether you’re building a new dashboard from scratch or looking to upgrade an existing one, this Template is definitely worth considering.

So, what are you waiting for? Head over to ThemeForest and check out Metronic Html Template today!

[kamiya-memo-nagoya]

post cssやってみたのでその時に見てた記事。 なんか色々調べたけどGulpで使うのが一番良さそうだったのでこちらを参考に対応してみた。

まずscssを使わずにネストcssでやりたいというのが今回の契機なのだが、ネストcssって古いIphone（～8ぐらいまで）が対応してないんよね。。。

さすがにまだ使ってる��結構いるので、これはそのままでは無理となったときに、post cssの記事を目にした。

前からあったのだが、いわゆるcssでコンパイルしてる感じ。やってることは変わらないが、書き方が昔と同じ方法で行けるのでめんどくさくはなくていい。

あとこの記事だと自動的に監視してくれる記載がないので、注意。このままだと毎回実行する手間が出てくるのでそのあたりはまた違う記事調べて実装することはオヌヌメする。

使ってみた率直的な感想はpreprosを使ってたときのscssとあまり変わらない・・・ｗ

でも今後発展してきてネストcssがpost cssなしでも対応できそうになったらこの対応も吉かもしれない。何にせよ、まだ他のものには流用できそうにはないな・・・。

ということでまたやりたくなったときのためにここにメモしておく。

[thewpstarter]

Next.js: A Comprehensive Look at Performance and Features

Next.js is a web development framework that was created by Vercel and provides React-based web applications with server-side rendering and static website generation. Next.js allows you to style using CSS, precompiled SCSS and Sass, CSS-in-JS, and styled JSX. In addition, it includes TypeScript support and clever bundling. SWC, an open-source transpiler, is used to translate and compile code into…

[progbdej]

CopyGen – is a responsive website template for AI Content Writing/Generator website. We have designed this template for your new AI Content Writing website just how you like it. So, if you want to create a website for AI Writer, Copywriting, OpenAI Content Generator or AI Content Writing website then CopyGen template will best choice to build your own website.

CopyGen Template is fully flexible, user-friendly and responsive that looks great on every devices as desktops, tablets, and mobiles. This template built with Boostrap 5, HTML5, CSS3, Vanilla JS, SASS and Gulp. It includes 5 Homepage/Landing page, and 20+ pre-built inner pages. It built with well organized folder structure, clean & commented code. We have used gulp-based build tools and stylesheet based on scss variables so you can quickly change the colors, font sizes in variable file.

CopyGen HTML Template Features

4+ Homepages

20+ Prebuilt Pages

Pricing & Use cases Pages

Various Component Ready

Working Contact Form

Clean & Modern Design

Fully Responsive

Mobile first approach design

W3 validated Codes

Cross Browser Compatibility

Bootstrap 5, Vanilla JS, SASS

6 Months Free Support

And many more…

What do you get?

Landing Page HTML Template Files

Stand-alone User Dashboard Template Files

Source of Package (Gulp require to build)

Documentation

Caution: Some images are for preview purposes only and images cannot be supplied due to licensing reasons and have been blurred heavily.

[mitchellclark2296]

Embracing Innovation: Top 24 Web Designing Languages to Master in 2024

In the ever-evolving landscape of web development, staying updated with the latest languages is paramount for any designer or developer. As we venture into 2024, the realm of web design continues to witness transformative advancements, pushing boundaries and ushering in new possibilities.

Here’s a comprehensive guide to the top 24 web designing languages poised to shape the digital sphere in 2024:

Front-end Languages:

HTML (HyperText Markup Language): The cornerstone of web development, HTML remains indispensable for structuring web content.

CSS (Cascading Style Sheets): Essential for styling and presenting HTML elements, CSS empowers designers to create visually appealing websites.

JavaScript: A dynamic language facilitating interactive web elements, JavaScript remains a core language for front-end development.

TypeScript: Building on JavaScript, TypeScript brings static typing, aiding in the development of scalable and maintainable web applications.

Sass/SCSS: These CSS preprocessors enhance efficiency by introducing variables, nesting, and mixins, streamlining stylesheets.

Vue.js, React, Angular: These front-end frameworks continue to dominate, offering powerful tools for building robust, responsive, and interactive user interfaces.

Back-end Languages:

Python: Known for its readability and versatility, Python continues to be a preferred language for back-end development, thanks to frameworks like Django and Flask.

JavaScript (Node.js): Expanding its domain to server-side scripting with Node.js, JavaScript enables full-stack development, unifying front-end and back-end processes.

Ruby: Renowned for its simplicity and elegance, Ruby, coupled with the Rails framework, fosters rapid application development.

PHP: Despite criticisms, PHP remains prevalent, powering a significant portion of the web, especially with frameworks like Laravel and Symfony.

Golang (Go): Recognized for its speed and concurrency, Go is gaining traction in building scalable and efficient web applications.

Database Languages:

SQL (Structured Query Language): Fundamental for managing and querying relational databases, SQL expertise remains invaluable.

NoSQL (MongoDB, Firebase): Non-relational databases continue to rise, offering scalability and flexibility, suitable for modern web applications.

Markup Languages:

XML (Extensible Markup Language): Still utilized for specific applications, XML maintains relevance in data exchange and configuration.

JSON (JavaScript Object Notation): Lightweight and easy to parse, JSON is a preferred format for data exchange in web APIs.

Styling Languages:

Less: Similar to Sass/SCSS, Less simplifies CSS authoring with its dynamic stylesheet language.

PostCSS: Leveraging JavaScript plugins, PostCSS automates CSS processes, enhancing code efficiency and compatibility.

Specialized Languages:

Rust: Known for its safety features and performance, Rust is gaining attention for web assembly and system programming.

Elixir: Recognized for fault-tolerance and scalability, Elixir, with the Phoenix framework, excels in building real-time applications.

Emerging Languages:

Deno: Positioned as a secure runtime for JavaScript and TypeScript, Deno presents a potential alternative to Node.js.

Kotlin: Initially designed for Android, Kotlin’s conciseness and interoperability make it a contender for web development.

Web Assembly Languages:

AssemblyScript: A subset of TypeScript, AssemblyScript enables compiling TypeScript to WebAssembly for high-performance web applications.

Rust (WebAssembly): Utilizing Rust for WebAssembly empowers developers to create high-speed, low-level web applications.

Augmented Reality (AR) and Virtual Reality (VR) Languages:

Unity (C#): For immersive web experiences, Unity with C# supports the development of AR and VR applications on the web.

In the fast-paced world of web design, mastering these languages opens doors to innovation and empowers designers and developers to craft exceptional digital experiences. As 2024 unfolds, embracing these languages will be key to staying at the forefront of the ever-evolving web design landscape.

[fromdevcom]

Chatter is an enterprise social network and collaboration environment. Force.com exposes various useful information from Chatter such as users, organizations, groups, feed-items through APIs. Using this information, we can build a proof-of-concept dashboard which will show a user’s or organization’s feed in real-time. Real-time dashboard can provide an accurate understanding of what is happening in an organization. This tutorial expects that you are an intermediate-level web application developer and have a few weeks of experience with Rails and related ecology. This means you should be familiar with building blocks of a Rails app and terms like OAuth, REST, Callback, bundler, gem etc. Here is an outline of how things will work: User can login to our Rails4 powered dashboard (a connected app) using ‘Sign in with Salesforce’ (Oauth 2). We use OAuth to get a secret token for each user from salesforce.com. We can use the token to call APIs. Our goal is to receive a callback to server whenever anything is posted on Chatter. Unfortunately, Force.com doesn’t support a PushTopic for FeedItem, so we will use a work-around to trigger a callback whenever a FeedItem is created. First, we will create a trigger on FeedItem, this trigger will create a custom object named ProxyFeedItem, which will copy necessary fields like body, time, parent_id etc. from the FeedItem. Using a faye client embedded in restforce client, we will listen to a PushTopic for ProxyFeedItem. ProxyFeedItem will be created whenever there’s an update to any FeedItem. This will send a callback to the server with data of the ProxyFeedItem. We will need to forward this incoming data to user’s browser. We will set up another faye channel and just transfer the data we received in step 4. First, go to https://developer.salesforce.com/signup and register for your free Developer Edition (DE) account. For the purposes of this example, I recommend sign up for a Developer Edition even if you already have an account. This ensures you get a clean environment with the latest features enabled. After sign up, make a connected app by following the directions found in this article from the salesforce.com developer portal. Use http://localhost:3000 as Start URL, enable Oauth settings, select appropriate permissions and use http://localhost:3000/oauth/salesforce/callback as callback URL. When you create your app, you will get the app’s Consumer Key and Consumer Secret. We have set up everything that we need from Force.com for this section and we can move on to our web application code. Create a new Rails4 application with rails new chatter-dashboard This will go ahead and create a Rails4 project with the name ‘chatter-dashboard’ and install the dependencies mentioned in Gemfile. Actually, we need a few more dependencies. Change Gemfile to the following: source 'https://rubygems.org' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '4.1.0' # Use sqlite3 as the database for Active Record gem 'sqlite3' # Use SCSS for stylesheets gem 'sass-rails', '~> 4.0.3' # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # Use CoffeeScript for .js.coffee assets and views gem 'coffee-rails', '~> 4.0.0' # See https://github.com/sstephenson/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use jquery as the JavaScript library gem 'jquery-rails' # Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks gem 'turbolinks' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.0' # bundle exec rake doc:rails generates the API under doc/api. gem 'sdoc', '~> 0.4.0', group: :doc # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring gem 'spring', group: :development # Use ActiveModel has_secure_password # gem 'bcrypt', '~> 3.1.7'

# Use unicorn as the app server # gem 'unicorn' # Use Capistrano for deployment # gem 'capistrano-rails', group: :development # Use debugger # gem 'debugger', group: [:development, :test] # Using customized version to fix issue #103 in restforce gem 'restforce', :git => 'git@github.com:malavbhavsar/restforce.git', :branch => 'patch-1' # Use omniauth for handlling OAuth with Salesforce gem 'omniauth' # Add omniauth policy for saleforce gem 'omniauth-salesforce' # Print pretty gem 'awesome_print' # Development only gems group :development do gem 'better_errors' gem 'binding_of_caller' end # Add faye for pub/sub, using customized version to avoid problems from # issue 263 and other related issue gem 'faye', :git => 'git@github.com:faye/faye.git' # private_pub to easily do pub-sub with browser, using customized version # to make sure that we get faye.js which is not packed when using faye gem # from master gem 'private_pub', :git => 'git@github.com:malavbhavsar/private_pub.git' # Puma for our main server concurrently gem 'puma' # Thin for running faye server gem 'thin' Run bundle install, which will install additional dependencies. To start our server, run rails s puma; this will run rails with a puma server and you should be able to see a welcome page on http://localhost:3000. The next step is to set up Oauth with salesforce.com. Add Consumer Key and Consumer Secret to chatter-dashboard/config/secrets.yml development: secret_key_base: salesforce_key: salesforce_secret: test: secret_key_base: # Do not keep production secrets in the repository, # instead read values from the environment. production: secret_key_base: Create a chatter-dashboard/config/initializers/omniauth.rb file and add the following code into it: Rails.application.config.middleware.use OmniAuth::Builder do provider :salesforce, Rails.application.secrets.salesforce_key, Rails.application.secrets.salesforce_secret , :scope => "id api refresh_token" end This configures our omniauth and omniauth-salesforce gems. It has basically added a middleware in our Rails application, which will handle Oauth for us. You can read the documentation for these gems to dig deeper. Now, run the following commands to set up two controllers and relevant routes; one for the login page and the other for the feed page: rails g controller Login login rails g controller Feed feed Now, in the chatter-dashboard/config/routes.rb file, add the following routes: get '/auth/:provider/callback', to: 'sessions#create' root to: 'login#login' This will basically add a callback route to which the user will be redirected to by Force.com after the Oauth procedure has finished successfully. We have also added a root route, so that whenever we go to http://localhost:3000, it will trigger the login#login route. Currently, it’s just an empty page. Let’s add a ‘Sign in with Salesforce’ link to it. Add the following line to chatter-dashboard/app/views/login/login.html.erb: If you hit refresh and click on ‘Sign in with Salesforce’, you will be taken to the login page of salesforce.com if you are not signed in. After signing in and giving the app permissions, you will be redirected to http://localhost:3000/auth/salesforce/callback, but we haven’t implemented matching sessions#create yet. Let’s do that by doing rails g controller Sessions create. For the implementing create method, use the following code: class SessionsController < ApplicationController def create set_client ap @client redirect_to '/feed/feed' end protected def auth_hash_credentials request.env['omniauth.auth'][:credentials] end def set_client @client = Restforce.new :oauth_token => auth_hash_credentials[:token], :refresh_token => auth_hash_credentials[:refresh_token], :instance_url => auth_hash_credentials[:instance_url], :client_id => Rails.application.secrets.salesforce_key, :client_secret => Rails.application.secrets.salesforce_secret end end Here, we parse the callback request coming from Force.

com and get oauth_token, refresh_token etc and create a restforce client. If you see something like the following in your console, then you have completed the first section of this tutorial: In the first section of the tutorial, we set up Oauth with salesforce.com and created a restforce client object. In this section, we want Force.com to notify us of any changes in the FeedItem object of Chatter. Unfortunately, Salesforce streaming API doesn’t support FeedItem yet, so we will have to do a work-around. Create a custom object named ProxyFeedItem. Add necessary fields like Body, Type, CommentCount, LikeCount, CreatedById from FeedItem Now, let’s setup a trigger on FeedItem. You can do this by going to ‘Setup’ on your Force.com and search for ‘FeedItem Trigger’. Use the following code: trigger FeedItemListen on FeedItem (after insert, after update) for(FeedItem f : Trigger.new) ProxyFeedItem__c p = new ProxyFeedItem__c(Body__c = f.Body, CommentCount__c = f.CommentCount, LikeCount__c = f.LikeCount, Type__c = f.Type, User__c = f.CreatedById); insert p; Whenever this is triggered, we get the data from Trigger.new iterate over it and create our custom object ProxyFeedItem for each FeedItem in the data. Now, we have to create a PushTopic, which will listen to any changes in all ProxyFeedItem (and in turn FeedItem) We will subscribe to this PushTopic and send the changes to browser. Following the streaming example given in the restforce docs, we can create a file at chatter-dashboard/lib/chatter_listen.rb like the following: module ChatterListenEM def self.start(client) pushtopics = client.query('select Name from PushTopic').map(&:Name) unless pushtopics.include?('AllProxyFeedItem') client.create! 'PushTopic', ApiVersion: '30.0', Name: 'AllProxyFeedItem', Description: 'All ProxyFeedItem', NotifyForOperations: 'All', NotifyForFields: 'All', Query: "SELECT Id, Body__c, CommentCount__c, LikeCount__c, Type__c, User__c from ProxyFeedItem__c" end Thread.abort_on_exception = true Thread.new EM.run do client.subscribe 'AllProxyFeedItem' do die_gracefully_on_signal end def self.die_gracefully_on_signal Signal.trap("INT") EM.stop Signal.trap("TERM") EM.stop end end Whenever ChatterListenEM.start is called, it creates a PushTopic named ChatterFeedItem, if it doesn’t already exist. Next, it creates a new thread and subscribes to that PushTopic in it. Whenever we receive a message, we pass it a Faye channel e.g. messages/new using private_pub. private_pub is a ruby gem, which makes it easier to setup a pub-sub type mechanism between a web server and browser. You can learn more about it in this screencast on private pub Before going to private_pub and related stuff, let’s call our ChatterListenEM.start method from SessionController. There is just one minor change: require 'chatter_listen' class SessionsController < ApplicationController def create set_client ChatterListenEM.start(@client) redirect_to '/feed/feed' end protected def auth_hash_credentials request.env['omniauth.auth'][:credentials] end def set_client @client = Restforce.new :oauth_token => auth_hash_credentials[:token], :refresh_token => auth_hash_credentials[:refresh_token], :instance_url => auth_hash_credentials[:instance_url], :client_id => Rails.application.secrets.salesforce_key, :client_secret => Rails.application.secrets.salesforce_secret end end Now, let’s set up private_pub. Run rails g private_pub:install on console. It will create and place necessary files like private_pub.ru, private_pub.yml and faye.js, private_pub.js in asset-pipeline. To make rails aware of faye.js and private_pub.js files, add them to the chatter-dashboard/app/assets/javascripts/application.js file. // This is a manifest file that'll be compiled into application.js, which will include all the files // listed below. // // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts, // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.

// // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the // compiled file. // // Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details // about supported directives. // //= require jquery //= require jquery_ujs //= require faye //= require private_pub //= require turbolinks //= require_tree . Start our Faye server in a different console. This will handle pub-sub for us. rackup private_pub.ru -s thin -E production All that is left to do now is to subscribe to the channel /messages/new and print our data. We can take easy examples from the private_pub documentation and add the following to our chatter-dashboard/app/views/feed/feed.html.erb: and the following to our chatter-dashboard/assets/javascripts/feed.js: PrivatePub.subscribe("/messages/new", function(data, channel) console.log(data.chat_message); ); Now, go to http://localhost:3000, ‘Login with Salesforce’ and you will end up on the feed page. Open the developer console and in another tab open the Chatter tab of salesforce.com. If you do a text post, you will be able to see a real time update in the console. Here’s a proof of concept, showing the dashboard in action: We just implemented a system like below: Instead of printing data in console, you can easily feed it into any frontend framework like angular, ember etc. and create a great real-time dashboard. We also have left out few things in this proof-of-concept prototype e.g. we have to secure our faye channels. One way of doing this is creating a different channel for each user. e.g. /messages/new/user_id and subscribe the user only to that particular channel. Additionally, use SSL. If you are handling any real user data, it is important that you secure the data being transferred. Force.com makes sure to secure the data and only provides developers with data over SSL using OAuth. It is however the responsibility of the developer to ensure secure communication in any RESTful app. For more information, you should refer to Security Resources. You can find the code for this project at github chatter-dashboard Resources For a comprehensive set or resources, check out: About The Author: This article is created by Malav Bhavsar. Please feel free to ask questions in the comment section, open issues in the github repository or contact me at malav.bhavsar@gmail.com

[cssscriptcom]

Build Responsive Tournament Brackets with Flexbox and SCSS

A CSS/SCSS solution for creating responsive tournament brackets using only HTML and CSS. It utilizes CSS flexbox to build a flexible bracket layout that can adapt across any device. Developers can customize team names, styles, spacing and sizes through simple Sass variables. How to use it: 1. Build the HTML for your first tournament bracket. <div class="theme theme-dark"> <div class="bracket…